Professional Documents
Culture Documents
2. Usa la versin del SDK mnima recomendada y aade una actividad al proyecto del
tipo Empty Activity.
Personaliza la actividad con las siguientes caractersticas:
LA CLASE CHECKBOX
La representacin en Java de este control es con la clase CheckBox.
Esto quiere decir que debes usar la etiqueta <CheckBox> en tus layouts para crearlos en
la vista.
Por ejemplo
Abre el layout actividad_principal.xml y agrega un nuevo checkbox como muestra
el siguiente cdigo:
<?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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.checkboxes.ActividadPrincipal">
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Recordarme" />
</RelativeLayout>
En la preview vers:
OBTENER VALOR DEL CHECKBOX
Si quieres saber en qu estado se encuentra actualmente el CheckBox utiliza el
mtodo isChecked().
El retorno es de tipo boolean, donde true significa checked y false unchecked.
Ejemplo
Obtener el estado de un checkbox y mostrarlo en un Toast al pulsarse el botn de
guardar.
Solucin
1. Ubica en el centro del RelativeLayout un CheckBox. En la parte inferior debes poner
un Button que se extienda completamente de forma horizontal. Su atributo text tendr
el valor de Guardar.
<CheckBox
android:id="@+id/seleccion_direccion_envio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Usar la misma direccin de facturacin" />
<Button
android:id="@+id/boton_guardar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:onClick="loguearCheckbox"
android:text="Guardar" />
</RelativeLayout>
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
<CheckBox
android:id="@+id/opcion_champinones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Championes" />
1. El layout para dicha situacin se basa en un EditText que recibe el monto del giro y
un CheckBox en la parte inferior de este, que determina si se aplican costos para asegurar
el giro en caso de robo.
Esto en definicin XML podra traducirse en un LinearLayout de orientacin vertical
con ambos views.
actividad_principal.xml
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:id="@+id/campo_monto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Monto del giro"
android:inputType="numberDecimal"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="@+id/opcion_asegurar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aplicar seguro" />
</LinearLayout>
2. Usa la interfaz TextWatcher para verificar el cambio del monto en el campo de texto.
La idea es comprobar que el valor sea mayor o igual a 2000 para marcar el checkbox
automticamente a travs de setChecked().
ActividadPrincipal.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
@Override
public void onTextChanged(CharSequence s, int start, int before,
int count) {
@Override
public void afterTextChanged(Editable s) {
String str = s.toString();
// Precondicin
if (TextUtils.isEmpty(str)) {
str = "0";
}
DESHABILITAR CHECKBOX
Usa el atributo general android:enabled con el valor de false para deshabilitar ante el
usuario un CheckBox.
Ejemplo:
Mostrar las caractersticas premium de un software deshabilitadas ante un usuario que
no tiene licencia vlida.
Solucin
Modifica el layout para que haya un TextView con un texto informativo sobre la
limitacin de cuentas premium. Por debajo sita dos checkboxes deshabilitados con las
opciones nombradas abajo.
actividad_principal.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/texto_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Solo cuentas premium"
android:textAppearance="@style/TextAppearance.AppCompat.Body2" />
<CheckBox
android:id="@+id/opcion_reporte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:focusable="true"
android:text="Generar reporte mensual" />
<CheckBox
android:id="@+id/opcion_ajuste_local"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:focusable="true"
android:text="Envo ajustado a zona de tiempo local" />
</LinearLayout>7
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Actualizar Cuenta"
android:id="@+id/boton_actualizar"
android:onClick="actualizarCuenta"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp" />
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
opcionReporte = findViewById(R.id.opcion_reporte);
opcionZona = findViewById(R.id.opcion_ajuste_local);
</GridLayout>
2. Ahora pon dos espacios. Uno en la celda (0,1) y otro en (1,0). Este elemento
se encuentra en el grupo Expert al final de la paleta como Space.
4. Ahora busca CheckBox en Widgets y agrega 5 elementos desde (2,0) a (6,0). Luego
agrega otros 5 desde (2,2) hasta (6,2).
5. Ahora modifica el texto e id de cada checkbox. Puedes hacerlo a travs del
panel Properties, pero es ms fcil dar doble click en cada elemento para hacerlo a travs
de un dilogo emergente.
Usa las siguientes categoras en los textos: Belleza, Libros y Literatura, Carreras,
Educacin, Eventos, Familia, Comidas y Bebidas, Videojuegos, Deportes, Arte.
Para los identificadores solo emplea el formato campo_<interes>.
6. Si todo sali bien, el cdigo resultante es el siguiente:
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:text="Elige tus intereses"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<Space
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_column="1"
android:layout_row="0" />
<Space
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_column="0"
android:layout_row="1" />
<CheckBox
android:id="@+id/opcion_belleza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:checked="false"
android:text="Belleza" />
<CheckBox
android:id="@+id/campo_libros_literatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:checked="false"
android:text="Libros y Literatura" />
<CheckBox
android:id="@+id/campo_comida_bebidas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="3"
android:checked="false"
android:text="Comida y Bebidas" />
<CheckBox
android:id="@+id/campo_carreras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="4"
android:checked="false"
android:text="Carreras" />
<CheckBox
android:id="@+id/campo_videojuegos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="4"
android:checked="false"
android:text="Videojuegos" />
<CheckBox
android:id="@+id/campo_educacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:checked="false"
android:text="Educacin" />
<CheckBox
android:id="@+id/campo_deportes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:checked="false"
android:text="Deportes" />
<CheckBox
android:id="@+id/campo_eventos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="6"
android:checked="false"
android:text="Eventos" />
<CheckBox
android:id="@+id/campo_familia"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="2"
android:checked="false"
android:text="Familia" />
<CheckBox
android:id="@+id/campo_arte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="6"
android:checked="false"
android:text="Arte" />
</GridLayout>
MANEJO DE EVENTOS
findViewById(R.id.opcion_tv).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Ejecutar acciones
}
});
actividad_principal.xml
<?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:orientation="vertical">
<CheckBox
android:id="@+id/opcion_mostrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/campo_contrasena"
android:layout_alignStart="@+id/campo_contrasena"
android:layout_below="@+id/campo_contrasena"
android:onClick="mostrarContrasea"
android:text="Mostrar contrasea?" />
<EditText
android:id="@+id/campo_contrasena"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Contrasea"
android:inputType="textPassword" />
</RelativeLayout>
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
opcionMostrar = (CheckBox)findViewById(R.id.opcion_mostrar);
campoContrasena = (EditText)findViewById(R.id.campo_contrasena);
}
if(opcionMostrar.isChecked()){
campoContrasena.setInputType(InputType.TYPE_CLASS_TEXT
| InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}else{
campoContrasena.setInputType(InputType.TYPE_CLASS_TEXT
| InputType.TYPE_TEXT_VARIATION_PASSWORD);
}
// Restaurar cursor
campoContrasena.setSelection(cursor);
}
}
CAMBIOS DE ESTADO CON
ONCHECKEDCHANGELISTENER
La escucha CompoundButton.OnCheckedChangeListener permite realizar operaciones
cuando el estado del botn cambia.
Para asignar una nueva instancia usa el mtodo setOnCheckedChangeListener() en la
instancia delCheckBox.
Luego sobrescribe el controlador onCheckedChanged() con las acciones que deseas
ejecutar. Este mtodo recibe dos parmetros.
buttonView: Hace referencia al checkbox que cambi su estado.
isChecked: El estado al que cambi el checkbox.
Ejemplo:
Crear una pregunta para el usuario que identifique desde que canal supo sobre la
compaa.
Las opciones son: Televisin, Radio, Peridico, Email, Amigos y Otros.
Al seleccionar Otros debe mostrarse un campo para que escriba dichas fuentes.
Solucin:
1. Modifica actividad_principal.xml donde exista:
Un TextView en la parte superior con el texto Dnde oste de nosotros?
5 elementos CheckBox en forma vertical con las opciones mencionadas.
Un EditText sin presencia (visibility en gone) por debajo de las opciones.
El resultado?
<TextView
android:id="@+id/texto_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Dnde oste de nosotros?"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<CheckBox
android:id="@+id/opcion_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Tv" />
<CheckBox
android:id="@+id/opcion_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Radio" />
<CheckBox
android:id="@+id/opcion_periodico"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Peridico" />
<CheckBox
android:id="@+id/opcion_amigo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Un amigo" />
<CheckBox
android:id="@+id/opcion_otros"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="Otros" />
<EditText
android:id="@+id/campo_otros"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginTop="16dp"
android:hint="Cules otros?"
android:inputType="textMultiLine"
android:lines="3"
android:maxLines="3"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
2. En el cdigo Java obtn las instancias de la opcin y el campo para Otros. Luego
asigna la escuchaOnCheckedChangeListener de forma annima a opcion_campo.
En su controlador onCheckedChanged() cambia la visibilidad del campo de texto
dependiendo del segundo parmetro. Para true usar la bandera VISIBLE y para
false GONE.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
opcionOtros.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean
isChecked) {
campoOtros.setVisibility(isChecked ? View.VISIBLE :
View.GONE);
}
});
}
}
PERSONALIZAR ESTILO DE CHECKBOX
Veamos algunos de los casos ms frecuentes a la hora de cambiar el aspecto de un
checkbox:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Personalizar"
app:buttonTint="@color/colorPrimary"
android:id="@+id/checkbox" />
<style name="CheckBoxIndigo">
<item name="colorAccent">@color/colorPrimary</item>
</style>
layout
<CheckBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Personalizar"
android:theme="@style/CheckBoxIndigo" />
BACKGROUND PERSONALIZADO DEL BOTN
Si deseas cambiar el background de la caja de confirmacin usa el
atributo android:button para signar un drawable de tipo lista, donde se especifiquen los
estados marcado (state_checked) y no marcado.
Ejemplo:
Crear un background para un checkbox que sea circular y tenga color aguamarina.
Solucin:
1. Crea un nuevo Drawable resource file para usar una definicin XML con un
nodo <selector>. En este deben existir dos tems. El estado chequeado y el estado
normal:
boton_checkbox.xml
<item android:drawable="@drawable/background_checkbox_on"
android:state_checked="true" />
<item android:drawable="@drawable/background_checkbox_off" />
</selector>
2. Crea dos drawables ms para materializar la definicin del background en cada estado.
En este caso usaremos el nodo <vector> para construir un drawable de vector que
simplifique la definicin del icono.
background_checkbox_on.xml
<group
android:scaleX=".2"
android:scaleY=".2"
android:translateX="6"
android:translateY="6">
<group
android:scaleX="7.5"
android:scaleY="7.5">
<path
android:fillColor="#45D0BB"
android:pathData="M12,2A10,10 0 0,1 22,12A10,10 0 0,1
12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8
0 0,0 20,12A8,8 0 0,0
12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" />
</group>
</group>
</vector>
background_checkbox_off.xml
<group
android:scaleX=".2"
android:scaleY=".2"
android:translateX="6"
android:translateY="6">
<group
android:scaleX="7.5"
android:scaleY="7.5">
<path
android:fillColor="#6E6E6E"
android:pathData="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0
0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0
22,12A10,10 0 0,0 12,2Z" />
</group>
</group>
</vector>
3. A continuacin asigna el drawable de lista en el atributo android:button de un
checkbox de ejemplo en actividad_principal.xml.
<CheckBox
android:id="@+id/checkbox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="48dp"
android:button="@drawable/boton_checkbox"
android:text="Personalizar" />
Puede que la lista de nombres se encuentre en una arreglo de recursos, en una base de
datos SQLite, que se provean desde un servicio web, desde un archivo xml, etc.
As no es posible definir en el layout con anterioridad la cantidad exacta de checkboxes
y su contenido explcitamente.
<LinearLayout
android:id="@+id/seccion_industria"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/texto_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selecciona tu industria:"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
2. Aade en la actividad principal un arreglo esttico de strings con las siguientes
industrias:
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup.LayoutParams;
import android.widget.CheckBox;
import android.widget.LinearLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal);
LinearLayout seccionIndustria = (LinearLayout)
findViewById(R.id.seccion_industria);