Welcome back to the "Phones gallery" serries. Today we gonna create the login layout, so no java in this part there is only XML. Lets get started :
Colors :
Add the 2 following colors to your colors.xml file :
<color name="gray1">#d8d8d8d8</color>
<color name="gray2">#33ffffff</color>
Background file for the edit text :
In order to make our EditText look nice we need to create a new drawable resource file. In my case i named it "edit_text_bg" and here it is my edit_text_bg.xml file :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/gray2"/>
<corners android:radius="10dp"/>
</shape>
The login activity design :
Here my activity_login.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"
android:background="@drawable/splash_bg"
tools:context=".Login">
<TextView
android:id="@+id/appName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:fontFamily="@font/allison"
android:text="@string/app_name"
android:textColor="@color/orange1"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/loginTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:fontFamily="@font/ubuntu"
android:text="@string/login"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/appName" />
<EditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:background="@drawable/edit_text_bg"
android:drawableStart="@drawable/email"
android:drawablePadding="15dp"
android:fontFamily="@font/ubuntu"
android:hint="@string/email"
android:inputType="textEmailAddress"
android:paddingHorizontal="15dp"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/loginTextView" />
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="10dp"
android:background="@drawable/edit_text_bg"
android:drawableStart="@drawable/password"
android:drawablePadding="15dp"
android:fontFamily="@font/ubuntu"
android:hint="@string/password"
android:inputType="textPassword"
android:paddingHorizontal="15dp"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/email" />
<Button
android:id="@+id/signIn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:backgroundTint="@color/orange1"
android:fontFamily="@font/ubuntu"
android:text="@string/sign_in"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="@id/password" />
<Button
android:id="@+id/forgotPassword"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginEnd="20dp"
android:background="#00000000"
android:drawableEnd="@drawable/forgot_password"
android:fontFamily="@font/ubuntu"
android:text="@string/forgot_your_password"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/signIn" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/separatorViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/forgotPassword">
<TextView
android:id="@+id/orTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/ubuntu"
android:text="@string/or"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="10dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/orTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="10dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/orTextView"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.gms.common.SignInButton
android:id="@+id/googleBtn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="@id/separatorViews"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center_vertical|end"
android:layout_marginEnd="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/you_don_t_have_an_account"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"
android:textColor="@color/white"/>
<Button
android:id="@+id/signUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:background="#00000000"
android:textColor="@color/orange1"
android:textAllCaps="false"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Notes :
In order to get the SignInButton (google sign in button) you need to connect to a firebase and implement the google authentication to your android studio project.
To do that just go to tools then firebase, search for the firebase authentication and choose the google authentication.
You will face to options : connect to firebase and implement the google authentication. Just do both of them(If you did not understand just watch the tutorial video).
For the icons you can add them from the android studio itself just create a new vector asset inside the drawable directory.
Youtube :
You can simply go ahead and watch the Youtube video from here :
Thanks for watching, enjoy!