Toolbar En Android_ Creación De Action Bar En Material Design 1v2j6c
This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 2z6p3t
Overview 5o1f4z
& View Toolbar En Android_ Creación De Action Bar En Material Design as PDF for free.
More details 6z3438
- Words: 5,657
- Pages: 45
26/5/2016
Curso Android
Toolbar En Android: Creación De Action Bar En Material Design
SQL
ANDROID STUDIO
DATOS
DATOS
FUNDAMENTOS
WEB SERVICES
ANDROID STUDIO
o
UI
CONEXIÓN DE RED
UI
CONEXIÓN DE RED
RECURSOS
FUNDAMENTOS
WEB SERVICES
RECURSOS
Inicio Desarrollo Android UI Toolbar En Android: Creación De Action Bar En Material Design
Toolbar En Android: Creación De Action Bar En Material Design James Revelo Comments
junio 19, 2015
UI
¿Qué buscas?
Search
Lo Más Popular
73
De seguro ya sabes que la Action Bar como la http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
Aplicación Android Con Navigation Drawer Y Tabs 1/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
conocíamos, está siendo reemplazada por un nuevo componente Android llamado Toolbar. Las nuevas guías de diseño de Google han introducido el concepto de App Bar. Una barra que tiene más flexibilidad de transformación y personalización que hace parte del checklist de diseño de Material Design:
¿Cómo Sincronizar Sqlite Con Mysql En Android? NavigationView: Navigation Drawer Con Material Design TabLayout: ¿Cómo Añadir Pestañas En Android? Servicio Web RESTful Para Android Con Php, Mysql y Json
Así que si deseas crear aplicaciones para Android 5 en adelante es necesario que aprendas a usarla. Para ello he preparado este tutorial donde crearás una aplicación Android basada en una Toolbar. Adicionalmente verás cómo extender su comportamiento con los nuevos elementos de la librería de soporte para diseño, como lo son el CoordinatorLayout , AppBarLayout y CollapsingToolbarLayout .
Toolbar En Android: Creación De Action Bar En Material Design Consumir Un Servicio Web REST Desde Android ¿Como Crear Diálogos En Android? Tutorial De Parsing Xml En Android Con XmlPullParser Usar Transiciones En Android Con Material Design
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
2/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Template recomendada Toolbar En Android: Action Bar En Materia...
Descargar Código Apóyanos con una señal en tu red social favorita y consigue el código completo. Share
590
Share
529
Tweet
¿Cómo Añadir La Toolbar En Android? Debido a que la Toolbar reemplaza a la antigua Action Bar,
debes
deshabilitarla
con
el
estilo
Theme.AppCompat.NoActionBar ó añadiendo los atributos windowActionBar y windowNoTitle con los siguientes http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
3/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
valores:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"-
false
-
true
Luego de eso implementarla es muy fácil. Solo debes añadir
una
etiqueta
en tus layouts
como se hace con los widgets normales.
Esta convención otorga todo el poder de la action bar al desarrollar Android, ya que el método antiguo solo permitía la personalización a través de los temas y estilos.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
4/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Algunos puntos a considerar:
Pueden existir varias Toolbar en la interfaz con distintos patrones de diseño.
Los action buttons de la Toolbar se inflan a través de un archivo de menú como siempre has hecho. Los eventos se controlan igualmente con el método onOptionsItemSelected() .
Debes encontrar la instancia de la Toolbar con findViewById() y luego setearla a la actividad con setActionBar()
para
ponerla
en
funcionamiento.
CoordinatorLayout: Interacciones Entre Views
Crear
La librería de soporte para el diseño de Android nos entrega el CoordinatorLayout para gestionar interaccione entre sus elementos hijos. ¿Qué tipos de interacciones? Movimiento, animación y scrolling. Sobre todo nos da las herramientas para replicar las técnicas de scrolling en Material Design. http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
5/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
En este tutorial lo usaremos para crear interacciones entre la App Bar y views con scrolling. Sin embargo pueden usarse para otras relaciones.
AppBarLayout: Aumentando Las Capacidades De La Action Bar Como se dijo al inicio, la App Bar es una expansión del concepto de la action bar. Aunque la Toolbar representa el pequeño segmento rectangular al que estamos acostumbrados, la App Bar (representada con la clase AppBarLayout) es un contenedor con más posibilidades de personalización. Esta permite dividir los comportamientos de la action bar para independizar las acciones. Incluso permite añadir efectos de scrolling en conjunto con el Coordinator Layout. Por ejemplo…
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
6/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Si deseas esconder la Toolbar cuando el desplaza un RecyclerView , debes envolver ambos elementos con un coordinator como se ve en el código de abajo.
7/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
... app:layout_scrollFlags="scroll|enterAlways"
Para ello debes tener en cuenta lo siguiente:
AppBarLayout siempre debe envolver a la Toolbar
y los demás componentes pertenecientes a ella (como pestañas, imágenes, etc). El CoordinatorLayout debe envolver directamente a los objetos que desees relacionar mediante una acción. Desaparecer la App Bar por scrolling requiere que haya un objeto con scroll marcado con el atributo app:layout_behavior="@string/appbar_scrolling_view_behavior" . Este debe declararse por encima de la App Bar. La forma en que se afectan los hijos de App Bar se determina en app:layout_scrollFlags . Las banderas de scroll controlan el tipo de comportamiento con que desaparece la Toolbar:
scroll : indica que un view desaparecerá al
desplazar el contenido. enterAlways :vuelve visible al view ante cualquier
signo de scrolling. enterAlwaysCollapsed : vuelve visible el view solo si
se mantiene el scroll en la parte superior del contenido. exitUntilCollapsed : desaparece el view hasta que
sus dimensiones superen la altura mínima. http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
8/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
CollapsingToolbarLayout: Espacio Flexible De La App Bar La App Bar es un elemento flexible capaz de aumentar o reducir su tamaño para desplegar mejor experiencia de dependiendo de las interacciones que se ejerzan sobre ella. Para implementar esta característica se usa el CollapsingToolbarLayout . Un layout especial que
envuelve a la Toolbar para controlar las reacciones de expansión y contracción de los elementos que se encuentran dentro de un AppBarLayout . Con reacciones me refiero a la variación de sus dimensiones y las desapariciones de la escena si es necesario.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
9/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Para crear una App Bar con que contraiga, solo envuelves la Toolbar de la siguiente forma:
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
10/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
El código anterior contrae y expande la AppBar al momento de usar el scrolling. Para comprender el funcionamiento recuerda las siguientes instrucciones:
El
CollapsingToolbarLayout
debe
envolver
directamente a la Toolbar. La Toolbar puede sobrevivir a la contracción del contenido
a
través
app:layout_scrollMode="pin" .
del Los
atributo demás
elementos desaparecerán. Puedes animar el titulo de la Toolbar añadiéndolo al CollapsingToolbarLayout con setTitle() .
Al reducir un view puedes usar un efecto Parallax (es necesario
aplicar
el
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
11/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
atributo app:layout_collapseMode="parallax" ) para difuminar su background con el color indicado en app:contentScrim .
Si quieres ahorrar tiempo implementando el Material Design en tus app Android, te recomiendo la plantilla Material Design App de Codecanyon
Crear Aplicación Android Con Toolbar Paso #1: En Android Studio, crea un nuevo proyecto yendo a File > New Project. Llámalo “Citas Peligrosas”. Selecciona Blank Activity y confirma. Paso #2: A continuación crea una nueva clase llamada DetailActivity.java. Esta actividad contendrá el detalle para cada ítem del Recycler View que se usará para mostrar la lista de chicas con las que queremos tener citas. Paso #3: Agrega las dependencias del código de abajo al archivo build.gradle. Verás tres nuevas librerías: La librería de diseño de soporte antes mencionada; la librería Circle Image View que permite crear Image Views circulares y la librería Glide que nos permitirá cargar en segundo plano las imágenes. build.gradle
dependencies { ... compile 'com.android.:appcompat‐v7:22.2.0' http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
12/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
compile 'com.android.:design:22.2.0' compile 'com.android.:recyclerview‐v7:22.2.0' compile 'com.android.:cardview‐v7:22.2.0' compile 'com.github.bumptech.glide:glide:3.6.0' compile 'de.hdodenhof:circleimageview:1.3.0' }
Paso #4: Ve a res/values/strings.xml y agrega las siguientes cadenas: strings.xml
<string name="app_name">Citas Peligrosas <string name="action_settings">Settings <string name="action_add">Añadir <string name="action_favorite">Marcar Favorito <string name="title_activity_detail">DetailActivity
<string name="girl_ipsum"> Morbi posuere lorem nec elit dapibus, vitae accumsan mauris pellentesq Vestibulum a lobortis mi. Vestibulum lacinia molestie semper. Pellente ultrices arcu lacus, interdum mollis nibh convallis ut. Aliquam sagitt sem a lacus gravida, eu accumsan purus volutpat. Donec tempus, est id tristique consectetur, lacus ligula dignissim turpis, cursus commodo t libero in purus. Phasellus tempus gravida tempor. <string name="action_search">Buscar
Paso #5: Crea un nuevo archivo colors.xml en res/values y agrega los siguientes colores para el tema con Material Design: http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
13/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
colors.xml
#D32F2F
#F44336
#448AFF
Paso #6: Lo siguiente es ir a res/values/dimens.xml y añadir las dimensiones de abajo. dimens.xml
4dp
16dp
56dp
16dp
40dp
Paso #7: Ahora crearemos el POJO de los objetos de la lista. Añade una nueva clase llamada Girl.java con el código de abajo. Este es el modelo de datos para los elementos del RecyclerView . Girl.java
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
14/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import java.util.Random;
/** * POJO de las chicas */ public class Girl { private String name; private int idDrawable; public Girl(String name, int idDrawable) this.name = name; this.idDrawable = idDrawable; } public Girl(String name) { this.name = name; this.idDrawable = getRandomGirlDrawable } public String getName() { return name; } public int getIdDrawable() { return idDrawable; } /** * Asigna un drawable en forma aleatoria * * @return id del drawable */ private int getRandomGirlDrawable() { Random rnd = new Random(); switch (rnd.nextInt(8)) { default: case 0: return R.drawable.girl1; case 1: return R.drawable.girl2; case 2: return R.drawable.girl3; case 3: return R.drawable.girl4; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
15/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
case 4: return R.drawable.girl5; case 5: return R.drawable.girl6; case 6: return R.drawable.girl7; case 7: return R.drawable.girl8; } } }
Paso #8: Descarga y extrae las imágenes de este archivo. Luego pégalas en res/drawable. Estas permitirán crear las miniaturas y el detalle de cada ítem. Paso #9: Añade otra clase con el nombre de Girls.java para representar una estructura de datos de prueba. Con ella se poblará el adaptador. Los objetos que se usarán tendrán datos aleatorios. Por lo que verás un método llamado randomList() para cumplir esta función. Girls.java
import java.util.ArrayList; import java.util.List; import java.util.Random;
/** * Envoltura para generar una lista de ejemplo */ public class Girls { public static final String[] girlsNamesDummy "Catherine", "Evelyn", "Phyllis", "Denise", "Virginia", "Ruth", "Barbara" http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
16/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
"Catherine", "Melissa", "Sandra", "Diane", "Betty", "Sharon", "Ruby" "Linda", "Marie", "Deborah", "Sara" "Donna", "Catherine", "Louise", "Catherine" "Janice", "Cheryl", "Lisa", "Andrea" "Cynthia", "Angela", "Donna", "Deborah" }; /** * Genera una lista de objetos {@link Girl} con un tamaño determinado * * @param count Tamaño * @return Lista aleatoria */ public static List
randomList(int count Random random = new Random(); List
items = new ArrayList<>(); // Restricción de tamaño count = Math.min(count, girlsNamesDummy 1.1k while (items.size() < count) {
Apoyos items.add(new Girl(girlsNamesDummy
} 590
161
return new ArrayList<>(items); } }
Paso #10: Modifica el layout de DetailActivity.java con la definición XML de abajo. Básicamente este diseño se compone de:
Un CoordinatorLayout para crear una Collapsing Toolbar. Una imagen representativa dentro de la App Bar. Cardviews para agregar secciones hipotéticas como: Perfil, Amigos e Intereses. Un Floating Action Button relacionado a la app bar http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
17/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
para un posible inicio de chat. La clase FloatingActionButton también hace parte de la librería de soporte. Superimportante resaltar que el coordinator proporciona dos atributos para que el FAB (en general para todos los elementos flotantes) flote con referencia a un view hermano.
layout_anchor : Es el view al que será anclado el
FAB. layout_anchorGravity : La ubicación del elemento.
Puedes usar banderas como bottom , top , end , etc. activity_detail.xml
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
18/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
19/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
android:textAppearance
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
20/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
21/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Paso #11: Descarga los siguientes iconos para la Toolbar de la actividad de detalle. Al extraer el contenido, pega las carpetas en res. Paso #12: Ahora debes actualizar el menú de tu actividad de detalle. Ve a res/menu/detail.xml y pega el código de abajo. Solo tendremos tres action buttons para añadir, agregar a favoritos y los ajustes: detail.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res‐auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.herprogramacion.toolbarapp.DetailActivity"-
22/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
android:orderInCategory="1" android:title="@string/action_add" app:showAsAction="ifRoom" />
Paso #13: Abre DetailActivity.java y agrega el código de abajo. El objetivo es cargar los datos de la chica que vienen desde el recycler y setearlos en cada view. Si te fijas, en las acciones de los action buttons mostramos mensajes con la llamada del método showSnackBar() . Su función crear un nuevo elemento
de la librería de diseño llamado SnackBar con la cadena especificada. Este componente es muy parecido a los Toasts, solo que permiten añadir una acción en su contenido. DetailActivity.java
import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android..design.widget.CollapsingToolbarLayout import android..design.widget.FloatingActionButton import android..design.widget.Snackbar import android..v7.app.AppCompatActivity import android..v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ImageView; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
23/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import com.bumptech.glide.Glide; public class DetailActivity extends AppCompatActivity
private static final String EXTRA_NAME = private static final String EXTRA_DRAWABLE /** * Inicia una nueva instancia de la actividad * * @param activity Contexto desde donde se lanzará * @param title Item a procesar */ public static void createInstance(Activity Intent intent = getLaunchIntent(activity activity.startActivity(intent); } /** * Construye un Intent a partir del contexto y la actividad * de detalle. * * @param context Contexto donde se inicia * @param girl Identificador de la chica * @return Intent listo para usar */ public static Intent getLaunchIntent(Context Intent intent = new Intent(context, DetailActivity intent.putExtra(EXTRA_NAME, girl.getName intent.putExtra(EXTRA_DRAWABLE, girl. return intent; } @Override protected void onCreate(Bundle savedInstanceState super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail setToolbar();// Añadir action bar if (getActionBar() != null) // Habilitar up button getActionBar().setDisplayHomeAsUpEnabled Intent i = getIntent(); http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
24/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
String name = i.getStringExtra(EXTRA_NAME int idDrawable = i.getIntExtra(EXTRA_DRAWABLE CollapsingToolbarLayout collapser = (CollapsingToolbarLayout) findViewById collapser.setTitle(name); // Cambiar título loadImageParallax(idDrawable);// Cargar Imagen // Setear escucha al FAB FloatingActionButton fab = (FloatingActionButton fab.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v showSnackBar("Opción de Chatear" } } );
} private void setToolbar() { // Añadir la Toolbar Toolbar toolbar = (Toolbar) findViewById setActionBar(toolbar); } /** * Se carga una imagen aleatoria para el detalle */ private void loadImageParallax(int id) { ImageView image = (ImageView) findViewById // Usando Glide para la carga asíncrona Glide.with(this) .load(id) .centerCrop() .into(image); } /** * Proyecta una {@link Snackbar} con el string usado * * @param msg Mensaje http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
25/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
*/ private void showSnackBar(String msg) { Snackbar .make(findViewById(R.id.coordinator .show(); } @Override public boolean onCreateOptionsMenu(Menu menu getMenuInflater().inflate(R.menu.detail return true; } @Override public boolean onOptionsItemSelected(MenuItem int id = item.getItemId(); switch (id) { case R.id.action_settings: showSnackBar("Se abren los ajustes" return true; case R.id.action_add: showSnackBar("Añadir a os" return true; case R.id.action_favorite: showSnackBar("Añadir a favoritos" return true; default: return super.onOptionsItemSelected }
} }
Paso #14: Lo siguiente es crear nuestro layout para los ítems de la lista. Dirígete a res/layout y crea un nuevo layout llamado list_item.xml. La idea es representar una sola línea de texto con un avatar. list_item.xml http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
26/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
<de.hdodenhof.circleimageview.CircleImageView android:id="@+id/avatar" android:layout_width="@dimen/avatar_size" android:layout_height="@dimen/avatar_size" android:layout_marginRight="16dp" />
Paso
#15:
Crea
una
nueva
clase
llamada
SimpleAdapter.java.
Esta clase es un RecyclerView.Adapter personalizado que inflará el
nombre y avatar de cada chica desde list_item.xml. SimpleAdapter.java
import android.app.Activity; import android.content.Context; import android..v7.widget.RecyclerView import android.view.LayoutInflater; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
27/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import java.util.List; public class SimpleAdapter extends RecyclerView implements ItemClickListener { private final Context context; private List
items; public static class SimpleViewHolder extends implements View.OnClickListener { // Campos respectivos de un item public TextView nombre; public ImageView avatar; public ItemClickListener listener; public SimpleViewHolder(View v, ItemClickListener super(v); nombre = (TextView) v.findViewById avatar = (ImageView) v.findViewById this.listener = listener; v.setOnClickListener(this); } @Override public void onClick(View v) { listener.onItemClick(v, getAdapterPosition } } public SimpleAdapter(Context context, List this.context = context; this.items = items; } @Override public int getItemCount() { return items.size(); } http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
28/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
@Override public SimpleViewHolder onCreateViewHolder View v = LayoutInflater.from(viewGroup .inflate(R.layout.list_item, viewGroup return new SimpleViewHolder(v, this); } @Override public void onBindViewHolder(SimpleViewHolder Girl currentItem = items.get(i); viewHolder.nombre.setText(currentItem Glide.with(viewHolder.avatar.getContext .load(currentItem.getIdDrawable .centerCrop() .into(viewHolder.avatar); } /** * Sobrescritura del método de la interfaz {@link ItemClickListener} * * @param view item actual * @param position posición del item actual */ @Override public void onItemClick(View view, int position DetailActivity.createInstance( (Activity) context, items.get }
}
interface ItemClickListener { void onItemClick(View view, int position); }
Paso #16: Ahora es el turno del layout de MainActivity.java. Ve a res/layout/activity_main.xml y añade la siguiente definición. Habrá una App Bar con http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
29/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
espacio flexible que se reducirá al desplazar el recycler view. activity_main.xml
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
30/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Paso #17: Ya para finalizar, abre MainActivity.java y realiza los siguientes cambios:
Añade la Toolbar (puedes crear un método llamado setToolbar() para ello).
Quita el título de la app bar y setealo en el CollapsingToolbarLayout .
Crea el adaptador y setealo en el RecyclerView . MainActivity.java
import android.os.Bundle; import android..design.widget.CollapsingToolbarLayout import android..design.widget.Snackbar import android..v7.app.AppCompatActivity import android..v7.widget.LinearLayoutManager import android..v7.widget.RecyclerView import android..v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends AppCompatActivity
private RecyclerView recycler; private LinearLayoutManager lManager; private CollapsingToolbarLayout collapser @Override protected void onCreate(Bundle savedInstanceState super.onCreate(savedInstanceState); setContentView(R.layout.activity_main http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
31/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
setToolbar();// Añadir la Toolbar SimpleAdapter adaptador = new SimpleAdapter // Obtener el Recycler recycler = (RecyclerView) findViewById recycler.setHasFixedSize(true); // Usar un para LinearLayout lManager = new LinearLayoutManager(this recycler.setLayoutManager(lManager); // Crear un nuevo adaptador recycler.setAdapter(adaptador);
} private void setToolbar() { Toolbar toolbar = (Toolbar) findViewById setActionBar(toolbar); } @Override public boolean onCreateOptionsMenu(Menu menu getMenuInflater().inflate(R.menu.main return true; } @Override public boolean onOptionsItemSelected(MenuItem int id = item.getItemId(); switch (id) { case R.id.action_search:de showSnackBar("Comenzar a buscar..." return true; case R.id.action_settings: showSnackBar("Se abren los ajustes" return true; } return super.onOptionsItemSelected(item } http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
32/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
/** * Proyecta una {@link Snackbar} con el string usado * * @param msg Mensaje */ private void showSnackBar(String msg) { Snackbar .make(findViewById(R.id.coordinator .show(); } }
Paso #18: Ejecuta la aplicación en Android Studio:
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
33/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Conclusión ¿Pudiste implementar la Toolbar en Android? Bien, en este tutorial has visto los pasos necesarios para crear una interfaz simple pero visualmente atractiva. La librería de soporte de diseño de Google es el gran avance que necesitábamos para comenzar con el Material Design de forma robusta. No obstante aún tiene varios bugs, por lo que podemos esperar que mejore con http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
34/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
el tiempo. Recuerda actualizar el SDK de Android para estar al tanto de las mejoras y obtener el funcionamiento completo de las librerías de soporte. Ahora el paso a seguir es comprender como crear un Navigation Drawer en Android con el nuevo widget para Material Design.
¿Quieres aprender a diseñar bases de datos desde 0?
Artículos Relacionados Tutorial de Botones en Android TabLayout: ¿Cómo Añadir Pestañas En Android?
Controles: Tutorial De Botones En Android
¿Cómo Crear Una Actividad De Preferencias En Android?
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
35/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Acerca Del Autor James Revelo
Comentarios
1
Comunidad
Recomendar 2
⤤ Compartir
Iniciar sesión
ordenar por el mejor
Únete a la discusión... Mario Enrique Gonzalez Hernand • hace 2 meses
Hola!, acabo de conocer tu blog... Y LO AMO! gracias por este contenido! :) 1 △
▽
• Responder • Compartir ›
Moder. > Mario Enrique Gonzalez Hernand • hace 2 meses
James Revelo Urrea
:D Gracias Mario!, para ti que eres nuevo, publico 4 tutoriales al mes, así que ten paciencia por si ves algo de demoras. Saludos!
△ ▽
• Responder • Compartir ›
Francisco Briceño > James Revelo Urrea • hace 2 meses
Hola, mira tengo una duda, como puedo lograr un toolbar o un navbar pero que sea en button, gracias!
△ ▽
• Responder • Compartir ›
VipPunkJoshers Droopy • hace 4 días
exelente gracias.
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
36/45
26/5/2016
△ ▽
Toolbar En Android: Creación De Action Bar En Material Design
icaiza • hace 21 días
Por que sucede esto... Me deja un pequeño pedazo del texto e icono que tengo.. Mi codigo es el siguiente.. Alguna idea
/* CODIGO */
△ ▽
• Responder • Compartir ›
icaiza rel="nofollow"> icaiza • hace 20 días
Me respondo.. El problema es que tenía aplicado un theme con-
@android:color/transparent
El statusBar era transparente y motivo por el cual se ve parte del toolbar.. Sólo quite este item del theme y Listo
△ ▽
• Responder • Compartir ›
KEVIN JAVIER VEGA MERINO • hace 2 meses
Hola , excelente pagina, tengo un problema al integrar varios elementos y donde debo de meter un swipe to refresh para que no choque con el scroll de toda la vista, entonces como puedo acomodarlo y tambien un tablayout con viewpager, el xml es:
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
37/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
ver más
△ ▽
• Responder • Compartir ›
hackcrack • hace 5 meses
Tengo una consulta, a ver si con tu super conocimientos alienigenas jeje puedes ayudarme. Sucede que estoy metiendole un mapa al AppBarLayout, y se hace extramadamente lento moverte por el mapa, principalmente cuando intentas moverte verticalmente. Porqueno no sacarlo de ahi y ponerlo en un RelativeLayout te preguntaras, pero es que necesito que este ahi ya que quiero el efecto de cuando haces scroll hacia abajo se oculte con el fade de la transicion nativa de Android. Paso el codigo:
△ ▽
• Responder • Compartir ›
hackcrack rel="nofollow"> hackcrack • hace 5 meses
Solucionado con un touch event :) 1 △
▽
• Responder • Compartir ›
Developer • hace 7 meses
Buenos tardes James Estoy teniendo problema al tratar de ver el detalle de la imagen , en la parte que me esta dando el problema
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
38/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
la imagen , en la parte que me esta dando el problema "java.lang.ClassCastException: android.app.Application cannot be cast to android.app.Activity" es DetailActivity.createInstance((Activity) context, items.get(position)); no entiendo porque me esta pasando eso .gracias
△ ▽
• Responder • Compartir ›
Developer > Developer • hace 7 meses
Buenos dias James, Ya lo resolvi le agrege la siguiente linea intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) en el metodo createInstance. ejemplo public static void createInstance(Context activity, Item title) { Intent intent = getLaunchIntent(activity, title); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); // Agrege esta linea activity.startActivity(intent); }
△ ▽
• Responder • Compartir ›
Julio Alvarado • hace 7 meses
Hola gracias por el Tuto, una duda: al correr el proyecto se me cierra en el celular, y el error q me sale es en el MainActiviy en el método de setToolbar(), me podrían ayudar?
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Julio Alvarado • hace 7 meses
Hola Julio que tipo de error sale?
△ ▽
• Responder • Compartir ›
Julio Alvarado > James Revelo Urrea • hace 7 meses
Hola gracias por contestar, me sale q no es compatible la toolbar, pero no entiendo q no es compatible con que
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
39/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
James Revelo Urrea Moder. > Julio Alvarado • hace 7 meses
Qué tal si revisas el import de la toolbar que estás usando. Si usas AppCompatActivity entonces usa el paquete android..v7.widget.Toolbar
△ ▽
• Responder •
Compartir ›
Julio Alvarado > James Revelo Urrea • hace 7 meses
Sale, voy a checar, gracias amigo
△ ▽
• Responder •
Compartir ›
Enmanuel • hace 8 meses
Buenos dias , como puedo hacer lo inverso mostar el toolbar al ver el detalle y al momento de hacer el scroll up mantener la imagen y el icono activo y ocultar el toolbar. gracias
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Enmanuel
Hola Enmanuel. Supongo que solo quitas el collapsing layout y luego usas las banderas de scroll que se ve en la actividad de lista
△ ▽
• Responder • Compartir ›
Eliot .Net • hace 8 meses
Que tal buenas tardes. Pregunta se puede incluir un fragmento que muestre el mapa dentro de un GLIDE asi como se realiza con la imagen. Que en vez que sea una imagen muestre en un mapa la ubicación en mi caso de un cliente a visitar.
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Eliot .Net
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
40/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Cuando hablas de mapa te refieres a una imagen o la API de google maps?
△ ▽
• Responder • Compartir ›
CarlosCarEd > James Revelo Urrea • hace 8 meses
Hola tengo un problema al compilar me sale: Error:(31, 28) No resource found that matches the given name (at 'style' with value '@style/Widget.CardContent').
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > CarlosCarEd • hace 8 meses
Hola carlos. Descarga el proyecto y revisa el archivo styles. Allí se encuentra ese estilo que te están diciendo que falta.
△ ▽
• Responder •
Compartir ›
Eliot .Net > James Revelo Urrea • hace 8 meses
Efectivamente. Google maps, lo que me interesa es decirle al vendedor cuando entre a un cliente a visita le ponga la marca de donde esta ubicado dicho cliente. Pero que se muestre asi como lo haces con la imagen de la persona que se selecciona, en vez de foto de la persona, la ubicación de la misma. No tengo mucha experiencia en Android, estos tutoriales me han ayudado bastante a darme una idea como quiero visualizar la aplicación.
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Eliot .Net • hace 8 meses http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
41/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design • hace 8 meses
Creo que es posible compañero. Espero hacer un tutorial sobre google maps para ver si podemos incluir algo parecido.
△ ▽
• Responder •
Compartir ›
Eliot .Net > James Revelo Urrea • hace 8 meses
Zas gracias. mientras sigo investigando
△ ▽
• Responder •
Compartir ›
James Revelo Urrea Moder. > Eliot .Net • hace 8 meses
Dale compañero
△ ▽
• Responder •
Compartir ›
Enmanuel • hace 8 meses
Saludo , estoy teniendo un incoveniente al tratar de correger la aplicacion me presenta el siguiente android.view.InflateException: Binary XML file line #2: Error inflating class android..design.widget.CoordinatorLayout , Porque sera ?
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Enmanuel
Hola, tienes incluida la libreria de diseño de soporte en el build.gradle?
△ ▽
• Responder • Compartir ›
Enmanuel > James Revelo Urrea • hace 8 meses
gracias , ya me funciono
△ ▽
• Responder • Compartir ›
Rogelio Trejo • hace 9 meses
Cuando instalo la aplicación en mi emulador, corre perfectamente, muestra todo como debería, pero en el menú no muestra el icono de la aplicación, pero en http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
42/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
el menú no muestra el icono de la aplicación, pero en las apps si aparece como instalada. Y en mi celular solo se instala pero no se ejecuta y del icono ni hablar. Alguna solución al respecto?
△ ▽
• Responder • Compartir ›
James Revelo Urrea Trejo • hace 9 meses
Moder. > Rogelio
Te arroja algún error?
△ ▽
• Responder • Compartir ›
Rogelio > James Revelo Urrea • hace 9 meses
Me faltaban unas lineas en el manifest, pero ya quedó todo solucionado :D muchas gracias
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Rogelio • hace 9 meses
:D ese es el problema con algunos de mis tutoriales, que doy por hecho que ya todos saben como hacerlo. Tengo pendiente modificar este tuto para añadirle ese paso. Saludos!
△ ▽
• Responder •
Compartir ›
Bluedp • hace 10 meses
Estimados, primero que todo estoy muy feliz de haber descubierto este blog porque esta buenísimo ! segundo (Argentina), como dato al margen probé la app en mi phone (4.4.2) pero tuvo problemas con los iconos del Toobar que no se visualizaban, lo solucione actualizando la librería de soporte a "compile'com.android.:design:22.2.1'". aun así no queda bien del todo, agregar esta ok pero el corazón aparece el setting, espero google solucione a la brevedad esto, por lo menos muestra avances en cada versión. Saludos ! http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
43/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
△ ▽
• Responder • Compartir ›
Luis • hace 10 meses
Hola excelente articulo :) me encanto sin duda alguna muy buenos aportes gracias por esos aportes, bien tengo una pequeña duda espero puedan ayudarme yo trate de hacer el este ejemplo pero co un valor estático pero no se por que no me funciona el botón de regresar me podrías ayudar por favor a decirme donde estoy mal mi código lo tengo así public class Quines extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); setToolbar();// Añadir action bar if (getActionBar() != null) // Habilitar up button getActionBar().setDisplayHomeAsUpEnabled(true); ver más
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 10 meses
Moder. > Luis
Hola amigo. Pues intenté cambiando a medida absoluta como tienes, pero igual me funcionó. Tanto desde el up button como del back button. ¿Dentro del método onOptionsItemSelected estás usando la opción android.R.id.home? Si es así, tal vez eso esté interfiriendo.
△ ▽
• Responder • Compartir ›
lucas • hace 10 meses
cuando voy hasta abajo de todo en el listado, y luego subo desaparece el toolbar, cuando entro en una ficha y regreso al listado aparece nuevamente, que puede ser?
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
44/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
James Revelo > lucas • hace 10 meses
Hola lucas. Esto se debe a que tal vez cambiaste las banderas de scroll de la toolbar. ¿Probaste dejar presionado el scroll hacia abajo para que apareciera?
△ ▽
• Responder • Compartir ›
Rafael Valencia > James Revelo • hace 9 meses
Hola, un estupendo tutorial sin duda alguna. También tengo el mismo problema, he descargado el código, ejecutado la aplicación y todo funciona pero ocasionalmente se presenta el problema(hacer scroll hasta abajo, luego subir y en lugar del toolbar solamente hay un espacio en blanco.)
△ ▽
• Responder • Compartir ›
Hermosa Programación Copyright © 2016.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
45/45
Curso Android
Toolbar En Android: Creación De Action Bar En Material Design
SQL
ANDROID STUDIO
DATOS
DATOS
FUNDAMENTOS
WEB SERVICES
ANDROID STUDIO
o
UI
CONEXIÓN DE RED
UI
CONEXIÓN DE RED
RECURSOS
FUNDAMENTOS
WEB SERVICES
RECURSOS
Inicio Desarrollo Android UI Toolbar En Android: Creación De Action Bar En Material Design
Toolbar En Android: Creación De Action Bar En Material Design James Revelo Comments
junio 19, 2015
UI
¿Qué buscas?
Search
Lo Más Popular
73
De seguro ya sabes que la Action Bar como la http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
Aplicación Android Con Navigation Drawer Y Tabs 1/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
conocíamos, está siendo reemplazada por un nuevo componente Android llamado Toolbar. Las nuevas guías de diseño de Google han introducido el concepto de App Bar. Una barra que tiene más flexibilidad de transformación y personalización que hace parte del checklist de diseño de Material Design:
¿Cómo Sincronizar Sqlite Con Mysql En Android? NavigationView: Navigation Drawer Con Material Design TabLayout: ¿Cómo Añadir Pestañas En Android? Servicio Web RESTful Para Android Con Php, Mysql y Json
Así que si deseas crear aplicaciones para Android 5 en adelante es necesario que aprendas a usarla. Para ello he preparado este tutorial donde crearás una aplicación Android basada en una Toolbar. Adicionalmente verás cómo extender su comportamiento con los nuevos elementos de la librería de soporte para diseño, como lo son el CoordinatorLayout , AppBarLayout y CollapsingToolbarLayout .
Toolbar En Android: Creación De Action Bar En Material Design Consumir Un Servicio Web REST Desde Android ¿Como Crear Diálogos En Android? Tutorial De Parsing Xml En Android Con XmlPullParser Usar Transiciones En Android Con Material Design
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
2/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Template recomendada Toolbar En Android: Action Bar En Materia...
Descargar Código Apóyanos con una señal en tu red social favorita y consigue el código completo. Share
590
Share
529
Tweet
¿Cómo Añadir La Toolbar En Android? Debido a que la Toolbar reemplaza a la antigua Action Bar,
debes
deshabilitarla
con
el
estilo
Theme.AppCompat.NoActionBar ó añadiendo los atributos windowActionBar y windowNoTitle con los siguientes http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
3/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
valores:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"
Luego de eso implementarla es muy fácil. Solo debes añadir
una
etiqueta
como se hace con los widgets normales.
Esta convención otorga todo el poder de la action bar al desarrollar Android, ya que el método antiguo solo permitía la personalización a través de los temas y estilos.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
4/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Algunos puntos a considerar:
Pueden existir varias Toolbar en la interfaz con distintos patrones de diseño.
Los action buttons de la Toolbar se inflan a través de un archivo de menú como siempre has hecho. Los eventos se controlan igualmente con el método onOptionsItemSelected() .
Debes encontrar la instancia de la Toolbar con findViewById() y luego setearla a la actividad con setActionBar()
para
ponerla
en
funcionamiento.
CoordinatorLayout: Interacciones Entre Views
Crear
La librería de soporte para el diseño de Android nos entrega el CoordinatorLayout para gestionar interaccione entre sus elementos hijos. ¿Qué tipos de interacciones? Movimiento, animación y scrolling. Sobre todo nos da las herramientas para replicar las técnicas de scrolling en Material Design. http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
5/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
En este tutorial lo usaremos para crear interacciones entre la App Bar y views con scrolling. Sin embargo pueden usarse para otras relaciones.
AppBarLayout: Aumentando Las Capacidades De La Action Bar Como se dijo al inicio, la App Bar es una expansión del concepto de la action bar. Aunque la Toolbar representa el pequeño segmento rectangular al que estamos acostumbrados, la App Bar (representada con la clase AppBarLayout) es un contenedor con más posibilidades de personalización. Esta permite dividir los comportamientos de la action bar para independizar las acciones. Incluso permite añadir efectos de scrolling en conjunto con el Coordinator Layout. Por ejemplo…
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
6/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Si deseas esconder la Toolbar cuando el desplaza un RecyclerView , debes envolver ambos elementos con un coordinator como se ve en el código de abajo.
7/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
... app:layout_scrollFlags="scroll|enterAlways"
Para ello debes tener en cuenta lo siguiente:
AppBarLayout siempre debe envolver a la Toolbar
y los demás componentes pertenecientes a ella (como pestañas, imágenes, etc). El CoordinatorLayout debe envolver directamente a los objetos que desees relacionar mediante una acción. Desaparecer la App Bar por scrolling requiere que haya un objeto con scroll marcado con el atributo app:layout_behavior="@string/appbar_scrolling_view_behavior" . Este debe declararse por encima de la App Bar. La forma en que se afectan los hijos de App Bar se determina en app:layout_scrollFlags . Las banderas de scroll controlan el tipo de comportamiento con que desaparece la Toolbar:
scroll : indica que un view desaparecerá al
desplazar el contenido. enterAlways :vuelve visible al view ante cualquier
signo de scrolling. enterAlwaysCollapsed : vuelve visible el view solo si
se mantiene el scroll en la parte superior del contenido. exitUntilCollapsed : desaparece el view hasta que
sus dimensiones superen la altura mínima. http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
8/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
CollapsingToolbarLayout: Espacio Flexible De La App Bar La App Bar es un elemento flexible capaz de aumentar o reducir su tamaño para desplegar mejor experiencia de dependiendo de las interacciones que se ejerzan sobre ella. Para implementar esta característica se usa el CollapsingToolbarLayout . Un layout especial que
envuelve a la Toolbar para controlar las reacciones de expansión y contracción de los elementos que se encuentran dentro de un AppBarLayout . Con reacciones me refiero a la variación de sus dimensiones y las desapariciones de la escena si es necesario.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
9/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Para crear una App Bar con que contraiga, solo envuelves la Toolbar de la siguiente forma:
10/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
El código anterior contrae y expande la AppBar al momento de usar el scrolling. Para comprender el funcionamiento recuerda las siguientes instrucciones:
El
CollapsingToolbarLayout
debe
envolver
directamente a la Toolbar. La Toolbar puede sobrevivir a la contracción del contenido
a
través
app:layout_scrollMode="pin" .
del Los
atributo demás
elementos desaparecerán. Puedes animar el titulo de la Toolbar añadiéndolo al CollapsingToolbarLayout con setTitle() .
Al reducir un view puedes usar un efecto Parallax (es necesario
aplicar
el
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
11/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
atributo app:layout_collapseMode="parallax" ) para difuminar su background con el color indicado en app:contentScrim .
Si quieres ahorrar tiempo implementando el Material Design en tus app Android, te recomiendo la plantilla Material Design App de Codecanyon
Crear Aplicación Android Con Toolbar Paso #1: En Android Studio, crea un nuevo proyecto yendo a File > New Project. Llámalo “Citas Peligrosas”. Selecciona Blank Activity y confirma. Paso #2: A continuación crea una nueva clase llamada DetailActivity.java. Esta actividad contendrá el detalle para cada ítem del Recycler View que se usará para mostrar la lista de chicas con las que queremos tener citas. Paso #3: Agrega las dependencias del código de abajo al archivo build.gradle. Verás tres nuevas librerías: La librería de diseño de soporte antes mencionada; la librería Circle Image View que permite crear Image Views circulares y la librería Glide que nos permitirá cargar en segundo plano las imágenes. build.gradle
dependencies { ... compile 'com.android.:appcompat‐v7:22.2.0' http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
12/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
compile 'com.android.:design:22.2.0' compile 'com.android.:recyclerview‐v7:22.2.0' compile 'com.android.:cardview‐v7:22.2.0' compile 'com.github.bumptech.glide:glide:3.6.0' compile 'de.hdodenhof:circleimageview:1.3.0' }
Paso #4: Ve a res/values/strings.xml y agrega las siguientes cadenas: strings.xml
<string name="girl_ipsum"> Morbi posuere lorem nec elit dapibus, vitae accumsan mauris pellentesq Vestibulum a lobortis mi. Vestibulum lacinia molestie semper. Pellente ultrices arcu lacus, interdum mollis nibh convallis ut. Aliquam sagitt sem a lacus gravida, eu accumsan purus volutpat. Donec tempus, est id tristique consectetur, lacus ligula dignissim turpis, cursus commodo t libero in purus. Phasellus tempus gravida tempor. <string name="action_search">Buscar
Paso #5: Crea un nuevo archivo colors.xml en res/values y agrega los siguientes colores para el tema con Material Design: http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
13/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
colors.xml
Paso #6: Lo siguiente es ir a res/values/dimens.xml y añadir las dimensiones de abajo. dimens.xml
Paso #7: Ahora crearemos el POJO de los objetos de la lista. Añade una nueva clase llamada Girl.java con el código de abajo. Este es el modelo de datos para los elementos del RecyclerView . Girl.java
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
14/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import java.util.Random;
/** * POJO de las chicas */ public class Girl { private String name; private int idDrawable; public Girl(String name, int idDrawable) this.name = name; this.idDrawable = idDrawable; } public Girl(String name) { this.name = name; this.idDrawable = getRandomGirlDrawable } public String getName() { return name; } public int getIdDrawable() { return idDrawable; } /** * Asigna un drawable en forma aleatoria * * @return id del drawable */ private int getRandomGirlDrawable() { Random rnd = new Random(); switch (rnd.nextInt(8)) { default: case 0: return R.drawable.girl1; case 1: return R.drawable.girl2; case 2: return R.drawable.girl3; case 3: return R.drawable.girl4; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
15/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
case 4: return R.drawable.girl5; case 5: return R.drawable.girl6; case 6: return R.drawable.girl7; case 7: return R.drawable.girl8; } } }
Paso #8: Descarga y extrae las imágenes de este archivo. Luego pégalas en res/drawable. Estas permitirán crear las miniaturas y el detalle de cada ítem. Paso #9: Añade otra clase con el nombre de Girls.java para representar una estructura de datos de prueba. Con ella se poblará el adaptador. Los objetos que se usarán tendrán datos aleatorios. Por lo que verás un método llamado randomList() para cumplir esta función. Girls.java
import java.util.ArrayList; import java.util.List; import java.util.Random;
/** * Envoltura para generar una lista de ejemplo */ public class Girls { public static final String[] girlsNamesDummy "Catherine", "Evelyn", "Phyllis", "Denise", "Virginia", "Ruth", "Barbara" http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
16/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
"Catherine", "Melissa", "Sandra", "Diane", "Betty", "Sharon", "Ruby" "Linda", "Marie", "Deborah", "Sara" "Donna", "Catherine", "Louise", "Catherine" "Janice", "Cheryl", "Lisa", "Andrea" "Cynthia", "Angela", "Donna", "Deborah" }; /** * Genera una lista de objetos {@link Girl} con un tamaño determinado * * @param count Tamaño * @return Lista aleatoria */ public static List
Apoyos items.add(new Girl(girlsNamesDummy
} 590
161
return new ArrayList<>(items); } }
Paso #10: Modifica el layout de DetailActivity.java con la definición XML de abajo. Básicamente este diseño se compone de:
Un CoordinatorLayout para crear una Collapsing Toolbar. Una imagen representativa dentro de la App Bar. Cardviews para agregar secciones hipotéticas como: Perfil, Amigos e Intereses. Un Floating Action Button relacionado a la app bar http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
17/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
para un posible inicio de chat. La clase FloatingActionButton también hace parte de la librería de soporte. Superimportante resaltar que el coordinator proporciona dos atributos para que el FAB (en general para todos los elementos flotantes) flote con referencia a un view hermano.
layout_anchor : Es el view al que será anclado el
FAB. layout_anchorGravity : La ubicación del elemento.
Puedes usar banderas como bottom , top , end , etc. activity_detail.xml
18/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
19/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
android:textAppearance
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
20/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
21/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Paso #11: Descarga los siguientes iconos para la Toolbar de la actividad de detalle. Al extraer el contenido, pega las carpetas en res. Paso #12: Ahora debes actualizar el menú de tu actividad de detalle. Ve a res/menu/detail.xml y pega el código de abajo. Solo tendremos tres action buttons para añadir, agregar a favoritos y los ajustes: detail.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res‐auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.herprogramacion.toolbarapp.DetailActivity"
22/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
android:orderInCategory="1" android:title="@string/action_add" app:showAsAction="ifRoom" />
Paso #13: Abre DetailActivity.java y agrega el código de abajo. El objetivo es cargar los datos de la chica que vienen desde el recycler y setearlos en cada view. Si te fijas, en las acciones de los action buttons mostramos mensajes con la llamada del método showSnackBar() . Su función crear un nuevo elemento
de la librería de diseño llamado SnackBar con la cadena especificada. Este componente es muy parecido a los Toasts, solo que permiten añadir una acción en su contenido. DetailActivity.java
import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android..design.widget.CollapsingToolbarLayout import android..design.widget.FloatingActionButton import android..design.widget.Snackbar import android..v7.app.AppCompatActivity import android..v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ImageView; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
23/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import com.bumptech.glide.Glide; public class DetailActivity extends AppCompatActivity
private static final String EXTRA_NAME = private static final String EXTRA_DRAWABLE /** * Inicia una nueva instancia de la actividad * * @param activity Contexto desde donde se lanzará * @param title Item a procesar */ public static void createInstance(Activity Intent intent = getLaunchIntent(activity activity.startActivity(intent); } /** * Construye un Intent a partir del contexto y la actividad * de detalle. * * @param context Contexto donde se inicia * @param girl Identificador de la chica * @return Intent listo para usar */ public static Intent getLaunchIntent(Context Intent intent = new Intent(context, DetailActivity intent.putExtra(EXTRA_NAME, girl.getName intent.putExtra(EXTRA_DRAWABLE, girl. return intent; } @Override protected void onCreate(Bundle savedInstanceState super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail setToolbar();// Añadir action bar if (getActionBar() != null) // Habilitar up button getActionBar().setDisplayHomeAsUpEnabled Intent i = getIntent(); http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
24/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
String name = i.getStringExtra(EXTRA_NAME int idDrawable = i.getIntExtra(EXTRA_DRAWABLE CollapsingToolbarLayout collapser = (CollapsingToolbarLayout) findViewById collapser.setTitle(name); // Cambiar título loadImageParallax(idDrawable);// Cargar Imagen // Setear escucha al FAB FloatingActionButton fab = (FloatingActionButton fab.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v showSnackBar("Opción de Chatear" } } );
} private void setToolbar() { // Añadir la Toolbar Toolbar toolbar = (Toolbar) findViewById setActionBar(toolbar); } /** * Se carga una imagen aleatoria para el detalle */ private void loadImageParallax(int id) { ImageView image = (ImageView) findViewById // Usando Glide para la carga asíncrona Glide.with(this) .load(id) .centerCrop() .into(image); } /** * Proyecta una {@link Snackbar} con el string usado * * @param msg Mensaje http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
25/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
*/ private void showSnackBar(String msg) { Snackbar .make(findViewById(R.id.coordinator .show(); } @Override public boolean onCreateOptionsMenu(Menu menu getMenuInflater().inflate(R.menu.detail return true; } @Override public boolean onOptionsItemSelected(MenuItem int id = item.getItemId(); switch (id) { case R.id.action_settings: showSnackBar("Se abren los ajustes" return true; case R.id.action_add: showSnackBar("Añadir a os" return true; case R.id.action_favorite: showSnackBar("Añadir a favoritos" return true; default: return super.onOptionsItemSelected }
} }
Paso #14: Lo siguiente es crear nuestro layout para los ítems de la lista. Dirígete a res/layout y crea un nuevo layout llamado list_item.xml. La idea es representar una sola línea de texto con un avatar. list_item.xml http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
26/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Paso
#15:
Crea
una
nueva
clase
llamada
SimpleAdapter.java.
Esta clase es un RecyclerView.Adapter personalizado que inflará el
nombre y avatar de cada chica desde list_item.xml. SimpleAdapter.java
import android.app.Activity; import android.content.Context; import android..v7.widget.RecyclerView import android.view.LayoutInflater; http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
27/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import java.util.List; public class SimpleAdapter extends RecyclerView implements ItemClickListener { private final Context context; private List
28/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
@Override public SimpleViewHolder onCreateViewHolder View v = LayoutInflater.from(viewGroup .inflate(R.layout.list_item, viewGroup return new SimpleViewHolder(v, this); } @Override public void onBindViewHolder(SimpleViewHolder Girl currentItem = items.get(i); viewHolder.nombre.setText(currentItem Glide.with(viewHolder.avatar.getContext .load(currentItem.getIdDrawable .centerCrop() .into(viewHolder.avatar); } /** * Sobrescritura del método de la interfaz {@link ItemClickListener} * * @param view item actual * @param position posición del item actual */ @Override public void onItemClick(View view, int position DetailActivity.createInstance( (Activity) context, items.get }
}
interface ItemClickListener { void onItemClick(View view, int position); }
Paso #16: Ahora es el turno del layout de MainActivity.java. Ve a res/layout/activity_main.xml y añade la siguiente definición. Habrá una App Bar con http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
29/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
espacio flexible que se reducirá al desplazar el recycler view. activity_main.xml
30/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Paso #17: Ya para finalizar, abre MainActivity.java y realiza los siguientes cambios:
Añade la Toolbar (puedes crear un método llamado setToolbar() para ello).
Quita el título de la app bar y setealo en el CollapsingToolbarLayout .
Crea el adaptador y setealo en el RecyclerView . MainActivity.java
import android.os.Bundle; import android..design.widget.CollapsingToolbarLayout import android..design.widget.Snackbar import android..v7.app.AppCompatActivity import android..v7.widget.LinearLayoutManager import android..v7.widget.RecyclerView import android..v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends AppCompatActivity
private RecyclerView recycler; private LinearLayoutManager lManager; private CollapsingToolbarLayout collapser @Override protected void onCreate(Bundle savedInstanceState super.onCreate(savedInstanceState); setContentView(R.layout.activity_main http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
31/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
setToolbar();// Añadir la Toolbar SimpleAdapter adaptador = new SimpleAdapter // Obtener el Recycler recycler = (RecyclerView) findViewById recycler.setHasFixedSize(true); // Usar un para LinearLayout lManager = new LinearLayoutManager(this recycler.setLayoutManager(lManager); // Crear un nuevo adaptador recycler.setAdapter(adaptador);
} private void setToolbar() { Toolbar toolbar = (Toolbar) findViewById setActionBar(toolbar); } @Override public boolean onCreateOptionsMenu(Menu menu getMenuInflater().inflate(R.menu.main return true; } @Override public boolean onOptionsItemSelected(MenuItem int id = item.getItemId(); switch (id) { case R.id.action_search:de showSnackBar("Comenzar a buscar..." return true; case R.id.action_settings: showSnackBar("Se abren los ajustes" return true; } return super.onOptionsItemSelected(item } http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
32/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
/** * Proyecta una {@link Snackbar} con el string usado * * @param msg Mensaje */ private void showSnackBar(String msg) { Snackbar .make(findViewById(R.id.coordinator .show(); } }
Paso #18: Ejecuta la aplicación en Android Studio:
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
33/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Conclusión ¿Pudiste implementar la Toolbar en Android? Bien, en este tutorial has visto los pasos necesarios para crear una interfaz simple pero visualmente atractiva. La librería de soporte de diseño de Google es el gran avance que necesitábamos para comenzar con el Material Design de forma robusta. No obstante aún tiene varios bugs, por lo que podemos esperar que mejore con http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
34/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
el tiempo. Recuerda actualizar el SDK de Android para estar al tanto de las mejoras y obtener el funcionamiento completo de las librerías de soporte. Ahora el paso a seguir es comprender como crear un Navigation Drawer en Android con el nuevo widget para Material Design.
¿Quieres aprender a diseñar bases de datos desde 0?
Artículos Relacionados Tutorial de Botones en Android TabLayout: ¿Cómo Añadir Pestañas En Android?
Controles: Tutorial De Botones En Android
¿Cómo Crear Una Actividad De Preferencias En Android?
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
35/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Acerca Del Autor James Revelo
Comentarios
1
Comunidad
Recomendar 2
⤤ Compartir
Iniciar sesión
ordenar por el mejor
Únete a la discusión... Mario Enrique Gonzalez Hernand • hace 2 meses
Hola!, acabo de conocer tu blog... Y LO AMO! gracias por este contenido! :) 1 △
▽
• Responder • Compartir ›
Moder. > Mario Enrique Gonzalez Hernand • hace 2 meses
James Revelo Urrea
:D Gracias Mario!, para ti que eres nuevo, publico 4 tutoriales al mes, así que ten paciencia por si ves algo de demoras. Saludos!
△ ▽
• Responder • Compartir ›
Francisco Briceño > James Revelo Urrea • hace 2 meses
Hola, mira tengo una duda, como puedo lograr un toolbar o un navbar pero que sea en button, gracias!
△ ▽
• Responder • Compartir ›
VipPunkJoshers Droopy • hace 4 días
exelente gracias.
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
36/45
26/5/2016
△ ▽
Toolbar En Android: Creación De Action Bar En Material Design
icaiza • hace 21 días
Por que sucede esto... Me deja un pequeño pedazo del texto e icono que tengo.. Mi codigo es el siguiente.. Alguna idea
△ ▽
• Responder • Compartir ›
icaiza rel="nofollow"> icaiza • hace 20 días
Me respondo.. El problema es que tenía aplicado un theme con
△ ▽
• Responder • Compartir ›
KEVIN JAVIER VEGA MERINO • hace 2 meses
Hola , excelente pagina, tengo un problema al integrar varios elementos y donde debo de meter un swipe to refresh para que no choque con el scroll de toda la vista, entonces como puedo acomodarlo y tambien un tablayout con viewpager, el xml es:
37/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
△ ▽
• Responder • Compartir ›
hackcrack • hace 5 meses
Tengo una consulta, a ver si con tu super conocimientos alienigenas jeje puedes ayudarme. Sucede que estoy metiendole un mapa al AppBarLayout, y se hace extramadamente lento moverte por el mapa, principalmente cuando intentas moverte verticalmente. Porqueno no sacarlo de ahi y ponerlo en un RelativeLayout te preguntaras, pero es que necesito que este ahi ya que quiero el efecto de cuando haces scroll hacia abajo se oculte con el fade de la transicion nativa de Android. Paso el codigo:
△ ▽
• Responder • Compartir ›
hackcrack rel="nofollow"> hackcrack • hace 5 meses
Solucionado con un touch event :) 1 △
▽
• Responder • Compartir ›
Developer • hace 7 meses
Buenos tardes James Estoy teniendo problema al tratar de ver el detalle de la imagen , en la parte que me esta dando el problema
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
38/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
la imagen , en la parte que me esta dando el problema "java.lang.ClassCastException: android.app.Application cannot be cast to android.app.Activity" es DetailActivity.createInstance((Activity) context, items.get(position)); no entiendo porque me esta pasando eso .gracias
△ ▽
• Responder • Compartir ›
Developer > Developer • hace 7 meses
Buenos dias James, Ya lo resolvi le agrege la siguiente linea intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) en el metodo createInstance. ejemplo public static void createInstance(Context activity, Item title) { Intent intent = getLaunchIntent(activity, title); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); // Agrege esta linea activity.startActivity(intent); }
△ ▽
• Responder • Compartir ›
Julio Alvarado • hace 7 meses
Hola gracias por el Tuto, una duda: al correr el proyecto se me cierra en el celular, y el error q me sale es en el MainActiviy en el método de setToolbar(), me podrían ayudar?
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Julio Alvarado • hace 7 meses
Hola Julio que tipo de error sale?
△ ▽
• Responder • Compartir ›
Julio Alvarado > James Revelo Urrea • hace 7 meses
Hola gracias por contestar, me sale q no es compatible la toolbar, pero no entiendo q no es compatible con que
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
39/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
James Revelo Urrea Moder. > Julio Alvarado • hace 7 meses
Qué tal si revisas el import de la toolbar que estás usando. Si usas AppCompatActivity entonces usa el paquete android..v7.widget.Toolbar
△ ▽
• Responder •
Compartir ›
Julio Alvarado > James Revelo Urrea • hace 7 meses
Sale, voy a checar, gracias amigo
△ ▽
• Responder •
Compartir ›
Enmanuel • hace 8 meses
Buenos dias , como puedo hacer lo inverso mostar el toolbar al ver el detalle y al momento de hacer el scroll up mantener la imagen y el icono activo y ocultar el toolbar. gracias
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Enmanuel
Hola Enmanuel. Supongo que solo quitas el collapsing layout y luego usas las banderas de scroll que se ve en la actividad de lista
△ ▽
• Responder • Compartir ›
Eliot .Net • hace 8 meses
Que tal buenas tardes. Pregunta se puede incluir un fragmento que muestre el mapa dentro de un GLIDE asi como se realiza con la imagen. Que en vez que sea una imagen muestre en un mapa la ubicación en mi caso de un cliente a visitar.
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Eliot .Net
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
40/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
Cuando hablas de mapa te refieres a una imagen o la API de google maps?
△ ▽
• Responder • Compartir ›
CarlosCarEd > James Revelo Urrea • hace 8 meses
Hola tengo un problema al compilar me sale: Error:(31, 28) No resource found that matches the given name (at 'style' with value '@style/Widget.CardContent').
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > CarlosCarEd • hace 8 meses
Hola carlos. Descarga el proyecto y revisa el archivo styles. Allí se encuentra ese estilo que te están diciendo que falta.
△ ▽
• Responder •
Compartir ›
Eliot .Net > James Revelo Urrea • hace 8 meses
Efectivamente. Google maps, lo que me interesa es decirle al vendedor cuando entre a un cliente a visita le ponga la marca de donde esta ubicado dicho cliente. Pero que se muestre asi como lo haces con la imagen de la persona que se selecciona, en vez de foto de la persona, la ubicación de la misma. No tengo mucha experiencia en Android, estos tutoriales me han ayudado bastante a darme una idea como quiero visualizar la aplicación.
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Eliot .Net • hace 8 meses http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
41/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design • hace 8 meses
Creo que es posible compañero. Espero hacer un tutorial sobre google maps para ver si podemos incluir algo parecido.
△ ▽
• Responder •
Compartir ›
Eliot .Net > James Revelo Urrea • hace 8 meses
Zas gracias. mientras sigo investigando
△ ▽
• Responder •
Compartir ›
James Revelo Urrea Moder. > Eliot .Net • hace 8 meses
Dale compañero
△ ▽
• Responder •
Compartir ›
Enmanuel • hace 8 meses
Saludo , estoy teniendo un incoveniente al tratar de correger la aplicacion me presenta el siguiente android.view.InflateException: Binary XML file line #2: Error inflating class android..design.widget.CoordinatorLayout , Porque sera ?
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 8 meses
Moder. > Enmanuel
Hola, tienes incluida la libreria de diseño de soporte en el build.gradle?
△ ▽
• Responder • Compartir ›
Enmanuel > James Revelo Urrea • hace 8 meses
gracias , ya me funciono
△ ▽
• Responder • Compartir ›
Rogelio Trejo • hace 9 meses
Cuando instalo la aplicación en mi emulador, corre perfectamente, muestra todo como debería, pero en el menú no muestra el icono de la aplicación, pero en http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
42/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
el menú no muestra el icono de la aplicación, pero en las apps si aparece como instalada. Y en mi celular solo se instala pero no se ejecuta y del icono ni hablar. Alguna solución al respecto?
△ ▽
• Responder • Compartir ›
James Revelo Urrea Trejo • hace 9 meses
Moder. > Rogelio
Te arroja algún error?
△ ▽
• Responder • Compartir ›
Rogelio > James Revelo Urrea • hace 9 meses
Me faltaban unas lineas en el manifest, pero ya quedó todo solucionado :D muchas gracias
△ ▽
• Responder • Compartir ›
James Revelo Urrea Moder. > Rogelio • hace 9 meses
:D ese es el problema con algunos de mis tutoriales, que doy por hecho que ya todos saben como hacerlo. Tengo pendiente modificar este tuto para añadirle ese paso. Saludos!
△ ▽
• Responder •
Compartir ›
Bluedp • hace 10 meses
Estimados, primero que todo estoy muy feliz de haber descubierto este blog porque esta buenísimo ! segundo (Argentina), como dato al margen probé la app en mi phone (4.4.2) pero tuvo problemas con los iconos del Toobar que no se visualizaban, lo solucione actualizando la librería de soporte a "compile'com.android.:design:22.2.1'". aun así no queda bien del todo, agregar esta ok pero el corazón aparece el setting, espero google solucione a la brevedad esto, por lo menos muestra avances en cada versión. Saludos ! http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
43/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
△ ▽
• Responder • Compartir ›
Luis • hace 10 meses
Hola excelente articulo :) me encanto sin duda alguna muy buenos aportes gracias por esos aportes, bien tengo una pequeña duda espero puedan ayudarme yo trate de hacer el este ejemplo pero co un valor estático pero no se por que no me funciona el botón de regresar me podrías ayudar por favor a decirme donde estoy mal mi código lo tengo así public class Quines extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); setToolbar();// Añadir action bar if (getActionBar() != null) // Habilitar up button getActionBar().setDisplayHomeAsUpEnabled(true); ver más
△ ▽
• Responder • Compartir ›
James Revelo Urrea • hace 10 meses
Moder. > Luis
Hola amigo. Pues intenté cambiando a medida absoluta como tienes, pero igual me funcionó. Tanto desde el up button como del back button. ¿Dentro del método onOptionsItemSelected estás usando la opción android.R.id.home? Si es así, tal vez eso esté interfiriendo.
△ ▽
• Responder • Compartir ›
lucas • hace 10 meses
cuando voy hasta abajo de todo en el listado, y luego subo desaparece el toolbar, cuando entro en una ficha y regreso al listado aparece nuevamente, que puede ser?
△ ▽
• Responder • Compartir ›
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
44/45
26/5/2016
Toolbar En Android: Creación De Action Bar En Material Design
James Revelo > lucas • hace 10 meses
Hola lucas. Esto se debe a que tal vez cambiaste las banderas de scroll de la toolbar. ¿Probaste dejar presionado el scroll hacia abajo para que apareciera?
△ ▽
• Responder • Compartir ›
Rafael Valencia > James Revelo • hace 9 meses
Hola, un estupendo tutorial sin duda alguna. También tengo el mismo problema, he descargado el código, ejecutado la aplicación y todo funciona pero ocasionalmente se presenta el problema(hacer scroll hasta abajo, luego subir y en lugar del toolbar solamente hay un espacio en blanco.)
△ ▽
• Responder • Compartir ›
Hermosa Programación Copyright © 2016.
http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
45/45
Related Documents c2h70
Material Design Para Android 6g561k
February 2023 0
Android En Blackberry Playbook 452r3c
May 2022 0
Memoria En Android 1r5b32
July 2021 0
Mt4 Android En 6a6e6y
November 2022 0
Google Maps En Android 6gz3a
February 2023 0
Hilos En Android Modificado 686x2o
July 2021 0More Documents from "Eduardo Perdomo" 2hxw
6g3p1u
June 2022 0
6g3p1u
January 2021 0
Performance 1z4b2w
June 2021 0
El Diferencial Semantico O Escala De Osgood 286240
December 2019 47
6g3p1u
November 2019 56