Login and Signup Page in Android Studio using TabLayout and ViewPager2
TabLayout
TabLayout is a horizontal layout in which different tabs will be available to swipe between them using viewpager2.
In the below project, we have used two tabs login and signup tabs where we will swipe between them. TabLayout is often used with viewpager2.
ViewPager2
ViewPager2 is a better version of ViewPager where there will be a view in which you can swipe right or left in a particular area.
In the below project, we have used viewpager2 to swipe between the login and signup pages.
Step-by-Step Implementation
Step 1: Open Android Studio. Create New Project and choose Empty Activity.
Step 2: Pre-requisites
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</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>
<color name="lavender">#8692f7</color>
</resources>
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.LogSignSQLPractice" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
Drawable
Add email, lock, and password.
viewpager_bkg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@color/white"/>
<corners
android:radius="40dp"/>
<stroke
android:color="@color/lavender"
android:width="1dp"/>
</shape>
tab_bkg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@color/white"/>
<corners
android:radius="40dp"/>
</shape>
edittext_bkg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@color/white"/>
<corners
android:radius="20dp"/>
<stroke
android:color="@color/lavender"
android:width="2dp"/>
</shape>
Step 3: XML Layouts
activity_main.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/mainbkg"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="380dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".78"
app:layout_constraintVertical_bias="1">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="630dp"
android:id="@+id/view_pager"
app:layout_constraintVertical_bias="0"
android:background="@drawable/viewpager_bkg"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="@+id/tab_layout"
app:layout_constraintVertical_bias="0"
android:background="@drawable/tab_bkg"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_login_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".LoginTabFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:padding="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="@drawable/loginimg"/>
<EditText
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:id="@+id/login_email"
android:layout_marginTop="30dp"
android:padding="8dp"
android:hint="Email"
android:drawableLeft="@drawable/baseline_email_24"
android:drawablePadding="8dp"
android:background="@drawable/edittext_bkg"/>
<EditText
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:id="@+id/login_password"
android:layout_marginTop="20dp"
android:padding="8dp"
android:hint="Password"
android:inputType="textPassword"
android:drawableLeft="@drawable/baseline_lock_24"
android:drawablePadding="8dp"
android:background="@drawable/edittext_bkg"/>
<Button
android:layout_width="300dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:id="@+id/login_button"
android:textSize="18sp"
android:text="Login"
app:cornerRadius = "30dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
fragment_signup_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SignupTabFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:padding="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="@drawable/signimg"/>
<EditText
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:id="@+id/signup_email"
android:layout_marginTop="30dp"
android:padding="8dp"
android:hint="Email"
android:drawableLeft="@drawable/baseline_email_24"
android:drawablePadding="8dp"
android:background="@drawable/edittext_bkg"/>
<EditText
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:id="@+id/signup_password"
android:layout_marginTop="20dp"
android:padding="8dp"
android:hint="Password"
android:inputType="textPassword"
android:drawableLeft="@drawable/baseline_lock_24"
android:drawablePadding="8dp"
android:background="@drawable/edittext_bkg"/>
<EditText
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:id="@+id/signup_confirm"
android:layout_marginTop="20dp"
android:padding="8dp"
android:hint="Confirm Password"
android:inputType="textPassword"
android:drawableLeft="@drawable/baseline_password_24"
android:drawablePadding="8dp"
android:background="@drawable/edittext_bkg"/>
<Button
android:layout_width="300dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:id="@+id/signup_button"
android:textSize="18sp"
android:text="Signup"
app:cornerRadius = "30dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Step 4: Java Files
ViewPagerAdapter.java
package com.example.signlogintab;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
public class ViewPagerAdapter extends FragmentStateAdapter {
public ViewPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
super(fragmentManager, lifecycle);
}
@NonNull
@Override
public Fragment createFragment(int position) {
if (position == 1){
return new SignupTabFragment();
}
return new LoginTabFragment();
}
@Override
public int getItemCount() {
return 2;
}
}
MainActivity.java
package com.example.signlogintab;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager2 viewPager2;
private ViewPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tab_layout);
viewPager2 = findViewById(R.id.view_pager);
tabLayout.addTab(tabLayout.newTab().setText("Login"));
tabLayout.addTab(tabLayout.newTab().setText("Signup"));
FragmentManager fragmentManager = getSupportFragmentManager();
adapter = new ViewPagerAdapter(fragmentManager, getLifecycle());
viewPager2.setAdapter(adapter);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager2.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
tabLayout.selectTab(tabLayout.getTabAt(position));
}
});
}
}
Output
Tags:
App-Development
