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