INPUT TYPES

InputType

Como su nombre lo indica el inputType determina el tipo de ingreso que le vamos a permitir al usuario junto con algunas características mas.

Esta propiedad ya la estuvimos probando un poco, cuando hacíamos que solo despliegue el teclado numerico, por ejemplo. Y simpre seteandolo de manera estática en el XML.

Ahora vamos a ver como cambiarlo dinámicamente, desde la clase.

InputType - Ver/Ocultar Pass

En algunas aplicaciones suele ser necesario que el ingreso del password esté oculto, pero a su vez, darle la posibilidad al usuario de mostrar la clave para corroborarla. Esto se consigue muy facilmente, cambiando de manera dinámica el inputType del campo de ingreso.

Para eso vamos a usar un CheckBox, y su listener de onCheckedChange que es parte de las CompoundViews

IME Options

IME significa Input Method Editor, y es lo que nos permite setear el comportamiento del botón de acción que la mayoria de los teclados (soft keyboard) tienen.

Estas son acciones como NEXT, DONE, GO, SEARCH, etc. Se pueden configurar cualquiera de ellas, siempre y cuando la caja de texto sea simple línea. Si es multi-línea la acción es siempre ENTER (para cambio de línea).

Además, si se van a usar la IME Options, si o si hay que setear el inputType de la caja de texto.

android:imeOptions="actionSearch"
android:inputType="text"

IME Options

Esta opción la seteamos desde el XML, y luego desde la clase debemos definir un Listener para las Acciones del Editor (EditorActionListener). Más allá de cuál sea la acción, el Listener es siempre el mismo, y dentro de él corroboramos que sea la acción particular que seteamos.

setOnEditorActionListener(new TextView.OnEditorActionListener()


actionId == EditorInfo.IME_ACTION_NEXT

Mostrar el sentido del boolean que retorna. El mejor ejemplo es el NEXT

AutoCompletar

Si queremos darle al usuario opciones para auto-completar lo que está escribiendo, debemos usar un EditText especial, llamado AutoCompleteTextView. Además necesitamos un array de Strings para especificar las opciones, y un Adaptador (al igual que en las ListView o RecyclerView) para "adaptar" la lista a la caja de texto.

String[] contactos = {"Jose", "Martin", "Maria", "Jorge", 
                      "Mariana", "Andres", "Antonia"};

ArrayAdapter<String> adapter =
        new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, 
        contactos);

autocomplete_txt.setAdapter(adapter);

AutoCompletar

Por defecto, la función de auto completar se dispara cuando hay 2 o más caracteres escritos.

Esto se puede modificar, y está regido por el atributo o propiedad Threshold.

Se puede setear tanto desde el XML, como desde el objeto, programáticamente.

RADIO BUTTONS

RadioButtons

Los RadioButtons, se utilizan en conjunto con los RadioGroups para dar opciones al usuario.

Un RadioGroup, agrupa RadioButtons, y como hereda de un LinearLayout, hay que setearle su orientación ya sea VERTICAL u HORIZONTAL.

Vamos a comenzar creando una nueva actividad, con un Layout con 3 opciones y un botón.

RadioButtons

Luego tomamos referencia al GRUPO y seteamos el Listener de CheckedChange (cambio en la opción chequeada). Y ahí dentro, al igual que como cuando se presiona la opción de un Menu, nos fijamos cual fue el ID seleccionado.

Del mismo modo, al presionar el Botón podemos obtener el ID del RadioButton seleccionado, si es que seleccionó alguno...

RadioButtons

Definiendo el Estillo

Si quisieramos, podemos alterar la forma en la que se ve un RadioButton. Para ello, vamos a trabajar sobre su propiedad background, y vamos a definir un drawable para cada uno de sus estados: Seleccionado o NoSeleccionado. A su vez, cada uno de ellos es otro drawable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radiobutton_presionado" 
          android:state_checked="true"/>
    <item android:drawable="@drawable/radiobutton_no_presionado" 
          android:state_checked="false"/>
</selector>

RadioButtons

Definiendo el Estillo

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- Forma de cada vertice -->
    <corners
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="4dp"
        android:bottomRightRadius="4dp"/>


    <!-- Trazo -->
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent"/>

    <!-- Relleno -->
    <solid
        android:color="@color/colorAccent"/>

</shape>

BARS

RATING BAR

La barra de Raiting, como su nombre lo indica nos permite darle la opción al usuario de definir un puntaje (rating) como método de ingreso.

Se utiliza principalmente a la hora de Rankear la App en el PlayStore, pero también puede usarse como un indicador de calidad de un proceso, valoración de predicción climatica, o para una encuesta, por ejemplo. 

RATING BAR

Comenzamos por agregar una a un Layout, y veamos su propiedades:

• stepSize
• numStars
• layout_width

Tengan en cuenta el tamaño de cada estrella y el ancho de la pantalla y ojo si usan el width match_parent.

Luego agreguemos un Listener para RatingBarChange para capturar las modificaciones y un botón para setearlo

SEEKBAR

La SeekBar provee una interfaz al usuario para seleccionar un nivel o valor, entre un máximo y un mínimo. Hay que se cuidadoso al usarla, para que sea una buena experiencia para el usuario y no un problema:

• Mucha amplitud entre máximo y mínimo
• Paso muy pequeño

Personalmente, yo prefiero utilizar este elemento visual cuando el ajuste no requiere exactitud, como por ejemplo un termostato o el nivel de brillo de pantalla.

O sino para marcar un progreso de un video, por ejemplo

SEEKBAR

Una de las desventajas que tiene es que no puede setearse un valor mínimo y este siempre es 0. Y el incremento es siempre entero y unitario.

(Se puede, por programa emular un mínimo mayor a 0 y un incremento mulplicativo)

Y una de las cosas interesantes que tiene, es que se pueden marcar 2 progresos simultaneamente. Por ejempo en un streaming, el progreso de reproducción y el de descarga. Este se llama secondaryProgress.

DIALOGS

DIALOGS

Los Dialogs vienen en diferentes formatos y para diferentes acciones. Son los mensajes emergentes que solicitan la acción de usuario, ya sea para:

• Confirmar una Operación
• Solicitar ingreso de Datos
• Selección de Fecha
• Selección de Hora

La idea de los Dialogos es evitar iniciar una nueva actividad (nueva pantalla) y no marear al usuario con la navegabilidad sobre la App, y mantener el flujo.

ALERT DIALOGS

Las forma más sencilla de construir un dialog para alertar al usuario es usando Builder que nos provee Android para tal fin

new AlertDialog.Builder(DialogsActivity.this)
    .setTitle("¿Seguro que desea formatear el Telefono?")
    .setMessage("Se perderan todas sus fotos y mensajes y esta operación no podrá deshacerse")
    .setPositiveButton("Formatear", new DialogInterface.OnClickListener() {

        public void onClick(DialogInterface dialog, int whichButton) {
        }
    })
    .setNegativeButton("Mejor No", null)
    .show();

USER INPUT DIALOGS

Si queremos solicitar el ingreso de datos de usuario, creamos un AlertDialog como el ejemplo anterior y añadimos un EditText para que pueda ingresar el dato.

final EditText userInput = new EditText(DialogsActivity.this);
userInput.setInputType(InputType.TYPE_CLASS_TEXT);
dialogBuilder.setView(userInput);

TIME PICKER DIALOGS

La estructura del constructor de un selector de HORA es

new TimePickerDialog(
    parentActivity,
    new TimePickerDialog.OnTimeSetListener(){},
    defaultHora,
    defaultMin,
    24hsModeOn)

DATE PICKER DIALOGS

Analogamente al anteriro, la estructura del constructor de un selector de FECHA es

new DatePickerDialog(
    parentActivity,
    new DatePickerDialog.OnDateSetListener(){},
    defaultAño,
    defaultMes,
    defaultDia)

TEXT INPUT LAYOUT

TEXT INPUT LAYOUT

Es un nuevo elemento del Material Design para darle más dinamismo al ingreso de datos.

Es una "capa" que se agrega alrededor de un EditText para potenciarlo

<android.support.design.widget.TextInputLayout
    android:id="@+id/tilUsername"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edtUsername"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:hint="Nombre de Usuario" />
</android.support.design.widget.TextInputLayout>