Toolbar en Android - Creación de Action Bar en Material Design

26/5/2016
Curso Android
ToolbarEnAndroid:CreacinDeActionBarEnMaterialDesign
SQL
ANDROID STUDIO
DATOS
DATOS
FUNDAMENTOS
WEB SERVICES
ANDROID STUDIO
Contacto
UI
CONEXIN DE RED
UI
CONEXIN DE RED
RECURSOS
FUNDAMENTOS
WEB SERVICES
RECURSOS
Inicio DesarrolloAndroid UI
ToolbarEnAndroid:CreacinDeActionBarEnMaterial
Design
Toolbar En Android:
Creacin De Action
Bar En Material Design
JamesRevelo
Comments
junio19,2015
UI
Qu buscas?
Search
Lo Ms Popular
73
De seguro ya sabes que la Action Bar como la

http://www.hermosaprogramacion.com/2015/06/toolbarenandroidcreaciondeactionbarenmaterialdesign/
Aplicacin Android
Con Navigation
Drawer Y Tabs
1/45
26/5/2016
conocamos, est siendo reemplazada por un nuevo

componenteAndroidllamadoToolbar.
LasnuevasguasdediseodeGooglehanintroducidoel
concepto de App Bar. Una barra que tiene ms
flexibilidaddetransformacinypersonalizacinquehace
partedelchecklistdediseodeMaterialDesign:
Cmo Sincronizar
Sqlite Con Mysql En
Android?
NavigationView:
Navigation Drawer
Con Material Design
TabLayout: Cmo
Aadir Pestaas En
Android?
Servicio Web RESTful
Para Android Con
Php, Mysql y Json
As que si deseas crear aplicaciones paraAndroid 5 en

adelanteesnecesarioqueaprendasausarla.
Para ello he preparado este tutorial donde crears una
aplicacin Android basada en una Toolbar.
Adicionalmenteverscmoextendersucomportamiento
con los nuevos elementos de la librera de soporte
para diseo, como lo son el CoordinatorLayout ,
AppBarLayout y CollapsingToolbarLayout .
Toolbar En Android:
Creacin De Action
Bar En Material
Design
Consumir Un Servicio
Web REST Desde
Android
Como Crear
Dilogos En Android?
Tutorial De Parsing
Xml En Android Con
XmlPullParser
Usar Transiciones En
Android Con Material
Design
2/45
26/5/2016
Template
recomendada
Toolbar En Android: Action Bar En Materia...
DescargarCdigo
Apyanosconunasealenturedsocialfavoritay
consigueelcdigocompleto.
Share
590
Share
529
Tweet
Cmo Aadir La Toolbar En

Android?
Debidoaquela Toolbar reemplazaalaantiguaAction
Bar,
debes
deshabilitarla
con
el
estilo
Theme.AppCompat.NoActionBar aadiendolosatributos
windowActionBar y windowNoTitle con los siguientes
3/45
26/5/2016
valores:
<stylename="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar"
<!HabilitarlaToolbar>
<itemname="windowActionBar">false</item>
<itemname="windowNoTitle">true</item>
<!...>
</style>
Luego de eso implementarla es muy fcil. Solo debes

aadir
una
etiqueta
<android.support.v7.widget.Toolbar> en tus layouts
comosehaceconloswidgetsnormales.
Estaconvencinotorgatodoelpoderdelaactionbaral
desarrollar Android, ya que el mtodo antiguo solo
permita la personalizacin a travs de los temas y
estilos.
<!Toolbar>
<android.support.v7.widget.Toolbarxmlns:app=
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
4/45
26/5/2016
Algunospuntosaconsiderar:
Pueden existir varias Toolbar en la interfaz con

distintospatronesdediseo.
LosactionbuttonsdelaToolbarseinflanatravsde
unarchivodemencomosiemprehashecho.
Los eventos se controlan igualmente con el mtodo
onOptionsItemSelected() .
Debes encontrar la instancia de la Toolbar con

findViewById() y luego setearla a la actividad con
setSupportActionBar()
para
ponerla
en
funcionamiento.
CoordinatorLayout:
InteraccionesEntreViews
Crear
La librera de soporte para el diseo de Android nos

entregaelCoordinatorLayoutparagestionarinteraccione
entresuselementoshijos.
Qutiposdeinteracciones?
Movimiento,animacinyscrolling.Sobretodonosdalas
herramientas para replicar las tcnicas de scrolling en
MaterialDesign.
5/45
26/5/2016
En este tutorial lo usaremos para crear interacciones

entre la App Bar y views con scrolling. Sin embargo
puedenusarseparaotrasrelaciones.
AppBarLayout: Aumentando Las

CapacidadesDeLaActionBar
Como se dijo al inicio, la AppBar es una expansin del
conceptodelaactionbar.AunquelaToolbarrepresenta
el pequeo segmento rectangular al que estamos
acostumbrados, la App Bar (representada con la clase
AppBarLayout) es un contenedor con ms posibilidades
depersonalizacin.
Estapermitedividirloscomportamientosdelaactionbar
paraindependizarlasacciones.
Incluso permite aadir efectos de scrolling en conjunto
conelCoordinatorLayout.
Porejemplo
6/45
26/5/2016
Si deseas esconder la Toolbar cuando el usuario

desplaza un RecyclerView , debes envolver ambos
elementos con un coordinator como se ve en el cdigo
deabajo.
<android.support.design.widget.CoordinatorLayout
...>
<!ObjetoConScroll>
<android.support.v7.widget.RecyclerView
...
app:layout_behavior="@string/appbar_scrolling_view_behavior"
<!AppBar>
<android.support.design.widget.AppBarLayout
...>
<!Toolbar>
<android.support.v7.widget.Toolbar
7/45
26/5/2016
...
app:layout_scrollFlags="scroll|enterAlways"
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Paraellodebestenerencuentalosiguiente:
AppBarLayout siempre debe envolver a la Toolbar
y los dems componentes pertenecientes a ella

(comopestaas,imgenes,etc).
El CoordinatorLayout debeenvolverdirectamentea
los objetos que desees relacionar mediante una
accin.
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" .
EstedebedeclararseporencimadelaAppBar.
LaformaenqueseafectanloshijosdeAppBarse
determinaen app:layout_scrollFlags .
Las banderas de scroll controlan el tipo de
comportamientoconquedesaparecelaToolbar:
scroll : indica que un view desaparecer al
desplazarelcontenido.
enterAlways :vuelve visible al view ante cualquier
signodescrolling.
enterAlwaysCollapsed :vuelvevisibleelviewsolosi
se mantiene el scroll en la parte superior del

contenido.
exitUntilCollapsed :desapareceelviewhastaque
susdimensionessuperenlaalturamnima.
8/45
26/5/2016
CollapsingToolbarLayout: Espacio
FlexibleDeLaAppBar
LaAppBaresunelementoflexiblecapazdeaumentaro
reducir su tamao para desplegar mejor experiencia de
usuariodependiendodelasinteraccionesqueseejerzan
sobreella.
Para implementar esta caracterstica se usa el
CollapsingToolbarLayout . Un layout especial que
envuelve a la Toolbar para controlar las reacciones de

expansin y contraccin de los elementos que se
encuentrandentrodeun AppBarLayout .
Con reacciones me refiero a la variacin de sus
dimensiones y las desapariciones de la escena si es
necesario.
9/45
26/5/2016
Para crear una App Bar con que contraiga, solo

envuelveslaToolbardelasiguienteforma:
<?xmlversion="1.0"encoding="utf8"?>
xmlns:app="http://schemas.android.com/apk/resauto"
android:id="@+id/coordinator"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!ObjetoconScroll>
<android.support.v4.widget.NestedScrollView
...
<!Contenidodesplazable>
</android.support.v4.widget.NestedScrollView>
10/45
26/5/2016
<!AppBar>
...>
<!Collapser>
<android.support.design.widget.CollapsingToolbarLayout
...
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
<!Toolbar>
...
app:layout_collapseMode="pin"
</android.support.design.widget.CollapsingToolbarLayout>
El cdigo anterior contrae y expande la AppBar al

momento de usar el scrolling. Para comprender el
funcionamientorecuerdalassiguientesinstrucciones:
El
CollapsingToolbarLayout
debe
envolver
directamentealaToolbar.
La Toolbar puede sobrevivir a la contraccin del
contenido
travs
app:layout_scrollMode="pin" .
del
Los
atributo
dems
elementosdesaparecern.
PuedesanimareltitulodelaToolbaraadindoloal
CollapsingToolbarLayout con setTitle() .
AlreducirunviewpuedesusarunefectoParallax(es
necesario
aplicar
el
11/45
26/5/2016
atributo app:layout_collapseMode="parallax" )para

difuminar su background con el color indicado en
app:contentScrim .
SiquieresahorrartiempoimplementandoelMaterial
DesignentusappAndroid,terecomiendolaplantilla
MaterialDesignAppdeCodecanyon
Crear Aplicacin Android Con

Toolbar
Paso #1: En Android Studio, crea un nuevo proyecto
yendo a File > New Project. Llmalo Citas
Peligrosas.SeleccionaBlankActivityyconfirma.
Paso #2:A continuacin 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 cdigo de abajo
al archivo build.gradle. Vers tres nuevas libreras: La
librera de diseo de soporte antes mencionada la
libreraCircleImageViewquepermitecrearImageViews
circularesylalibreraGlide que nos permitir cargar en
segundoplanolasimgenes.
build.gradle
dependencies{
...
compile'com.android.support:appcompatv7:22.2.0'
12/45
26/5/2016
compile'com.android.support:design:22.2.0'
compile'com.android.support:recyclerviewv7:22.2.0'
compile'com.android.support:cardviewv7: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

siguientescadenas:
strings.xml
<resources>
<stringname="app_name">CitasPeligrosas</string>
<stringname="action_settings">Settings</string>
<stringname="action_add">Aadir</string>
<stringname="action_favorite">MarcarFavorito
<stringname="title_activity_detail">DetailActivity
<stringname="girl_ipsum">
Morbiposuereloremnecelitdapibus,vitaeaccumsanmaurispellentesq
Vestibulumalobortismi.Vestibulumlaciniamolestiesemper.Pellente
ultricesarculacus,interdummollisnibhconvallisut.Aliquamsagitt
semalacusgravida,euaccumsanpurusvolutpat.Donectempus,estid
tristiqueconsectetur,lacusliguladignissimturpis,cursuscommodot
liberoinpurus.Phasellustempusgravidatempor.
</string>
<stringname="action_search">Buscar</string>
</resources>
Paso #5: Crea un nuevo archivo colors.xml en

res/values y agrega los siguientes colores para el tema
conMaterialDesign:
13/45
26/5/2016
colors.xml
<resources>
<colorname="darkPrimaryColor">#D32F2F</color>
<colorname="primaryColor">#F44336</color>
<colorname="accentColor">#448AFF</color>
</resources>
Paso #6: Lo siguiente es ir a res/values/dimens.xml y

aadirlasdimensionesdeabajo.
dimens.xml
<resources>
<dimenname="headerbar_elevation">4dp</dimen>
<dimenname="card_margin">16dp</dimen>
<dimenname="size_fab">56dp</dimen>
<dimenname="fab_margin">16dp</dimen>
<dimenname="avatar_size">40dp</dimen>
</resources>
Paso#7:AhoracrearemoselPOJOdelosobjetosdela
lista. Aade una nueva clase llamada Girl.java con el
cdigo de abajo. Este es el modelo de datos para los
elementosdel RecyclerView .
Girl.java
14/45
26/5/2016
importjava.util.Random;
/**
*POJOdelaschicas
*/
publicclassGirl{
privateStringname;
privateintidDrawable;
publicGirl(Stringname,intidDrawable)
this.name=name;
this.idDrawable=idDrawable;
}
publicGirl(Stringname){
this.name=name;
this.idDrawable=getRandomGirlDrawable
}
publicStringgetName(){
returnname;
}
publicintgetIdDrawable(){
returnidDrawable;
}
/**
*Asignaundrawableenformaaleatoria
*
*@returniddeldrawable
*/
privateintgetRandomGirlDrawable(){
Randomrnd=newRandom();
switch(rnd.nextInt(8)){
default:
case0:
returnR.drawable.girl1;
case1:
case2:
case3:
15/45
26/5/2016
case4:
case5:
case6:
case7:
}
}
}
Paso #8: Descarga y extrae las imgenes de este

archivo. Luego pgalas en res/drawable. Estas
permitirncrearlasminiaturasyeldetalledecadatem.
Paso#9:Aade otra clase con el nombre de Girls.java
pararepresentarunaestructuradedatosdeprueba.Con
ellasepoblareladaptador.
Losobjetosqueseusarntendrndatosaleatorios.Por
lo que vers un mtodo llamado randomList() para
cumplirestafuncin.
Girls.java
importjava.util.ArrayList;
importjava.util.List;
importjava.util.Random;
/**
*Envolturaparagenerarunalistadeejemplo
*/
publicclassGirls{
publicstaticfinalString[]girlsNamesDummy
"Catherine","Evelyn","Phyllis",
"Denise","Virginia","Ruth","Barbara"
16/45
26/5/2016
"Catherine","Melissa","Sandra",
"Diane","Betty","Sharon","Ruby"
"Linda","Marie","Deborah","Sara"
"Donna","Catherine","Louise","Catherine"
"Janice","Cheryl","Lisa","Andrea"
"Cynthia","Angela","Donna","Deborah"
};
/**
*Generaunalistadeobjetos{@linkGirl}conuntamaodeterminado
*
*@paramcountTamao
*@returnListaaleatoria
*/
publicstaticList<Girl>randomList(intcount
Randomrandom=newRandom();
List<Girl>items=newArrayList<>();
//Restriccindetamao
count=Math.min(count,girlsNamesDummy
1.1k while(items.size()<count){
Apoyos items.add(newGirl(girlsNamesDummy
}
590
161
returnnewArrayList<>(items);
}
}
Paso #10: Modifica el layout de DetailActivity.java con

ladefinicinXMLdeabajo.Bsicamenteestediseose
componede:
Un CoordinatorLayout para crear una Collapsing

Toolbar.
UnaimagenrepresentativadentrodelaAppBar.
Cardviewsparaagregarseccioneshipotticascomo:
Perfil,AmigoseIntereses.
Un Floating Action Button relacionado a la app bar
17/45
26/5/2016
para un posible inicio de chat. La clase

FloatingActionButton tambin hace parte de la
libreradesoporte.
Superimportante resaltar que el coordinator proporciona
dosatributosparaqueelFAB(engeneralparatodoslos
elementos flotantes) flote con referencia a un view
hermano.
layout_anchor : Es el view al que ser anclado el
FAB.
layout_anchorGravity : La ubicacin del elemento.
Puedes usar banderas como bottom , top , end ,

etc.
activity_detail.xml
android:fitsSystemWindows="true">
<!ObjetoconScroll>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll"
android:layout_below="@+id/app_bar"
<LinearLayout
android:orientation="vertical"
android:paddingTop="24dp">
18/45
26/5/2016
<!CardPerfil>
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin"
<LinearLayout
style="@style/Widget.CardContent
<!EtiquetaPerfil>
<TextView
android:layout_width=
android:layout_height
android:text="Perfil"
android:textAppearance
<!Textodeejemplo>
<TextView
android:text="@string/girl_ipsum"
</LinearLayout>
</android.support.v7.widget.CardView>
<!CardAmigos>
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin"
<LinearLayout
<!EtiquetaAmigos>
<TextView
android:text="Amigos(450)"
19/45
26/5/2016
<!Textodeejemplo>
<TextView
</LinearLayout>
<!CardIntereses>
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin"
<LinearLayout
<!EtiquetaIntereses>
<TextView
android:text="Intereses"
<!Textodeejemplo>
<TextView
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
20/45
26/5/2016
<!AppBar>
android:id="@+id/app_bar"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
<!Collapser>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapser"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
<!Imagendeldetalle>
<ImageView
android:id="@+id/image_paralax"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
<!Toolbar>
android:background="@android:color/transparent"
app:layout_collapseMode="pin"
app:theme="@style/CustomActionBar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
21/45
26/5/2016
<!FAB>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="@dimen/size_fab"
android:layout_height="@dimen/size_fab"
android:layout_margin="@dimen/fab_margin"
android:src="@mipmap/ic_chat"
app:borderWidth="0dp"
app:elevation="@dimen/fab_elevation"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|right|end"
Paso#11:DescargalossiguientesiconosparalaToolbar
de la actividad de detalle.Al extraer el contenido, pega
lascarpetasenres.
Paso #12: Ahora debes actualizar el men de tu
actividaddedetalle.Veares/menu/detail.xmlypegael
cdigodeabajo.Solotendremostresactionbuttonspara
aadir,agregarafavoritosylosajustes:
detail.xml
<menuxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.herprogramacion.toolbarapp.DetailActivity"
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never"/>
<item
android:id="@+id/action_add"
android:icon="@mipmap/ic_person_add"
22/45
26/5/2016
android:title="@string/action_add"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_favorite"
android:icon="@mipmap/ic_favorite"
android:title="@string/action_favorite"
app:showAsAction="ifRoom"/>
</menu>
Paso #13: Abre DetailActivity.java y agrega el cdigo

deabajo.Elobjetivoescargarlosdatosdelachicaque
vienendesdeelrecyclerysetearlosencadaview.
Si te fijas, en las acciones de los action buttons
mostramos mensajes con la llamada del mtodo
showSnackBar() . Su funcin crear un nuevo elemento
delalibreradediseollamadoSnackBarconlacadena
especificada. Este componente es muy parecido a los
Toasts, solo que permiten aadir una accin en su
contenido.
DetailActivity.java
importandroid.app.Activity;
importandroid.content.Context;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.support.design.widget.CollapsingToolbarLayout
importandroid.support.design.widget.FloatingActionButton
importandroid.support.design.widget.Snackbar
importandroid.support.v7.app.AppCompatActivity
importandroid.support.v7.widget.Toolbar;
importandroid.view.Menu;
importandroid.view.MenuItem;
importandroid.view.View;
importandroid.widget.ImageView;
23/45
26/5/2016
importcom.bumptech.glide.Glide;
publicclassDetailActivityextendsAppCompatActivity
privatestaticfinalStringEXTRA_NAME=
privatestaticfinalStringEXTRA_DRAWABLE
/**
*Iniciaunanuevainstanciadelaactividad
*
*@paramactivityContextodesdedondeselanzar
*@paramtitleItemaprocesar
*/
publicstaticvoidcreateInstance(Activity
Intentintent=getLaunchIntent(activity
activity.startActivity(intent);
}
/**
*ConstruyeunIntentapartirdelcontextoylaactividad
*dedetalle.
*
*@paramcontextContextodondeseinicia
*@paramgirlIdentificadordelachica
*@returnIntentlistoparausar
*/
publicstaticIntentgetLaunchIntent(Context
Intentintent=newIntent(context,DetailActivity
intent.putExtra(EXTRA_NAME,girl.getName
intent.putExtra(EXTRA_DRAWABLE,girl.
returnintent;
}
@Override
protectedvoidonCreate(BundlesavedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail
setToolbar();//Aadiractionbar
if(getSupportActionBar()!=null)//Habilitarupbutton
getSupportActionBar().setDisplayHomeAsUpEnabled
Intenti=getIntent();
24/45
26/5/2016
Stringname=i.getStringExtra(EXTRA_NAME
intidDrawable=i.getIntExtra(EXTRA_DRAWABLE
CollapsingToolbarLayoutcollapser=
(CollapsingToolbarLayout)findViewById
collapser.setTitle(name);//Cambiarttulo
loadImageParallax(idDrawable);//CargarImagen
//SetearescuchaalFAB
FloatingActionButtonfab=(FloatingActionButton
fab.setOnClickListener(
newView.OnClickListener(){
@Override
publicvoidonClick(Viewv
showSnackBar("OpcindeChatear"
}
}
);
}
privatevoidsetToolbar(){
//AadirlaToolbar
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
}
/**
*Secargaunaimagenaleatoriaparaeldetalle
*/
privatevoidloadImageParallax(intid){
ImageViewimage=(ImageView)findViewById
//UsandoGlideparalacargaasncrona
Glide.with(this)
.load(id)
.centerCrop()
.into(image);
}
/**
*Proyectauna{@linkSnackbar}conelstringusado
*
*@parammsgMensaje
25/45
26/5/2016
*/
privatevoidshowSnackBar(Stringmsg){
Snackbar
.make(findViewById(R.id.coordinator
.show();
}
@Override
publicbooleanonCreateOptionsMenu(Menumenu
getMenuInflater().inflate(R.menu.detail
returntrue;
}
@Override
publicbooleanonOptionsItemSelected(MenuItem
intid=item.getItemId();
switch(id){
caseR.id.action_settings:
showSnackBar("Seabrenlosajustes"
returntrue;
caseR.id.action_add:
showSnackBar("Aadiracontactos"
returntrue;
caseR.id.action_favorite:
showSnackBar("Aadirafavoritos"
returntrue;
default:
returnsuper.onOptionsItemSelected
}
}
}
Paso#14: Lo siguiente es crear nuestro layout para los

tems de la lista. Dirgete a res/layout y crea un nuevo
layoutllamadolist_item.xml.Laideaesrepresentaruna
solalneadetextoconunavatar.
list_item.xml
26/45
26/5/2016
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp">
<!Imagecirculardelalibreraexterna>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/avatar"
android:layout_width="@dimen/avatar_size"
android:layout_height="@dimen/avatar_size"
android:layout_marginRight="16dp"/>
<!Nombredelachica>
<TextViewxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_item_textview"
android:textAppearance="?attr/textAppearanceListItem"
</LinearLayout>
Paso
#15:
Crea
una
nueva
clase
llamada
SimpleAdapter.java.
Esta
clase
es
un
RecyclerView.Adapter personalizado que inflar el
nombreyavatardecadachicadesdelist_item.xml.
SimpleAdapter.java
importandroid.app.Activity;
importandroid.content.Context;
importandroid.support.v7.widget.RecyclerView
importandroid.view.LayoutInflater;
27/45
26/5/2016
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
importandroid.widget.TextView;
importcom.bumptech.glide.Glide;
importjava.util.List;
publicclassSimpleAdapterextendsRecyclerView
implementsItemClickListener{
privatefinalContextcontext;
privateList<Girl>items;
publicstaticclassSimpleViewHolderextends
implementsView.OnClickListener{
//Camposrespectivosdeunitem
publicTextViewnombre;
publicImageViewavatar;
publicItemClickListenerlistener;
publicSimpleViewHolder(Viewv,ItemClickListener
super(v);
nombre=(TextView)v.findViewById
avatar=(ImageView)v.findViewById
this.listener=listener;
v.setOnClickListener(this);
}
@Override
publicvoidonClick(Viewv){
listener.onItemClick(v,getAdapterPosition
}
}
publicSimpleAdapter(Contextcontext,List
this.context=context;
this.items=items;
}
@Override
publicintgetItemCount(){
returnitems.size();
}
28/45
26/5/2016
@Override
publicSimpleViewHolderonCreateViewHolder
Viewv=LayoutInflater.from(viewGroup
.inflate(R.layout.list_item,viewGroup
returnnewSimpleViewHolder(v,this);
}
@Override
publicvoidonBindViewHolder(SimpleViewHolder
GirlcurrentItem=items.get(i);
viewHolder.nombre.setText(currentItem
Glide.with(viewHolder.avatar.getContext
.load(currentItem.getIdDrawable
.centerCrop()
.into(viewHolder.avatar);
}
/**
*Sobrescrituradelmtododelainterfaz{@linkItemClickListener}
*
*@paramviewitemactual
*@parampositionposicindelitemactual
*/
@Override
publicvoidonItemClick(Viewview,intposition
DetailActivity.createInstance(
(Activity)context,items.get
}
interfaceItemClickListener{
voidonItemClick(Viewview,intposition);
}
Paso #16: Ahora es el turno del layout de

MainActivity.java. Ve a res/layout/activity_main.xml y
aade la siguiente definicin. Habr una App Bar con
29/45
26/5/2016
espacio flexible que se reducir al desplazar el recycler

view.
activity_main.xml
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent">
android:layout_height="match_parent">
<!ObjetoConScroll>
<android.support.v7.widget.RecyclerView
android:id="@+id/reciclador"
android:layout_below="@+id/coordinator"
android:padding="3dp"
android:scrollbars="vertical"
<!AppBar>
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
<!Toolbar>
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
30/45
26/5/2016
</RelativeLayout>
Paso #17: Ya para finalizar, abre MainActivity.java y

realizalossiguientescambios:
Aade la Toolbar (puedes crear un mtodo llamado

setToolbar() paraello).
Quita el ttulo de la app bar y setealo en el

CollapsingToolbarLayout .
Creaeladaptadorysetealoenel RecyclerView .
MainActivity.java
importandroid.os.Bundle;
importandroid.support.design.widget.CollapsingToolbarLayout
importandroid.support.design.widget.Snackbar
importandroid.support.v7.app.AppCompatActivity
importandroid.support.v7.widget.LinearLayoutManager
importandroid.support.v7.widget.RecyclerView
importandroid.support.v7.widget.Toolbar;
importandroid.view.Menu;
importandroid.view.MenuItem;
publicclassMainActivityextendsAppCompatActivity
privateRecyclerViewrecycler;
privateLinearLayoutManagerlManager;
privateCollapsingToolbarLayoutcollapser
@Override
protectedvoidonCreate(BundlesavedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main
31/45
26/5/2016
setToolbar();//AadirlaToolbar
SimpleAdapteradaptador=newSimpleAdapter
//ObtenerelRecycler
recycler=(RecyclerView)findViewById
recycler.setHasFixedSize(true);
//UsarunadministradorparaLinearLayout
lManager=newLinearLayoutManager(this
recycler.setLayoutManager(lManager);
//Crearunnuevoadaptador
recycler.setAdapter(adaptador);
}
privatevoidsetToolbar(){
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
}
@Override
publicbooleanonCreateOptionsMenu(Menumenu
getMenuInflater().inflate(R.menu.main
returntrue;
}
@Override
publicbooleanonOptionsItemSelected(MenuItem
intid=item.getItemId();
switch(id){
caseR.id.action_search:de
showSnackBar("Comenzarabuscar..."
returntrue;
caseR.id.action_settings:
showSnackBar("Seabrenlosajustes"
returntrue;
}
returnsuper.onOptionsItemSelected(item
}
32/45
26/5/2016
/**
*Proyectauna{@linkSnackbar}conelstringusado
*
*@parammsgMensaje
*/
privatevoidshowSnackBar(Stringmsg){
Snackbar
.make(findViewById(R.id.coordinator
.show();
}
}
Paso#18:EjecutalaaplicacinenAndroidStudio:
33/45
26/5/2016
Conclusin
PudisteimplementarlaToolbarenAndroid?
Bien,enestetutorialhasvistolospasosnecesariospara
crearunainterfazsimpleperovisualmenteatractiva.
La librera de soporte de diseo de Google es el gran
avance que necesitbamos para comenzar con el
MaterialDesigndeformarobusta.Noobstanteantiene
variosbugs,porloquepodemosesperarquemejorecon
34/45
26/5/2016
eltiempo.
Recuerda actualizar el SDK de Android para estar al
tanto de las mejoras y obtener el funcionamiento
completodelaslibrerasdesoporte.
Ahora el paso a seguir es comprender como crear un
NavigationDrawerenAndroid con el nuevo widget para
MaterialDesign.
Quieresaprenderadisearbasesde
datosdesde0?
Artculos Relacionados
Tutorialde
Botonesen
Android
TabLayout:
CmoAadir
PestaasEn
Android?
Controles:
TutorialDe
BotonesEn
Android
CmoCrear
UnaActividadDe
PreferenciasEn
Android?
35/45
26/5/2016
Acerca Del Autor

James Revelo
Comentarios
Comunidad
Recomendar 2
Compartir
Iniciarsesin
ordenarporelmejor
netealadiscusin...
MarioEnriqueGonzalezHernand hace2meses
Hola!,acabodeconocertublog...YLOAMO!
graciasporestecontenido!:)
1
Responder Compartir
Moder. >Mario
EnriqueGonzalezHernand hace2meses
JamesReveloUrrea
:DGraciasMario!,paratiqueeresnuevo,
publico4tutorialesalmes,asqueten
pacienciaporsivesalgodedemoras.
Saludos!
Responder Compartir
FranciscoBriceo>James
ReveloUrrea hace2meses
Hola,miratengounaduda,como
puedolograruntoolbarounnavbar
peroqueseaenbutton,gracias!
Responder Compartir
VipPunkJoshersDroopy hace4das
exelentegracias.
Responder Compartir
36/45
26/5/2016
icaiza hace21das
Porquesucedeesto...Medejaunpequeopedazo
deltextoeiconoquetengo..Micodigoesel
siguiente..Algunaidea
<android.support.design.widget.coordinatorlayout
android:fitssystemwindows="true"...="">
<android.support.v4.widget.nestedscrollview
app:layout_behavior="@string/appbar_scrolling_view_behavior">
/*CODIGO*/
</android.support.v4.widget.nestedscrollview>
<android.support.design.widget.appbarlayout
android:theme="@style/AppTheme.AppBarOverlay"
android:id="@+id/view">
<android.support.v7.widget.toolbar
verms
Responder Compartir
icaiza>icaiza hace20das
Merespondo..Elproblemaesquetena
aplicadounthemecon
<item
name="android:statusBarColor">@android:color/transparent</item>
ElstatusBareratransparenteymotivoporel
cualsevepartedeltoolbar..Sloquiteeste
itemdelthemeyListo
Responder Compartir
KEVINJAVIERVEGAMERINO hace2meses
Hola,excelentepagina,tengounproblemaalintegrar
varioselementosydondedebodemeterunswipeto
refreshparaquenochoqueconelscrolldetodala
vista,entoncescomopuedoacomodarloytambien
untablayoutconviewpager,elxmles:
<android.support.design.widget.coordinatorlayout
<android.support.v4.widget.nestedscrollview=""
<linearlayout="">
<android.support.v7.widget.cardview>
37/45
26/5/2016
<android.support.v7.widget.cardview>
<linearlayout>
<textview>
</linearlayout>
</android.support.v7.widget.cardview>
</linearlayout>
</android.support.v4.widget.nestedscrollview>
<android.support.design.widget.appbarlayout>
<android.support.design.widget.collapsingtoolbarlayout>
verms
Responder Compartir
hackcrack hace5meses
Tengounaconsulta,aversicontusuper
conocimientosalienigenasjejepuedesayudarme.
Sucedequeestoymetiendoleunmapaal
AppBarLayout,ysehaceextramadamentelento
moverteporelmapa,principalmentecuandointentas
moverteverticalmente.Porquenonosacarlodeahiy
ponerloenunRelativeLayouttepreguntaras,peroes
quenecesitoqueesteahiyaquequieroelefectode
cuandohacesscrollhaciaabajoseoculteconelfade
delatransicionnativadeAndroid.
Pasoelcodigo:
<android.support.design.widget.appbarlayout
android:id="@+id/app_bar"
android:layout_height="300dp"
android:theme="@style/Theme.App"
verms
Responder Compartir
hackcrack>hackcrack hace5meses
Solucionadoconuntouchevent:)
1
Responder Compartir
Developer hace7meses
BuenostardesJames
Estoyteniendoproblemaaltratardevereldetallede
laimagen,enlapartequemeestadandoelproblema
38/45
26/5/2016
laimagen,enlapartequemeestadandoelproblema
"java.lang.ClassCastException:
android.app.Applicationcannotbecastto
android.app.Activity"es
DetailActivity.createInstance((Activity)context,
items.get(position))
noentiendoporquemeestapasandoeso.gracias
Responder Compartir
Developer>Developer hace7meses
BuenosdiasJames,Yaloresolvileagregela
siguientelinea
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
enelmetodocreateInstance.
ejemplo
publicstaticvoidcreateInstance(Context
activity,Itemtitle){
Intentintent=getLaunchIntent(activity,title)
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
//Agregeestalinea
activity.startActivity(intent)
}
Responder Compartir
JulioAlvarado hace7meses
HolagraciasporelTuto,unaduda:alcorrerel
proyectosemecierraenelcelular,yelerrorqme
saleesenelMainActiviyenelmtodode
setToolbar(),mepodranayudar?
Responder Compartir
JamesReveloUrrea Moder. >Julio

Alvarado hace7meses
HolaJulioquetipodeerrorsale?
Responder Compartir
JulioAlvarado>JamesRevelo
Urrea hace7meses
Holagraciasporcontestar,mesaleq
noescompatiblelatoolbar,perono
entiendoqnoescompatibleconque
Responder Compartir
39/45
26/5/2016
JamesReveloUrrea
Moder. >JulioAlvarado
hace7meses
Qutalsirevisaselimportde
latoolbarqueestsusando.Si
usasAppCompatActivity
entoncesusaelpaquete
android.support.v7.widget.Toolbar
Responder
Compartir
JulioAlvarado>James
ReveloUrrea
hace7meses
Sale,voyachecar,gracias
amigo
Responder
Compartir
Enmanuel hace8meses
Buenosdias,comopuedohacerloinversomostarel
toolbaralvereldetalleyalmomentodehacerel
scrollupmantenerlaimagenyeliconoactivoy
ocultareltoolbar.
gracias
Responder Compartir
JamesReveloUrrea
hace8meses
Moder. >Enmanuel
HolaEnmanuel.Supongoquesoloquitasel
collapsinglayoutyluegousaslasbanderas
descrollqueseveenlaactividaddelista
Responder Compartir
Eliot.Net hace8meses
Quetalbuenastardes.
Preguntasepuedeincluirunfragmentoquemuestre
elmapadentrodeunGLIDEasicomoserealizacon
laimagen.Queenvezqueseaunaimagenmuestre
enunmapalaubicacinenmicasodeunclientea
visitar.
Responder Compartir
JamesReveloUrrea
hace8meses
Moder. >Eliot.Net
40/45
26/5/2016
Cuandohablasdemapaterefieresauna
imagenolaAPIdegooglemaps?
Responder Compartir
CarlosCarEd>JamesRevelo
Urrea hace8meses
Holatengounproblemaalcompilarme
sale:
Error:(31,28)Noresourcefoundthat
matchesthegivenname(at'style'with
value'@style/Widget.CardContent').
Responder Compartir
JamesReveloUrrea
Moder. >CarlosCarEd
hace8meses
Holacarlos.Descargael
proyectoyrevisaelarchivo
styles.Allseencuentraese
estiloqueteestndiciendoque
falta.
Responder
Compartir
Eliot.Net>JamesReveloUrrea
hace8meses
Efectivamente.Googlemaps,loque
meinteresaesdecirlealvendedor
cuandoentreaunclienteavisitale
pongalamarcadedondeestaubicado
dichocliente.
Peroquesemuestreasicomolo
hacesconlaimagendelapersona
queseselecciona,envezdefotodela
persona,laubicacindelamisma.
Notengomuchaexperienciaen
Android,estostutorialesmehan
ayudadobastanteadarmeunaidea
comoquierovisualizarlaaplicacin.
Responder Compartir
JamesReveloUrrea
Moder. >Eliot.Net
hace8meses
41/45
26/5/2016
hace8meses
Creoqueesposible
compaero.Esperohacerun
tutorialsobregooglemapspara
versipodemosincluiralgo
parecido.
Responder
Compartir
Eliot.Net>JamesRevelo
Urrea hace8meses
Zasgracias.mientrassigo
investigando
Responder
Compartir
JamesReveloUrrea
Moder. >Eliot.Net
hace8meses
Dalecompaero
Responder
Compartir
Enmanuel hace8meses
Saludo,estoyteniendounincovenientealtratarde
corregerlaaplicacionmepresentaelsiguiente
android.view.InflateException:BinaryXMLfileline#2:
Errorinflatingclass
android.support.design.widget.CoordinatorLayout,
Porquesera?
Responder Compartir
JamesReveloUrrea
hace8meses
Moder. >Enmanuel
Hola,tienesincluidalalibreriadediseode
soporteenelbuild.gradle?
Responder Compartir
Enmanuel>JamesReveloUrrea
hace8meses
gracias,yamefunciono
Responder Compartir
RogelioTrejo hace9meses
Cuandoinstalolaaplicacinenmiemulador,corre
perfectamente,muestratodocomodebera,peroen
elmennomuestraeliconodelaaplicacin,peroen
42/45
26/5/2016
elmennomuestraeliconodelaaplicacin,peroen
lasappssiaparececomoinstalada.
Yenmicelularsoloseinstalaperonoseejecutay
delicononihablar.
Algunasolucinalrespecto?
Responder Compartir
JamesReveloUrrea
Trejo hace9meses
Moder. >Rogelio
Tearrojaalgnerror?
Responder Compartir
Rogelio>JamesReveloUrrea
hace9meses
Mefaltabanunaslineasenelmanifest,
peroyaquedtodosolucionado:D
muchasgracias
Responder Compartir
JamesReveloUrrea
Moder. >Rogelio
hace9meses
:Deseeselproblemacon
algunosdemistutoriales,que
doyporhechoqueyatodos
sabencomohacerlo.Tengo
pendientemodificarestetuto
paraaadirleesepaso.
Saludos!
Responder
Compartir
Bluedp hace10meses
Estimados,primeroquetodoestoymuyfelizdehaber
descubiertoesteblogporqueestabuensimo!
segundo(Argentina),comodatoalmargenprobla
appenmiphone(4.4.2)perotuvoproblemasconlos
iconosdelToobarquenosevisualizaban,lo
solucioneactualizandolalibreradesoportea
"compile'com.android.support:design:22.2.1'".aunas
noquedabiendeltodo,agregarestaokperoel
coraznapareceelsetting,esperogooglesolucione
alabrevedadesto,porlomenosmuestraavancesen
cadaversin.Saludos!
43/45
26/5/2016
Responder Compartir
Luis hace10meses
Holaexcelentearticulo:)meencantosindudaalguna
muybuenosaportesgraciasporesosaportes,bien
tengounapequeadudaesperopuedanayudarme
yotratedehacerelesteejemploperocounvalor
estticoperonoseporquenomefuncionaelbotn
deregresarmepodrasayudarporfavoradecirme
dondeestoymalmicdigolotengoas
publicclassQuinesextendsAppCompatActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState)
{
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_detail)
setToolbar()//Aadiractionbar
if(getSupportActionBar()!=null)//Habilitarupbutton
getSupportActionBar().setDisplayHomeAsUpEnabled(true)
verms
Responder Compartir
JamesReveloUrrea
hace10meses
Moder. >Luis
Holaamigo.
Puesintentcambiandoamedidaabsoluta
comotienes,peroigualmefuncion.Tanto
desdeelupbuttoncomodelbackbutton.
DentrodelmtodoonOptionsItemSelected
estsusandolaopcinandroid.R.id.home?
Siesas,talvezesoestinterfiriendo.
Responder Compartir
lucas hace10meses
cuandovoyhastaabajodetodoenellistado,yluego
subodesapareceeltoolbar,cuandoentroenuna
fichayregresoallistadoaparecenuevamente,que
puedeser?
Responder Compartir
44/45
26/5/2016
JamesRevelo>lucas hace10meses
Holalucas.
Estosedebeaquetalvezcambiastelas
banderasdescrolldelatoolbar.Probaste
dejarpresionadoelscrollhaciaabajoparaque
apareciera?
Responder Compartir
RafaelValencia>JamesRevelo
hace9meses
Hola,unestupendotutorialsinduda
alguna.Tambintengoelmismo
problema,hedescargadoelcdigo,
ejecutadolaaplicacinytodofunciona
peroocasionalmentesepresentael
problema(hacerscrollhastaabajo,
luegosubiryenlugardeltoolbar
solamentehayunespacioenblanco.)
Responder Compartir
Hermosa Programacin Copyright 2016.
45/45

Idioma

Toolbar en Android - Creación de Action Bar en Material Design

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Toolbar en Android - Creación de Action Bar en Material Design

Cargado por

Copyright:

Formatos disponibles

26/5/2016

De seguro ya sabes que la Action Bar como la

conocamos, est siendo reemplazada por un nuevo

As que si deseas crear aplicaciones paraAndroid 5 en

Cmo Aadir La Toolbar En

Luego de eso implementarla es muy fcil. Solo debes

<android.support.v7.widget.Toolbar> en tus layouts

Pueden existir varias Toolbar en la interfaz con

Debes encontrar la instancia de la Toolbar con

La librera de soporte para el diseo de Android nos

En este tutorial lo usaremos para crear interacciones

AppBarLayout: Aumentando Las

Si deseas esconder la Toolbar cuando el usuario

AppBarLayout siempre debe envolver a la Toolbar

y los dems componentes pertenecientes a ella

scroll : indica que un view desaparecer al

se mantiene el scroll en la parte superior del

envuelve a la Toolbar para controlar las reacciones de

Para crear una App Bar con que contraiga, solo

El cdigo anterior contrae y expande la AppBar al

atributo app:layout_collapseMode="parallax" )para

Crear Aplicacin Android Con

Paso #4: Ve a res/values/strings.xml y agrega las

Paso #5: Crea un nuevo archivo colors.xml en

Paso #6: Lo siguiente es ir a res/values/dimens.xml y

Paso #8: Descarga y extrae las imgenes de este

Paso #10: Modifica el layout de DetailActivity.java con

Un CoordinatorLayout para crear una Collapsing

para un posible inicio de chat. La clase

layout_anchor : Es el view al que ser anclado el

Puedes usar banderas como bottom , top , end ,

Paso #13: Abre DetailActivity.java y agrega el cdigo

Paso#14: Lo siguiente es crear nuestro layout para los

Paso #16: Ahora es el turno del layout de

espacio flexible que se reducir al desplazar el recycler

Paso #17: Ya para finalizar, abre MainActivity.java y

Aade la Toolbar (puedes crear un mtodo llamado

Quita el ttulo de la app bar y setealo en el

Acerca Del Autor

JamesReveloUrrea Moder. >Julio

Hermosa Programacin Copyright 2016.

También podría gustarte