TabLayout

activity_main.xml
<?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"
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:elevation="5dp"
app:popupTheme="@style/Theme.MaterialComponents.DayNight.DarkActionBar" />
</com.google.android.material.appbar.AppBarLayout>

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
app:tabBackground="@color/colorPrimary"
app:tabIndicatorColor="@color/white"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@android:color/black" />

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />


</LinearLayout>
MainActivity.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import java.util.Objects;

public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager2 viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

toolbar = findViewById(R.id.toolbar);
tabLayout = findViewById(R.id.tabLayout);
viewPager = findViewById(R.id.viewPager);

setSupportActionBar(toolbar);
Objects.requireNonNull(getSupportActionBar()).setTitle("New TabLayout");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

initTabLayout();
}

private void initTabLayout() {
tabLayout.addTab(tabLayout.newTab().setText("First"));
tabLayout.addTab(tabLayout.newTab().setText("Second"));
tabLayout.addTab(tabLayout.newTab().setText("Third"));
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

// View Pager
viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
tabLayout.selectTab(tabLayout.getTabAt(position));
}
});

CustomPagerAdapter adapter = new CustomPagerAdapter(this);
viewPager.setAdapter(adapter);
}

private static class CustomPagerAdapter extends FragmentStateAdapter {
public CustomPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}

@NonNull
@Override
public Fragment createFragment(int position) {
switch (position) {
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();
}
return new FirstFragment();
}

@Override
public int getItemCount() {
return 3;
}
}
}

Fragments xml files

fragment_first.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
tools:context=".FirstFragment">


<TextView
android:layout_width="match_parent"
android:textColor="@color/white"
android:gravity="center"
android:textSize="30sp"
android:layout_height="match_parent"
android:text="First Fragment" />

</FrameLayout>
fragment_second.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red"
tools:context=".SecondFragment">

<TextView
android:layout_width="match_parent"
android:textColor="@color/white"
android:gravity="center"
android:textSize="30sp"
android:layout_height="match_parent"
android:text="Second Fragment" />
</FrameLayout>
fragment_third.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/green"
tools:context=".ThirdFragment">

<TextView
android:layout_width="match_parent"
android:textColor="@color/white"
android:gravity="center"
android:textSize="30sp"
android:layout_height="match_parent"
android:text="Third Fragment" />
</FrameLayout>

Fragments Java files

FirstFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_first, container, false);
}
}
SecondFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SecondFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_second, container, false);
}
}
ThirdFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ThirdFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_third, container, false);
}
}

Video for TabLayout

Article By: Brajlal Prasad
Created on: 09 Nov 2024  80  Views
 Print Article
Report Error

If you want to report an error, or any suggestion please send us an email to [email protected]

Financial Calculator

Financial Calculator

Take control of your finances with our powerful Financial Calculator app—calculate loans, SIP, PPF, NPS and more all in one place!

Play Store