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

Hola geeks, las aplicaciones de redes sociales de Android están muy de moda hoy en día, así que aquí vamos a diseñar una página de inicio de sesión de Instagram en Android Studio. El uso de esto permite a los principiantes crear algunas interfaces de usuario impresionantes 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 utilizaremos el logo de Instagram, EditText para el nombre de usuario o correo electrónico del usuario, Clave un campo para la contraseña, un 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 darle una idea de lo que vamos a construir en este artículo.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

  • Abra un nuevo proyecto.
  • Estaremos trabajando en Actividad vacía con un 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 actividad_principal.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 elementos vectoriales a elementos de diseño

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, use el siguiente artículo: ¿Cómo agregar activos vectoriales en Android Studio?

Paso 3: Agrega un nuevo archivo de recursos a Drawable

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

XML



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

Paso 4: navegue a la aplicación> res> valores> cadenas.xml y use el código que se proporciona a continuación allí

XML



<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

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

XML



<?xml version="1.0" encoding="utf-8"?>
<! – Relative layout as parent layout-->
<RelativeLayout
    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! creamos 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 salida:

Mis notas personales
flecha_caer_arriba

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *