Android material design has changed complete look and feel of the Android applications. In lollipop 5.0 release, Android design support library was introduced. It consisted of many component classes for navigation drawer, floating views such as labels, buttons, etc. as well as tablayout, etc.
In this post, I will show how to integrate tablayout in viewpager with pager adapter as well as fragment pager adapter. Firstly, we need to update Android Support Repository in the SDK Manager and then add design library with a single new dependency as follows,
1
| compile 'com.android.support:design:22.2.0'
|
TabLayout provides a horizontal layout to display tabs. The design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically, For using viewpager with tablayout, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager(). This ensures that tab selection events update the ViewPager and page changes update the selected tab.
We have tablayout listeners as follows,
1)TabLayout.TabLayoutOnPageChangeListener - A ViewPager.OnPageChangeListener class which contains the necessary calls back to the provided TabLayout so that the tab position is kept in sync.
2)TabLayout.ViewPagerOnTabSelectedListener - A TabLayout.OnTabSelectedListener class which contains the necessary calls back to the provided ViewPager so that the tab position is kept in sync.
Refer the below link for complete sample code:-
Download Sample Code
Have a look on few code snippets,
activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/btn_pager_adapter"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/btn_fragment_adapter"
android:layout_gravity="center_horizontal" />
</LinearLayout>
|
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
| import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btn_pager_adapter=(Button)findViewById(R.id.btn_pager_adapter);
Button btn_fragment_adapter=(Button)findViewById(R.id.btn_fragment_adapter);
btn_pager_adapter.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(MainActivity.this,PagerAdapterActivity.class);
startActivity(intent);
}
});
btn_fragment_adapter.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(MainActivity.this,FragmentPagerAdapterActivity.class);
startActivity(intent);
}
});
}
}
|
adapter_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
| <LinearLayout 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"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="30dp"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
|
FragmentPagerAdapterActivity.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
| import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import com.tablayout_as.Adapter.ViewFragmentPagerAdapter;
public class FragmentPagerAdapterActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.adapter_activity_main);
tabSetup();
}
public void tabSetup(){
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
final ViewPager viewPager = (ViewPager)findViewById(R.id.view_pager);
ViewFragmentPagerAdapter viewFragmentPagerAdapter = new ViewFragmentPagerAdapter(getSupportFragmentManager());
tabLayout.setTabsFromPagerAdapter(viewFragmentPagerAdapter);
viewPager.setAdapter(viewFragmentPagerAdapter);
viewPager.setCurrentItem(1);
// tabLayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
System.out.println("tab getText: " + tab.getText());
System.out.println("tab getPosition: " + tab.getPosition());
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
|
ViewFragmentPagerAdapter.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
| import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.tablayout_as.Fragment.FragmentOne;
import com.tablayout_as.Fragment.FragmentThree;
import com.tablayout_as.Fragment.FragmentTwo;
import java.util.ArrayList;
import java.util.List;
public class ViewFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public ViewFragmentPagerAdapter(FragmentManager fm) {
super(fm);
this.fragments = new ArrayList<Fragment>();
fragments.add(new FragmentOne());
fragments.add(new FragmentTwo());
fragments.add(new FragmentThree());
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return "Page " + position;
}
}
|
FragmentOne.java/FragmentTwo.java/FragmentThree.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.tablayout_as.R;
/**
* Created by harshalbenake on 21/05/15.
*/
public class FragmentOne extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_main,container,false);
TextView textView=(TextView)view.findViewById(R.id.textView);
textView.setText("FragmentOne");
return view;
}
}
|
fragment_main.xml/page_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?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="#00ff00">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="New Text"
android:textColor="#ff0000"
android:id="@+id/tv_page_item"
android:gravity="center" />
</LinearLayout>
|
PagerAdapterActivity.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
| import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import com.tablayout_as.Adapter.ViewPagerAdapter;
public class PagerAdapterActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.adapter_activity_main);
tabSetup();
}
public void tabSetup(){
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
final ViewPager viewPager = (ViewPager)findViewById(R.id.view_pager);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getApplicationContext());
tabLayout.setTabsFromPagerAdapter(viewPagerAdapter);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setCurrentItem(1);
tabLayout.setupWithViewPager(viewPager);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
System.out.println("tab getText: " + tab.getText());
System.out.println("tab getPosition: " + tab.getPosition());
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
|
ViewFragmentPagerAdapter.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
| import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.tablayout_as.R;
public class ViewPagerAdapter extends PagerAdapter {
Context mContext;
LayoutInflater layoutInflater;
public ViewPagerAdapter(Context context){
this.mContext=context;
layoutInflater=LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return 3;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return object == view;
}
@Override
public CharSequence getPageTitle(int position) {
return "Page " + position;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = layoutInflater.inflate(R.layout.page_item, container, false);
container.addView(view);
TextView title = (TextView) view.findViewById(R.id.tv_page_item);
title.setText("Position: " + position);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
|
TabLayout provides a horizontal layout to display tabs. The design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically, For using viewpager with tablayout, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager(). This ensures that tab selection events update the ViewPager and page changes update the selected tab.
how to add badge in tablayout tabs
ReplyDelete