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

Hoy en día, las aplicaciones de Android son muy populares. Esta interfaz de usuario generalmente se ve en la aplicación «Google Sign In». En este artículo, crearemos una interfaz de usuario de Google Sign en Android. 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. Dé el nombre de su aplicación como » Google Sign UI «. Luego seleccione Kotlin/Java como lenguaje de programación. Luego, seleccione el SDK mínimo, por ejemplo, en este caso estamos usando «API16: Android 4.1 (Jelly Bean)». luego haga clic en el botón finalizar.

Paso 2: trabajar con el archivo activity_main.xml

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

• Disposición relativa
• Una vista de imagen
• Cuatro vistas de texto
• Un texto de edición
• un botón

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"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
  
    <!--Imageview for Google logo image-->
    <ImageView
        android:id="@+id/imgGLogo"
        android:layout_width="160dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:padding="4dp"
        android:src="@drawable/google_logo" />
  
    <!--Textview to display a message "Sign In"-->
    <TextView
        android:id="@+id/txtSignIn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imgGLogo"
        android:layout_centerHorizontal="true"
        android:padding="6dp"
        android:text="Sign In"
        android:textColor="#000000"
        android:textSize="24sp"
        android:textStyle="bold" />
  
    <TextView
        android:id="@+id/txtUseAccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtSignIn"
        android:layout_centerHorizontal="true"
        android:padding="4dp"
        android:text="with your Google account"
        android:textColor="#000000" />
  
    <!--EditText for user name or email address-->
    <EditText
        android:id="@+id/etEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtUseAccount"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="10dp"
        android:hint="Username or Email"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:padding="10dp"
        android:textColor="#000000" />
  
    <TextView
        android:id="@+id/txtForgotEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/etEmail"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:padding="10dp"
        android:text="Forgot Email?"
        android:textColor="#2196f3"
        android:textStyle="bold" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="15dp"
        android:padding="10dp"
        android:text="Create Account"
        android:textColor="#2196f3"
        android:textStyle="bold" />
  
    <!-- Login Button for Google Sign In-->
    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="15dp"
        android:backgroundTint="#2196f3"
        android:elevation="6dp"
        android:padding="10dp"
        android:text="Next"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:textStyle="bold" />
  
</RelativeLayout>

Paso 3: trabajar con el archivo colors.xml

El colors.xml que un proyecto de Android contiene 3 colores esenciales, a saber:

• colorprimario
• colorPrimarioOscuro
• acento de color

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.

Artículo de referencia: Estudio

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#ffffff</color>
    <color name="purple_500">#2196f3</color>
    <color name="purple_700">#2196f3</color>
    <color name="teal_200">#2196f3</color>
    <color name="teal_700">#2196f3</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Paso 4: trabajar con el archivo MainActivity.kt

Dado que no estamos trabajando con el archivo MainActivity.kt , no necesitamos escribir ningún código dentro del archivo MainActivity.kt . Mantenga el archivo MainActivity.kt como está.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Paso 5: La imagen utilizada en este proyecto se agrega a la carpeta dibujable. Para navegar por la imagen, vaya a la aplicación > res > dibujable y encontrará la imagen en esa carpeta. 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.

Artículo de referencia:

Interfaz de usuario de salida:

Enlace GitHub: https://github.com/bhartik021/GoogleSignInUI