Firebase Phone Authentication UI | Android Studio | Java
4 min readMar 26, 2021
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
here we will use two dependencies. One is for Country Code Picker and another one is for the Loader.
dependencies {......
implementation 'com.hbb20:ccp:2.4.7'
implementation 'com.tuyenmonkey:mkloader:1.4.0'
}
Step 2: Login page
- now in the login XML file, add the country code picker, and edit text for the phone number. And add a button to go to the 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.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
On the verification page, we simply add an edit text for the OTP and a button to go to the main page after verification by the firebase.
<?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.
