3.5 Botones

Los botones en Android son la forma de interacción más fácil en una interfaz, ya que solo presionandolos podemos invocar una función o serie de funciones en cadena de los que él mismo nos dice que hace.

Los botones pueden ser sólo con texto, sólo una imagen o una imagen con texto, también se le pueden agregar diferentes estilo para adecuarlos al diseño de nuestra Aplicación.

ButtonAndroid

Primero tenemos un Botón tan sencillo como nos lo muestra Android. Con sus atributos básicos de altura y anchura y un texto.

ButtonAndroid

<Button
        android:id="@+id/BtnNormal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Normal"
        />

Este Botón contiene un estilo predeterminado en el archivo styles.xml el cual podemos agregarlo a cualquier Botón sin tener que duplicar las mismas  propiedades a cada uno. y como vemos solamente hemos agregado la propiedad style con el valor del nombre del estilo que queramos agregarle al Botón.

ButtonAndroid

<Button
       android:id="@+id/BtnRectangular"
       style="@style/Button"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Boton rectangular"
       />

En el archivo styles.xml el estilo que llamamos Button agregamos además de un padding y un textColor, un background al que hacemos referencia a un archivo en la carpeta drawable que se llama botonazul que es el que nos cambia el color de fondo del Botón en su estado normal y cuando lo presionamos.

styles.xml

<style name="Button">
       <item name="android:textColor">#ffffff</item>
       <item name="android:background">@drawable/botonazul</item>
       <item name="android:padding">30dp</item>
   </style>

botonazul.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
        	<solid
        		android:color="#2f6699" />
        </shape>
    </item>
    <item>
        <shape>
            <solid
        		android:color="#449def" />
        </shape>
    </item>
</selector>

Este Botón contiene un icono y un texto, el icono lo agregamos con la propiedad drawableLeft que lo pone a la izquierda del texto, pero puede se en cualquier parte, arriba, abajo o a la derecha indicándolo en la propiedad drawableTop, etc.

La propiedad drawablePadding nos pone el espacio alrededor del icono solamente.

La propiedad backgroundTint nos cambia el color del Botón.

ButtonAndroid

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_group_add_black_24dp"
        android:drawablePadding="20dp"
        android:textColor="#ffffff"
        android:padding="20dp"
        android:text="Agregar Grupo"
        android:backgroundTint="#ff6347"
        android:layout_gravity="center"
        />

Aquí tenemos un ImageButton con la imagen en la propiedad src elegimos una imagen con el logotipo de YouTube y podemos notar que se muestra en tamaño real y el área que indicamos es la parte de la imagen que se muestra que es la parte del centro.

ButtonAndroid

<ImageButton
       android:id="@+id/BtnImagen"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:src="@drawable/youtube_boton"/>

Este otro tiene la imagen como background aquí vemos que la imagen se re dimensiona a las medidas indicadas.

ButtonAndroid

<ImageButton
       android:id="@+id/BtnImagen2"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@drawable/youtube_boton"/>

Este también contiene la imagen en la propiedad background pero utilizando una imagen vectorizada.

ButtonAndroid

<ImageButton
       android:id="@+id/BtnVector"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@drawable/ic_cloud_download_black_24dp"
       />

Por último tenemos el FloatingActionButton que utiliza una imagen de vector en la propiedad src  y al cual le damos su posición relativa con la propiedad layout_gravity indicando que lo queremos al fondo a la derecha, sea cual sea el tamaño de la pantalla y su orientación vertical u horizontal end|bottom

ButtonAndroid

<android.support.design.widget.FloatingActionButton
       android:id="@+id/BtnFloat"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="end|bottom"
       android:layout_margin="15dp"
       android:src="@drawable/ic_cloud_download_black_24dp" />

 


Loading