Android Diseño de La Interfaz de Usuario - Controles Basicos

UNIDAD TEMÁTICA II: Diseño de la interfaz de usuario
Controles Básicos
La interfaz de usuario es una parte fundamental de las aplicaciones Android. Es el

conjunto de elementos que permiten al usuario comunicarse e interaccionar con la app.
En esta unidad veremos los controles (Views) que nos ofrece Android para mostrar e
interactuar con la información en distintos formatos. Las Clases de Vistas de Android más
utilizadas y que se pueden usar para crear campos de entrada y salida útiles son las
siguientes: TextView, EditText, Button, ImageView, ImageButton, CheckBox, Radio button,
RadioGroup, ListView, Spinner, AutoCompleteTextView entre otras.
Button
En Android, Button es un control de interfaz de usuario que se utiliza para realizar una
acción cada vez que el usuario hace clic o toca en él.
En general, los botones en Android contendrán un texto o un icono o ambos y realizarán
una acción cuando el usuario lo toque.
A continuación, se muestra la representación gráfica del uso de botones en aplicaciones de
Android.
En Android, tenemos un tipo diferente de botones disponibles para usar según nuestros
requisitos, esos son ImageButton, ToggleButton, RadioButton.
En Android, podemos crear un control de botón de dos maneras, ya sea en un archivo de
layout XML o crearlo en el archivo Activity mediante programación.
Crear botón en archivo de diseño XML

A continuación, se muestra la forma de definir el control de botón en el archivo de diseño
XML en la aplicación de Android.
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:orientation="vertical" android:layout_width="match_parent"
3. android:layout_height="match_parent">
4. <Button
5. android:id="@+id/addBtn"
6. android:layout_width="wrap_content"
7. android:layout_height="wrap_content"
8. android:text="Add" />
9. </LinearLayout>
Crear control de botón en archivo de actividad

En Android, podemos crear control de botones mediante programación en un archivo de
actividad según nuestros requisitos.
A continuación, se muestra el ejemplo de creación de control de botón de forma dinámica
en el archivo de actividad.
1. val layout:LinearLayout = findViewById<LinearLayout>(R.id.linearLayout)

2. val btn:Button = Button(this)
3. btn.text="Test"
4. layout.addView(btn)
Responder a eventos de clic
Cuando el usuario hace clic en un botón, el objeto Button recibe un evento de clic.
Para definir el controlador de eventos de clic para un botón, agregue el atributo
android:onClick al elemento <Button> en su diseño XML. El valor de este atributo debe ser
el nombre del método al que desea llamar en respuesta a un evento de clic. La actividad
que aloja el diseño debe implementar el método correspondiente.
Por ejemplo, aquí hay un diseño con un botón que usa android:onClick:
1. <?xml version="1.0" encoding="utf-8"?>

2. <Button xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/button_send"
6. android:text="@string/button_send"
7. android:onClick="sendMessage" />
Dentro de la Actividad que aloja este diseño, el siguiente método maneja el evento click:
1. /** Called when the user touches the button */

2. fun sendMessage(view: View) {
3. // Do something in response to button click
4. }
El método que declares en el atributo android:onClick debe tener un id exactamente como

se muestra arriba. Específicamente, el método debe:
• Ser public
• Return void
• Definir un View como su único parámetro (esta será la View en la que se hizo clic)
Usando un OnClickListener
También puede declarar el controlador de eventos de clic mediante programación en lugar
de hacerlo en un diseño XML. Esto podría ser necesario si crea una instancia del Botón en
tiempo de ejecución o si necesita declarar el comportamiento del clic en una subclase de
Fragmento.
Para declarar el controlador de eventos mediante programación, cree un objeto
View.OnClickListener y asígnelo al botón llamando a setOnClickListener
(View.OnClickListener). Por ejemplo:
1. val button: Button = findViewById(R.id.button_send)

2. button.setOnClickListener {
4. }
Atributos de control de botones de Android
Los siguientes son algunos de los atributos comúnmente utilizados relacionados con el
control de botones en aplicaciones de Android.
Atributo Descripción
android:id Se usa para identificar de forma exclusiva el control
android:gravity Se utiliza para especificar cómo alinear el texto como
izquierda, derecha, centro, arriba, etc.
android:text Se usa para configurar el texto.
android:textColor Se usa para cambiar el color del texto.
android:textSize Se utiliza para especificar el tamaño del texto.
android:textStyle Se usa para cambiar el estilo (negrita, cursiva, negrita) del
texto.
android:background Se usa para establecer el color de fondo para el control de
botones.
android:padding Se utiliza para configurar el relleno desde la izquierda,
derecha, arriba y abajo.
android:drawableBottom Se puede dibujar en la parte inferior del texto.
android:drawableRight Se puede dibujar a la derecha del texto.
android:drawableLeft Se puede dibujar a la izquierda del texto.
Ejemplo del control Button en Android

El siguiente es el ejemplo de la definición de un botón y dos controles EditText en
LinearLayout para obtener los datos de los controles EditText cuando se hace clic en el
botón en la aplicación de Android.
Código archivo button_control.xml

5. <TextView
6. android:id="@+id/tv_primer_numero"
9. android:layout_marginLeft="100dp"
10. android:layout_marginTop="150dp"
11. android:text="Primer Numero" />
12. <EditText
13. android:id="@+id/et_primer_numero"
17. android:ems="10" />
18. <TextView
19. android:id="@+id/tv_segundo_numero"
22. android:text="Segundo Numero"
23. android:layout_marginLeft="100dp" />
24. <EditText
25. android:id="@+id/et_segundo_numero"
29. android:ems="10" />
30. <Button
31. android:id="@+id/btn_suma"
35. android:text="Sumar" />
36. </LinearLayout>
Código archivo MainActivity.kt
1. package com.uaa.controlesbasicos
2.
3. import androidx.appcompat.app.AppCompatActivity
4. import android.os.Bundle
5. import android.util.Log
6. import android.widget.Toast
7. import kotlinx.android.synthetic.main.button_control.*
8.
9. class MainActivity : AppCompatActivity() {
10.
11. override fun onCreate(savedInstanceState: Bundle?) {
12. super.onCreate(savedInstanceState)
13. setContentView(R.layout.button_control)
14.
15.
16. btn_suma.setOnClickListener {
17. if (et_primer_numero.text.isEmpty() || et_primer_numero.text.isEmpty()
) {
18. Toast.makeText(
19. applicationContext,
20. "Por favor ingresa todos los campos",
21. Toast.LENGTH_SHORT
22. ).show()
23. } else {
24. try {
25. val num1 = et_primer_numero.text.toString().toDouble()
26. val num2 = et_segundo_numero.text.toString().toDouble()
27. Toast.makeText(
29. "Suma = ${num1 + num2}",
31. ).show()
32. } catch (e:NumberFormatException) {
33. Toast.makeText(
35. "Por favor ingrese solo numeros",
37. ).show()
38. Log.println(Log.ERROR,"Error:",e.toString())
39. }
40.
41. }
42. }
43. }
44. }
Resultado de la Aplicación
ToggleButton
En Android, ToggleButton es un control de interfaz de usuario que se utiliza para mostrar

los estados ON(Checked) y OFF(Unchecked) como un botón con un indicador luminoso.
Un ToggleButton permite al usuario cambiar una configuración entre dos estados. Puede
agregar un ToggleButton básico a su diseño con el objeto ToggleButton. Android 4.0 (API
nivel 14) presenta otro tipo de botón de alternancia llamado Switch que proporciona un
control deslizante, que puede agregar con un objeto Switch. SwitchCompat es una versión
del widget Switch que se ejecuta en dispositivos de nuevo a API 7.
Si necesita cambiar el estado de un botón usted mismo, puede usar el método
CompoundButton.setChecked() o CompoundButton.toggle().
A continuación, se muestra la representación gráfica del uso de ToggleButton en
aplicaciones de Android.
Las clases clave son las siguientes:
• ToggleButton
• Switch
• SwitchCompat
• CompoundButton
De manera predeterminada, el ToggleButton de Android estará en estado OFF

(Unchecked). Podemos cambiar el estado predeterminado de ToggleButton usando el
atributo android:checked.
En el caso, si queremos cambiar el estado de ToggleButton a ON (Checked), entonces
debemos configurar android:check = "true" en nuestro archivo de diseño XML.
En Android, podemos crear el control ToggleButton de dos maneras, ya sea en un archivo
de diseño XML o crearlo en el archivo de actividad mediante programación.
Crear ToggleButton en un archivo de diseño XML

A continuación, se muestra la forma de ejemplo para definir el control ToggleButton en el
archivo de diseño XML en la aplicación de Android.
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent" android:layout_height="match_parent">
4. <ToggleButton
5. android:id="@+id/toggle1"
10. android:checked="true"
11. android:textOff="OFF"
12. android:textOn="ON"/>
13. </RelativeLayout>
Si observa el fragmento de código anterior, aquí definimos el control ToggleButton y

configuramos el estado ToggleButton en ON usando el atributo android:checked en el
archivo de diseño xml.
Crear control ToggleButton en el archivo de actividad

En Android, podemos crear el control ToggleButton mediante programación en un archivo
de actividad según nuestros requisitos.
A continuación, se muestra el ejemplo de la creación dinámica del control ToggleButton
en un archivo de actividad.
1. val layout = findViewById<LinearLayout>(R.id.mainLayout)

2. val tb = ToggleButton(this)
3. tb.textOff = "OFF"
4. tb.textOn = "ON"
5. tb.isChecked = true
6. layout.addView(tb)
Así es como podemos definir ToggleButton en el archivo de diseño XML o mediante

programación en el archivo de actividad según nuestros requisitos.
Manejar eventos Android ToggleButton Click
En general, cada vez que el usuario hace clic en ToggleButton, podemos detectar si
ToggleButton está en estado ON u OFF y podemos manejar el evento de clic
ToggleButton en el archivo de actividad usando setOnCheckedChangeListener como se
muestra a continuación.
1. tg_btn.setOnCheckedChangeListener { _ , isChecked ->

2. if (isChecked) {
3. // The toggle is enabled
4. } else {
5. // The toggle is disabled
6. }
7. }
Así es como podemos manejar los eventos de clic de ToggleButton en aplicaciones de
Android según nuestros requisitos.
Atributos del control ToggleButton de Android
control ToggleButton en aplicaciones de Android.
android:id Se utiliza para identificar de forma exclusiva el control.
android:checked Se utiliza para especificar el estado actual del botón de alternar
android:gravedad Se utiliza para especificar cómo alinear el texto como izquierda,
derecha, centro, arriba, etc.
android:texto Se usa para establecer el texto.
android:textOn Se utiliza para configurar el texto cuando el botón de alternancia
está en estado ON / Checked.
android:textOff Se utiliza para configurar el texto cuando el botón de alternar está
en estado DESACTIVADO / Sin marcar.
android:textStyle Se utiliza para cambiar el estilo (negrita, cursiva, negrita) del texto.
android:fondo Se utiliza para establecer el color de fondo para el control del botón
de alternar.
android:relleno Se utiliza para configurar el relleno desde la izquierda, derecha,
arriba y abajo.
android:drawableBottom Se puede dibujar en el siguiente texto.
android: drawableRight Se puede dibujar a la derecha del texto.
android: drawableLeft Se puede dibujar a la izquierda del texto.
Ejemplo del control ToggleButton en Android
El siguiente es el ejemplo de definir dos controles ToggleButton y un control Button en

LinearLayout para obtener el estado de los controles ToggleButton cuando hacemos clic
en el control Button en la aplicación de Android.
Código archivo toggle_button_control.xml

3. android:id="@+id/mainLayout"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:gravity="center"
7. android:orientation="vertical">
8.
9. <LinearLayout
13. android:orientation="horizontal">
14.
15. <ToggleButton
16. android:id="@+id/tg_btn_1"
19. android:layout_margin="15dp"
21. android:text="ToggleButton" />
22.
23. <ToggleButton
24. android:id="@+id/tg_btn_2"
28. android:text="ToggleButton" />
29. </LinearLayout>
30.
31. <LinearLayout
36.
37. <Button
38. android:id="@+id/btn_enviar"
41. android:text="Enviar" />
42. </LinearLayout>
43.
44. </LinearLayout>
1. package com.uaa.controlesbasicos
2.
5. import android.util.Log
7. import kotlinx.android.synthetic.main.toggle_button_control.*
8.
9.
11.
14. setContentView(R.layout.toggle_button_control)
15.
16.
17.
18. tg_btn_1.setOnCheckedChangeListener { _, isChecked ->
19. if (isChecked) {
21. Toast.makeText(
23. "Toggle Button1 Cambio a ON",
25. ).show()
26. } else {
28. Toast.makeText(
30. "Toggle Button1 Cambio a OFF",
32. ).show()
33. }
34. }
35.
36.
37. tg_btn_2.setOnCheckedChangeListener { _, isChecked ->
38. if (isChecked) {
40. Toast.makeText(
42. "Toggle Button2 Cambio a ON",
44. ).show()
45. } else {
47. Toast.makeText(
49. "Toggle Button2 Cambio a OFF",
51. ).show()
52. }
53. }
54.
55.
56. btn_enviar.setOnClickListener {
57. Toast.makeText(
59. "Toggle Button1 - ${tg_btn_1.text} \n Toggle Button2 - ${tg_btn_2
.text}",
60. Toast.LENGTH_LONG
61. ).show();
62. }
63. }
ImageButton
En Android, ImageButton es un control de interfaz de usuario que se utiliza para mostrar

un botón con imagen y realizar una acción cuando el usuario hace clic o toca en él.
Por defecto, el ImageButton se ve igual que el botón normal y realiza una acción cuando
el usuario hace clic o lo toca, pero la única diferencia es que agregaremos una imagen
personalizada al botón en lugar de texto.
A continuación, se muestra la representación gráfica del uso de botones de imagen en
En Android, podemos agregar una imagen al botón usando el atributo <ImageButton>

android:src en el archivo de diseño XML o usando el método setImageResource().
En Android, podemos crear el control ImageButton de dos maneras, ya sea en un archivo

Crear ImageButton en un archivo de diseño XML

La siguiente es la forma de ejemplo para definir el control ImageButton en el archivo de
diseño XML en la aplicación de Android.
1. <LinearLayout
5.
6. <ImageButton
7. android:id="@+id/imageButton"
10. android:layout_weight="1"
11. android:background="@android:color/transparent"
12. android:textAlignment="center"
13. app:srcCompat="@android:drawable/ic_menu_add" />
14.
15. </LinearLayout>
Si observa el fragmento de código anterior, aquí definimos el control ImageButton y

mostramos la imagen de la carpeta dibujable usando el atributo android:src en el archivo
de diseño xml.
Crear control ImageButton en archivo de actividad
En Android, podemos crear el control ImageButton mediante programación en un archivo
de actividad según nuestros requisitos.
A continuación, se muestra el ejemplo de la creación de control ImageButton
dinámicamente en el archivo de actividad.
1. val layout = findViewById <LinearLayout>(R.id.mainLayout)

2. val btn = ImageButton(this)
3. btn.setImageResource(android.R.drawable.ic_menu_add)
4. layout.addView(btn)
Anndroid Handle ImageButton Click Events

En general, cada vez que el usuario hace clic en ImageButton, el objeto ImageButton
recibirá un evento de clic.
En Android, podemos definir el evento de clic de botón de dos maneras, ya sea en un
archivo de diseño XML o crearlo en el archivo de actividad mediante programación.
Definir evento de clic de ImageButton en archivo de diseño XML
Podemos definir el controlador de eventos de clic para el botón agregando el atributo
android:onClick al elemento <ImageButton> en nuestro archivo de diseño XML.
El valor del atributo android:onClick debe ser el nombre del método al que debemos llamar
en respuesta a un evento de clic y el archivo de actividad que aloja el diseño XML debe
implementar el método correspondiente.
El siguiente es el ejemplo de definir un evento de clic de botón usando el atributo
android:onClick en el archivo de diseño XML.

3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. xmlns:tools="http://schemas.android.com/tools"
8. android:orientation="vertical"
9. tools:context=".MainActivity">
10.
11. <ImageButton
12. android:id="@+id/btnAdd"
13. android:layout_width="100dp"
14. android:layout_height="100dp"
15. android:onClick="addOperation"
16. app:srcCompat="@android:drawable/ic_input_add" />
17.
18. </LinearLayout>
En la Actividad que aloja nuestro archivo de diseño XML, necesitamos implementar un

método de evento de clic como se muestra a continuación
1. /** Called when the user touches the button */

2. public fun addOperation(view: View) {
4. }
Definir evento de clic de ImageButton en el archivo de actividad
En Android, podemos definir el evento de clic ImageButton mediante programación en el
archivo Actividad en lugar del archivo de diseño XML.
Para definir el clic del botón mediante programación, cree el objeto View.OnClickListener
y asígnelo al botón llamando a setOnClickListener (View.OnClickListener) como se
muestra a continuación.
1. var btnAdd = findViewById<ImageButton>(R.id.btnAdd);

2. btnAdd.setOnClickListener {
4. }
Así es como podemos manejar los eventos de clic de ImageButton en aplicaciones de

Atributos de control de ImageButton de Android
control ImageButton en aplicaciones de Android.
android:src Se utiliza para especificar el archivo fuente de la imagen.
android:background Se utiliza para establecer el color de fondo para un control de botón

de imagen.
android:padding Se utiliza para configurar el espaciado a la izquierda, derecha, arriba

y abajo del botón de imagen.
android:baseline Se utiliza para establecer el desplazamiento de la línea base dentro

de la vista.
Ejemplo del control ImageButton en Android
El siguiente es el ejemplo de la definición de un ImageButton y dos controles EditText en
LinearLayout para obtener los datos de los controles EditText cuando se hace clic en
ImageButton en la aplicación de Android.
Código archive actilvity_main.xml

3. xmlns:app="http://schemas.android.com/apk/res-auto"
10.
11. <LinearLayout
16.
17. <LinearLayout
20. android:layout_weight="0.5"
22.
23. <ImageButton
24. android:id="@+id/btnAdd"
27. android:layout_gravity="left"
30. android:scaleType="fitXY"
31. app:srcCompat="@android:drawable/ic_input_add" />
32. </LinearLayout>
33.
34. <LinearLayout
37. android:layout_weight="0.5"
39.
40. <ImageButton
41. android:id="@+id/btnRemove"
44. android:layout_gravity="right"
48. app:srcCompat="@android:drawable/ic_menu_delete" />
49. </LinearLayout>
50. </LinearLayout>
51.
52. <LinearLayout
53. android:id="@+id/layoutBotones"
57. android:orientation="vertical" />
58.
59. </LinearLayout>
1. package com.uaa.myapplication
2.
5. import android.view.View
7. import kotlinx.android.synthetic.main.activity_main.*
8. import android.view.ViewGroup
9. import android.widget.Button
10. import android.widget.LinearLayout
11. import androidx.core.content.ContextCompat
12. import kotlin.random.Random
13. import androidx.core.app.ComponentActivity
14. import androidx.core.app.ComponentActivity.ExtraData
15. import androidx.core.content.ContextCompat.getSystemService
16. import android.icu.lang.UCharacter.GraphemeClusterBreak.T
17.
18.
20.
21. var index = 0
22. var buttons = arrayListOf<Button>()
23. var iconos = arrayOf(
24. android.R.drawable.ic_menu_add,
25. android.R.drawable.ic_delete,
26. android.R.drawable.ic_menu_compass,
27. android.R.drawable.ic_dialog_alert,
28. android.R.drawable.ic_dialog_email,
29. android.R.drawable.ic_input_delete,
30. android.R.drawable.ic_input_add,
31. android.R.drawable.ic_btn_speak_now,
32. android.R.drawable.ic_input_get,
33. android.R.drawable.ic_dialog_info,
34. android.R.drawable.ic_lock_lock,
35. android.R.drawable.ic_menu_close_clear_cancel
36. )
37.
40. setContentView(R.layout.activity_main)
41.
42.
43. btnRemove.setOnClickListener() {
44. for (button in buttons) {
45. (button.parent as ViewGroup).removeView(button)
46. }
47. buttons.clear()
48. Toast.makeText(
50. "Se eliminaron todos los botones",
52. ).show()
53. }
54.
55. }
56.
57. public fun addOperation(view: View) {
58. var button: Button = Button(this)
59. val drawable =
60. ContextCompat.getDrawable(applicationContext, iconos[Random.nextInt(0,
iconos.size)])
61. button.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)
62. button.background = ContextCompat.getDrawable(applicationContext, R.color.

colorPrimary);
63. button.text = "Button ${index}"
64. val marginParams = LinearLayout.LayoutParams(
65. LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP
_CONTENT
66. )
67. marginParams.leftMargin = 50
68. marginParams.topMargin = 50
69. marginParams.rightMargin = 50
70. marginParams.bottomMargin = 50
71.
72. var clickListener = View.OnClickListener { v: View ->
73. (v.parent as ViewGroup).removeView(v)
74. if (buttons.remove(v)) {
75. Toast.makeText(
77. "Se elimino el boton ${(v as Button).text}",
79. ).show()
80. }
81. }
82. button.setOnClickListener(clickListener)
83.
84. layoutBotones.addView(button, marginParams)
85.
86. buttons.add(button)
87. index++
88. }
89.
90.
91. }
TextView
En Android, TextView es un control de interfaz de usuario que se utiliza para configurar y

mostrar el texto al usuario según nuestros requisitos. El control TextView actuará como un
control de etiqueta y no permitirá a los usuarios editar el texto.
Establecer el texto de Android TextView
En Android, podemos configurar el texto del control TextView al declararlo en el archivo de

diseño o en el archivo de actividad mediante el atributo text.
Crear un Control TextView
En Android, podemos crear un control TextView de dos maneras, ya sea en un archivo de

diseño XML o crearlo en el archivo de actividad mediante programación.
Crear un TextView en el archivo de diseño
A continuación, se muestra la forma de definir el control TextView en el archivo de diseño


6. <TextView
7. android:id="@+id/textView1"
10. android:layout_marginBottom="10dp"
11. android:text="Hello World"
12. android:textColor="#86AD33"
13. android:textSize="20dp"
14. android:textStyle="bold" />
15. </LinearLayout>
Si observa el fragmento de código anterior, aquí definimos un control TextView en el

archivo de diseño xml para mostrar el texto en la aplicación de Android.
Crear un TextView en el archivo de actividad

En Android, podemos crear un control TextView mediante programación en un archivo de
actividad basado en nuestros requisitos.
El siguiente es el ejemplo de crear un control TextView dinámicamente en el archivo de

actividad.
2.
5. import android.widget.LinearLayout
6. import android.widget.TextView
7.
12.
13. val linearLayout = findViewById<LinearLayout>(R.id.mainLayout)
14. val textView = TextView(this)
15. textView.text = "Hello World"
16. linearLayout.addView(textView)
17. }
18. }
Atributos de Android TextView
control TextView en aplicaciones de Android.
android:autoLink Encontrará y convertirá automáticamente las direcciones URL

y las direcciones de correo electrónico como enlaces en los
que se puede hacer clic.
android:ems Se utiliza para hacer que la vista de texto tenga exactamente

este ancho de ems.
android:hint Se utiliza para mostrar el texto de la sugerencia cuando el

texto está vacío.
android:width Hace que TextView tenga exactamente este ancho de píxeles.
android:height Hace que TextView tenga exactamente esta altura de píxeles.
android:text Se usa para mostrar el texto.

android:gravity Se utiliza para especificar cómo alinear el texto por el eje xey
de la vista.
android:maxWidth Se utiliza para que TextView tenga como máximo esta

cantidad de píxeles de ancho.
android:minWidth Se utiliza para que TextView tenga al menos esta cantidad de

píxeles de ancho.
android:textStyle Se utiliza para cambiar el estilo (normal, cursiva, negrita) del

texto.
android:textAllCaps Se utiliza para presentar el texto en todas las MAYÚSCULAS
Android:typeface Se utiliza para especificar el Tipo de letra (normal, sans, serif,

monoespacio) para el texto.
android:textColorHighlight Se utiliza para cambiar el color del resaltado de selección de

texto.
android:textColorLink Se utiliza para cambiar el color del texto de los enlaces.
android:inputType Se utiliza para especificar el tipo de texto que se coloca en

los campos de texto.
android:fontFamily Se utiliza para especificar la fontFamily para el texto.
android:editable Si establecemos, especifica que este TextView tiene un

método de entrada.
Ejemplo de Android TextView
El siguiente es el ejemplo del uso del control TextView en la aplicación de Android.
Código archivo activity_main.xml

7. android:padding="10dp">
8. <TextView
13. android:text="Hello World!"
14. android:textColor="#86AD33"
17. <TextView
22. android:textAllCaps="true" />
23. <TextView
27. android:text="Hello World!"
28. android:textStyle="bold"
29. android:textColor="#fff"
30. android:background="#7F3AB5"
31. android:layout_marginBottom="15dp"/>
32. <TextView
36. android:autoLink="email|web"
37. android:text="For more details visit http://helloworld.com and send mail t
o support@helloworld.com" />
38. </LinearLayout>
2.
5. import android.widget.TextView
6.
11.
13. val tv = findViewById<TextView>(R.id.textView2)
14. tv.text = "Hello World!"
15. }
16. }
EditText
En Android, EditText es un control de interfaz de usuario que se utiliza para permitir al

usuario ingresar o modificar el texto. Al usar el control EditText en nuestras aplicaciones
de Android, necesitamos especificar el tipo de datos que el campo de texto puede aceptar
usando el atributo inputType.
Por ejemplo, si acepta texto sin formato, entonces debemos especificar inputType como
"texto". En caso de que el campo EditText sea para contraseña, entonces debemos
especificar inputType como " textPassword ".
En Android, el control EditText es una versión extendida del control TextView con
características adicionales y se utiliza para permitir a los usuarios ingresar valores de
entrada.
Establecer el texto de Android EditText
En Android, podemos configurar el texto del control EditText al declararlo en el archivo de

diseño o en el archivo de actividad mediante el atributo text.
Crear un Control EditText
En Android, podemos crear el control EditText de dos maneras, ya sea en un archivo de

Crear un EditText en el archivo de diseño
La siguiente es la forma de ejemplo para definir el control EditText en el archivo de diseño

5. android:orientation="vertical" >
6. <EditText
7. android:id="@+id/txtSub"
10. android:hint="Subject"
11. android:inputType="text"/>
12. </LinearLayout>
Si observa el fragmento de código anterior, aquí definimos el control EditText para aceptar
texto sin formato utilizando inpuType como "texto" en el archivo de diseño xml.
Obtener texto de Android EditText
En Android, podemos obtener el texto de EditText control mediante el uso de la propiedad
text en el archivo de Actividad.
El siguiente es el ejemplo para obtener el texto del control EditText mediante programación
en el archivo de actividad utilizando el atributo text.
2.
5. import android.widget.EditText
6.
11.
12. val et = findViewById<EditText>(R.id.txtSub)
13. val name = et.text.toString()
14. }
15. }
Si se observa en el fragmento de código anterior, estamos encontrando el control EditText

que hemos definido en el archivo de diseño XML utilizando la propiedad id y se obtiene el
texto del control EditText utilizando la propiedad text.
Atributos de Android EditText
control EditText en aplicaciones de Android.
android:gravity Se utiliza para especificar cómo alinear el texto como

izquierda, derecha, centro, arriba, etc.
android:text Se usa para establecer el texto.
android:hint Se utiliza para mostrar el texto de la sugerencia cuando el

texto está vacío.
android:textColorHint Se utiliza para cambiar el color del texto del texto de

sugerencia.

android:textStyle Se utiliza para cambiar el estilo (negrita, cursiva, negrita) del
texto.
android:background Se utiliza para establecer el color de fondo para editar el

control de texto
android:ems Se utiliza para hacer que la vista de texto tenga exactamente

este ancho de ems.
android:width Hace que TextView tenga exactamente este ancho de píxeles.
android:height Hace que TextView tenga exactamente esta altura de píxeles.
android:maxWidth Se utiliza para que TextView tenga como máximo esta

cantidad de píxeles de ancho.
android:minWidth Se utiliza para que TextView tenga al menos esta cantidad de

píxeles de ancho.
android:textAllCaps Se utiliza para presentar el texto en todas las MAYÚSCULAS
android:typeface Se utiliza para especificar el Tipo de letra (normal, sans, serif,

monoespacio) para el texto.
android:textColorHighlight Se utiliza para cambiar el color del resaltado de selección de

texto.
android:inputType Se utiliza para especificar el tipo de texto que se coloca en

los campos de texto.
android:fontFamily Se utiliza para especificar la fontFamily para el texto.
android:editable Si establecemos false, EditText no nos permitirá ingresar o

modificar texto
Ejemplo del control EditText en Android
El siguiente es el ejemplo del uso de múltiples controles EditText con diferentes
InputTypes como contraseña, teléfono, etc. en LinearLayout para construir una aplicación
de Android.
Código archivo activity_main.xml

5. android:paddingLeft="40dp"
6. android:orientation="vertical" android:id="@+id/linearlayout" >
7. <EditText
8. android:id="@+id/txtName"
12. android:ems="10"
13. android:hint="Name"
14. android:inputType="text"
15. android:selectAllOnFocus="true" />
16. <EditText
17. android:id="@+id/txtPwd"
21. android:hint="Password 0 to 9"
22. android:inputType="numberPassword" />
23. <EditText
24. android:id="@+id/txtEmai"
28. android:hint="Email"
29. android:inputType="textEmailAddress" />
30. <EditText
31. android:id="@+id/txtDate"
34. android:layout_below="@+id/editText3"
36. android:hint="Date"
37. android:inputType="date" />
38. <EditText
39. android:id="@+id/txtPhone"
43. android:hint="Phone Number"
44. android:inputType="phone"
45. android:textColorHint="#FE8DAB"/>
46. <Button
47. android:id="@+id/btnSend"
50. android:text="submit"
51. android:textSize="16sp"
52. android:textStyle="normal|bold" />
53. <TextView
56. android:id="@+id/resultView"
58. android:textSize="15dp"/>
59. </LinearLayout>
2.
6.
11. btnSend.setOnClickListener {
12. if (txtName.text.toString().isEmpty() || txtPwd.text.toString().isEmpt
y() || txtEmai.text.toString().isEmpty() || txtDate.text.toString().isEmpty()
13. || txtPhone.text.toString().isEmpty()
14. ) {
15. resultView.setText("Please Fill All the Details")
16. } else {
17. resultView.setText(
18. "Name - " + txtName.text.toString() + " \n" + "Password - "
+ txtPwd.text.toString()
19. + " \n" + "E-
Mail - " + txtEmai.text.toString() + " \n" + "DOB - " + txtDate.text.toString()
20. + " \n" + "Contact - " + txtPhone.text.toString()

21. )
22. }
23. }
24. }
25. }
CheckBox
En Android, CheckBox es un botón de dos estados que se puede marcar (ON) o desmarcar
(OFF) y permitirá a los usuarios alternar entre los dos estados (ON / OFF) según los
requisitos.
En general, podemos usar múltiples controles CheckBox en la aplicación de Android para

permitir a los usuarios seleccionar una o más opciones del conjunto de valores.
A continuación, se muestra la representación gráfica del uso del control CheckBox en

Por defecto, el Android CheckBox estará en estado OFF (Unchecked). Podemos cambiar
el estado predeterminado de CheckBox usando el atributo android:checked.
En el caso, si queremos cambiar el estado de CheckBox a ON (Checked), entonces

necesitamos configurar android:check = "true" en nuestro archivo de diseño XML.
En Android, podemos crear el control CheckBox de dos maneras, ya sea en un archivo de

Crear un control CheckBox en archivo de diseño XML
La siguiente es la forma de ejemplo para definir el control CheckBox en el archivo de diseño


5.
6. <CheckBox
7. android:id="@+id/chk1"
11. android:text="Android" />
Si observa el fragmento de código anterior, aquí definimos el control CheckBox y

configuramos el estado CheckBox en ON usando el atributo android:checked en el
Crear control CheckBox en el archivo de actividad
En Android, podemos crear el control CheckBox mediante programación en un archivo de

actividad según nuestros requisitos.
El siguiente es el ejemplo de crear un control CheckBox dinámicamente en el archivo de

actividad.
2.
5. import android.widget.CheckBox
6. import android.widget.RelativeLayout
7.
12. val layout = findViewById<RelativeLayout>(R.id.mainLayout)
13. val cb = CheckBox(this)
14. cb.text = "Java"
15. cb.isChecked = true
16. layout.addView(cb)
17. }
18. }
Así es como podemos definir CheckBox en el archivo de diseño XML o mediante

programación en el archivo de actividad según nuestros requisitos.
Manejar eventos de Android CheckBox Click
En general, cada vez que el usuario hace clic en CheckBox para seleccionar o anular la
selección del objeto CheckBox recibirá un evento de clic.
En Android, podemos definir el evento de clic CheckBox de dos maneras, ya sea en el

archivo de diseño XML o crearlo en el archivo de actividad mediante programación.
Definir evento de clic CheckBox en archivo de diseño XML

android:onClick al elemento < CheckBox > en nuestro archivo de diseño XML.
El valor del atributo android:onClick debe ser el nombre del método al que debemos llamar
en respuesta a un evento de clic y el archivo de actividad que aloja el diseño XML debe
implementar el método correspondiente.
El siguiente es el ejemplo de definición de un evento de clic CheckBox usando el atributo

android:onClick en el archivo de diseño XML.
6.
7. <CheckBox
8. android:id="@+id/chk1"
12. android:text="Android"
13. android:onClick="onCheckBoxClick" />

método de evento de clic como se muestra a continuación.
1. public fun onCheckboxClicked(view: View) {

2. // Is the view now checked?
3. var checked = (view as CheckBox).isChecked;
4. // Check which checkbox was clicked
5. when (view.id) {
6. R.id.chk1 ->
7. if (checked) {
8. // Do your coding
9. } else {
11. }
12. else -> print("Other Check")
13. // Perform your logic
14. }
15. }
Definir evento de clic de casilla de verificación en el archivo de actividad
En Android, podemos definir el evento de clic CheckBox mediante programación en el

archivo de actividad en lugar del archivo de diseño XML.
Para definir el evento de clic de casilla de verificación mediante programación,

establecemos el evento setOnClickListener como se muestra a continuación.
1. val chk = findViewById<CheckBox>(R.id.chk1)

2. chk.setOnClickListener { v ->
3. val checked = (v as CheckBox).isChecked
5. if (checked) {
7. } else {
9. }
10. }
Así es como podemos manejar los eventos de clic de CheckBox en aplicaciones de Android
según nuestros requisitos.
Atributos de control de Android CheckBox
control CheckBox en aplicaciones de Android.
android:checked Se utiliza para especificar el estado actual de la casilla de verificación
android:gravity Se utiliza para especificar cómo alinear el texto como izquierda,

android:text Se utiliza para establecer el texto para la casilla de verificación.
android:background Se utiliza para establecer el color de fondo para el control de la casilla

de verificación.
android:padding Se utiliza para configurar el relleno desde la izquierda, derecha, arriba y

abajo.
android:onClick Es un nombre del método para invocar cuando la casilla de verificación

hizo clic.
android:visibility Se utiliza para controlar la visibilidad del control.

Ejemplo de control de Android CheckBox
El siguiente es el ejemplo de la definición de múltiples controles CheckBox y un control

Button en LinearLayout para obtener los valores seleccionados de los controles
CheckBox cuando hacemos clic en Button en la aplicación de Android.
Código del activity_main.xml

5. <CheckBox
6. android:id="@+id/chkJava"
9. android:padding="10dp"
12. android:text="Java"
13. android:onClick="onCheckboxClicked"/>
14. <CheckBox
15. android:id="@+id/chkPython"
20. android:text="Python"
22. <CheckBox
23. android:id="@+id/chkAndroid"
28. android:text="Android"
30. <CheckBox
31. android:id="@+id/chkAngular"
36. android:text="AngularJS"
38.
39. <Button
40. android:id="@+id/btn_detalles"
44. android:text="Obtener Detalles" />
45. </LinearLayout>
Código del MainActivity.kt
2.
6. import android.widget.CheckBox
9.
10.
15. btn_detalles.setOnClickListener {
16. var mensaje = "Lenguajes Seleccionados:"
17. if(chkAndroid.isChecked()){
18. mensaje += "\nAndroid"
19. }
20. if(chkAngular.isChecked()){
21. mensaje += "\nAngularJS";
22. }
23. if(chkJava.isChecked()){
24. mensaje += "\nJava";
25. }
26. if(chkPython.isChecked()){
27. mensaje += "\nPython";
28. }
29. Toast.makeText(applicationContext, mensaje, Toast.LENGTH_SHORT).sh
ow();
30. }
31. }
32. public fun onCheckboxClicked(view: View) {
33. var checked = ( view as CheckBox).isChecked()
34. var mensaje=""
36. when(view.id) {
37. chkAndroid.id ->
38. mensaje = if(checked){"Android Seleccionado"} else {"Android Deselecci
onado"}
39.
40. chkAngular.id ->
41. mensaje = if(checked){"AngularJS Seleccionado"} else {"AngularJS Desel
eccionado"}
42.
43. chkJava.id ->
44. mensaje = if(checked){"Java Seleccionado" }else {"Java Deseleccionado"
}
45.
46. chkPython.id ->
47. mensaje = if(checked){"Python Seleccionado"} else {"Python Deseleccion
ado"}
48.
49. }
50. Toast.makeText(applicationContext, mensaje, Toast.LENGTH_SHORT).show();
51. }
52. }
RadioButton
En Android, RadioButton es un botón de dos estados que se puede marcar o desmarcar y

es igual que el control CheckBox, excepto que solo permitirá una opción para seleccionar
del grupo de opciones.
El usuario puede presionar o hacer clic en el botón de opción para seleccionarlo. En
Android, el control CheckBox permite a los usuarios cambiar el estado de control, ya sea
Checked o Unchecked, pero el RadioButton no se puede desmarcar una vez que está
marcado.
En general, podemos usar los controles RadioButton en la aplicación de Android para
permitir a los usuarios seleccionar solo una opción del conjunto de valores.
A continuación, se muestra la representación gráfica del uso del control RadioButton en
En Android, utilizamos botones de radio en un RadioGroup para combinar varios botones

de radio en un solo grupo y se asegurará de que el usuario pueda seleccionar solo una
opción del grupo de múltiples opciones.
Por defecto, el RadioButton de Android estará en estado OFF (Unchecked). Podemos
cambiar el estado predeterminado de RadioButton usando el atributo android:checked.
En el caso, si queremos cambiar el estado de RadioButton a ON (Checked), entonces
necesitamos configurar android:checked = "true" en nuestro archivo de diseño XML.
En Android, podemos crear el control RadioButton de dos maneras, ya sea en un archivo
Crear RadioButton en archivo de diseño XML
La siguiente es la forma de ejemplo para definir el control RadioButton usando
RadioGroup en el archivo de diseño XML en la aplicación de Android.

5.
6. <RadioGroup
10.
11. <RadioButton
15. android:text="Java" />
16. </RadioGroup>
Si observa el fragmento de código anterior, aquí definimos el control RadioButton y

configuramos el estado de RadioButton en ON usando el atributo android:checked en el
Crear control RadioButton en el archivo de actividad
En Android, podemos crear el control RadioButton mediante programación en un archivo
de actividad basado en nuestros requisitos.
El siguiente es el ejemplo de crear un control RadioButton dinámicamente en un archivo
de actividad.

2. val rd = RadioButton(this)
3. rd.text = "Java"
4. rd.isChecked = true
5. layout.addView(rd)
Así es como podemos definir RadioButton en un archivo de diseño XML o mediante

programación en un archivo de actividad según nuestros requisitos.
Manejar el evento de clic en el control RadioButton

Generalmente, cada vez que el usuario hace clic en RadioButton para seleccionar o
deseleccionar el objeto RadioButton recibirá un evento de clic.
En Android, podemos definir el evento de clic de RadioButton de dos maneras, ya sea en
un archivo de diseño XML o crearlo en el archivo de actividad mediante programación.
Definir el evento Clic de un RadioButton en el archivo de diseño XML

android:onClick al elemento <RadioButton> en nuestro archivo de diseño XML.
El valor del atributo android:onClick debe ser el nombre del método al que debemos
llamar en respuesta a un evento de clic y el archivo de actividad que aloja el diseño XML
debe implementar el método correspondiente.
El siguiente es el ejemplo de definición de un evento de clic RadioButton usando el
atributo android:onClick en el archivo de diseño XML.

3. android:layout_width="match_parent" android:layout_height="match_parent">
4. <RadioGroup
8. <RadioButton
11. android:text="Java"
12. android:onClick="onRadioButtonClicked"/>
13. </RadioGroup>

método de evento de clic como se muestra a continuación.
1. public fun onRadioButtonClicked(view: View) {

2. // Is the view now checked?
3. var checked = (view as RadioButton).isChecked;
4. // Check which RadioButton was clicked
5. when (view.id) {
6. rdbtn1.id ->
7. if (checked) {
9. } else {
11. }
12. else -> print("Do your coding")
13. // Perform your logic
14. }
15. }
Definir el evento Clic de un RadioButton en el archivo de actividad

En Android, podemos definir el evento de clic de un RadioButton mediante programación
en el archivo Actividad en lugar del archivo de diseño XML.
Para definir el evento de clic RadioButton mediante programación, asignamos la función
setOnClickListener como se muestra a continuación.
1. var rdb = findViewById<RadioButton>(R.id.rdbtn1);

2. rdb.setOnClickListener { v: View ->
3. if ((v as RadioButton).isChecked) {
5. } else {
7. }
8. }
Así es como podemos manejar los eventos de clic de RadioButton en aplicaciones de
Atributos de control de Android RadioButton
control RadioButton en aplicaciones de Android.
android:checked Se usa para especificar el estado actual del botón de opción
android:gravity Se utiliza para especificar cómo alinear el texto como izquierda,

android:text Se utiliza para configurar el texto para el botón de opción.
android:background Se utiliza para establecer el color de fondo para el control del botón de
radio.

abajo.
android:onClick Es un nombre del método para invocar cuando se hace clic en el botón
de opción.
android:visivility Se utiliza para controlar la visibilidad del control.

Ejemplo de control de Android RadioButton
El siguiente es el ejemplo de la definición de múltiples controles RadioButton, un control
TextView y un control Button en RelativeLayout para obtener los valores seleccionados
de los controles RadioButton cuando hacemos clic en Button en la aplicación de
Android.
Código del archivo activity_main.xml

5.
6. <TextView
7. android:id="@+id/txtView"
12. android:text="Selecciona el curso"
15.
16. <RadioGroup
17. android:id="@+id/rdGroup"
20. android:layout_below="@+id/txtView"
22. <RadioButton
23. android:id="@+id/rdbJava"
27. android:onClick="onRadioButtonClicked"
29. android:text="Java" />
30. <RadioButton
31. android:id="@+id/rdbPython"
37. android:text="Python" />
38. <RadioButton
39. android:id="@+id/rdbAndroid"
45. android:text="Android" />
46. <RadioButton
47. android:id="@+id/rdbAngular"
53. android:text="AngularJS" />
54. </RadioGroup>
55.
56. <Button
57. android:id="@+id/getBtn"
60. android:layout_below="@+id/rdGroup"
62. android:text="Tomar curso" />
Código del archivo MainActivity.kt
2.
6. import android.widget.RadioButton
9.
14. getBtn.setOnClickListener {
15. var mensaje = "Courso Seleccionado: "
16. mensaje +=
17. when {
18. rdbAndroid.isChecked -> "Android"
19. rdbAngular.isChecked -> "AngularJS"
20. rdbJava.isChecked -> "Java"
21. rdbPython.isChecked -> "Python"
22. else -> ""
23. }
24. Toast.makeText(applicationContext, mensaje, Toast.LENGTH_SHORT).show()
25. }
26. }
27.
28. public fun onRadioButtonClicked(view: View) {
29. var checked = (view as RadioButton).isChecked
30. var mensaje = ""
32. mensaje = when (view.id) {
33. rdbAndroid.id -> "Android Seleccionado"
34. rdbAngular.id -> "AngularJS Seleccionado"
35. rdbJava.id -> "Java Seleccionado"
36. rdbPython.id -> "Python Seleccionado"
37. else -> ""
38. }
39. Toast.makeText(applicationContext, mensaje, Toast.LENGTH_SHORT).show();
40. }
41.
42. }
ImageView
En Android, la clase ImageView se usa para mostrar un archivo de imagen en la aplicación.

El archivo de imagen es fácil de usar, pero difícil de dominar en Android, debido a los
diversos tamaños de pantalla en los dispositivos Android.
A continuación, se muestra la representación gráfica del uso del control ImageView en
Nota importante: ImageView viene con diferentes opciones de configuración para admitir
diferentes tipos de escala. Las opciones de tipo de escala se utilizan para escalar los límites
de una imagen a los límites de la vista de imagen. Algunas de las propiedades de
configuración de scaleTypes son center, center_crop, fit_xy, fitStart, etc. Mas adelante
veremos un poco más acerca del atributo ScaleType para conocer su utilidad.
En Android, podemos crear el control ImageView de dos maneras, ya sea en un archivo de
Crear ImageView en archivo de diseño XML
La siguiente es la forma de ejemplo para definir el control ImageView en el archivo de
diseño XML en la aplicación de Android.
1. <ImageView
2. android:id="@+id/simpleImageView"
5. android:src="@drawable/android" />
Si observa el fragmento de código anterior, aquí definimos el control ImageView y

configuramos la imagen fuente con el atributo android:src en el archivo de diseño xml.
Crear control ImageView en el archivo de actividad
En Android, podemos crear el control ImageView mediante programación en un archivo de
actividad basado en nuestros requisitos.
El siguiente es el ejemplo de crear un control ImageView dinámicamente en un archivo
de actividad.
2. val simpleImageView = findViewById <ImageView>(R.id.simpleImageView)
3. simpleImageView.setImageResource(R.drawable.android)//set the source to ImageView
4. layout.addView(rd)
Así es como podemos definir un control ImageView en un archivo de diseño XML o

mediante programación en un archivo de actividad según nuestros requisitos.
Definir el tipo de escala en un control ImageView
ImageView viene con diferentes opciones de configuración para admitir diferentes tipos de
escala. Las opciones de ScaleType se usan para escalar los límites de una imagen a los
límites de la vista de imagen. Las propiedades de configuración de ScaleType para
ImageView en Android son CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER,
FIT_END, FIT_START, FIT_XY y MATRIX.
En Android, ImageView viene con diferentes opciones de configuración para admitir los
diferentes ScaleType que se utilizan para escalar los límites de una imagen a los límites de
ImageView. A continuación, se muestran los diferentes tipos de 7 escalas que se utilizan
en Android:
• CENTER: Centra la imagen, pero no escala la imagen.

• CENTER_CROP: Escala la imagen uniformemente.
• CENTER_INSIDE: Centra la imagen dentro del contenedor, en lugar de hacer que
el borde coincida exactamente.
• FIT_CENTER: escala la imagen desde el centro.
• FIT_END: escala la imagen desde el final del contenedor.
• FIT_START: escala la imagen desde el inicio del contenedor.
• FIT_XY: rellena la imagen desde las coordenadas x e y del contenedor.
• MATRIX: escala utilizando la matriz de imagen al dibujar.
Atributos de control de Android ImageView
control ImageView en aplicaciones de Android.
android:src Se usa para configurar un archivo fuente o puede decir imagen en su

vista de imagen para hacer que su diseño sea atractivo.
android:background Se utiliza para establecer el color de fondo para el control del

imageView.

abajo.
android:scaleType Se utiliza para controlar cómo la imagen debe ser redimensionada o

movida para que coincida con el tamaño de esta vista de imagen. El
valor del atributo de tipo de escala puede ser CENTER,
CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END,
FIT_START, FIT_XY y MATRIX.
android:onClick Es un nombre del método para invocar cuando se hace clic en el

ImageView.
Ejemplo de control ImageView en Android

El siguiente es el ejemplo de la definición de dos controles ImageView de dos animales
domésticos y cada vez que el usuario hace clic en una imagen, el nombre del animal se
muestra como un Toast en la pantalla.
Código del archivo activity_main.xml
7.
8. <ImageView
9. android:id="@+id/simpleImageViewPerrito"
13. android:src="@drawable/perrito" />
14.
15. <ImageView
16. android:id="@+id/simpleImageViewGatito"
19. android:layout_below="@+id/simpleImageViewPerrito"
22. android:src="@drawable/gatito" />
23.
Código del archivo MainActivity.kt
2.
7.
12.
13. simpleImageViewPerrito.setOnClickListener {
14. Toast.makeText(applicationContext, "Perrito", Toast.LENGTH_SHORT)
15. .show()//display the text on image click event
16. }
17. simpleImageViewGatito.setOnClickListener {
18. Toast.makeText(applicationContext, "Gatito", Toast.LENGTH_SHORT)
19. .show()//display the text on image click event
20. }
21. }
22. }
Referencias
1. https://developer.android.com/guide/topics/ui/look-and-feel/themes
2. https://developer.android.com/guide/topics/ui/controls/button
3. https://developer.android.com/guide/topics/ui/controls/checkbox
4. https://developer.android.com/guide/topics/ui/controls/radiobutton
5. https://developer.android.com/guide/topics/ui/controls/radiobutton
6. https://developer.android.com/reference/android/widget/TextView
7. https://developer.android.com/reference/android/widget/EditText
8. https://developer.android.com/reference/android/widget/ImageView
9. https://developer.android.com/reference/android/widget/ImageView.ScaleType

Android Diseño de La Interfaz de Usuario - Controles Basicos

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Android Diseño de La Interfaz de Usuario - Controles Basicos

Cargado por

Copyright:

Formatos disponibles

UNIDAD TEMÁTICA II: Diseño de la interfaz de usuario

La interfaz de usuario es una parte fundamental de las aplicaciones Android. Es el

Crear botón en archivo de diseño XML

Crear control de botón en archivo de actividad

1. val layout:LinearLayout = findViewById<LinearLayout>(R.id.linearLayout)

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

1. /** Called when the user touches the button */

El método que declares en el atributo android:onClick debe tener un id exactamente como

1. val button: Button = findViewById(R.id.button_send)

Ejemplo del control Button en Android

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

Código archivo MainActivity.kt

En Android, ToggleButton es un control de interfaz de usuario que se utiliza para mostrar

Las clases clave son las siguientes:

De manera predeterminada, el ToggleButton de Android estará en estado OFF

Crear ToggleButton en un archivo de diseño XML

Si observa el fragmento de código anterior, aquí definimos el control ToggleButton y

Crear control ToggleButton en el archivo de actividad

1. val layout = findViewById<LinearLayout>(R.id.mainLayout)

Así es como podemos definir ToggleButton en el archivo de diseño XML o mediante

Manejar eventos Android ToggleButton Click

1. tg_btn.setOnCheckedChangeListener { _ , isChecked ->

Atributos del control ToggleButton de Android

El siguiente es el ejemplo de definir dos controles ToggleButton y un control Button en

Código archivo toggle_button_control.xml

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

En Android, ImageButton es un control de interfaz de usuario que se utiliza para mostrar

En Android, podemos agregar una imagen al botón usando el atributo <ImageButton>

En Android, podemos crear el control ImageButton de dos maneras, ya sea en un archivo

Crear ImageButton en un archivo de diseño XML

Si observa el fragmento de código anterior, aquí definimos el control ImageButton y

1. val layout = findViewById <LinearLayout>(R.id.mainLayout)

Anndroid Handle ImageButton Click Events

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

En la Actividad que aloja nuestro archivo de diseño XML, necesitamos implementar un

1. /** Called when the user touches the button */

1. var btnAdd = findViewById<ImageButton>(R.id.btnAdd);

Así es como podemos manejar los eventos de clic de ImageButton en aplicaciones de

android:src Se utiliza para especificar el archivo fuente de la imagen.

android:background Se utiliza para establecer el color de fondo para un control de botón

android:padding Se utiliza para configurar el espaciado a la izquierda, derecha, arriba

android:baseline Se utiliza para establecer el desplazamiento de la línea base dentro

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

Código archivo MainActivity.kt

62. button.background = ContextCompat.getDrawable(applicationContext, R.color.

En Android, TextView es un control de interfaz de usuario que se utiliza para configurar y

Establecer el texto de Android TextView

En Android, podemos configurar el texto del control TextView al declararlo en el archivo de

Crear un Control TextView

En Android, podemos crear un control TextView de dos maneras, ya sea en un archivo de

Crear un TextView en el archivo de diseño

A continuación, se muestra la forma de definir el control TextView en el archivo de diseño

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

Si observa el fragmento de código anterior, aquí definimos un control TextView en el

Crear un TextView en el archivo de actividad

El siguiente es el ejemplo de crear un control TextView dinámicamente en el archivo de

Atributos de Android TextView

android:autoLink Encontrará y convertirá automáticamente las direcciones URL

android:ems Se utiliza para hacer que la vista de texto tenga exactamente

android:hint Se utiliza para mostrar el texto de la sugerencia cuando el

android:width Hace que TextView tenga exactamente este ancho de píxeles.

android:height Hace que TextView tenga exactamente esta altura de píxeles.

android:text Se usa para mostrar el texto.