Now let's start today's part :
Dependencies
In order to create a phone number country picker and a male/female switch we need to use this two libraries (click on the library name to check it):
Or add this line to your build.gradle(project) like this
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
And add those lines to your build.gradle(module) inside your dependencies:
implementation 'com.hbb20:ccp:2.3.1'
implementation 'com.github.jtv7:GenderToggle:1.0'
Now sync your project
sign_up.xml
Now let's create new activity and let's modify our sign_up.xml file like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:background="@drawable/splash_bg"
android:paddingHorizontal="10dp"
tools:context=".SignUp">
<Button
android:id="@+id/backBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:textAllCaps="false"
android:textSize="30sp"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"
android:drawableLeft="@drawable/back"
android:background="#00000000"
android:layout_marginTop="20dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="2">
<EditText
android:id="@+id/firstName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:background="@drawable/edit_text_bg"
android:drawableStart="@drawable/person"
android:drawablePadding="10dp"
android:fontFamily="@font/ubuntu"
android:hint="@string/first_name"
android:paddingHorizontal="10dp"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textSize="15sp"
android:inputType="text"/>
<EditText
android:id="@+id/secondName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_weight="1"
android:background="@drawable/edit_text_bg"
android:drawableStart="@drawable/person"
android:drawablePadding="10dp"
android:fontFamily="@font/ubuntu"
android:hint="@string/secondname"
android:paddingHorizontal="10dp"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textSize="15sp"
android:inputType="text"/>
</LinearLayout>
<EditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="@drawable/edit_text_bg"
android:hint="@string/email"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:paddingHorizontal="10dp"
android:drawableStart="@drawable/email"
android:drawablePadding="10dp"
android:inputType="textEmailAddress"/>
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="@drawable/edit_text_bg"
android:hint="@string/password"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:paddingHorizontal="10dp"
android:drawableStart="@drawable/password"
android:drawablePadding="10dp"
android:inputType="textPassword"/>
<EditText
android:id="@+id/confirmPassword"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="@drawable/edit_text_bg"
android:hint="@string/confirm_password"
android:textColor="@color/white"
android:textColorHint="@color/gray1"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:paddingHorizontal="10dp"
android:drawableStart="@drawable/password"
android:drawablePadding="10dp"
android:inputType="textPassword"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<com.hbb20.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
android:background="@drawable/edit_text_bg"
app:ccp_arrowColor="@color/white"
app:ccp_contentColor="@color/white"
android:layout_marginEnd="5dp"
android:gravity="center"
app:ccp_textSize="15sp"
app:ccp_defaultNameCode="DZ"/>
<EditText
android:id="@+id/phoneNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_marginStart="5dp"
android:background="@drawable/edit_text_bg"
android:hint="@string/phone_number"
android:inputType="phone"
android:textColorHint="@color/gray1"
android:textColor="@color/white"
android:fontFamily="@font/ubuntu"
android:paddingHorizontal="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/male"
android:textColor="@color/white"
android:textSize="15sp"
android:layout_marginEnd="5dp"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"/>
<com.jtv7.gendertogglelib.GenderToggle
android:id="@+id/genderSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:gt_default_selection="male"
app:gt_glow_enabled="false"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/female"
android:textColor="@color/white"
android:textSize="15sp"
android:layout_marginStart="5dp"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="@+id/signupBtn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:backgroundTint="@color/orange1"
android:layout_marginTop="20dp"
android:text="@string/sign_up"
android:textAllCaps="false"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:textStyle="bold"/>
</LinearLayout>
No go to your Login.java and add the onClickListner to the signup button and inside it create a new intent to the signup activity like this :
//signup click
signUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(Login.this,SignUp.class));
}
});
And finaly go to your SignUp.java and add the onClickListner to your back button like this :
//Back click
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
Youtube
Let's check the youtube video :
Thanks for watching, leave your opinion in the comments section!