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

Hoy en día, las aplicaciones de Android son muy populares, especialmente las aplicaciones de redes sociales. Esta interfaz de usuario de inicio de sesión generalmente se ve en la aplicación «Twitter». En este artículo, crearemos una interfaz de usuario de inicio de sesión de Twitter en Android Studio. A continuación se muestran los diversos pasos sobre cómo hacerlo. Esto ayudará al principiante a crear una interfaz de usuario increíble en Android consultando este artículo.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . En primer lugar, seleccione la actividad vacía y luego haga clic en el botón siguiente. Proporcione el nombre de su aplicación como «Interfaz de usuario de inicio de sesión de Twitter». Luego seleccione Kotlin/Java como lenguaje de programación. En este proyecto, estamos utilizando java como lenguaje de programación. Luego, seleccione el SDK mínimo, por ejemplo, en este proyecto estamos usando «API16: Android 4.1 (Jelly Bean)». luego haga clic en el botón finalizar.

Paso 2: trabajar con el archivo colors.xml

El colors.xml es un archivo XML que se utiliza para almacenar los colores de los recursos. Un proyecto de Android contiene 3 colores esenciales, a saber:

• colorprimario
• colorPrimarioOscuro
• acento de color

Agregue este código en aplicación > res > valores > archivo colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#03A9F4</color>
    <color name="purple_500">#2196F3</color>
    <color name="purple_700">#F1f1f1</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="blue">#2196F3</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Si no obtiene colorPrimary, colorPrimaryDark y colorAccent en el archivo colors.xml. luego puede ir al archivo themes.xml y puede encontrar el nombre de estos colores en el archivo themes.xml . Estos colores también se utilizan en algunos recursos predefinidos del estudio de Android. Estos colores debían configurarse como opacos; de lo contrario, podrían surgir algunas excepciones.

Paso 3: trabajar con el archivo themes.xml

En este archivo, cambie DarkActionBar a NoActionBar. NoActionBar eliminará TittleBar de su aplicación. y si no desea eliminar TittleBar de su aplicación, déjelo como está. Vaya a aplicación > res > valores > archivo themes.xml.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TwitterLoginUI" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Paso 4: trabajar con el archivo dibujable

Todas las imágenes que agregamos en el archivo dibujable. por lo tanto, agregue el logotipo de Twitter en el archivo dibujable. La imagen utilizada en este proyecto se agrega a la carpeta dibujable. Para navegar por la imagen, vaya a app > res > drawable. y encontrarás la imagen en esa carpeta. 

Paso 5: trabajar con el archivo activity_main.xml

Para crear la interfaz de usuario de inicio de sesión de Twitter, utilizamos el siguiente componente de interfaz de usuario en nuestro archivo XML:

• RestricciónLayout
• Una vista de imagen
• Seis vistas de texto
• Dos editar texto
• Diseño de un pariente 
• Una vista

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">
  
    <!--Imageview for Twitter logo image-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/twitter_logo" />
      
    <!--Textview to display a message "Log in to twiiter"-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Log in to Twitter"
        android:textColor="#000000"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
  
    <!--Textview to display a message "Phone Number,
        email address, or Username"-->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:text="Phone Number, email address, or Username"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
      
    <!--EditText for user name or email address-->
    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />
      
    <!--Textview to display a message "Password"-->
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Password"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
      
    <!--EditText for numberPassword | textWebPassword-->
    <EditText
        android:id="@+id/editText2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="numberPassword|textWebPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
      
    <!--Textview to display a message "Sign Up"-->
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Sign Up"
        android:textColor="@color/purple_500"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <!--Textview to display a message "Forgotten your password?"-->
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Forgotten your password?"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText2" />
  
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
  
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentTop="true"
            android:background="#333" />
  
        <TextView
            android:id="@+id/textView6"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:background="@drawable/roundtext"
            android:gravity="center_horizontal"
            android:padding="8dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="Log in"
            android:textAlignment="center"
            android:textColor="#fff"
            android:textStyle="bold" />
    </RelativeLayout>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 6: trabajar con el archivo roundtext.xml

Vaya a la aplicación> res> dibujable> Haga clic con el botón derecho> Nuevo> Archivo de recursos dibujable y nombre el archivo como texto redondo. A continuación se muestra el código para el archivo roundtext.xml .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <solid android:color="@color/blue"/>
</shape>

Paso 7: trabajar con el archivo MainActivity.java

Como no estamos trabajando con el archivo MainActivity.java , no necesitamos escribir ningún código dentro del archivo MainActivity.java . Mantenga el archivo MainActivity.java tal como está.

package com.example.twitter;
  
import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

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: