¿Cómo crear una interfaz de usuario de inicio de sesión de Instagram con Android Studio?

Hola geeks, hoy en día las aplicaciones de redes sociales para Android están muy de moda, así que aquí vamos a diseñar la página de inicio de sesión de Instagram en Android Studio. Usando esto, los principiantes pueden crear una interfaz de usuario increíble en sus propias aplicaciones.

¿Qué vamos a construir en este artículo?

En este artículo, diseñaremos una página de inicio de sesión para Instagram. Para ello estaremos utilizando el logo de Instagram, EditText para el nombre de usuario o correo electrónico del usuario, campo Contraseña para la contraseña, Botón para iniciar sesión y una opción para iniciar sesión con Facebook. A continuación se proporciona una imagen de muestra para tener una idea de lo que vamos a construir en este artículo.

Implementación paso a paso

Paso 1: Creación de un nuevo proyecto

• Abra un nuevo proyecto.
• Estaremos trabajando en Actividad vacía con lenguaje como Java/Kotlin. Deje todas las demás opciones sin cambios.
• Puede cambiar el nombre del proyecto a su conveniencia.
• Habrá dos archivos predeterminados llamados activity_main.xml y MainActivity.java .

Si no sabe cómo crear un nuevo proyecto en Android Studio, puede consultar ¿Cómo crear/iniciar un nuevo proyecto en Android Studio? 

Paso 2: agregar activos vectoriales a dibujable

Agregue los siguientes activos vectoriales y nómbrelos según su elección.

Nota : si no sabe cómo agregar activos vectoriales en Android Studio, utilice el siguiente artículo: ¿Cómo agregar activos vectoriales en Android Studio?

Paso 3: Agregar un nuevo archivo de recursos a Drawable

Haga clic derecho en dibujable> nuevo> Archivo de recursos dibujable> Nombre el archivo como «background_edit_text» > Ok . Después de seguir los pasos anteriores, use el siguiente código en el archivo background_edit_text.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
   
    <solid android:color="#fafafa"/>
    <stroke android:color="#e7e7e7"
        android:width="1dp"/>
    <corners android:radius="4dp"/>
 
</shape>

Paso 4: navegue a aplicación > res > valores > strings.xml y use el código proporcionado a continuación 

<resources>
    <string name="app_name">Instagram_login_page_UI</string>
 
    <!-- string for showing the text "Forgot your login details-->
    <string name="forgot"><font color='c4c4c4'>Forgot your login details? </font><b>Get help logging in.</b></string>
     
    <!-- string to show the text " Dont have an account-->
    <string name="sign_up"><font color='c4c4c4'>Dont have an account? </font><b>Sign up.</b></string>
</resources>

Paso 5: trabajar con el archivo activity_main.xml

Vaya a aplicación > res > diseño > actividad_principal.xml y use el siguiente código en él.

<?xml version="1.0" encoding="utf-8"?>
<!-- Relative layout as parent layout-->
<RelativeLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
  <!-- Text view to display the
       text "English (India)" at
       uppermost part of the page-->
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="English (India)"
       android:textSize="14sp"
       android:textColor="#c4c4c4"
       android:layout_marginTop="6dp"
       android:layout_centerHorizontal="true"
       android:drawableRight="@drawable/ic_baseline_keyboard_arrow_down_24"/>
 
    <!-- Linear layout to contain all the
         editText, password , logo and button-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:paddingStart="28dp"
        android:paddingEnd="28dp"
        android:layout_centerInParent="true">
 
        <!-- Imageview displaying the logo
                or name of the application-->
        <ImageView
            android:layout_width="147dp"
            android:layout_height="82dp"
            android:adjustViewBounds="true"
            android:src="@drawable/logo" />
 
        <!-- Edit text provided to user to
             enter email, username or phone no.-->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:padding="12dp"
            android:singleLine="true"
            android:layout_marginTop="22dp"
            android:hint="Phone number, email or username"
            android:background="@drawable/background_edit_text"/>
       
        <!-- Edit text provided to write
              password (according to instagram UI)-->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:padding="12dp"
            android:singleLine="true"
            android:layout_marginTop="16dp"
            android:hint="Password"
            android:background="@drawable/background_edit_text"
            android:drawableRight="@drawable/ic_baseline_remove_red_eye_24"/>
         
          <!-- material button is used to display the "Login" button to user-->
        <com.google.android.material.button.MaterialButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Log In"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:padding="12dp"
            android:layout_marginTop="18dp"
            android:backgroundTint="#3897f0"
            app:cornerRadius="4dp"/>
       
       <!-- Text view displaying the text
             "Forgot your login details?"-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/forgot"
            android:textSize="12sp"
            android:layout_marginTop="8dp"/>
 
        <!-- Linear layout to display the message
             OR using view so that it can be shown separately-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="12sp"
            android:layout_gravity="center_vertical">
 
            <!-- to occupy the rectangular area in left side
                   so that message can be displayed in center-->
            <View
                android:layout_width="0dp"
                android:layout_height="1.5dp"
                android:layout_weight="1"
                android:background="#e2e2e2"/>
           
              <!-- textview displaying the message "OR"-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OR"
                android:textSize="14sp"
                android:textStyle="bold"
                android:textColor="#9a9a9a"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"/>
 
            <!-- to occupy the rectangular area in right
                 side so that message can be displayed in center-->
            <View
                android:layout_width="0dp"
                android:layout_height="1.5dp"
                android:layout_weight="1"
                android:background="#e2e2e2"/>
 
        </LinearLayout>
 
        <!-- text view to display the
              message "Log in with Facebook-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center"
            android:padding="4dp"
            android:text="Log in with Facebook"
            android:textColor="#3897f0"
            android:textSize="15sp"
            android:textStyle="bold"/>
    </LinearLayout>
   
    <View
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:background="#e2e2e2"
        android:layout_marginBottom="8dp"/>
   
    <!-- text view to show the message
          "Dont have an account?Sign up-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sign_up"
        android:text="@string/sign_up"
        android:textSize="12sp"
        android:textAlignment="center"
        android:layout_marginBottom="14dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal" />
   
</RelativeLayout>

¡Felicidades! hemos creado con éxito la interfaz de usuario de la página de inicio de sesión de Instagram. Ahora ejecute la aplicación y vea el resultado del código a continuación. Para compilar y ejecutar la aplicación, puede presionar shift + f10 en Windows y Ctrl + R en Mac.

Interfaz de usuario de salida: