Componetes básicos en Android.

Los componentes gráficos corresponden a los elementos que permitirán la interacción del usuario con el sistema, cuando hablamos de GUI nos referimos a las interfaces gráficas de usuario así estas interfaces se construyen mediante elementos gráficos como botónes, menús, iconos, campos de texto, etiquetas de texto entre otros, una GUI combina el diseño visual y los eventos asociados a dicho diseño, así si agregamos un botón, debemos programar el evento asociado a dicho botón cuando es presionado por un usuario.

Como se mencionó nos enfocaremos en los componentes gráficos que se usan desde los archivos XML, veamos algunas de las propiedades mencionadas anteriormente.

Propiedades Básicas.

Veamos algunas propiedades básicas usadas en los componentes gráficos, estas se pueden aplicar a cualquier componente independientemente de su tipo, ya que como se mencionó todos los componentes son Views así que comparten las mismas propiedades, algunas de las más usadas son:

android:id.

Propiedad muy importante porque permite definir un identificador al control, esta propiedad se asigna a cualquier view, por ejemplo si se asinga a un campo de entrada de datos, entonces este se usará para capturar información del usuario por esa razón debemos usar un nombre diferenciador y claro.

La forma correcta de generar un identificador es la siguiente:

android:id="@+id/miCampoDeTexto"

El símbolo @+id/ quiere decir que se está generando un nuevo identificador, esto provocará que la clase R del paquete gen del proyecto cree una referencia de este objeto para que luego pueda ser manipulado por código.

En el ejemplo se crea de forma dinamica en la clase R el identificador “miCampoDeTexto” para el componente.

android:layout_width. Define el ancho asociado a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando alguno de los siguientes dos valores:

• wrap_content (Ocupa el espacio de acuerdo a su contenido)

• match_parent (Ocupa todo el espacio disponible)

  Ejemplo: android:layout_width="match_parent" o android:layout_width="290dp"

android:layout_height. Define el alto asociado a la vista, es una propiedad obligatoria y su valor se puede definir en valores absolutos o indicando alguno de los siguientes dos valores:

• wrap_content (Ocupa el espacio de acuerdo a su contenido)

• match_parent (Ocupa todo el espacio disponible)

  Ejemplo: android:layout_height="wrap_content" o android:layout_height="58dp"

android:layout_margin.

Define un margen para el componente, permitiendo establecer un espacio superior, inferior y en sus laterales, como variantes en caso de que se quiera dar espacios independientes, se puede hacer usando las propiedades marginLeft, marginRight, marginTop o marginBottom (o todos)

Ejemplo: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"

android:hint.

Esta propiedad permite desplegar un texto sobre el control a manera de ayuda mientras el usuario aun no ingrese información. (Preferible sobre la propiedad text)

Ejemplo: android:hint="Ingrese el nombre"

android:inputType.

Determina el tipo de entrada que se admitirá para la caja de texto, esto permite cierto tipo de validación de los datos y además le indica al sistema operativo que tipo de teclado (virtual) debe utilizarse.

Entre las opciones que podemos asociar para esta propiedad se tienen algunas como:

• Text
• Number
• Texturi
• Textpassword
• Phone
• Date
• TextEmailAddress

Existen muchas más opciones que se pueden utilizar según la necesidad.

Ejemplo: android:inputType="number" | android:inputType="textEmailAddress"

android:textSize.

Define un tamaño para el texto que se va a mostrar en pantalla, se debe tener en cuenta las unidades de medida donde para textos se utiliza sp

Ejemplo: android:textSize="25sp"

android:textStyle.

Define un estilo para el texto pudiendo establecer el texto en normal, negrilla, cursiva (o ambas).

Ejemplo: android:textStyle="bold" | android:textStyle="italic" | android:textStyle="bold|italic"

android:textColor.

Define un color para el texto, pudiendo agregar un color del archivo de propiedades “colors” o un valor hexadecimal

Ejemplo: android:textColor="@color/teal_700" | android:textColor="#9C27B0"

android:backgroundTint.

Define un color de fondo para el componente, igual se puede tomar el color de propiedades “colors” o un valor hexadecimal

Ejemplo: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"

android:text. Define el contenido textual asociado a la vista. Aunque su valor puede ser asignado de forma directa, aunque se recomienda fuertemente usar el archivo de strings disponible en la carpeta de recursos.

Ejemplo: android:text="Bienvenidos" | android:text="@string/titulo"

Esta propiedad es comun en vistas que en la interface del dispositivo despliegan texto, en la siguiente pantalla se muestra el archivo de recursos strings.xml donde se agregan diferentes valores para los textos

 y posteriormente se accede a dichos valores desde los view

 Ya teniendo claras las propiedades anteriores, veamos cuales son los componentes gráficos básicos 

Button.

Estos corresponden a los botones básicos que conocemos, tan solo presenta un botón con su respectivo texto internamente y un margen definido.

 

 El botón cumpliría la función básica de esperar un evento cuando sea presionado.