Step 1.
Go to Android Studio and create new empty projects.
Step 2.
Open the build.gradle file and put below dependency for designing layout.
implementation 'com.google.android.material:material:1.2.1'Step 3.
Now create new CallsFragment.java and name it calls or any you want.
package com.tab.demo.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import androidx.viewpager.widget.ViewPager;
import androidx.appcompat.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import com.tab.demo.Fragment.CallsFragment;
import com.tab.demo.Fragment.ChatFragment;
import com.tab.demo.Fragment.ContactsFragment;
import com.tab.demo.R;
import com.tab.demo.ViewPagerAdapter;
public class MainActivity extends AppCompatActivity {
//This is our tablayout
private TabLayout tabLayout;
//This is our viewPager
private ViewPager viewPager;
//Fragments
ChatFragment chatFragment;
CallsFragment callsFragment;
ContactsFragment contactsFragment;
String[] tabTitle={"CALLS","CHAT","CONTACTS"};
int[] unreadCount={0,5,0};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initializing viewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
setupViewPager(viewPager);
//Initializing the tablayout
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
viewPager.setCurrentItem(position,false);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
@Override
public boolean onCreateOptionsMenu(final Menu menu) {
getMenuInflater().inflate(R.menu.menu_home, menu);
// Associate searchable configuration with the SearchView
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(this, "Home Settings Click", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
private void setupViewPager(ViewPager viewPager)
{
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
callsFragment=new CallsFragment();
chatFragment=new ChatFragment();
contactsFragment=new ContactsFragment();
adapter.addFragment(callsFragment,"CALLS");
adapter.addFragment(chatFragment,"CHAT");
adapter.addFragment(contactsFragment,"CONTACTS");
viewPager.setAdapter(adapter);
}
}
Step 4.
Now create layout in res folder in fragment_calls.xml include Calls.java fragment.
<RelativeLayout 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"
tools:context="com.tab.demo.Fragment.CallsFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/tab1"
android:textSize="30sp" />
</RelativeLayout>
Step 5.
Same like ContactFragment.java
package com.tab.demo.Fragment;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tab.demo.R;
/**
* A simple {@link Fragment} subclass.
*/
public class ContactsFragment extends Fragment {
public ContactsFragment() {
// Required empty public constructor
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_contacts, container, false);
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.menu_contacts_fragment, menu);
super.onCreateOptionsMenu(menu, inflater);
}
}
Step 6.
Now same like include layout in res folder fragment_contacts.xml
<RelativeLayout 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"
tools:context="com.tab.demo.Fragment.ContactsFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tab3"
android:layout_centerInParent="true"
android:textSize="30sp" />
</RelativeLayout>
Step 7.
Now create one more java class fragment name it ChatFragment.java
package com.tab.demo.Fragment;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tab.demo.R;
public class ChatFragment extends Fragment {
public ChatFragment() {
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_chat, container, false);
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.menu_chat_fragment, menu);
super.onCreateOptionsMenu(menu, inflater);
}
}
Step 8.
Now same like include layout fragment_chats.xml
<RelativeLayout 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"
tools:context="com.tab.demo.Fragment.ChatFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tab2"
android:layout_centerInParent="true"
android:textSize="30sp" />
</RelativeLayout>
Step 9.
Now Create a Adapter for our ViewPager by extending ViewPagerAdapter class. In this class we will overide three methods getItem(), getCount() and getPageTitle(). getItem method gives the fragment with respect to the position, getCount method gives total number of fragments present and getPageTitle method gives the title of the fragment.
package com.tab.demo;
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> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
@Override
public int getItemPosition(Object object){
return super.getItemPosition(object);
}
}
Step 10.
Now go to MainActivity java class and paste these below code.
package com.tab.demo.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import androidx.viewpager.widget.ViewPager;
import androidx.appcompat.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import com.tab.demo.Fragment.CallsFragment;
import com.tab.demo.Fragment.ChatFragment;
import com.tab.demo.Fragment.ContactsFragment;
import com.tab.demo.R;
import com.tab.demo.ViewPagerAdapter;
public class MainActivity extends AppCompatActivity {
//This is our tablayout
private TabLayout tabLayout;
//This is our viewPager
private ViewPager viewPager;
//Fragments
ChatFragment chatFragment;
CallsFragment callsFragment;
ContactsFragment contactsFragment;
String[] tabTitle={"CALLS","CHAT","CONTACTS"};
int[] unreadCount={0,5,0};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initializing viewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
setupViewPager(viewPager);
//Initializing the tablayout
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
viewPager.setCurrentItem(position,false);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
@Override
public boolean onCreateOptionsMenu(final Menu menu) {
getMenuInflater().inflate(R.menu.menu_home, menu);
// Associate searchable configuration with the SearchView
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(this, "Home Settings Click", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
private void setupViewPager(ViewPager viewPager)
{
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
callsFragment=new CallsFragment();
chatFragment=new ChatFragment();
contactsFragment=new ContactsFragment();
adapter.addFragment(callsFragment,"CALLS");
adapter.addFragment(chatFragment,"CHAT");
adapter.addFragment(contactsFragment,"CONTACTS");
viewPager.setAdapter(adapter);
}
}
Step 11.
At last now go to activity_main xml layout include MainActivity java class
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorTextPrimary"
app:tabTextColor="@color/colorTextDisable" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tablayout"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 12.
Now run your emulator and see result:-
