Controles - Tutorial de Botones en Android PDF

26/5/2016
Curso Android
Controles:TutorialDeBotonesEnAndroid
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
Controles: Tutorial De
Botones En Android
JamesRevelo
Comments
febrero25,2016
UI
Search
18
En este tutorial veremos cmo usar botones enAndroid

con el fin de que los usuarios de tu app puedan
interactuarconelcontenido.
http://www.hermosaprogramacion.com/2016/02/controlestutorialbotonesandroid/
Qu buscas?
Lo Ms Popular
Aplicacin Android
Con Navigation
Drawer Y Tabs
1/47
26/5/2016
Primeroestudiarslaclase Button queeslaencargada

de representar
botones en la
UI.
Luego
vers
cmo
aadir eventos
de
click.
Tambin cmo
se clasifican
segn
el
Material
Design, cmo crearlos enAndroid Studio y por ltimo a
personalizarsuestilo.
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
1. Implementar Un Botn En
Android
Toolbar En Android:
Creacin De Action
Bar En Material
Design
CrearProyectoenAndroidStudio
Antes que nada abre Android Studio, ve al men de
herramientas y selecciona File > New > New
Projectparacrearunnuevoproyecto.
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/47
26/5/2016
Template
recomendada
En la configuracin del proyecto ten en cuenta los

siguientesparmetros:
ApplicationName:usaelnombreBotones.
Company Domain Name: Para el dominio elige la
entidad que represente tu creacin, puede ser
tu_nombre.com, el nombre_de_tu_empresa.com o
simplementetest.com.
Projection Location: En la ubicacin selecciona la
carpeta que tengas destinada para guardar tus
proyectos. Recuerda no usar espacios en ni
caracteresespecialesconacentos.
Ahoraenlosfactores de forma deja por defecto el SDK
mnimodeejecucinenlaversin11deAndroid.
3/47
26/5/2016
En la siguiente venta elige una actividad vaca (Empty

Activity) cmo contenedor principal para los ejemplos
queveremos:
Finalmente cambia el ttulo del archivo java para la

actividad por ActividadBotones.java al igual que su
layout ( actividad_botones.xml ). Al presionar Finish
tendrs un proyecto de prueba el cual te servir para
4/47
26/5/2016
seguirtodoeltutorial.
LaClaseButton
Un botn es un control con texto o imagen que realiza
unaaccincuandoelusuariolopresiona.LaclaseJava
quelorepresenteesButtonypuedesreferirtealdentro
deunlayoutconlaetiqueta <Button> respectivamente.
Paraagregarunbotnalaactividadprincipaldetuapp
dirgetea actividad_botones.xml y agrega la siguiente
definicin.
<?xmlversion="1.0"encoding="utf8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
5/47
26/5/2016
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones"
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="AGREGAR"/>
</RelativeLayout>
Conellocentramoselbotnenelrelativelayout.
El texto que especifica su accin especifcalo en el
atributo android:text . En el ejemplo anterior se us la
palabra "AGREGAR" .
Este cdigo debera mostrar en la ventana Preview la
siguienteimagen:
6/47
26/5/2016
AtributosdeunBotn
Siquierescambiarlaspropiedadesdeunbotnrecurrea
los atributos que la documentacin presenta en formato
JavaoXML.
Debido a que Button extiende de TextView , puedes
usartodoslosatributosdeestaclase.
Algunosdelosmsutilizadosson:
Atributo
Descripcin
android:text
Permitecambiareltextode
unbotn
android:background
Seusaparacambiarel
7/47
26/5/2016
fondodelbotn.Puedes
usarunrecursodelarchivo
colors.xml oun
drawable.
android:enabled
Determinarsielbotnest
habilitadoanteloseventos
delusuario.Usa
true (valorpor
defecto)parahabilitarloy
false encasocontrario.
android:gravity
Asignaunaposicinal
textoconrespectoalos
ejesxoydependiendode
laorientacindeseada.
Porejemplo:Siusas top ,
eltextosealinearhaciael
bordesuperior.
android:id
Representaalidentificador
delbotnparadiferenciar
suexistenciadeotros
views.
android:onClick
Almacenalareferenciade
unmtodoquese
ejecutaralmomentode
presionarelbotn.
android:textColor
Determinaelcolordeltexto
enelbotn
android:drawable*
Determinaundrawable
queserdibujadoenla
orientacinestablecida.
Porejemplo:Siusasel
atributo
android:drawableBottom ,
8/47
26/5/2016
eldrawableserdibujado
debajodeltexto.
Teniendo en cuenta la anterior tabla te invito a ver los

resultadosqueproducenusaralgunosdeesosatributos.
Cambiartextodeunbotn
Asigna
una
cadena
directamente
al
atributo
android:text paraindicarlaaccindelbotn.
<Button
android:text="Agregar"/>
Por defecto el texto del botn estar en maysculas,

pero si quieres deshabilitar esta caracterstica usa el
valorfalseenelatributo android:textAllCaps .
<Button
...
android:textAllCaps="false"/>
Ahora, si deseas cambiar el texto programticamente

usaelmtodo setText() .
Para ello abre
ActividadBotones.java . Obtn la
instancia del botn con findViewById() y luego invoca

9/47
26/5/2016
setText() con una secuencia de caracteres como
parmetro.
publicclassActividadBotonesextendsAppCompatActivity
@Override
protectedvoidonCreate(BundlesavedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_botones
Buttonboton=(Button)findViewById(
boton.setText("Ordenar");
}
}
Estoproduceelsiguienteresultado:
Cambiar texto de botn en
Androidprogramticamente
Ahora tambin es posible asignar un recurso string al
textodelbotndesdeXMLyJava.
En caso de XML usa la notacin de recurso @string o
@android:string (strings del sistema) de la siguiente
forma:
<Button
...
android:text="@string/texto_agregar"/>
En Java solo usa el operador punto para llegar al

identificadorpertenecientealaclaseR:
10/47
26/5/2016
Buttonboton=(Button)findViewById(R.id.button
boton.setText(R.string.texto_agregar);
CambiarColordeFondo
Modificar el fondo de un botn implica el cambio del
atributo android:background por un recurso de color o
drawable.
Ejemplo:
Usar el color primario del proyecto como color de
backgrounddeunbotn
Solucin:
Invoca la referencia @color/colorPrimary de tu archivo
values/colors.xml:
<Button
...
android:background="@color/colorPrimary"/>
Elresultadoes:
Cambiar background de botn
enAndroid
Sin embargo, hacer esto hace perder la reaccin de
superficiequesetenaantesporelMaterialDesign.
Laformaredondeadatampocosehacepresente.
11/47
26/5/2016
Soloquedalaelevacinalmomentodetocarelbotn.
Paraconservarelefectoycambiarelcolordelbotnusa
elatributo app:backgrountTint delasiguienteforma:
xmlns:app="http://schemas.android.com/apk/resauto"
<Button
app:backgroundTint="@color/colorPrimary"
android:text="@string/texto_agregar"
</RelativeLayout>
Astendras:
Usar
atributo
app:backgroundTint
botnAndroid
en
BotnconTextoeImagen
Enlaseccindeatributosvistequeexistenatributoscon
laforma android:drawable* para alinearuna imagen al
textodeunbotn.
12/47
26/5/2016
Para demostrar su uso veamos el siguiente ejemplo

sencillo.
Alinear a la izquierda del botn ordenar un icono
asociadoapizzas.
Solucin
Abre el layout actividad_botones.xml y agrega un
botn centrado en el padre. Cambia el color de texto a
blanco ( @android:color/white ), usa un tinte de color
rojo ( #ef9a9a ) y alinea a la izquierda el siguiente
drawabledepizza:
Tucdigodeberaquedardelasiguienteforma:
xmlns:app="http://schemas.android.com/apk/resauto"
<Button
13/47
26/5/2016
android:drawableLeft="@drawable/ic_pizza"
android:drawablePadding="8dp"
android:id="@+id/boton"
android:textColor="@android:color/white"
app:backgroundTint="#ef9a9a"
android:text="Ordenar"
</RelativeLayout>
Yelresultadosera:
Como ves, us android:drawableLeft para ubicar la

imagen en la izquierda. Si compruebas con las
sugerencias de Android tendrs varias posiciones:
derecha,abajoyarriba.
14/47
26/5/2016
LaClaseImageButton
ImageButton funciona exactamente cmo Button , solo
que en lugar de traer un texto en su background,

vieneunaimagenparaespecificarlaaccin.
Para cambiar la imagen de un image button usa el
atributo android:src . Obviamente su valor es un
drawable.
Elcontornodelbackgroundseconservacomolohemos
vistohastaahora,ladiferenciaestqueenelcentrose
ubicarlaimagenelegidaen src .
Si quieres que el background por defecto desaparezca,
asigna un color transparente o cambia el contenido con
unlistdrawable(estoloversmsadelante).
Ejemplo:
Cambiarlaimagendeunimagebuttonconelicono
delaapp.
Solucin
Lo primero es abrir el layout de la actividad y aadir un
elemento <ImageButton> centradoenelrelativelayout.
El icono de la aplicacin actual se encuentra en la
referencia @mipmap/ic_launcher . As que asigna
estevaloralatributo andriod:src .
Adicionalmente
puedes
el color del sistema

@android:color/transparent
sobre
android:background para eliminar el contorno. Pero
recuerda que esto elimina los efectos del Material

Design.
15/47
26/5/2016
<ImageButton
android:id="@+id/boton"
android:src="@mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
Ejecutalaappyverslaaparienciadelbotnfinal:
Ejemplo
de
ImageButton en
Android
CrearBotnDesdeAndroidStudio
UsalapestaaDesignqueseveenlavistadeunlayout
paraarrastrarysoltarunbotndesdelapaletaocambiar
susatributos.
1. Sitate en la ventana Palette. Luego busca el

elementoButtondelaseccinWidgets
16/47
26/5/2016
2. Lleva el puntero del mouse hacia el layout y ubcalo

segntuobjetivo.EnmicasotengounRelativeLayout,el
cual permite orientar mi botn en lugares asociados al
contenidodelpadreyaldeotrosviews.
Por el momento lo ubicar en el centro absoluto del
layout, donde el editor mostrar lneas de gua para
saberquevaloresestoyotorgando:
17/47
26/5/2016
3. Una vez elegido el lugar donde se ubicar el botn,

confirma con un click su insercin. Esto mostrar en la
ventana Properties todos los atributos del botn que
puedeseditar.
4. Si deseas, da doble click sobre el botn en el layout

paradesplegarunacajadeedicinrpidaparaelidyel
texto.
18/47
26/5/2016
Tipos De Botones En Material

Design
La documentacin sobre botones en el Material Design
noshabladetrestipos:
RaisedButtons
FlatButtons
FloatingActionButtons(FAB)
Losraisedbuttonssonlosquehemosvistohastaahora.
Tienen backgrounds rectangulares, se elevan ante el
clickdelusuarioysusuperficiereaccionaconunefecto
ripple.
Se usan sobre layouts que tienen gran variedad de
contenido para delimitar las secciones o elementos.
19/47
26/5/2016
Adems realzan la importancia de realizar una accin

relacionada.
Por el contrario, un flat button o botn sin bordes tiene

reaccin de superficie pero no se eleva al ser
presionado.Seusanparaaccionesendilogos,toolbars
ydeformapersistenteensteppers.
El Floating action button tiene las mismas interacciones

deelevacinyripplequeelraisedbutton,soloqueeste
tieneformacircular.Suobjetivoespromoverunaaccin
principalrelacionadaaunapiezadematerial.
20/47
26/5/2016
ManejarLosEventosDeUnBotn
Es de esperar que un botn dispara un evento al ser
clickeado por un usuario, lo que permitir ejecutar la
accinalaquehacereferenciadichoview.
Para procesar el evento existen varias formas de
proceder.
UsarelAtributoandroid:onClick
Anteriormentecuandovistelaclase Button semencion
la existencia de android:onClick() para asignar un
mtodo que se ejecute cuando el usuario presione el
botn.
Para ello se requiere que el mtodo cumpla con las
siguientescondiciones:
1.Queseapblico
2.Queseatipo void
3.Querecibaunparmetrodeltipo View
4.Debe declararse en la actividad que usa el mismo
layout
Ejemplo:
21/47
26/5/2016
Cambiar el texto de un Text View por el mensaje

Botn presionado: [hora_actual] al presionar un
Button.
Solucin:
Comienzaporaadiruntextviewallayout.Enmicasolo
ubicar en el centro del relative layout y por debajo
pondrelbotn:
<Button
android:text="@string/texto_agregar"
android:layout_below="@+id/textView"
<TextView
android:text="Alaespera..."
android:id="@+id/textView"
</RelativeLayout>
22/47
26/5/2016
Ahora en la actividad ActividadBotones crear un

mtodoparalosclicksllamado cambiarMensaje() .
Laideaesobtenereltextviewcomocampoparapoder
cambiarsutextocon setText() desdeelmtodo.
Para obtener la hora usa la clase Calendar y para
formatearsuestructurausa SimpleDateFormat .
ActividadBotones.java
importandroid.os.Bundle;
importandroid.support.v7.app.AppCompatActivity
importandroid.view.View;
importandroid.widget.TextView;
importjava.text.SimpleDateFormat;
importjava.util.Calendar;
importjava.util.Date;
privateTextViewtexto;
@Override
texto=(TextView)findViewById(R.id.
}
publicvoidcambiarMensaje(Viewv){
SimpleDateFormatformato=newSimpleDateFormat
DatefechaActual=Calendar.getInstance
Strings=formato.format(fechaActual
texto.setText(String.format("Botnpresionado:%s"
}
}
23/47
26/5/2016
Losiguienteesdirigirseallayoutyasignarelmtodoen
el botn con android:onClick .Al momento de hacerlo,
el motor de Android Studio debe sugerirte que
cambiarMensaje() estdisponible.
Elatributoquedaradelasiguienteforma:
<Button
...
android:onClick="cambiarMensaje"/>
Al ejecutar la app y clickear el botn tendrs el cambio

detextoporlahoraactual.
24/47
26/5/2016
UsarEscuchaAnnimaOnClickListener
Otraformaescrearunainstanciaannimadelainterfaz
View.OnClickListener para manejar los eventos del
botn.
Esto requiere usar el mtodo setOnClickListener()
para asignar el listener al botn y luego sobrescribir el
controlador onClick() conlasaccionesaejecutar.
Ejemplo:
Iniciarotraactividadalpresionarunbotn
Solucin
Loprimeroesaadirotraactividadalproyectoactualque
25/47
26/5/2016
tienes abierto (recuerda quitar el text view que se tena

antesylareferenciade android:onClick() ).
Ve al men de herramientas y presiona File > New >
Activity>EmptyActivity
NombraalanuevaactividadcomoActividadNuevay
confirma.
Lo siguiente es ir ActividadBotones y obtener la

instanciadelbotnquetenemosen onCreate() .
Luegoinvocaelmtodo setOnClickListener() desdela
instancia y como parmetro digita solamente "new O" .
EstoessuficienteparaqueAndroidStudioterecomiende
26/47
26/5/2016
lacreacindeunnuevo OnClickListener .
Al presionar ENTER o clickear la sugerencia, Android

Studio crear la escucha annima junto a la
implementacindelcontrolador onClick() :
boton.setOnClickListener(newView.OnClickListener
@Override
publicvoidonClick(Viewv){
}
});
Ahora dentro del controlador crea un nuevo Intent para

iniciar la actividad ActividaNueva . Seguido invoca
startActivity() parahacerefectivoelinicio.
boton.setOnClickListener(newView.OnClickListener
@Override
Intenti=newIntent(ActividadBotones
startActivity(i);
}
});
27/47
26/5/2016
Usar
OnClickListener
Contenedor
Sobre
el
OnClickListener tambin puede ser implementada
sobreelcontenedordelbotncomoloesunaactividado
unfragmento.
As podrs sobrescribir el controlador onClick() para
que tenga un alcance global para todos los views que
pertenezcan al contenedor. Lo que es de utilidad si se
deseasleerclickssobrevarioselementosaltiempo.
Ejemplo:
Cambiar el color del background de una actividad
dependiendo de qu botn de 4 disponibles se
presione.
Solucin:
Pon 4 botones centrados horizontalmente y uno debajo
de otro dentro del relative layout. Usa los siguientes
coloresensustextos:Verdeazulado,Verde,Verdeclaro
yLima.
actividad_botones.xml
28/47
26/5/2016
<Button
android:text="Verdeazulado"
<Button
android:text="Verde"
android:id="@+id/button2"
android:layout_below="@+id/button"
<Button
android:text="Verdeclaro"
android:layout_below="@+id/button2"
<Button
android:text="Lima"
android:layout_below="@+id/button3"
</RelativeLayout>
Implementa la escucha OnClickListener sobre la

ActividadBotones :
29/47
26/5/2016
@Override
}
Sidejaselcdigocomoest,AndroidStudioteinformar
que hay un error porque no has sobreescrito el
controlador.
La solucin manual sera escribir la firma y cuerpo del

mtodocomoesrequerido.Sinembargopuedesusarla
generacindecdigoautomticodeAndroidStudio.
Presiona ALT + insert dentro del cuerpo de la clase y
seleccionaImplementMethods
30/47
26/5/2016
Luegoselecciona onClick() delmenyconfirma.
31/47
26/5/2016
Conelloconstruirselcuerpodeformaautomtica:
@Override
Lo que sigue es detectar los eventos de click con

mltiplesbotones.
32/47
26/5/2016
Una de las formas ms sencilla es usar una sentencia

switch , donde su expresin de validez sea el
identificador del view que viene como parmetro de
onClick() .
Elalgoritmoseraelsiguiente:
Asignar la escucha a todos los botones con el

operador this .
Obtener
el
view
raz
de
la
jerarqua
con getRootView() .
Abrirun switch coneliddelviewclickeado.Elidse
obtieneconelmtodo getId() .
Elegir el color dependiendo del caso. Convierte una
definicin
hexadecimal
Color.parseColor() .
en
entero
con
Cambiar el background del contenedor con el

mtodo setBackgroundColor()
Veamos:
importandroid.graphics.Color;
importandroid.os.Bundle;
importandroid.support.v7.app.AppCompatActivity
importandroid.view.View;
@Override
findViewById(R.id.button).setOnClickListener
findViewById(R.id.button2).setOnClickListener
}
33/47
26/5/2016
@Override
intcolor;
Viewcontenedor=v.getRootView();
switch(v.getId()){
caseR.id.button:
color=Color.parseColor("#80CBC4"
break;
caseR.id.button2:
color=Color.parseColor("#A5D6A7"
break;
caseR.id.button3:
color=Color.parseColor("#C5E1A5"
break;
caseR.id.button4:
color=Color.parseColor("#E6EE9C"
break;
default:
color=Color.WHITE;//Blano
}
contenedor.setBackgroundColor(color);
}
}
Ejecuta la app y prueba clickear los 4 botones para

cambiarelbackgrounddelaactividad.
34/47
26/5/2016
PersonalizarElEstiloDeUnBotn
Ya viste algunos atributos que puedes cambiar en los
botonesparatransformarsuapariencia.Conesopuedes
iratuarchivostyles.xmlycrearestilosparaestosviews.
A continuacin te mostrar algunos casos que pueden
presentarsealahoradequererpersonalizarunbotn.
CambiarBackground
Si quieres omitir la forma por defecto del botn y los
efectos de reaccin, puedes probar usando un recurso
35/47
26/5/2016
drawabledeltipoStateList.
Esteelementorepresentamltiplesdrawablesquesern
usadosenunmismoviewsimulandocambiodeestados.
Esto se ajusta perfectamente a los botones ya que su
aparienciavarasegnlainteraccin.
Ejemplo:
Crearbackgrounddeunbotncondiseoplano(Flat
Design)
Solucin:
Lo primero que hars es crear un nuevo drawable
llamado bk_boton_plano.xml .
Para ello ve a la carpeta drawable, presiona click
derechoyseleccionaDrawableresourcefile.
ConfirmaelnombreconOK:
36/47
26/5/2016
LadefinicinXMLrequierequeelnodoprincipalseadel
tipo <selector> .
Dentro de este deben existir elementos <item> que
definan el drawable que asignar a cada estado del
botn.
Existencuatroestadosprimordiales:
normal
enfocado( state_focused )
presionado( state_pressed )
deshabilitado( state_enabled> false ).
Conloanteriorelcdigoquedaraas:
bk_boton_plano.xml
<selectorxmlns:android="http://schemas.android.com/apk/res/android"
<itemandroid:drawable="@drawable/boton_presionado"
android:state_pressed="true"/>
<itemandroid:drawable="@drawable/boton_enfocado"
android:state_focused="true"/>
<itemandroid:drawable="@drawable/boton_deshabilitado"
android:state_enabled="false"/>
<itemandroid:drawable="@drawable/boton_normal"
</selector>
Cada drawable de estado se compone de una lista de

capas de drawables para simular un borde sombreado
inferior.
El estado normal tiene asignado el drawable
boton_normal.xml el cual tiene dos en tono naranja
37/47
26/5/2016
profundo.
boton_normal.xml
<layerlistxmlns:android="http://schemas.android.com/apk/res/android"
<!Sombra>
<itemandroid:top="4dp">
<shape>
<solidandroid:color="#FF7043"/>
<cornersandroid:radius="4dip"/>
</shape>
</item>
<!Contenido>
<itemandroid:bottom="4dp">
<shape>
<solidandroid:color="#FF8A65"/>
</shape>
</item>
</layerlist>
El estado de foco simplemente cambia los colores de

ambas capas para visualizar un cambio minimo de
contraste.
boton_enfocado.xml
<!Sombra>
<shape>
<solidandroid:color="#FFCA28"/>
38/47
26/5/2016
</shape>
</item>
<!Contenido>
<shape>
<solidandroid:color="#FFD54F"/>
</shape>
</item>
</layerlist>
Y el botn presionado es exactamente lo mismo. Un

aumentodeopacidadeneltono.
71boton_presionado.xml
Apoyos
28
<!Sombra>
<shape>
<solidandroid:color="#FFA726"/>
</shape>
</item>
<!Contenido>
<shape>
<solidandroid:color="#FFB74D"/>
</shape>
</item>
</layerlist>
Con esos drawables listos, ahora puedes ir al layout de

Tecnologa de Native
39/47
26/5/2016
la actividad y modificar el atributo android:background
Tecnologa de Native
Info
para asignar la lista. Cambia el color de texto con

android:textColor ablancoparamejorarelcontrastey
NativeInfoAds
si deseas desaparecer la animacin de elevacin, usa

android:stateListAnimator conelvalorde @null .
<Button
android:textColor="@android:color/white"
android:background="@drawable/bk_boton_plano"
android:stateListAnimator="@null"
android:text="@string/texto_agregar"/>
Esteseranlosestadoslogrados:
EstiloBorderLessoBotnsinBordes
Ya habas visto que el botn sin bordes se le denomina
FlatbuttonenelMaterialDesign.
Para
crear
dicho
acabado
puedes
aplicar
el
estilo Widget.AppCompat.Button.Borderless .
40/47
26/5/2016
Porejemplo
<Button
android:text="Llamar"
style="@style/Widget.AppCompat.Button.Borderless
android:layout_centerHorizontal="true"/>
Produciraelsiguienteresultado:
Sideseasqueelcolordeltextoseaelmismodelacento,
entonces
usa Widget.AppCompat.Button.Borderless.Colored .
Conclusin
Los botones son unos de los widgets ms bsicos en
Android.
Tienenlafuncin de ayudar al usuario a decidir por sus
accionessobreelcontenidoydatosdelaapp.
41/47
26/5/2016
Saber
describir
su
comportamiento
con
OnClickListener es vital para las interacciones.
Recuerda que las acciones se ubican en el controlador

onClick() .
OpuedesusareleditordediseoenAndroidStudiopara
asignarelmtodoenelatributo android:onClick .
Usaelestilocorrectosegnlohabladoenlaseccinde
MaterialDesign.Esdecir:Raisedbuttons para acciones
estables, Flat buttons para confirmaciones o acciones
repetitivas y el Floating action button para promover
accionesprincipalessobredatos.
Quieresaprenderadisearbasesde
datosdesde0?
Artculos Relacionados
NavigationView:
Navigation
CmoCrear
CheckBox:
42/47
26/5/2016
DrawerCon
MaterialDesign
UnaActividadDe
PreferenciasEn
Android?
ControlesEn
Android
Acerca Del Autor

James Revelo
Comentarios
Comunidad
Recomendar 1
Compartir
Iniciarsesin
ordenarporelmejor
netealadiscusin...
LucasEmanuelOrtiz hace3meses
ExcelenteMaterial!Adhieroawebserveisysera
muyutiluntutorialsobreautenticacino
implementacindeAbstractAccountAuthentication!!
2
Responder Compartir
sergiomorales hace3meses
Wooow,estoesjustoloqueestababuscandohace2
das,comosiempreunexcelentetutorial,mehas
resueltomuchasdudas,magnificotrabajo.
2
Responder Compartir
JamesReveloUrrea Moder. >sergio

morales hace3meses
GraciasSergio,ojalatesirva.
Responder Compartir
MichaelRoa haceunmes
43/47
26/5/2016
MichaelRoa haceunmes
Muybuenotustutoriales!!
1
Responder Compartir
JamesReveloUrrea
haceunmes
Moder. >MichaelRoa
GraciasMichael,quebienquetesirvan!
Responder Compartir
Alejandro hace3meses
Hola,
Muybuentutorial,comotodoslosdems:)Hace
unosdasteenviuncorreoconpropuestaspara
nuevostutoriales.Tehallegado?Estabainteresado
enuntutorialenelqueusesunViewPagerparacrear
unSlideshowysipuedes,conunindicadorpara
saberenqueimagenests.Algotipoalaimagenque
tepongoaquabajo,peroenplanguay,con
animacionesyesascosasquetuhacesjaja
Siguecurrandoasdebien,quedagustovercomo
tustutorialessondelomejorquehayenlared.
Saludos
verms
Responder Compartir
JamesReveloUrrea
hace3meses
Moder. >Alejandro
HolaAlejandro.
Losientopornoresponderte,laverdades
quemellegandemasiadoscorreoscon
preguntasymeesimposiblecontestarlos
todos.Aligualmepasaconloscomentarios
quemedejan.Peroesonosignificaquelos
ignore.
Encuantoaltutoquemedices,yalotengoen
milistadetemas.Noseparacuandovayaa
salir,porloquenopodraprometerteun
44/47
26/5/2016
salir,porloquenopodraprometerteun
fecha.Perotenloporseguroquelovoya
escribir.
Saludosygraciasporseguirmiblog
compaero!
Responder Compartir
Alejandro>JamesReveloUrrea
hace3meses
Loesperarconganas.
Saludos
Responder Compartir
webserveis hace3meses
Felicidadparaeltutomuycompletoparacrear
botonesraised,flatetc...Peroveoquetehas
descuidadoencomoindicarparacambiarelcolordel
ripple.
<itemname="colorControlHighlight">id_color</item>
ysiquieresacabardecomplementareltutorial,como
crearelefectosombra"elevation"tedejounenlace
http://es.stackoverflow.com/qu...
1
Responder Compartir
JamesReveloUrrea
hace3meses
Moder. >webserveis
Graciasporelaportecompaero.Paralos
ripplepiensocrearuntutomasadelante.
Saludos!
1
Responder Compartir
LuisDavidGuzman hace3meses
Siiiii!!!!!!Fantasticoexceltentutorial,muybuenoy
muybienexplicadoxD,MuchasGraciasportan
excelentematerial!!!
1
Responder Compartir
JamesReveloUrrea Moder. >LuisDavid

Guzman hace3meses
GraciasLuis:D
Responder Compartir
45/47
26/5/2016
Ricky hace3meses
Ereselputoamojames....bienexplicado,todoslos
casosposibles,explicadoclaritoycongrficos
esclarecedores.
Solounpequeo"pero"nohasplanteadohacer
videotutorialessehacenmslivianosparanosotros
Ereselmejorjames
1
Responder Compartir
webserveis>Ricky hace3meses
Yolosvideotutorialesnomegustanparanada
entemasdeprogramacin,aportanmenosen
contenido,cuandoconoceunpocosobrela
materiateabures,encambiolostutoriales
vasdirectoalgrano,obienpuedesteneruna
mejorvistageneraldeltutorial,podersituarte
encualquierpartedeltutorialparacomprender
mejorlacosa.
Losvideotutorialessolosirvenpara
determinadascuestionesynopormostrar
bloquesdecdigoenteros,sinopequeas
funcionalidades(introduccindelenguajes,
patronesdediseo,funcionalidadesdelide).
Lostutorialesdejamessonmuyextensosy
muyprcticos,avecescomplicadosde
entender"elsistema,patrnetc..",sinotienes
siempretodoelcdigoalavista.
1
Responder Compartir
JamesReveloUrrea
hace3meses
Moder. >Ricky
ajjajajagraciasRicky.Esalaidea,especificar
loscasosquemspuedanpresentarsenos.
Mmmlosvideosannolostengoprevistos,
peroesbuenaidea.
Saludos!
Responder Compartir
GonHer hace2meses
Muybuentutoria!Tehagounapregunta:Sepuede
aumentarloscornerredondeados?aumentarel
redondeadoporejemploa5/6dp?
Saludos
46/47
26/5/2016
Saludos
Responder Compartir
JamesReveloUrrea
hace2meses
Moder. >GonHer
SiclaroGon,sihablasdelpersonalizadosolo
Hermosa Programacin Copyright 2016.
47/47

Controles - Tutorial de Botones en Android PDF

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

Controles - Tutorial de Botones en Android PDF

Cargado por

Copyright:

Formatos disponibles

26/5/2016

En este tutorial veremos cmo usar botones enAndroid

Primeroestudiarslaclase Button queeslaencargada

En la configuracin del proyecto ten en cuenta los

En la siguiente venta elige una actividad vaca (Empty

Finalmente cambia el ttulo del archivo java para la

Teniendo en cuenta la anterior tabla te invito a ver los

Por defecto el texto del botn estar en maysculas,

Ahora, si deseas cambiar el texto programticamente

instancia del botn con findViewById() y luego invoca

setText() con una secuencia de caracteres como

En Java solo usa el operador punto para llegar al

Para demostrar su uso veamos el siguiente ejemplo

Como ves, us android:drawableLeft para ubicar la

que en lugar de traer un texto en su background,

el color del sistema

recuerda que esto elimina los efectos del Material

1. Sitate en la ventana Palette. Luego busca el

2. Lleva el puntero del mouse hacia el layout y ubcalo

3. Una vez elegido el lugar donde se ubicar el botn,

4. Si deseas, da doble click sobre el botn en el layout

Tipos De Botones En Material

Adems realzan la importancia de realizar una accin

Por el contrario, un flat button o botn sin bordes tiene

El Floating action button tiene las mismas interacciones

Cambiar el texto de un Text View por el mensaje

Ahora en la actividad ActividadBotones crear un

Al ejecutar la app y clickear el botn tendrs el cambio

tienes abierto (recuerda quitar el text view que se tena

Lo siguiente es ir ActividadBotones y obtener la

Al presionar ENTER o clickear la sugerencia, Android

Ahora dentro del controlador crea un nuevo Intent para

OnClickListener tambin puede ser implementada

Implementa la escucha OnClickListener sobre la

La solucin manual sera escribir la firma y cuerpo del

Luegoselecciona onClick() delmenyconfirma.

Lo que sigue es detectar los eventos de click con

Una de las formas ms sencilla es usar una sentencia

Asignar la escucha a todos los botones con el

Cambiar el background del contenedor con el

Ejecuta la app y prueba clickear los 4 botones para

Cada drawable de estado se compone de una lista de

El estado de foco simplemente cambia los colores de

Y el botn presionado es exactamente lo mismo. Un

Con esos drawables listos, ahora puedes ir al layout de

la actividad y modificar el atributo android:background

para asignar la lista. Cambia el color de texto con

si deseas desaparecer la animacin de elevacin, usa

OnClickListener es vital para las interacciones.

Recuerda que las acciones se ubican en el controlador

Acerca Del Autor

JamesReveloUrrea Moder. >sergio

JamesReveloUrrea Moder. >LuisDavid

Hermosa Programacin Copyright 2016.

También podría gustarte