Hoje em dia, os aplicativos Android são muito populares, especialmente os aplicativos de mídia social. Essa IU geralmente é vista no aplicativo “Facebook Lite”. Neste artigo, criaremos uma IU de login do Facebook no Android. Abaixo estão as várias etapas para fazer isso.

Implementação passo a passo

Etapa 1: Criar um novo projeto

Para criar um novo projeto no Android Studio, consulte Como criar / iniciar um novo projeto no Android Studio . Em primeiro lugar, selecione a atividade vazia e clique no botão seguinte. Dê o nome do seu aplicativo, como “Interface de usuário de login do Facebook”. Em seguida, selecione Kotlin / Java como a linguagem de programação. Em seguida, selecione SDK mínimo, por exemplo, neste estamos usando “API16: Android 4.1 (Jelly Bean)”. em seguida, clique no botão Concluir.

Etapa 2: Trabalhar com o arquivo activity_main.xml

Navegue até app> res> layout> activity_main.xml e adicione o código abaixo a esse arquivo. Abaixo está o código para o arquivo activity_main.xml . 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3b5998"
    android:orientation="vertical">
  
    <!--Imageview for Facebook logo image-->
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        android:src="@drawable/fb_logo" />
  
    <!--EditText for user name or email address-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="80dp"
        android:layout_marginRight="20dp"
        android:backgroundTint="#d3d3d3"
        android:hint="Username or Email"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:padding="10dp"
        android:textColor="#ffffff"
        android:textColorHint="#d3d3d3" />
  
    <!--EditText for user password-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:backgroundTint="#d3d3d3"
        android:hint="Password"
        android:inputType="textPassword"
        android:maxLines="1"
        android:padding="10dp"
        android:textColor="#ffffff"
        android:textColorHint="#d3d3d3" />
  
    <!-- Login Button for Facebook Log In-->
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="35dp"
        android:layout_marginRight="20dp"
        android:backgroundTint="#5c6bc0"
        android:padding="10dp"
        android:text="Log In"
        android:textColor="#ffffff"
        android:textSize="16sp"
        android:textStyle="bold" />
      
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="vertical">
  
            <TextView
                android:id="@+id/txtSignUp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="Sign Up for Facebook"
                android:textColor="#ffffff" />
              
            <TextView
                android:id="@+id/txtForgotPassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="15dp"
                android:layout_marginBottom="15dp"
                android:text="Forgot Password?"
                android:textColor="#ffffff" />
        </LinearLayout>
  
    </RelativeLayout>
      
</LinearLayout>

Etapa 3: Trabalhando com o arquivo colors.xml

Adicione este código em app> res> values> arquivo colors.xml .

<?xml version="1.0" encoding="utf-8"?>
<resources>
      
    <!-- colors code we are using in this project -->
    <color name="purple_200">#3b5998</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    
</resources>

A imagem usada neste projeto é adicionada à pasta drawable. Para navegar na imagem, navegue até app> res> drawable e você encontrará a imagem nessa pasta. Agora execute o aplicativo e veja a saída do código abaixo. 

IU de saída:

Nota: Para criar um login do Facebook usando um aplicativo Android, consulte Como criar um login do Facebook usando um aplicativo Android ?

Link do GitHub: https://github.com/bhartik021/Facebook_Login_Register_UI