Android – RadioButton con aspecto custom

Hola, hoy voy a hablaros acerca de customizar vistas en Android. Específicamente voy a poner un ejemplo de como hacerlo con los RadioButtons. A veces por cuestiones del diseño nos encontramos con que necesitamos modificar una vista nativa para que se ajuste a nuestras necesidades. En el ejemplo que voy a poner voy a hacer que dos radio buttons se comporten como tabs que cargan distintos fragments, pero que tengan aspectos de botones y estén contenidas en el Toolbar.

Para empezar necesitamos definir el layout de nuestro activity

Como podéis ver hemos añadido los elementos de los que hablamos antes: un Toolbar, un RadioGroup que contiene dos RadioButtons y un FrameLayout donde colocaremos el fragment correspondiente. Respecto a los atributos a tener en cuenta nos centramos en los que tiene RadioButton.

android:button=”@android:color/transparent” – Con este atributo estamos eliminando el círculo que aparece a la izquierda del texto en el radiobutton para conseguir darle aspecto de botón.

android:background=”@drawable/radio_button_as_button” – Aquí es donde le otorgamos el aspecto que queramos, en este caso será el drawable radio_button_as_button que comentaré a continuación.

Por último con android:checked=”true” marcamos el radiobutton que estará activo por defecto (si es que queremos que haya uno siempre activo).

Ahora creamos un drawable resource file en /res/drawable con el nombre radio_button_as_button que contendrá lo siguiente:

Donde le decimos al radiobutton que su background tendrá el aspecto radio_button_as_button_checked cuando su estado sea pressed=true o checked=true y que su aspecto por defecto sea radio_button_as_button_default, siendo estos dos drawables

radio_button_as_button_checked

radio_button_as_button_default

En los cuales simplemente le damos un aspecto redondeado a su forma rectangular y le damos un color a su background.

Por último creamos un listener para el evento onClick de cada RadioButton y le asignamos el fragment que queramos.

Como resultado final tendremos algo como esto:

RadioButton 1 RadioButton 2

 

Podéis ver todo el código en el repo de github: https://github.com/kohrong/customradiobutton-android

Hacer un layout clickable con efecto Ripple

En ocasiones tenemos la necesidad de crear un elemento gráfico más complejo que un botón que nos permita realizar una acción. En este caso os voy a enseñar como conseguir que un layout pueda realizar esta funcionalidad.

Imaginemos que queremos mostrar información acerca de una cerveza en una celda. La información a mostrar podría ser su nombre, su estilo, la graduación y una foto. Nuestro objetivo es que haciendo click en la celda la aplicación navegue hacia la actividad que muestra el detalle de la cerveza en sí.

Continue…