Mis Lugares: Primeras actividades

En el apartado anterior creamos la aplicación Mis Lugares que permitirá a los usuarios almacenar información sobre los sitios que han visitado.

En este apartado crearemos un par de actividades para esta aplicación. La primera actividad contendrá simplemente cuatro botones. La segunda contendrá un formulario para dar de alta y editar un lugar. Esta primera versión de la aplicación no almacenará los datos introducidos.

Práctica: Creación de una primera actividad en Mis Lugares

En esta práctica crearemos una primera actividad que contendrá simplemente cuatro botones

1.  Edita el fichero res > layout > content_main.xml y trata de crear una vista similar a la que ves a continuación. Has de dejar el NestedScrollView que ya tenías y reemplazar el TextView por  un ConstraintLayout o LinearLayout que contenga cuatro Button. Un NestedScrollView solo puede contener dentro un elemento, por lo que no puedes introducir directamente los cuatro botones. Usando un layout que los contenga se resuelve el problema.

Solución:

1. El fichero content_main.xml ha de ser similar al siguiente:

<android.support.v4.widget.NestedScrollView
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   tools:showIn="@layout/activity_scrolling" android:layout_width="match_parent"
   android:layout_height="match_parent" tools:context=".MainActivity">
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="30dp">
        <Button
            android:id="@+id/button01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_mostrar" />
        <Button
            android:id="@+id/button02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_preferencias" />
        <Button
            android:id="@+id/button03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_acerca_de" />
        <Button
            android:id="@+id/button04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_salir" />
   </LinearLayout>
</android.support.v4.widget.NestedScrollView>

2. El fichero res > values > strings.xml ha de tener el siguiente contenido:

<resources>
    <string name="accion_mostrar">Mostrar Lugares</string>
    <string name="accion_preferencias">Preferencias</string>
    <string name="accion_acerca_de">Acerca de </string>
    <string name="accion_salir">Salir</string>
    <string name="app_name">Mis Lugares</string>
    ...
</resources>
Práctica: Un formulario para introducir nuevos lugares.

El objetivo de esta práctica es crear un layout que permita introducir y editar lugares en la aplicación Mis Lugares.

1.  Crea un nuevo layout con nombre edicion_lugar.xml.

2.  Ha de parecerse al siguiente formulario. Puedes basarte en un LinearLayout o ConstraintLayout para distribuir los elementos. Pero es importante que este layout, se encuentre dentro de un NestedScrollView para que cuando el formulario no quepa en pantalla se pueda desplazar verticalmente.

3.     Introduce a la derecha del TextView con texto “Tipo:” un Spinner con id tipo. Más adelante configuraremos esta vista para que muestre un desplegable con los tipos de lugares.

4.     Las vistas EditText han de definir el atributo id con los valores: nombre, direccion, telefono, url y comentario. Utiliza también el atributo hint para dar indicaciones sobre el valor a introducir. Utiliza el atributo inputType para indicar qué tipo de entrada esperamos. De esta manera se mostrará un teclado adecuado (por ejemplo si introducimos un correo electrónico aparecerá la tecla @).

Nota: El atributo inputType admite los siguientes valores (en negrita los que has de utilizar en este ejercicio): none, text, textCapCharacters, textCapWords, textCapSentences, textAutoCorrect, textAutoComplete, textMultiLine, textImeMultiLine, textNoSuggestions, textUri, textEmailAddress, textEmailSubject, textShortMessage, textLongMessage, textPersonName, textPostalAddress, textPassword, textVisiblePassword, textWebEditText, textFilter, textPhonetic, textWebEmailAddress, textWebPassword, number, numberSigned, numberDecimal, numberPassword, phone, datetime, date y time.
5.     Abre la clase MainActivity y en el método onCreate() reemplaza: 

setContentView(R.layout.activity_main.edicion_lugar);

6.     Comenta todas la líneas de este método que hay debajo usando /* ... */.  Como ya no se crea el layout activity_main los id de vista a los que se accede ya no existen.

7.     Ejecuta la aplicación y verifica como cambia el tipo de teclado en cada EditText

8.     Deshaz el cambio realizado en el ponto 5 y 6.

Solución:

<android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/relativeLayout">
        <TextView
                android:id="@+id/t_nombre"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nombre:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <EditText
                android:id="@+id/nombre"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="algo que identifique el lugar"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/t_nombre"
                android:layout_marginStart="8dp">
            <requestFocus/>
        </EditText>
        <TextView
                android:id="@+id/t_tipo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tipo:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/nombre"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <Spinner
                android:id="@+id/tipo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toTopOf="@id/t_tipo"
                app:layout_constraintLeft_toRightOf="@id/t_tipo"/>
        <TextView
                android:id="@+id/t_direccion"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Dirección:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/t_tipo"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <EditText
                android:id="@+id/direccion"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="dirección del lugar"
                android:inputType="textPostalAddress"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/t_direccion"
                android:layout_marginStart="8dp"/>
        <TextView
                android:id="@+id/t_telefono"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Telefono:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/direccion"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <EditText
                android:id="@+id/telefono"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="teléfono para contactar"
                android:inputType="phone"
                app:layout_constraintLeft_toRightOf="@id/t_telefono" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="8dp"
                app:layout_constraintStart_toEndOf="@+id/t_telefono"
                android:layout_marginStart="8dp"
                app:layout_constraintBaseline_toBaselineOf="@+id/t_telefono"/>
        <TextView
                android:id="@+id/t_url"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Url:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/telefono"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <EditText
                android:id="@+id/url"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="página web"
                android:inputType="textUri"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/t_url"
                android:layout_marginStart="8dp"/>
        <TextView
                android:id="@+id/t_comentario"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Comentario:"
                android:textAppearance="?android:attr/textAppearanceMedium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/url"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"/>
        <EditText
                android:id="@+id/comentario"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="introduce tus notas"
                android:inputType="textMultiLine"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/t_comentario"
                android:layout_marginStart="8dp"/>
    </android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>