Android Material Design Scrollable Tabs (Tab Layout) with Swipe
1512 views.Tab layout are visible below toolbar with View pager, used to create swipeable views on. 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.
After creating new project, open build.gradle of app level and add design support library because Tablayout is a part of Android Design Support Library:
|
1 |
implementation 'com.android.support:design:27.1.0' |
Add the theme in styles.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="MyMaterialTheme" parent="MyMaterialTheme.Base"> </style> <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
add theme in Manifest file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androindian.tabs"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:theme="@style/MyMaterialTheme"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
Add Tab layout and View pager in you layout 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 25 26 27 28 29 30 31 32 33 34 |
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/appbar"> <androidx.appcompat.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbar"> </androidx.appcompat.widget.Toolbar> <com.google.android.material.tabs.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tab" app:tabMode="scrollable"></com.google.android.material.tabs.TabLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/viewpager"></androidx.viewpager.widget.ViewPager> </androidx.coordinatorlayout.widget.CoordinatorLayout> |
MainActivity.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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
package com.androindian.tabs; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import com.google.android.material.tabs.TabLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { Toolbar toolbar; ViewPager viewPager; TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout=findViewById(R.id.tab); toolbar=findViewById(R.id.toolbar); viewPager=findViewById(R.id.viewpager); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); SetUpPager(viewPager); tabLayout.setupWithViewPager(viewPager); } private void SetUpPager(ViewPager viewPager) { ViewPagerAdp adp=new ViewPagerAdp(getSupportFragmentManager()); adp.addFragment(new FirstFrag(),"ONE"); adp.addFragment(new SecondFrag(),"TWO"); adp.addFragment(new ThirdFrag(),"THREE"); adp.addFragment(new FirstFrag(),"ONE"); adp.addFragment(new SecondFrag(),"TWO"); adp.addFragment(new ThirdFrag(),"THREE"); adp.addFragment(new FirstFrag(),"ONE"); adp.addFragment(new SecondFrag(),"TWO"); adp.addFragment(new ThirdFrag(),"THREE"); adp.addFragment(new FirstFrag(),"ONE"); adp.addFragment(new SecondFrag(),"TWO"); adp.addFragment(new ThirdFrag(),"THREE"); viewPager.setAdapter(adp); } private class ViewPagerAdp extends FragmentPagerAdapter { private final List<Fragment> Fraglist = new ArrayList<>(); private final List<String> Names = new ArrayList<>(); public ViewPagerAdp(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return Fraglist.get(position); } @Override public int getCount() { return Fraglist.size(); } public void addFragment(Fragment fragment, String name) { Fraglist.add(fragment); Names.add(name); } @Override public CharSequence getPageTitle(int position) { return Names.get(position); } } } |
Create fragments like below
FirstFrag.class
|
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 |
package com.androindian.tabs; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Toast; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.databinding.DataBindingUtil; import androidx.fragment.app.Fragment; import com.androindian.tabs.databinding.OneBinding; public class FirstFrag extends Fragment { OneBinding binding; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //View view=inflater.inflate(R.layout.one,container,false); binding= DataBindingUtil.inflate(inflater, R.layout.one,null,false); binding.button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getActivity(), "Hi", Toast.LENGTH_SHORT).show(); } }); return binding.getRoot(); } } |
one.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent"> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" android:layout_margin="150dp"/> </LinearLayout> </layout> |
Second.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
package com.androindian.tabs; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; public class SecondFrag extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.two,container,false); return view; } } |
two.xml
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/ic_launcher"> </LinearLayout> |
ThirdFrag.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
package com.androindian.tabs; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; public class ThirdFrag extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.three,container,false); return view; } } |
three.xml
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#754"> </LinearLayout> |
