In this blog, we have to create a tab layout with the help of a view pager in the calendar app with the platform android studio. So first we have to create a four fragments layout named OneFragment, TwoFragment, ThreeFragment, and FourFragment then we have to move further steps.
And all fragments have different name layouts given below.
Step-01
OneFragment code below:
<?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:fitsSystemWindows="true" tools:context=".fragments.OneFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="होम" android:textColor="@color/purple_200" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
TwoFragment code below:
<?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:fitsSystemWindows="true" tools:context=".fragments.TwoFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="शुभ मुहूर्त 2023" android:textColor="@color/purple_200" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
ThreeFragment code below:
<?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:fitsSystemWindows="true" tools:context=".fragments.ThreeFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="आरती 2023" android:textColor="@color/purple_200" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
ThreeFragment code below:
<?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=".fragments.FourFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="राशिफल 2023" android:textColor="@color/purple_200" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
Step-02
We have to create a TabLayout then we have to show all fragments with the help of TabLayout. So we have to implement TabLayout under AppBarLayout.
<com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/purple_200" app:tabGravity="fill" app:tabIndicatorColor="@color/blue" app:tabIndicatorHeight="2dp" app:tabMode="fixed" app:tabSelectedTextColor="@color/blue" app:tabTextColor="@color/white" />
After that, we have to create a viewPager layout which helps to show all fragments under the viewPager layout.
<androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/appBarLayout" />
Step-03
Now we have to create a java class named ViewPagerAdapter then you can implement all codes.
package com.click2code.calendarappselfdemo.adapter; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import java.util.ArrayList; import java.util.List; public class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> lstFragment = new ArrayList<>(); private final List<String> lstTitle = new ArrayList<>(); public ViewPagerAdapter(@NonNull FragmentManager fm) { super(fm); } @NonNull @Override public Fragment getItem(int position) { return lstFragment.get(position); } @Override public int getCount() { return lstTitle.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return lstTitle.get(position); } // Add Fragment Manager public void AddFragment(Fragment fragment, String title) { lstFragment.add(fragment); lstTitle.add(title); } }
Now, some of the Java code is given below to show TabLayout in HomePage.
TabLayout tabLayout = findViewById(R.id.tabLayout); ViewPager viewPager = findViewById(R.id.viewPager); ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.AddFragment(new OneFragment(), "होम"); adapter.AddFragment(new TwoFragment(), "शुभ मुहूर्त 2023"); adapter.AddFragment(new ThreeFragment(), "आरती 2023"); adapter.AddFragment(new FourFragment(), "राशिफल 2023"); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager);
