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 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:
