TabLayout
Tab layout are visible below toolbar with View pager, used to create swipeable views . Tabs are designed to work with fragments. Use them to swipe fragments in view pager. In this article, we are going to show you how to implement material design tabs in your android app.
Let us create an example of Tablayout using viewPager.
build.gradleÂ
|
1 |
implementation 'com.android.support:design:28.0.0' |
File : activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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=".MainActivity"> <com.google.android.material.tabs.TabLayout android:layout_width="match_parent" app:tabTextColor="@android:color/white" android:background="@color/cardview_dark_background" android:id="@+id/tablayout" android:layout_height="wrap_content"/> <androidx.viewpager.widget.ViewPager android:layout_width="match_parent" android:layout_below="@id/tablayout" android:id="@+id/viewPager" android:layout_height="match_parent" /> </RelativeLayout> |
File: MainActivity.java
In this file, we implement two additional listener addOnPageChangeListener(listener) of ViewPager which makes slides the different fragments of tabs and addOnTabSelectedListener(listener) of TabLayout which select the current tab on tab selection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package com.example.tablayout; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import com.google.android.material.tabs.TabLayout; public class MainActivity extends AppCompatActivity { TabLayout tabLayout; ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout=findViewById(R.id.tablayout); viewPager=findViewById(R.id.viewPager); tabLayout.addTab(tabLayout.newTab().setText("Tab1")); tabLayout.addTab(tabLayout.newTab().setText("Tab2")); tabLayout.addTab(tabLayout.newTab().setText("Tab3")); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); TabLayoutAdapter adapter=new TabLayoutAdapter(this,getSupportFragmentManager(),tabLayout.getTabCount()); viewPager.setAdapter(adapter); viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 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) { } }); } } |
File :Â TabLayoutAdapter.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package com.example.tablayout; import android.content.Context; import android.util.Log; import androidx.annotation.NonNull; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; public class TabLayoutAdapter extends FragmentPagerAdapter { Context mContext; int mTotalTabs; public TabLayoutAdapter(Context context , FragmentManager fragmentManager , int totalTabs) { super(fragmentManager); mContext = context; mTotalTabs = totalTabs; } @NonNull @Override public Fragment getItem(int position) { Log.d("asasas" , position + ""); switch (position) { case 0: return new Tab1Fragmet(); case 1: return new Tab2Fragment(); case 2: return new Tab3Fragment(); default: return null; } } @Override public int getCount() { return mTotalTabs; } } |
Now create different fragment files for all different tabs.
File : Tab1Fragment.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
package com.example.tablayout; import android.os.Bundle; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Tab1Fragmet extends Fragment { public Tab1Fragmet() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater , ViewGroup container , Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_tab1_fragmet , container , false); } } |
File : fragment_tab1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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" tools:context=".Tab1Fragmet"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent" android:text="@string/tab1" /> </FrameLayout> |
. . .
Be the first to comment.