¿Cómo lograr la animación del botón Android con el texto-borrosa y sombras

M.Hamza:

Quiero lograr este botón de animación en Android. El ejemplo siguiente es de IOS. Quiero que la sombra desaparezca cuando el usuario hace clic en el botón y reaparecer una vez que el usuario suelta el botón.

Cualquier ayuda será muy apreciada.

Reaz Murshed:

Es necesario añadir color como el siguiente. Por ejemplo, el nombre del color es button_text_color.xml. Aquí está el archivo .xml que hay que poner en la colorcarpeta. Si el colorno existe la carpeta, cree uno en su resdirectorio.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

Compruebo que he añadido 50% de transparencia al color blanco en el estado prensado. Ahora sólo tiene que añadir este atributo en el Buttondonde se declara.

Ahora se necesita un dibujable fondo, para ser puesto en su drawablecarpeta. Por ejemplo, tomemos el nombre de la estirable es button_state_list_animator.xml. Esto debería tener el siguiente contenido.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Ahora su construcción es simple botón.

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

Aquí está la captura de pantalla de mi código.

Puede tener la animación de empujar hacia abajo utilizando la biblioteca , así, como se menciona en la respuesta aquí.

¡Espero que ayude!