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 que contenga cuatro Button. Un NestedScrollView solo puede contener dentro un elemento, por lo que no puedes introducir directamente los cuatro botones.
Solución:
1. El fichero content_main.xml ha de ser similar al siguiente:
<androidx.core.widget.nestedscrollview
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showin="@layout/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.constraintlayout
android:gravity="center"
android:id="@+id/linearLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="30dp">
<button
android:id="@+id/button01"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="@string/accion_mostrar"
app:layout_constraintend_toendof="parent"
app:layout_constraintstart_tostartof="parent"
app:layout_constrainttop_totopof="parent">
</button>
<button
android:id="@+id/button02"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="@string/accion_preferencias"
app:layout_constraintend_toendof="parent"
app:layout_constraintstart_tostartof="parent"
app:layout_constrainttop_tobottomof="@+id/button01">
</button>
<button
android:id="@+id/button03"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="@string/accion_acerca_de"
app:layout_constraintend_toendof="parent"
app:layout_constraintstart_tostartof="parent"
app:layout_constrainttop_tobottomof="@+id/button02">
</button>
<button
android:id="@+id/button04"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="@string/accion_salir"
app:layout_constraintend_toendof="parent"
app:layout_constraintstart_tostartof="parent"
app:layout_constrainttop_tobottomof="@+id/button03">
</button>
</androidx.constraintlayout.widget.constraintlayout>
</androidx.core.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. Has de basarte en un 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 el resto de 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>