27Jun

Crear botón con una imagen y texto en Android

Hay veces que en programando para Android necesitamos crear un botón con simple icono dentro de este. Pues esta tarea suele complicarse ya que no hay una forma correcta de hacerlo. Para eso les mostraré una sencilla manera donde se controla al mismo tiempo el focused del botón y llamando a una imagen al mismo tiempo.

Archivo button.xml dentro de la carpeta layout:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:padding="16dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:text="@string/Button"
        android:textColor="#FFFFFF"
        android:paddingLeft="24dp"
        android:paddingRight="8dp"
        android:background="@drawable/button_drawable" />
        
</RelativeLayout>

Archivo button_drawable.xml dentro de la carpeta drawable:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:padding="16dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:text="@string/Button"
        android:textColor="#FFFFFF"
        android:paddingLeft="24dp"
        android:paddingRight="8dp"
        android:background="@drawable/button_drawable" />
        
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#d17826"></solid>
                </shape>
            </item>
            <item>
                <bitmap android:src="@drawable/icon_button" android:gravity="center_vertical|left" />
            </item>
        </layer-list>
    </item>
    <item android:state_focused="true" >
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#d17826"></solid>
                </shape>
            </item>
            <item>
                <bitmap android:src="@drawable/icon_button" android:gravity="center_vertical|left" />
            </item>
        </layer-list>
    </item>
    <item android:state_enabled="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#d17826"></solid>
                </shape>
            </item>
            <item>
                <bitmap android:src="@drawable/icon_button" android:gravity="center_vertical|left" />
            </item>
        </layer-list>
    </item>

    <item android:state_focused="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#d17826"></solid>
                </shape>
            </item>
            <item>
                <bitmap android:src="@drawable/icon_button" android:gravity="center_vertical|left" />
            </item>
        </layer-list>
    </item>

</selector>

Vista previa del botón:
button_save

Share this Story

Leave a Reply

Your email address will not be published. Required fields are marked *

*

zentidoo.com ® 2015. Todos los derechos reservados