Ejercicio_1

Crear la pantalla de un Login
El usuario deberá loguearse con un número de teléfono y una contraseña.
1.- Primero definimos los colores que usaremos
colors.xml
<color name="colorAccent">#FF4081</color>
<!-- Mis colores -->
<color name="naranja_claro">#F6AB56</color>
<color name="color_fondo_toolbar">#5D5E5E</color>
<color name="color_fondo_principal">#2E8274</color>
<color name="color_blanco">#ffffff</color>
2.- Ahora crearemos un efecto que se signará el botón cuando se pulse sobre
él, en este caso un efecto parpadeo
Crear un drawable, para crear el parpadeo al pulsar el botón
 Clic derecho sobre la carpeta drawable -> New -> Drawable resource file.

Colocarle un nombre, en este ejemplo usaremos btn_puls_normal

Ahora debes tener un archivo llamado btn_puls_normal.xml

Abrir el archivo y teclear lo siguiente
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pulsado -->
<item android:drawable="@color/colorAccent" android:state_pressed="true" />
<!-- Normal -->
<item android:drawable="@color/naranja_claro" android:state_pressed="false"/>
</selector>
3.- Creamos las cadenas o strings que aparecerán el activity
strings.xml
<!-- Textos Login -->
<string name="str_init_sesion">Inicio de sesión</string>
<string name="str_necesitas_cuenta">Necesitas una cuenta para iniciar sesión</string>
<string name="str_crear_cuenta">Crear cuenta</string>
<string name="str_usuario">Usuario</string>
<string name="str_olvidas_passwd">Olvidaste tu contraseña</string>
<string name="str_inicia_sesion">Iniciar sesión</string>
4.- Quitamos el ToolBar (ActionBar) que aparece por defecto al crear el
proyecto.
styles.xml
Quitamos el ToolBar (ActionBar) que aparece por defecto
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/PrimaryColor</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
5.- Crearemos los estilos aplicables a los botones, textos de entrada y
textos visibles del Activity del Login (Seguimos en el mismo archivo
styles.xml)
<style name="tool_bar_sencillo">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">64dp</item>
<item name="android:background">@color/color_fondo_toolbar</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:textColor">@color/naranja_claro</item>
<item name="android:textSize">25sp</item>
<item name="android:gravity">left|center</item>
</style>
<style name="boton">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_marginLeft">15dp</item>
<item name="android:layout_marginRight">15dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:background">@drawable/btn_pusl_normal</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">20sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="texo_sencillo">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="entrada_datos">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:textSize">20dp</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:background">@android:drawable/editbox_background</item>
<item name="android:padding">10dp</item>
</style>
6.- Trabajamos en el activity correspondiente
longin.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="@color/color_fondo_principal"
tools:context=".VisorLogin">
<!--
ToolBar -->
<TextView
android:id="@+id/tool_bar_login"
android:text="@string/str_init_sesion"
style="@style/tool_bar_sencillo" />
<!-- Primer texto -->
<TextView
android:id="@+id/necesitas_cuenta"
style="@style/texo_sencillo"
android:layout_centerHorizontal="true"
android:layout_below="@+id/tool_bar_login"
android:text="@string/str_necesitas_cuenta"/>
<!-- Boton crear cuenta -->
<Button
android:id="@+id/crear_boton"
style="@style/boton"
android:text="@string/str_crear_cuenta"
android:layout_below="@+id/necesitas_cuenta"/>
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/crear_boton"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:background="#C8C9CB" />
<!-- Pedir numero de telefono -->
<EditText
android:id="@+id/nombre_input"
style="@style/entrada_datos"
android:layout_below="@+id/divider"
android:maxLength="40"
android:hint="@string/str_num_telefono"
android:inputType="phone" />
<!-- Pedir password -->
<EditText
android:id="@+id/contrasena_input"
style="@style/entrada_datos"
android:layout_below="@+id/nombre_input"
android:maxLength="20"
android:hint="@string/str_passwd"
android:inputType="textPassword" />
<!-- Testo para Olvidaste password -->
<TextView
android:id="@+id/olvidar_text"
style="@style/texo_sencillo"
android:layout_marginLeft="15dp"
android:text="@string/str_olvidas_passwd"
android:layout_above="@+id/entrar_boton" />
<!-- Boton iniciar sesion -->
<Button
android:id="@+id/entrar_boton"
style="@style/boton"
android:layout_alignParentBottom="true"
android:text="@string/str_init_sesion" />
</RelativeLayout>