Documentos de Académico
Documentos de Profesional
Documentos de Cultura
1
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Entre las herramientas que proporciona esta paleta tenemos los contenedores o Layouts, para el
agrupamiento de componentes visuales y de acción están los Widgets, los campos de texto en Text,
elementos contenedores para acciones en Containers, elementos para botones de acción en Buttons,
aplicaciones con mapas en Google y herramientas de versiones antiguas en Legacy.
2
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
1.1. LAYOUTS
Los Layouts permiten crear vistas (interfaces) para la distribución de los diferentes objetos en la
pantalla de la aplicación. Es muy importante su elección, ya que de ella depende la dificultad
posterior en la recolocación del resto de elementos. En una misma ventana puede haber varios tipos
diferentes de layouts, permitiéndose su anidación, es decir, superpuestos.
ConstraintLayout: este tipo de layout aparece con la versión 2.2 de Android Studio y con el
objeto de sustituir a la RelativeLayout, ya que permite la ubicación de los objetos con mayor
flexibilidad sin necesidad de recurrir al anidamiento, y donde todos ocupan posiciones
relativas determinadas, pudiendo abordar interfaces más complejas.
Podemos ver seguidamente, tanto en modo texto como modo diseño, el aspecto que presenta
un programa que se inicia nuevo, en el que por defecto tendremos el layout principal de tipo
Constraint. (ver: https://www.journaldev.com/13590/android-constraintlayout).
3
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
LinearLayout: Permiten colocar cada objeto en una línea, que puede ser horizontal o
vertical, de forma que si es en horizontal habrá un número determinado de objetos por línea y
en vertical podrá haber varios objetos agrupados en columna y según su tamaño.
FrameLayout: Es el más sencillo y coloca los objetos en determinadas ubicaciones ya
preestablecidas y en la parte superior izquierda de las mismas. Dichas ubicaciones pueden ser
redimensionadas.
TableLayout: Son Layouts organizados a modo de tabla (filas y columnas), en los que en
cada celda podemos colocar un objeto diferente y se irá configurando la tabla según el
tamaño de los objetos.
TableRow: Son Layouts organizados a modo de tabla en los que sólo hay una fila a la que se
incorporan los objetos en diferentes columnas.
Space: permite crear espacios entre objetos en diseños de propósito general.
Como se ha dicho, los layouts permiten el anidamiento, es decir, que unos contengan a otros, por lo
que una cuestión importante es fijarse en los siguientes atributos (Attributtes):
Tanto en layout:width (ancho), como en layout:height (alto), se debe jugar con su ajuste, bien al
tamaño total de la ventana (match_parent), o bien ajustarse a exactamente al contenido del objeto
(wrap_content). También admiten valores en “dp” (puntos de display).
Esquema de layouts
y objetos incluidos
en la interface de la Herramienta de
aplicación ajuste de los layouts
Asimismo, se puede jugar con los colores de fondo para diferenciar los diferentes layouts. Para ello, se
recurre a la propiedad background del layout, donde se puede elegir entre las posibilidades de crear
colores para el proyecto mediante la paleta de colores o también personalizados. Es aconsejable para
mantener siempre la misma tonalidad de color, copiar el código hexadecimal compuesto por 8 dígitos
y anteponer # (#XXXXXXXX). Los colores personalizados que se incorporen al proyecto se podrán
ver en \res\values\colors.xml.
4
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Otra propiedad de los layouts que facilita la ubicación de los objetos es la layout:margin, que
permite establecer las distancias en “dp” a los márgenes y la layout:gravity, mediante la cual se
pueden disponer los diferentes objetos que pertenezcan a ese layout con una alineación determinada:
top, botton, center, left, right, o layout:padding, que establece el espacio entre el borde y los
elementos de su interior, etc.
5
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Siempre que se cree un proyecto por primera vez, aparece un ConstraintLayout por defecto en el
archivo activity_main.xml. Este layout puede ser cambiado por otro, simplemente cambiando el tipo
tanto a inicio como al final en la vista de texto, o bien borrarlo en la ventana de la estructura de la
interface e insertar uno nuevo. Asimismo, para incorporar un layout nuevo, bastará con arrastrarlo
desde la paleta a la ventana de la estructura de interface (Figura-6).
1.2. TEXT
Son campos de texto destinados a que el usuario introduzca texto en ellos mediante el teclado
asociado que aparece.
TextView
Representan cuadros de texto. Para incorporarlos hay que pinchar y arrastrarlos hasta la
ventana de la estructura de la interface y situarlo en el Layout que se desee. Haciendo click en
el recuadro de texto mostrará los atributos Figura-8, donde se
puede editar el texto del recuadro y también se nos muestra el
identificador asociado (id , referencia a un recurso que se
utilizará cuando se escriba código en el ManinActivity.java), el
cual permitirá localizarlo dentro de la estructura del programa. Es
importante poner un id a cada objeto, sobre todo a los que tengan
funcionalidades, como pueden ser los botones.
6
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Plain Text
Permite la introducción de texto sencillo para ser editado.
Password, Password (Numeric)
Permite la introducción de un password mostrando asteriscos o
puntos “*”.
E-mail
Permite la introducción de direcciones de correo electrónico.
Ahora el teclado llevará la “@”.
Phone
Permite la introducción de números de teléfono. Ahora será
numérico el teclado.
Postal Address
Permite la introducción de códigos postales.
Multiline Text
Permite la introducción de varias líneas de texto.
Time, Date
Permite la introducción de la hora y fecha.
Number, Number (Signed), Number (Decimal)
Permite la introducción de datos numéricos estándar,
con signo y con decimales. Figura-9. Vista de algunos Text
AutoCompleteTextView
Para recuadros de texto en formato autocompletar
7
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
La incorporación de texto a las aplicaciones puede realizarse sencillamente de esta forma o bien
de manera referenciada a través del archivo res/values/strings.xml. Si se hace referenciando el
texto en el archivo strings.xml, dicho texto y sus propiedades se podrán utilizar en cualquier parte
del programa con tan solo llamar a su identificador.
1.2. BUTTONS
Son componentes visuales (objetos) que podemos incorporar a los layouts y que ocuparán un área
determinada (condicionada por el layout que los contiene), de forma que gestionarán los eventos que
puedan producirse en dicha área. Podemos encontrar los siguientes:
8
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
ImageButton
Es un botón con una imagen. Las imágenes deben estar previamente en las carpetas
\res\drawable y/o en las \res\mimap (según tamaño) para ello seleccionar la vista Project o
Packages. Al insertar este objeto, se abre una ventana donde se nos permitirá elegir entre
colores o imágenes del proyecto, las que hemos incorporado a las carpetas mencionadas.
Bastará con elegir y se trasladará al botón de imagen.
Importante: El nombre del archivo de las imágenes debe ir todo en minúscula y sin signos
de puntuación.
1.4. WIDGETS
Son elementos que se pueden incorporar a las aplicaciones y que sirven para
contener imágenes y elementos multimedia.
Las carpetas del árbol del proyecto contienen imágenes según la densidad o
resolución: mimap-mdpi para densidad media, mimap-hdpi para densidad alta y
mimap-xhdpi para densidad extra alta.
9
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
View
Permite incorporar vistas de forma genérica a las aplicaciones.
ImageView
Inserta una imagen que puede tomarse mediante el cuadro de diálogo y desde las carpetas de
imágenes. El procedimiento es igual que para un botón de imagen.
WebView
Inserta una ventana destinada a alojar una página web.
VideoView
Inserta un elemento multimedia destinado a reproducir una secuencia de vídeo.
CalendarView
Permite incorporar calendarios a las aplicaciones.
ProgressBar, SeekBar, RatingBar: Son indicadores mediante círculos, barras y estrellas
que muestran que una acción está en proceso. Necesitan que en MainActivity.java se escriba
el código que determina su actuación.
SearchView, Texture View, SurfaceView: insertan widgets para búsquedas, texturas y
superficies.
Horizontal y Verticakl Divider
Inserta divisiones horizontales y verticales para separar objetos.
10
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Una vez se inserta un objeto en el ConstraintLayout, aparecerán unas marcas laterales, así como
arriba y debajo, que pinchando sobre ellas y arrastrando hasta los márgenes o hasta otros objetos,
estaremos estableciendo las referencias para el posicionamiento relativo de dicho objeto. A partir
de ahí, podremos modificar su posicionamiento simplemente arrastrando con el ratón o bien desde
la herramienta que aparece a la derecha para los márgenes manuales.
Si tenemos activada la herramienta de conectado automático en la parte superior, al insertar el
objeto ya aparecen los constraint horizontales.
Si pulsamos la herramienta de posicionamiento fijo (Infer Constraints), estableceremos unas
referencias para el objeto que harán que ocupe una posición fija en la interface.
Si el constraint se establece entre dos objetos, la evolución en posición y tamaño de uno afectará al
otro, de la manera que se aprecia en la parte de debajo de la Figura-14.
11
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
4- Cada uno de los objetos debe identificarse en sus propiedades (campo id): se aconseja para los
widgets tvnombre (TextView), para los botones btnombre (Button) y para los objetos de
introducción de texto etnombre (EditText). En nuestro caso se sugiere tvtextosybotones,
btborrar y etTexto1. Esto facilita bastante la identificación por nosotros o por otro programador
que pudiera retomar esta aplicación. No obstante, se pueden poner otros cualesquiera.
Asimismo, en el campo del nombre, habrá que modificar el genérico y poner otro
identificativo, por ejemplo, en el TextView “Textos y Botones” y en el botón “BORRAR”.
12
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
6- A continuación, es necesario declarar los métodos para recuperar los objetos o realizar las
acciones que correspondan a cada objeto. Para ello habrá que escribir dentro del método de
creación de la actividad, protected void onCreate(Bundle savedInstanceState) {}. Debajo de lo
ya escrito se recurre a la siguiente fórmula para estas declaraciones:
Se puede observar como cada declaración de un identificador de objeto llama a la clase R de java
que los contiene (archivo R.java).
7- Justo seguido, se debe crear una función que se encargue de recoger la acción del objeto
(evento), en este caso el botón, para lo cual se recurre a un Listerner (escuchador) según la
fórmula:
Identificador.setOnclickListener(new View.OnClickListener() {
btborrar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { Justo en este punto se crea automáticamente
la función, en la que sólo completaremos las
etTexto1.setText(" "); comillas vacías, que indican que se
} devuelve una cadena vacía al EditText justo
al pulsar el botón.
13
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Siguiendo con este ejemplo, podemos modificarlo para que existan dos Edit Text del tipo Number,
de forma que nos permita sumar dos cantidades introducidas en los mismos. Para sumar las
cantidades añadiremos un nuevo botón al que llamaremos “SUMAR”. Pasos a seguir:
a. En la Interface:
Añadir dos nuevos Edit Text del tipo Number, a los que llamaremos e identificaremos
como “operando1” @+id/etoperando1 y “operando2” @+id/etoperando2.
Añadir un nuevo botón con el nombre “SUMAR” y el identificador @+id/btsumar.
b. En el archivo MainActivity.java:
Declarar las variables de los nuevos objetos, Edit Text y el Button, así como las
variables de tipo int para realizar la operación de sumar:
14
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
d. Se debe crear un nuevo método que se encargue de recoger la acción del objeto (botón sumar),
para lo cual se recurre a un Listerner (escuchador):
btsumar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
a= Integer.parseInt(etoperando1.getText().toString());
b= Integer.parseInt(etoperando2.getText().toString());
suma=a+b; En este punto se crea automáticamente la
función, completaremos las asignaciones a
etText1.setText(“ ” + suma); las variables, pasando a entero en string,
} sumaremos y presentaremos en el Edit
Text inicial.
15
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
Es posible que tengamos problemas con el emulador a la hora de arrancar y ver las aplicaciones,
bien porque no siempre se consigue o bien porque tarda mucho. Para evitar este contratiempo,
podemos conectar nuestro teléfono móvil Android al ordenador y seguir la ejecución de las
aplicaciones desde el terminal.
Los pasos para conectar y configurar nuestro teléfono móvil son los siguientes:
1. Recordar que en el SDK manager debe estar instalado el Google USB Driver y por supuesto
debemos tener instalados en nuestro ordenador los drivers del teléfono móvil para que este sea
reconocido. Muchos terminales vienen con un software para el mantenimiento del teléfono y
que, al instalarlo, también lo hace con los drivers. Para los terminales Sony es el PC
Companion, para los Samsung el Kies, etc.
2. En nuestro teléfono móvil habrá que activar la depuración USB y permitir los simuladores
(Ubicaciones falsas). Esto se suele localizar en Ajustes-Opciones del Desarrollador-
Depuración USB.
3. Una vez hechos estos dos pasos, sólo resta volver a compilar el programa y ahora aparecerá
una ventana donde se nos pregunta si deseamos utilizar el emulador o el teléfono móvil. Marcar
el teléfono y se ejecutará la aplicación en el mismo.
Recordar que es importante que la API mínima con la que ha sido creada la
aplicación sea soportada por vuestro terminal.
5. FUNDAMENTOS PRÁCTICOS
1. Realizar una aplicación mediante Android Studio, a la que llamaremos Taxímetro, para
realizar una operación de cálculo mediante la introducción de los dos datos a multiplicar y la
presentación del resultado en un cuadro de texto al pulsar un botón. Para dar más vistosidad al
ejemplo plantearlo como la simulación del cálculo del precio a pagar en un taxi, es decir, se
introducirían los kilómetros recorridos, el precio por kilómetro y al pulsar aparecería el importe
a pagar (ver Figura-17).
2. Como mejora se propone que se inserte otro botón para borrar todo una vez realizado el cálculo
y previo a volver a calcular.
3. Esta propuesta se debe realizar de forma individual, de manera que tanto imagen como fondos
y disposición de los objetos en la interface debe ser diferente para cada uno de vosotros.
16
Sistemas de Telefonía Fija y Móvil
I.E.S. “EL PALMERAL” ORIHUELA
CURSO 2022/23 Antonio Serna Ruiz
BIBLIOGRAFÍA
El gran libro de Android. Ed. Marcombo. (Jesús Tomás Gironés)
www.jarroba.com
http://codigoprogramacion.com/java#.WrfL0uQh07M
http://www.sgoliver.net/blog/curso-de-programacion-android/indice-de-contenidos/
https://codelabs.developers.google.com/codelabs/constraint-layout/#3
http://www.androidcurso.com/index.php/recursos/32-unidad-2-diseno-de-la-interfaz-de-usuario-vistas-
y-layouts/881-uso-de-constraitlayout
https://www.youtube.com/watch?v=S7TwRIKqCu4
https://developer.android.com/guide/topics/ui/declaring-layout?hl=es-419
NOTAS
Legacy
RelativeLayout: Son Layouts donde los diferentes objetos ocupan posiciones relativas los
unos respecto de los otros. Al aparecer el ConstraintLayout no tienen mucho sentido su uso,
así que los encontraremos en Legacy.
Guideline: son Layouts donde los objetos seguirán su posicionamiento según una línea
horizontal o vertical.
17