Android Material Design Tabs

Total Views : 1,008
Zoom In Zoom Out Read Later Print

In this article we are going to learn how you can implement material tabs in your apps.

Step#1 Creating Our Project

We’ll start this by creating a new project and applying the material theme for our app.
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.
2. Open build.gradle and add android design support library com.android.support:design:28.0.0 or the latest one.

build.gradle

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
}

3. Open colors.xml located under res ⇒ values and add the below color values. If You want to change colors and have no idea which one you should choose, you can use this website or this one.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3d5afe</color>
<color name="colorPrimaryDark">#2a3eb1</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#c7e9ff</color>
</resources>

4. Add the below dimensions to dimens.xml located under res ⇒ values. you can change these values as you want or your requirements. If file dosen't exists create one in res=>value folder.

dimen.xml

<resources>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="tab_max_width">265dp</dimen>
<dimen name="tab_padding_bottom">16dp</dimen>
<dimen name="tab_label">14sp</dimen>
<dimen name="custom_tab_layout_height">70dp</dimen>
</resources>

5. Open styles.xml add below styles. The styles defined in this styles.xml are common to all the android versions.

style.xml

<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
//We are going to use this one
</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>

<!-- 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>
</resources>

6. Create a folder name values-v21 in res folder and a style.xml file inside it for Android 5.0.

style.xml(values-v21)

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3d5afe</color>
<color name="colorPrimaryDark">#2a3eb1</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#c7e9ff</color>
</resources>

7. Open AndroidManifest.xml and modify the theme to customized theme by changing the android:theme attribute value.

AndroidManifest.xml

android:theme="@style/MyMaterialTheme"

If you run you app now you will notice that there is no action bar in app activity, we are going to create one using toolbar view.

Step#2 Creating Fragment

Under your main package create a fragment named FirstFragment.java and three more named SecondFragment, Third..., Fourth ... and add the below code to all of the fragments because we only need them as a example so all fragment code can be same.

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"
tools:context=".FirstFragment">

<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />

</FrameLayout>

FirstFragment.xml

package com.prodevsblog.materialtab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class FirstFragment extends Fragment {
public FirstFragment() {
// Required empty public constructor for fragment object
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}


Step#3 Creating Tabs

3.1 Fixed Width Tabs

when we have limited number of tabs it it good to go with fixed tab.

activity_main.xml

<android.support.design.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">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

MainActivity.java

package com.prodevsblog.materialtab;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.prodevsblog.materialtab.fragments.FirstFragment;
import com.prodevsblog.materialtab.fragments.SecondFragment;
import com.prodevsblog.materialtab.fragments.ThirdFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init() {
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

viewPager = findViewById(R.id.viewPager);
setupViewPager(viewPager);

tabLayout = findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FirstFragment(), "FIRST");
adapter.addFragment(new SecondFragment(), "SECOND");
adapter.addFragment(new ThirdFragment(), "THIRD");
viewPager.setAdapter(adapter);
}

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);
}
}
}

Now our app is complete for fixed tabs. From now we are going to modify the appearance of tabs like width, adding icons etc...

3.2 Center Aligned Tabs

If you want your tabs in horizontally centered, you can use gravity attribute.

Center Align

app:tabGravity="center"
3.3 Full Width Tabs

Full Width

app:tabGravity="fill"

Scrollable Tabs

If you have more tabs then you can use scrollable tabs. which allow as many tab you want and scroll them to access. To do this set tabMode to scrollable.

Scrollable Tab

app:tabMode="scrollable"


Tab with Icons

What about icons on the tab. we can add this by just adding few more lines of code depend on how many icons you want. to do this you need to use setIcon() method with a drawable as a parameter.

setIcon()

tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);


Only Icon Tabs

If you want you can remove text from tab and keep only icon for a tab. To do this we need to return null or empty from getPageTitle() method in ViewPagerClass.

getPageTitle()

@override
public CharSequence getPPageTitle(int position) {
//return null to have only icons
return null;
}


If you have any problem with above code you can comment or simply download our working code for this project.

See More

Latest Photos