Tengo un pequeño problema en el diseño de un botón para mi aplicación Android. He creado un botón con efecto 3D como el que se muestra en la siguiente imagen:
Pero, si te has dado cuenta, cuando se pulsa el botón, el texto no se mueve con el resto de elementos hacia abajo, si no que se mantiene en el mismo sitio y esto hace el se pierda el efecto de botón. Tendría que verse como en la imagen siguiente:
¿Alguien tiene alguna idea de como poder solucionar esto?
Este es mi código:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/WelcomeImage"
android:src="@drawable/logo"
android:layout_marginTop="108dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:id="@+id/btStart"
android:layout_width="300dp"
android:layout_height="50dp"
android:text="Start"
android:background="@drawable/button3d"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="32dp" />
</RelativeLayout>
Este es el código del efecto 3D del botón:
button3d.xml
<?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="#A6A6A6" />
<corners android:radius="7.0dip" />
</shape>
</item>
<item android:bottom="4.0dip">
<shape>
<corners android:radius="7.0dip" />
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<item>
<shape >
<padding android:top="4.0dip" />
<solid android:color="@android:color/transparent" />
</shape>
</item>
<item>
<shape>
<corners android:radius="7.0dip" />
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</selector>
Gracias por adelantado.
ACTUALIZACIÓN:
La respuesta de x4mp73r es una autentica maravilla, pero encontré unos fallos que os vendría bien saber, incluso a x4mp73r.
El primero de ellos aparece cuando has implementado la función setOnTouchListener()
, porque cuando pulsas en el botón, el efecto del texto aparece correctamente, pero cuando sin soltar el dedo de la pantalla, lo arrastras hacia fuera del botón, este mismo vuelve a su esta normal y el texto sigue con el padding
que le toca porque aún estas tocando la pantalla. Es lioso de explicar y no os lo puedo mostrar con imágenes, pero si alguien utiliza esto, que pruebe a pulsar el botón y sin soltar, arrastrar el dedo hacia fuera del botón y se entenderá perfectamente.
Una solución simple fue separar el código del archivo button3d.xml
en dos y hacer que el método OnTouch
del botón manejara el cambio del padding
y del background
de la siguiente forma:
button3d_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#A6A6A6" />
<corners android:radius="7.0dip" />
</shape>
</item>
<item android:bottom="4.0dip">
<shape>
<corners android:radius="7.0dip" />
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</selector>
button3d_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<padding android:top="4.0dip" />
<solid android:color="@android:color/transparent" />
</shape>
</item>
<item>
<shape>
<corners android:radius="7.0dip" />
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</selector>
activity_main.xml
Solo cambiaría el botón:
<Button
android:id="@+id/btStart"
android:layout_width="300dp"
android:layout_height="50dp"
android:text="@string/startIntro"
android:textColor="@color/colorPrimary"
android:textSize="22sp"
android:paddingBottom="5dp"
android:textAllCaps="false"
android:background="@drawable/button3d_normal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="32dp" />
MainActivity.java
btStart = (Button) findViewById(R.id.btStart);
btStart.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
btStart.setBackground(ContextCompat.getDrawable(getApplicationContext(), R.drawable.button3d_pressed));
btStart.setPadding(0, px, 0, 0);
} else if (event.getAction() == MotionEvent.ACTION_UP) {
btStart.setBackground(ContextCompat.getDrawable(getApplicationContext(), R.drawable.button3d_normal));
btStart.setPadding(0, 0, 0, px);
}
return false;
}
});
El ultimo problema fue que si implementaba las views OnTouchListener
y OnClickListener
en la clase y asignaba los dos a un botón (en el mismo orden), el setOnClickListener
no me funcionaba.
La solución me trajo de cabeza pero fue muy sencilla. El método onTouch
devuelve un valor booleano, si ese valor lo devolvemos como true
, querrá decir que ya hemos terminado con cualquier acción de este botón y que no se implementara nada más aparte, pero si devolvemos false
será todo lo contrario y podemos seguir aplicándole más funciones al mismo botón.
Espero que os sirva a todos, estos botones quedan genial en una aplicación.