ANDROID: Ejercicios para crear layouts

Ejercicio 1

Fila de cuatro botones horizontalmente ocupando todo el ancho de la pantalla. Cada botón tiene que  ocupar el mismo espacio, o sea, el 25% del ancho de la pantalla.
Dejar un espacio alrededor del grupo de botones de 20dp. Separar entre sí cada uno de los botones por 5dp.

Solución

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="20dp">

  <Button android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:layout_margin="5dp" android:text="Botón 1" />

  <Button android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:layout_margin="5dp" android:text="Botón 2" />

  <Button android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:layout_margin="5dp" android:text="Botón 3" />

  <Button android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_weight="1" android:layout_margin="5dp" android:text="Botón 4" />

</LinearLayout>

Explicación

Con un LinearLayout horizontal ponemos los 4 botones en  una fila.

El padding de 20dp en el LinearLayout pone un espacio interno para su contenido (los botones).

Cada botón tiene un weight de 1 para que sean todos iguales dentro del padre.

El margin de 5dp en los botones hace que éstos queden separados entre sí por 5dp. 

Ejercicio 2

Dividir la pantalla verticalmente en dos mitades. En la mitad superior superior, colocar una imagen que ocupe toda la parte superior. En la mitad inferior colocar un texto largo que permita desplazarse con scroll para poder visualizarlo.Ambas mitades deben estar rodeadas de un margen de 5dp.

Solución

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="5dp">

  <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitCenter" android:layout_weight="1" android:src="@drawable/ic_launcher" />

  <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1">

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/texto" />

  </ScrollView>

</LinearLayout>

Ejercicio 3

Un botón que ocupe el 50% del ancho de la pantalla y que esté centrado vertical y horizontalmente en la pantalla.

Solución

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:gravity="center" android:weightSum="100">

  <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="50" android:text="Botón" />

</LinearLayout>

Ejercicio 4

Construir el siguiente formulario:

Solución

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="5dp" android:stretchColumns="1">

  <TableRow>

    <TextView android:text="Nombre (*)" android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="6dp" />

  </TableRow>

  <TableRow>

    <TextView android:text="Apellido (*)" android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="6dp" />

  </TableRow>

  <TableRow>

    <TextView android:text="e-mail (*)" android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="6dp" />

  </TableRow>

  <TableRow>

    <TextView android:text="Mensaje" android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="6dp" android:paddingRight="5dp" android:inputType="textMultiLine" android:lines="3" />

  </TableRow>

  <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content">

    <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Suscribirse por e-mail" android:checked="true" />

  </LinearLayout>

  <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp">

    <TextView android:text="Web del vendedor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#0000FF" android:textStyle="bold" />

  </LinearLayout>

  <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:gravity="center" android:orientation="horizontal">

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Confirmar" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancelar" />

  </LinearLayout>

</TableLayout>