Firebase Phone Authentication UI | Android Studio | Java

Firebase Phone Authentication UI | Android Studio | Java

In this blog, we’re going to design a firebase phone authentication UI (User Interface) with Country Code Picker. In the later part, we will discuss its functionality.

Step 1: add the dependency

dependencies {......
implementation 'com.hbb20:ccp:2.4.7'
implementation 'com.tuyenmonkey:mkloader:1.4.0'
}

Step 2: Login page

<?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=".activities.LoginActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/login_back"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"/>
<LinearLayout
android:background="@color/login_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="40dp"
tools:ignore="UselessParent">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/pexel"
android:layout_marginStart="20dp"
android:contentDescription="@string/app_name"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:text="Login"
android:gravity="end"
android:textSize="24sp"
android:textColor="@color/white"
android:textStyle="bold"/>
</LinearLayout> <LinearLayout
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter your phone number"
android:textColor="@color/white"
android:layout_marginStart="40dp"
android:layout_marginTop="40dp"
/>
<LinearLayout
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<com.hbb20.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginStart="20dp"
app:ccp_contentColor="@color/white"
android:id="@+id/ccp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText_carrierNumber"
android:layout_gravity="center_vertical"
android:layout_marginTop="2dp"
android:background="#00000000"
android:gravity="center_vertical"
android:hint="99999 99999"
android:inputType="phone"
android:textSize="20sp"
android:textColor="@color/white"
android:textColorHint="#787878"
android:textCursorDrawable="@drawable/cursor_white"
android:importantForAutofill="no"/>
</LinearLayout> <View
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:background="@color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/next"
android:text="Verify"
android:paddingStart="60dp"
android:paddingEnd="60dp"
android:textSize="16sp"
android:background="@drawable/ripple_back"
android:textColor="@color/white"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"/>
<LinearLayout
android:gravity="bottom|center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginBottom="40dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Signing up I agree"
android:textColor="@color/white"
android:textSize="14sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terms and Conditions"
android:textColor="#2196F3"
android:textSize="14sp"
android:textStyle="bold"
android:layout_marginStart="2dp"/>
</LinearLayout> </LinearLayout> </LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>

here I used my app logo and a text view to show the page name that is login. You can change it according to your requirements.

Outcome:

  • Now in the login java file initialize the country code picker, edit text, and button. And add the onClick listener on the button to go to the Verification Page. Just for this blog, we will redirect it to the verification page. Later we will add the functionality.
public class LoginActivity extends AppCompatActivity {    private CountryCodePicker countryCodePicker;
private EditText number;
Button next;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
getWindow().setFlags
(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
countryCodePicker = findViewById(R.id.ccp);
number = findViewById(R.id.editText_carrierNumber);
next = findViewById(R.id.next);
countryCodePicker.registerCarrierNumberEditText(number); next.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(LoginActivity.this,
VerificationActivity.class));
finish();
}
});
}
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
getWindow().setFlags
(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

this code snippet will allow the window to extend outside of the screen.

Step 3: Verification Page

<?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=".activities.VerificationActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"
android:src="@drawable/login_back" />
<LinearLayout
android:background="@color/login_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="40dp"
tools:ignore="UselessParent">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/pexel"
android:layout_marginStart="20dp"
android:contentDescription="@string/app_name"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:text="Verification"
android:gravity="end"
android:textSize="24sp"
android:textColor="@color/white"
android:textStyle="bold"/>
</LinearLayout> <LinearLayout
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_weight="0.8"
android:layout_width="match_parent"
android:layout_height="0dp">
<LinearLayout
android:orientation="vertical"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/otp"
android:layout_gravity="center"
android:layout_marginTop="2dp"
android:background="#00000000"
android:gravity="center"
android:hint="Enter OTP"
android:inputType="number"
android:textSize="20sp"
android:textColor="@color/white"
android:textColorHint="#787878"
android:textCursorDrawable="@drawable/cursor_white"
android:importantForAutofill="no"/>
</LinearLayout> <View
android:layout_width="150dp"
android:layout_height="2dp"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:background="@color/white"
android:layout_gravity="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/submit"
android:text="Next"
android:paddingStart="60dp"
android:paddingEnd="60dp"
android:textSize="16sp"
android:background="@drawable/ripple_back"
android:textColor="@color/white"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Don't Received the code? "
android:textColor="@color/white"
android:textSize="14sp"/>
<TextView
android:id="@+id/resend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#2196F3"
android:textSize="15sp"
android:textStyle="bold"
android:layout_marginStart="2dp"/>
</LinearLayout> </LinearLayout> </LinearLayout> <com.tuyenmonkey.mkloader.MKLoader
android:id="@+id/loader"
android:layout_width="60dp"
android:layout_height="60dp"
android:visibility="gone"
android:layout_marginTop="60dp"
app:mk_color="@color/white"
app:mk_type="FishSpinner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

loader visibility is gone because we want when the user will enter the valid OTP it will load and bring the user to the main page.

Outcome:

Now in the verification java file initialize our loader, edit text, text view, and button.

public class VerificationActivity extends AppCompatActivity {    private EditText otp;
private Button submit;
private TextView resend;
private MKLoader loader;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_verification);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
}

In the later part, we will use our firebase phone authentication sign-in method in our android app.

Stay tuned for the next part.

You can follow me on YouTube:

Also, visit my website for more content like this

Follow me on Instagram

Follow me on Facebook

Hi everyone, myself Golap an Android app developer with UI/UX designer.