Android-Utilizando recursos del telefono

Si en el primer programa utilizamos el clásico “Hola mundo” con pocas variantes, en este articulo, iniciamos una aplicación un poco mas ambiciosa, en donde utilizaremos diferentes recursos del teléfono, gestionandolos desde una única pantalla.

Recordemos como creamos un proyecto en Android Studio:

Seleccionamos “New Project”:

Android Studio-Nuevo ProyectoRellenamos los campos necesarios

Android_Studio_Nuevo_ProyectoEscogemos las versiones de destino:

AndroidStudio_DestinosEscogemos la pantalla de nuestra primera actividad

AndroidStudio_Actividad

Indicamos los datos de la actividad

AndroidStudio_Datos_Actividad

 

y ya dejamos que nos genere la aplicación

AndroidStudio_Datos_ActividadCuando haya finalizado, podremos borrar el letrero que nos ha creado de “Hola Mundo”, para ello, abrimos el fichero que le hayamos indicado en “Layout Name”; en nuestro caso “Activity_presentacion.xml

ANdroidStudio_BorrarHolaMundoy borramos la definicion del “TextView” segun esta marcado. A continuación abrimos el fichero “res/values/strings.xml”

2014-10-20_12h19_17

 

y podemos borrar la definición de “hello_world”, borrando la definición de string indicada.

Al finalizar la “limpieza”, podemos seleccionar el fichero “activity_presentacion.xml” y pulsar en la pestaña de “Design” para empezar a diseñar nuestra pantalla.

AndroidStudio_DesignPrimero vamos a cambiar el Layout, ya que para este proyecto, creo mas adecuado un “TableLayout”, aunque vamos a revisar que significan estos layouts.

En Java, se pensó que era mas flexible distribuir los componentes por pantalla siguiendo normas, en lugar de indicarles posiciones fijas. Realmente, este tipo de distribución aporta bastantes ventajas en nuestro mundo de terminales cambiantes. Aquí podéis encontrar mas información acerca de como Java maneja los layouts

Si se selecciona un layout adecuado, nuestra pantalla sera flexible, y podrá cambiar de resolución y tamaño sin perder su aspecto.

Cualquier layout se puede anidar en una parte de otro, por lo que las posibilidades de diseño son infinitas, a continuación describimos los layouts

WebLayout

Su principal característica es que los componentes se sitúan según las instrucciones HTML que lleguen en la carga, ya que su origen deberá ser una pagina web. Al ser un layout especial, lo trataremos mas adelante.

FrameLayout

En este layout, el mas simple de todos, deberíamos introducir un único componente, debido a los posibles problemas de gestión que tendremos en los redimensionamientos. El problema viene que todos los componentes que definamos en un FrameLayout se colocan alineados en la esquina superior izquierda, por lo que uno tapa a otro. Si indicamos mas de un componente, podemos utilizar la propiedad “gravity” para controlar su posicionamiento.

Disponemos de las propiedades:

  • android:layout_width y android:layout_height, que podrán tomar los valores:
    • match_parent” para que el componente tome la dimensión de su layout contenedor
    • wrap_content” para que el componente tome la dimensión de su contenido.

LinearLayout

Distribuye los componentes uno detrás del otro, en el sentido especificado que puede ser Verticalmente, en cuyo caso los componentes quedaran uno debajo del otro, u Horizontalmente, que dejara los componentes uno al lado de otro. Cuando los componentes que indiquemos no quepan en la orientación elegida, automáticamente generara una barra de “scroll”.

Ademas de android:layout_width y android:layout_height para establecer las dimensiones de un componente, disponemos de android:layout_weight, que nos sirve para establecer la relación de tamaño entre los componente. 

Pensemos en un LinearLayout horizontal, en donde incluimos dos componentes, al primero de ellos le indicamos android:layout_weight=1, y al segundo le indicamos  android:layout_weight=2. Eso implicará que el segundo tendrá el doble de tamaño que el primero.

Podéis plantear el tema de la siguiente manera. La longitud del “Linear” (ancho o alto, según la distribución elegida) se divide por la suma de todos los “layout_weight” indicados, y luego se asigna a cada componente el tamaño especificado por el valor obtenido multiplicado por las unidades “layout_weight”

TableLayout

Debemos contemplar esto, como una especialización de LinearLayout Vertical, en donde deberemos insertar componentes TableRow para cada fila de la tabla que deseemos, que también es una especialización de LinearLayout horizontal. Aunque disponemos de la mayoría de propiedades de LinearLayout, tenemos comportamientos específicos, como que el numero de columnas y la anchura de columnas se establecerá en función del “TableRow” con mayor numero de componentes insertados, y su anchura máxima. Esto hace que tenga la visión de tabla que nos interesa. Una característica especial de este layout, es la capacidad para ocultar, desde programa, las filas o las columnas, por medio de

android:collapseColumns o setColumnCollapsed

Las columnas se pueden reducir hasta ocupar el espacio disponible en el contenedor con

android:shrinkColumns,setColumnShrinkable o setShrinkAllColumns.

Las columnas pueden expandirse hasta ocupar la totalidad del TableLayout” con

android:stretchColumns, setColumnStretchable o setStretchAllColumns

TableRow – Se ha de insertar dentro de un TableLayout y funciona de forma parecida a un “LinearLayout” horizontal para establecer cada fila de una tabla. Cada componente que le añadamos, representará una columna de la tabla.

Cualquier componente de un tableRow, dispone de “android:layout_span” para indicar cuantas “columnas” ocupa.

RelativeLayout

Este layout, es el que nos sugiere AndroidStudio por defecto, y cada componente se sitúa con relación a otro componente o a su parent. En la realidad  proporciona ubicaciones que se comportan casi como si fueran absolutas, aunque son capaces de redimensionarse. La diferencia principal es que el componente no dispone de una referencia para la anchura y la altura, ya que seria el “parent” completo, por lo que no se producirá redimensionamiento del componente, solo de su ubicación.

Para los posicionamientos dispone:

  • Conrelacion a otro control:
    • android:layout_above.
    • android:layout_below.
    • android:layout_toLeftOf.
    • android:layout_toRightOf.
    • android:layout_alignLeft.
    • android:layout_alignRight.
    • android:layout_alignTop.
    • android:layout_alignBottom.
    • android:layout_alignBaseline.
  • Con relación alParent:
    • android:layout_alignParentLeft.
    • android:layout_alignParentRight.
    • android:layout_alignParentTop.
    • android:layout_alignParentBottom.
    • android:layout_centerHorizontal.
    • android:layout_centerVertical.
    • android:layout_centerInParent.

GridLayout

Este layout aparece con la versión 4.o de Android, correspondiente a la versión de API 14. Y se basa en una estructura de tabla, en donde podemos establecer las columnas, i las filas por medio de android:rowCount y android:columnCount. Al ser un componente con características de filas y columnas, hace mas fácil su gestión, que el propio TableLayout, y dado el tiempo que lleva implantado es razonablemente segura su utilización. Segun  android:orientation, los elementos se iran colocando secuencialmente por filas o columnas, pasando a la siguiente columna o fila al llenarse la dimension. Igual que para TableLayout, disponemos de las propiedades android:layout_rowSpan y android:layout_columnSpan  cuando una celda deba ocupar mas de una fila o mas de una columna

Si deseamos no realizar la carga en secuencia, podemos utilizar los atributos android:layout_row  y android:layout_column, para indicar directamente la celda que deseamos cargar

Atributos comunes

Tenemos que añadir todas las propiedades que tienen en comun los layouts, ademas de las indicadas, y son:

  • Opciones de margen :
    • android:layout_margin.
    • android:layout_marginBottom.
    • android:layout_marginTop.
    • android:layout_marginLeft.
    • android:layout_marginRight.
  • Opciones de espaciado o padding:
    • android:padding.
    • android:paddingBottom.
    • android:paddingTop.
    • android:paddingLeft.
    • android:paddingRight.

Dibujando nuestro layout

Tras esta explicación, vamos a ver como implementamos el TableLayout.

En inicio, habíamos planteado utilizar el GridLayout, pero como es una pantalla sencilla y deseamos que la longitud de todos los botones sea igual, es mas simple el utilizar TableLayout

2014-10-20_12h23_27

Situamos el ratón en 1 y con un clic seleccionamos, a continuación, pulsamos la tecla de suprimir; no indicara un error porque no hay ningún layout definido.

Nos colocamos en (2) y arrastramos (con botón izquierdo) el layout según indica la fecha; al soltar veréis que (1) a cambiado y ahora tiene un TableLayout, pero no tiene definido filas ni columnas

A continuación, hacemos lo mismo con un “TableRow”, y eso lo deberíamos hacer con cada componente, pero, realmente puede que sea mas sencillo introducirlo directamente en la pantalla de texto, por lo que partiendo de esta pantalla,

2014-10-20_19h18_47

 Podemos modificarla hasta conseguir esta

AndroidStudio_Table

Dentro del TableLayout, le hemos añadido dos TableRow, que seran las dos filas de la tabla, y dentro de cada una hemos añadido dos botones, y a cada botón, le hemos añadido nombre.

También hemos añadido al fichero “string.xml” todos los literales que hemos utilizado.

En los próximos artículos, iremos añadiendo el código Java necesario, aunque ahora mismo, ya deberíais ver la pantalla con cuatro botones….Algo es algo!

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Android, Formacion. Guarda el enlace permanente.

3 respuestas a Android-Utilizando recursos del telefono

  1. Sensor dijo:

    hola gracias por el tutorial, soy nuevo en esto, tengo una gran duda, a qué se refiere cuando dice “También hemos añadido al fichero “string.xml” todos los literales que hemos utilizado.”

    • Miguel dijo:

      Unos párrafos antes, comento la utilidad del fichero res/values/strings.xml, y en ese comentario, solo indico que hemos guardado todos los literales utilizados en ese fichero….

  2. jose dijo:

    hola me podrian decir como manejar el flash de la camara para que se abra y cierre en un tiempo que yo quiera… saludos.

Deja un comentario