Programación

Componentes en Android

Componentes de la interfaz gráfica en Android

Android dispone de múltiples elementos que componen la aplicación como pueden ser botones, campos de texto, desplegables, etc... Estos componentes son creados en código xml y disponen de atributos que permiten configurar las características de dicho elemento. A continuación se muestra la implementación de algunos de los componentes más básicos.

TextView

Este componente es el indicado para mostrar texto, es el equivalente a una etiqueta en html.

  1. <TextView
  2.         android:layout_width="wrap_content"
  3.         android:layout_height="wrap_content"
  4.         android:text="Hello World!"
  5.         app:layout_constraintBottom_toBottomOf="parent"
  6.         app:layout_constraintLeft_toLeftOf="parent"
  7.         app:layout_constraintRight_toRightOf="parent"
  8.         app:layout_constraintTop_toTopOf="parent" />

Nota: Los atributos de tipo constraint pertenecen a un layout Constraint.

AutoCompleteTextView

Este componente es un TextView pero con la característica añadida de autocompletado. Es necesario relacionar los datos para dicha acción ya sea mediante código Java o xml y la ayuda del adaptador ArrayAdapter.

activity.xml

  1. <AutoCompleteTextView
  2.         android:id="@+id/autocomplete"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         android:hint="Componentes"
  6.         app:layout_constraintBottom_toBottomOf="parent"
  7.         app:layout_constraintLeft_toLeftOf="parent"
  8.         app:layout_constraintRight_toRightOf="parent"
  9.         app:layout_constraintTop_toTopOf="parent" />

Activity.java

  1. public class MainActivity extends AppCompatActivity {
  3.     AutoCompleteTextView autocomplete;
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  10.         autocomplete = (AutoCompleteTextView) findViewById(R.id.autocomplete);
  11.         String [] componentes = getResources().getStringArray(R.array.componentes);
  12.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,componentes);
  14.         autocomplete.setAdapter(adapter);
  16.     }
  17. }

string.xml (datos fuente)

  1. <resources>
  2.     <string name="app_name">EditTextAutoComplete</string>
  3.     <string-array name="componentes">
  4.         <item>Monitor</item>
  5.         <item>USB</item>
  6.         <item>Tarjeta Gráfica</item>
  7.         <item>Procesador</item>
  8.         <item>Disco Duro</item>
  9.         <item>Torre</item>
  10.         <item>Placa Base</item>
  11.         <item>Ventilador</item>
  12.     </string-array>
  13. </resources>


EditText

El campo de texto o caja de texto es el componente indicado para introducir datos. Es el elemento más utilizado en formularios y es el equivalente a un input en html. La caja de texto es configurable mediante el atributo inputType en el que su valor puede variar según el tipo de dato a introducir, es decir, la caja puede estar definida para introducir un tipo de dato numérico, un tipo de dato fecha, un tipo de dato correo... Este valor puede atribuir pequeñas características distintas, como pueden ser la visualización directa del teclado númerico o un tipo de teclado que incluye el símbolo de la arroba. Otro atributo destacable es el atributo password que acepta los valores true o false permitiendo ocultar los caracteres introducidos de la contraseña.

  1. <EditText
  2.         android:id="@+id/editTextTarea"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:layout_alignParentTop="true"
  6.         android:layout_centerHorizontal="true"
  7.         android:layout_marginTop="96dp"
  8.         android:text=" "
  9.         android:inputType="textPersonName"
  10.         android:password="true"
  11. />

Button

Un botón es un tipo de elemento que permite interactuar con el usuario y que generalmente realiza algún tipo de acción.

  1. <Button
  2.         android:id="@+id/Enviar"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="Button" />

CheckBox

Las cajas de chequeo o de verificación permiten marcar o desmarcar opciones sin que se mantenga ninguna relación una opción respecto a otra.

  1. <CheckBox
  2.         android:id="@+id/checkbox1"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="Hombre"
  6.     />

Spinner

Un spinner es un elemento similar a un botón que al accionarlo despliega un conjunto de opciones (también denominadas items), es el equivalente al elemento select en html.

  1. <Spinner
  2.         android:id="@+id/spinner"
  3.         android:layout_width="368dp"
  4.         android:layout_height="wrap_content"
  5.         android:layout_marginBottom="134dp"
  6.         android:layout_marginEnd="8dp"
  7.         android:layout_marginStart="8dp"
  8.         android:layout_marginTop="97dp">

ListView

Este elemento está formado por una lista que contiene un item o un conjunto de items que pueden ser personalizables y que permite incluir un gran número de elementos ordenados de arriba hacia abajo.

  1. <ListView
  2.     android:id="@+id/listview"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5. >
  6. </ListView>

ImageView

Es uno de los elementos más utilizado para mostrar imágenes en una vista o activity. Las imágenes se almacenan dentro de la carpeta drawable que contiene los distintos directorios que corresponden a las distintas resoluciones (-dpi,-mdpi,-hdpi,...etc) manteniendo el mismo nombre de imagen en todos ellos.

  1. <ImageView
  2.     android:id="@+id/imagen"
  3.     android:layout_width="200px"
  4.     android:layout_height="200px"
  5.     android:src="@drawable/imagen"
  6. />

Independientemente de que exista una imagen asignada es posible sobrescribir la imagen desde la clase.

  1. public class MainActivity extends AppCompatActivity {
  2.     @Override
  3.     protected void onCreate(Bundle savedInstanceState) {
  4.         super.onCreate(savedInstanceState);
  5.         setContentView(R.layout.activity_main);        
  6.         imagen = (ImageView) findViewById(R.id.imagen);
  7.         image.setImageResource(R.drawable.imagen_alternativa
  8.     }
  9. }

ScrollView

El ScrollView es un elemento similar al ListView pero permite contener distintos elementos y poder desplazarse por todos los elementos haciendo uso de la función táctil del dispositivo.

  1. <ScrollView xmlns:android="//schemas.android.com/apk/res/android"
  2.     xmlns:app="//schemas.android.com/apk/res-auto"
  3.     xmlns:tools="//schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".MainActivity">
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:orientation="vertical" >
  11.         <EditText
  12.             android:id="@+id/id"
  13.             android:hint="ID"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="wrap_content" />
  16.         <EditText
  17.             android:id="@+id/nombre"
  18.             android:hint="Nombre"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="wrap_content" />
  21.         <EditText
  22.             android:id="@+id/apellido"
  23.             android:hint="Apellido"
  24.             android:layout_width="match_parent"
  25.             android:layout_height="wrap_content" />
  26.     </LinearLayout>
  27. </ScrollView>

HorizontalView

Este elemento es igual al elemento anterior ScrollView pero mostrando los elementos en sentido horizontal. Es necesario sustituir el atributo orientation a horizontal, y a su vez permite mostrar o no la barra de scroll mediante el atributo scrollbars.

  1. <LinearLayout xmlns:android="//schemas.android.com/apk/res/android"
  2.     xmlns:app="//schemas.android.com/apk/res-auto"
  3.     xmlns:tools="//schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".MainActivity">
  7.     <HorizontalScrollView
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:scrollbars="none"
  11.         >
  12.         <LinearLayout
  13.             android:layout_width="match_parent"
  14.             android:layout_height="wrap_content"
  15.             android:orientation="horizontal" >
  16.             <EditText
  17.                 android:id="@+id/id"
  18.                 android:hint="ID"
  19.                 android:layout_width="match_parent"
  20.                 android:layout_height="wrap_content" />
  21.             <EditText
  22.                 android:id="@+id/nombre"
  23.                 android:hint="Nombre"
  24.                 android:layout_width="match_parent"
  25.                 android:layout_height="wrap_content" />
  26.             <EditText
  27.                 android:id="@+id/apellido"
  28.                 android:hint="Apellido"
  29.                 android:layout_width="match_parent"
  30.                 android:layout_height="wrap_content" />
  31.         </LinearLayout>
  32.     </HorizontalScrollView>
  33. </LinearLayout>

Toast

Elemento en forma de mensaje flotante que aparece de forma temporal indicando alguna información.

  1. Toast.makeText(getApplicationContext(), "Mensaje Toast", Toast.LENGTH_SHORT).show();

WebView

Elemento representado por un navegador nativo de Android que permite mostrar algún servicio o página web en una activity y que además permite configurar un conjunto de opciones relacionadas con el navegador como pueden ser la activación de Javascript con setJavascriptEnabled() o enlazar a la ruta anterior utilizando el historial del navegador con goBack(),etc.. Se puede ampliar la información aquí. 

activity_main.xml

  1. <WebView
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:id="@+id/navegador"
  5. />

MainActivity.java

  1. WebView webview;
  2. protected void onCreate(Bundle savedInstanceState) {
  3.         super.onCreate(savedInstanceState);
  4.         setContentView(R.layout.activity_main);
  5.         webview = (WebView)findViewById(R.id.navegador);
  6.         webview.loadUrl("//bahiaxip.com");
  7.     }

MainActivity.java (WebView con opciones)

  • setJavascriptEnabled: Activación de Javascript
  • setBuiltInZoomControls: Opción de zoom
  • setWebViewClient: Mantiene las redirecciones en el mismo navegador
  1. WebView webview;
  2. protected void onCreate(Bundle savedInstanceState) {
  3.         super.onCreate(savedInstanceState);
  4.         setContentView(R.layout.activity_main);
  5.         webview = (WebView)findViewById(R.id.navegador);
  6.         webview.getSettings().setJavascriptEnabled(true);
  7.         webview.getSettings().setBuiltInZoomControls(true);        
  8.         webview.loadUrl("//bahiaxip.com");
  9.         webview.setWebViewClient(new WebViewClient(){
  10.             public boolean shouldOverrideUrlLoading(WebView view, String url){
  11.                 return false;
  12.             }
  13.         });
  14.     }

El elemento WebView requiere permisos de acceso a internet.

DatePicker

Es un elemento predefinido por Android que permite seleccionar una fecha (día, mes, año) y almacenarla en una variable o en otro elemento, para después poder realizar algún tipo de acción.

A continuación un ejemplo básico de DatePicker

archivo xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="//schemas.android.com/apk/res/android"
  3.     xmlns:app="//schemas.android.com/apk/res-auto"
  4.     xmlns:tools="//schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="xip.midominio.com.datepicker.MainActivity">
  9.     <TextView
  10.         android:id="@+id/texto"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="Hello World!"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintLeft_toLeftOf="parent"
  16.         app:layout_constraintRight_toRightOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.     <Button
  19.         android:id="@+id/boton"
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:text="Enviar"
  23.         />
  24. </android.support.constraint.ConstraintLayout>

archivo java

  1. package xip.midominio.com.datepicker;
  2. import android.app.DatePickerDialog;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.Button;
  7. import android.widget.DatePicker;
  8. import android.widget.TextView;
  9. import android.view.View.OnClickListener;
  11. import java.util.Calendar;
  12. public class MainActivity extends AppCompatActivity implements OnClickListener {
  13.     TextView texto;
  14.     Button boton;
  15.     @Override
  16.     protected void onCreate(Bundle savedInstanceState) {
  17.         super.onCreate(savedInstanceState);
  18.         setContentView(R.layout.activity_main);
  19.         texto = (TextView) findViewById(R.id.texto);
  20.         boton = (Button) findViewById(R.id.boton);
  21.         boton.setOnClickListener(this);
  22.     }
  24.     public void onClick(View v){
  25.         switch(v.getId()){
  26.             case R.id.boton:
  27.                 final Calendar c = Calendar.getInstance();
  28.                 int mYear = c.get(Calendar.YEAR);
  29.                 int mMonth = c.get(Calendar.MONTH);
  30.                 int mDay = c.get(Calendar.DAY_OF_MONTH);
  32.                 DatePickerDialog dpd = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
  33.                     @Override
  34.                     public void onDateSet(DatePicker datePicker, int year, int month, int day) {
  35.                         texto.setText(day+"-"+month+"-"+year);
  36.                     }
  37.                 },mYear,mMonth,mDay);
  38.                 dpd.show();
  39.                 break;
  40.             default:
  41.                 break;
  42.         }
  43.     }
  44. }

TimePicker

Es el mismo elemento que DatePicker pero permite establecer la hora (horas y minutos) en lugar de la fecha. 

A continuación un ejemplo de TimePicker manteniendo el mismo código xml que el ejemplo DatePicker.


  1. package xip.midominio.com.datepicker;
  2. import android.app.DatePickerDialog;
  3. import android.app.TimePickerDialog;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.Button;
  8. import android.widget.DatePicker;
  9. import android.widget.TextView;
  10. import android.view.View.OnClickListener;
  11. import android.widget.TimePicker;
  12. import java.util.Calendar;
  13. public class MainActivity extends AppCompatActivity implements OnClickListener {
  14.     TextView texto;
  15.     Button boton;
  16.     int mHour,mMinute;
  17.     @Override
  18.     protected void onCreate(Bundle savedInstanceState) {
  19.         super.onCreate(savedInstanceState);
  20.         setContentView(R.layout.activity_main);
  21.         texto = (TextView) findViewById(R.id.texto);
  22.         boton = (Button) findViewById(R.id.boton);
  23.         boton.setOnClickListener(this);
  24.     }
  25.     public void onClick(View v){
  26.         switch(v.getId()){
  27.             case R.id.boton:
  28.                 TimePickerDialog tpd = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
  29.                     @Override
  30.                     public void onTimeSet(TimePicker timePicker, int hour, int minute) {
  31.                         texto.setText(hour+":"+minute);
  32.                     }
  33.                 },mHour,mMinute,false);
  34.                 tpd.show();
  35.                 break;
  36.             default:
  37.                 break;
  38.         }
  39.     }
  40. }



Comentarios: 0

Para poder comentar es necesario iniciar sesión


Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso