One of the best things about technology is that it keeps on changing. On the same lines recently some significant improvements were made for Android by the means of support library. The new Design Support Library was included in the support repository. This new Android Design Support library features many new UI components like snackbars, floating action buttons and of-course it significantly improves the implementation of Android Tabs. Since Android design support library contains many new UI widgets which were introduced as concepts with material design. I would write separate tutorials for each one of those. Here lets concentrate on the Android tabs example.
Earlier to make tabs in Android, action bar was used. But now with API 21 onwards it has been deprecated. An alternative way to make tabs with full backward support was to use SlidingTabLayout and SlidingTabStrip classes. But now with Android Design Support Library making swipe tabs has become even more simpler. In this Android Tabs example lets explore the power of new design support library.
Making an Android Tabs Example by using Android Design Support Library
Tab type navigation mode is a very common design pattern among android apps. But since Android’s 5.0 release, material design came in to picture and allot of changes were made in various APIs. Resulting the deprecation of action bar. Although a new API, Android Toolbar was released to replace it. Due to this change, new APIs for android tabs were also released through the design support library recently. The main class used for displaying tabs through these new APIs is Android TabLayout. In this Android Tab example we would make a screen with three tabs using these new APIs for tabs with Fragments and a ViewPager which would look like the image below:
To start off please include these libraries in the dependencies section of your build.gradle file:
|
1
2
|
compile ‘com.android.support:appcompat-v7:22.2.0’
compile ‘com.android.support:design:22.2.0’
|
Now since we will be using Android Toolbar and TabLayout classes to show tabs, lets remove the action bar from layout by using styles:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<resources>
<!– Base application theme. –>
<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>
<!– your app branding color for the app bar –>
<item name=”colorPrimary”>#3F51B5</item>
<!– darker variant for the status bar and contextual app bars –>
<item name=”colorPrimaryDark”>#303F9F</item>
<!– theme UI controls like checkboxes and text fields –>
<item name=”colorAccent”>#FF4081</item>
</style>
</resources>
|
To get a better understanding on Android Toolbar and its usage have a look at this Android Toolbar tutorial. Next, to display Android tabs with fragment and ViewPager, lets define three simple fragments and their layouts:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
package com.truiton.designsupporttabs;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TabFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_1, container, false);
}
}
|
Its layout:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version=“1.0” encoding=“utf-8”?>
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical”>
<TextView
android:id=“@+id/textView”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_centerInParent=“true”
android:text=“Tab 1”
android:textAppearance=“?android:attr/textAppearanceLarge”/>
</RelativeLayout>
|
Android Tab 2:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
package com.truiton.designsupporttabs;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TabFragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_2, container, false);
}
}
|
Its layout:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version=“1.0” encoding=“utf-8”?>
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical”>
<TextView
android:id=“@+id/textView”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_centerInParent=“true”
android:text=“Tab 2”
android:textAppearance=“?android:attr/textAppearanceLarge”/>
</RelativeLayout>
|
Android Tab 3:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
package com.truiton.designsupporttabs;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TabFragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_3, container, false);
}
}
|
Its layout:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version=“1.0” encoding=“utf-8”?>
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical”>
<TextView
android:id=“@+id/textView”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_centerInParent=“true”
android:text=“Tab 3”
android:textAppearance=“?android:attr/textAppearanceLarge”/>
</RelativeLayout>
|
Now that we have all the tab fragments defined, lets define a view pager adapter for the swipe tabs feature:
|
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
|
package com.truiton.designsupporttabs;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabFragment1 tab1 = new TabFragment1();
return tab1;
case 1:
TabFragment2 tab2 = new TabFragment2();
return tab2;
case 2:
TabFragment3 tab3 = new TabFragment3();
return tab3;
default:
return null;
}
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
|
In the view state pager adapter above, you may see that I have just initialized the fragments as per their location. Next lets define the layout for main activity where all these tabs would be displayed.
Displaying Tabs using Android TabLayout
|
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
|
<RelativeLayout
android:id=“@+id/main_layout”
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”>
<android.support.v7.widget.Toolbar
android:id=“@+id/toolbar”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:layout_alignParentTop=“true”
android:background=“?attr/colorPrimary”
android:elevation=“6dp”
android:minHeight=“?attr/actionBarSize”
android:theme=“@style/ThemeOverlay.AppCompat.Dark.ActionBar”
app:popupTheme=“@style/ThemeOverlay.AppCompat.Light”/>
<android.support.design.widget.TabLayout
android:id=“@+id/tab_layout”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:layout_below=“@+id/toolbar”
android:background=“?attr/colorPrimary”
android:elevation=“6dp”
android:minHeight=“?attr/actionBarSize”
android:theme=“@style/ThemeOverlay.AppCompat.Dark.ActionBar”/>
<android.support.v4.view.ViewPager
android:id=“@+id/pager”
android:layout_width=“match_parent”
android:layout_height=“fill_parent”
android:layout_below=“@id/tab_layout”/>
</RelativeLayout>
|
Earlier tabs were added to the action bar through code. But as you can see in this Android tabs example layout above we are using Toolbar and the TabLayout separately to display tabs. Also please note a view pager is also added, which would be attached to this TabLayout in the activity below through code.
|
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
|
package com.truiton.designsupporttabs;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText(“Tab 1”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab 2”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab 3”));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(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) {
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
|