I use ViewPager to create 2 Fragments on an Activity like this:
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public ViewPagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Fragment1 tab1 = new Fragment1();
return tab1;
case 1:
Fragment2 tab2 = new Fragment2();
return tab2;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
I use it in an Activity like this:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/tab_height"
android:id="#+id/tab_layout"
app:tabMode="fixed"
app:tabGravity="fill"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewpager"
android:layout_below="#id/tab_layout" />
This is the code in the Activity that holds the Fragments:
ViewPager view_pager;
ViewPagerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_acc1);
TabLayout tab_layout = (TabLayout) findViewById(R.id.tab_layout);
tab_layout.addTab(tab_layout.newTab().setText("Tab1"));
tab_layout.addTab(tab_layout.newTab().setText("Tab2"));
view_pager = (ViewPager) findViewById(R.id.viewpager);
adapter = new ViewPagerAdapter
(getSupportFragmentManager(), tab_layout.getTabCount());
final ViewPager view_pager = (ViewPager) findViewById(R.id.viewpager);
view_pager.setAdapter(adapter);
view_pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tab_layout));
tab_layout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
view_pager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
Everything is ok, but I want the color of each tab like:
By that I mean that when you open each tab, it will change color.
How do I do this ?
update, follow LvN:
Try with this :
yourViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
// set your colors here
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
UPDATED
You need to create custom tab views to achieve this.
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab"
android:textColor="#color/colorAccent"
android:textSize="#dimen/tab_label"
android:fontFamily="#string/font_fontFamily_medium"/>
And when you add items to tab, change the background color of the textview.
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("TAB 1");
tabOne.setBackgroundColor(Color.GREEN);
tabLayout.getTabAt(0).setCustomView(tabOne);
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("TAB 2");
tabTwo.setBackgroundColor(Color.YELLOW);
tabLayout.getTabAt(1).setCustomView(tabTwo);
Related
I am trying to create tabs using fragment layout. It is not set the Full Width of the screen and also tabs text is not displaying. Didn't find any solution to fix this. Below I added my code and screenshots of the output and what I want to achieve, please check any help will be appreciated.
Main Activity
public class SettingActivity extends Fragment {
TabLayout tab;
ViewPager vp;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.activity_setting, container, false);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
final ViewPager viewPager = (ViewPager) view.findViewById(R.id.vp);
viewPager.setAdapter(new ViewPagering(getFragmentManager(), tabLayout.getTabCount()));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
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) {
}
});
return view;
}
}
ViewPager
public class ViewPagering extends FragmentStatePagerAdapter {
int noTabs;
private String[] tabTitles = new String[]{"Tab1", "Tab2"};
public ViewPagering(FragmentManager fm, int noTabs) {
super(fm);
this.noTabs = noTabs;
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Frag1 f1 = new Frag1();
return f1;
case 1:
frag2 f2 = new frag2();
return f2;
default:
return null;
}
}
#Override
public int getCount() {
return noTabs;
}
}
Xml
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"
tools:context="rarecrew.com.taberp.SettingActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="30dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
What I am getting
What I want to achieve
I currently have this tab view which I followed from this tutorial. Everything works fine until I noticed that the onCreateView is not called on any of the tab. I've looked around here and there for solution but I still can't solve.
Here is my code:
activity_pref_main_container.xml
<?xml version="1.0" encoding="utf-8"?>
<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=".PrefActivityMain">
<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>
PrefMainActivity.class
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pref_main_container);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.preference_title);
setSupportActionBar(toolbar);
new PrefActivityListAsync(this,this,specialization).execute();
new PrefActivityListAsync(this,this,position).execute();
new PrefActivityListAsync(this,this,type).execute();
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Specialization"));
tabLayout.addTab(tabLayout.newTab().setText("Position"));
tabLayout.addTab(tabLayout.newTab().setText("Type"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PrefAdapter adapter = new PrefAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
viewPager.setOffscreenPageLimit(2);
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) {
}
});
}
PrefAdapder.class
public class PrefAdapter extends FragmentPagerAdapter {
int mNumOfTabs;
public PrefAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
PrefActivitySpecialization tab1 = new PrefActivitySpecialization();
return tab1;
case 1:
PrefActivityPosition tab2 = new PrefActivityPosition();
return tab2;
case 2:
PrefActivityType tab3 = new PrefActivityType();
return tab3;
default:
return null;
}
}
#Override
public int getCount() {
return 0;
}
}
one out of three fragment class
PrefActivitySpecialization.class
public class PrefActivitySpecialization extends
android.support.v4.app.Fragment {
private ArrayList<DataPrefSpecialization> dataPrefSpecializationArrayList;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup
container, Bundle savedInstanceState) {
View view =
inflater.inflate(R.layout.activity_pref_specialization_container, container,
false);
dataPrefSpecializationArrayList = ((PrefActivityMain)
getActivity()).getDataPrefSpecialization();
for(int i = 0; i < dataPrefSpecializationArrayList.size(); i++){
Log.d("Check Specialization
",dataPrefSpecializationArrayList.get(i).getName());
}
return inflater.inflate(R.layout.activity_pref_specialization_container, container, false);
}
}
You should make changes at two place:
1) Change
#Override
public int getCount() {
return 0;
}
to
#Override
public int getCount() {
return mNumOfTabs;
}
2) Change
return inflater.inflate(R.layout.activity_pref_specialization_container, container, false);
to
return view;
public PrefAdapter(FragmentManager fm, int NumOfTabs)
You must declare Count No NumOfTabs
int getCount ()-> How many items are in the data set represented by this
Adapter.
#Override
public int getCount()
{
return mNumOfTabs;
}
Do not'
return inflater.inflate(R.layout.activity_pref_specialization_container, container, false);
Do
return view ;
Your getCount() method is returning 0;
There is another (possibly easier) way to connect the view pager with the tab layout-
First, in your PrefAdapter class, override the getPageTitle() method and return your tab titles for the respective tab positions from there.
In your PrefMainActivity class, remove all the lines like-
tabLayout.addTab(...)
Add the following line instead-
tabLayout.setupWithViewPager(viewPager);
I need to place TabLayout in ViewPager. ViewPager contains some fragments. I can't do it because TabLayout is located in my Activity and I can't manage it if it will be in Fragment.
Now my code looks like this. In Activity's XML:
<LinearLayout
...>
<android.support.v4.view.ViewPager
...>
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
.../>
</LinearLayout>
and in Activity class
ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_offer_detail);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mViewPager, true);
FragmentPagerAdapter mPagerAdapter = new FragmentPagerAdapter(...);
mViewPager.setAdapter(mPagerAdapter);
I need to get as shown below.
what i want (imgur doesn't work now)
Which version is correct and how to implement it in XML?
if I understand, you want to show some tabs (Fragments) inside your ViewPager right?
you can follow this implementation in your fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View inflatedView = inflater.inflate(R.layout.fragment_tablayout, container, false);
TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Campusplan"));
tabLayout.addTab(tabLayout.newTab().setText("Raumplan"));
final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);
viewPager.setAdapter(new PagerAdapter
(getFragmentManager(), tabLayout.getTabCount()));
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) {
}
});
return inflatedView;
}
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:
TabItem1 tab1 = new TabItem1();
return tab1;
case 1:
TabItem1 tab2 = new TabItem1();
return tab2;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
}
Put the tablayout and viewpager inside your layout.xml that represents your fragment as you do with a normal view.
I've created a tab layout with viewpager.
Everything was alright, except that I need to run a method in a specific moment. So I need to get fragment instance and run their method.
I create in this way:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
activateToolbarWithNavigationView(HomeActivity.this);
// Tabs Setup
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
final ViewPager viewPager = (ViewPager) findViewById(R.id.home_pager);
if (tabLayout != null) {
tabLayout.addTab(tabLayout.newTab().setText(getString(R.string.favorites_label_fragment)).setTag(getString(R.string.fragment_favorite_tag)));
tabLayout.addTab(tabLayout.newTab().setText(getString(R.string.air_today_label_fragment)).setTag(getString(R.string.fragment_airing_today_tag)));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final HomePageAdapter adapter = new HomePageAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
if (viewPager != null) {
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) {
}
});
}
}
public void refreshFavorites(){
FavoritesFragment favoritesFragment = (FavoritesFragment) getSupportFragmentManager().findFragmentByTag(getString(R.string.fragment_favorite_tag));
if(favoritesFragment != null) favoritesFragment.executeFavoriteList();
}
I don't know if i'm doing it in wrong way, or there some mistake that they return null from findFragmentByTag... I can't figure out. In case, I've checked some others answers but I can't understand what I really need to do.
viewpager adapter:
public class HomePageAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public HomePageAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
FavoritesFragment favoritesFragment = new FavoritesFragment();
return favoritesFragment;
case 1:
AirTodayFragment airTodayFragment = new AirTodayFragment();
return airTodayFragment;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
my xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ad_view_home">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
android:theme="#style/ActionBarThemeOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="#mipmap/ic_launcher_initials"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ActionBarThemeOverlay"
app:titleTextAppearance="#style/ActionBar.TitleText">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/app_bar_layout"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/home_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
EDIT 1: HOW I SOLVED:
public void refreshFavorites(){
List<Fragment> allFragments = getSupportFragmentManager().getFragments();
for (Fragment fragmento: allFragments) {
if (fragmento instanceof FavoritesFragment){
((FavoritesFragment) fragmento).executeFavoriteList();
}
}
}
EDIT 2: WHERE I USE:
I didn't use refreshFavoretes inside my Activity but actually in Fragments that are inside of it:
#Override
public void onClick(View v) {
...
// Refresh Favorites
if (getActivity() instanceof MainActivity) ((MainActivity) getActivity()).refreshFavorites();
}
You can see more at:
GitHub/MainActivity.Java
and
GitHub/PopularFragment.Java -- Fragment from MainActivity
You are not setting tag for fragment that is the reason you get null
Instead of using,
FavoritesFragment favoritesFragment = (FavoritesFragment) getSupportFragmentManager()
.findFragmentByTag(getString(R.string.fragment_favorite_tag));
use this,
FavoritesFragment favoritesFragment = (FavoritesFragment) getSupportFragmentManager()
.getFragments()
.get(0);
to get instance of FavoritesFragment.
I have put get(0) as your position of FavoritesFragment instance is at zero.
You can get AirTodayFragment instance at position 1 calling get(1)
There's something wrong with my TabLayout and ViewPager. It does not show anything. Here's my adapter:
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int mNumOfTabs) {
super(fm);
this.mNumOfTabs = mNumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return ChoiceFragment.newInstance("Mobile Games",
R.drawable.ic_stay_current_portrait_white_48dp, "1");
case 1:
return ChoiceFragment.newInstance("Computer Games",
R.drawable.ic_payment_white_48dp, "5");
default: return ChoiceFragment.newInstance("Mobile Games",
R.drawable.ic_stay_current_portrait_white_48dp, "1");
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
#Override
public CharSequence getPageTitle(int position) {
String title;
if (position == 0)
title = "Mobile";
else
title = "Computer";
return title;
}
Here's my TabFragment class:
public class TabGroupFragment extends Fragment {
public TabGroupFragment() {
// Required empty public constructor
}
public static TabGroupFragment newInstance() {
TabGroupFragment fragment = new TabGroupFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
}
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab_group, container, false);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Mobile"));
tabLayout.addTab(tabLayout.newTab().setText("Computer"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) view.findViewById(R.id.view_pager);
final PagerAdapter adapter = new PagerAdapter(
getActivity().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) {
}
});
return view;
}
}
And here's the layout for the above class:
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"
android:orientation="vertical"
tools:context=".TabGroupFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/utility_white"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:id="#+id/tab_layout" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"/>
</LinearLayout>
</ScrollView>
I don't see any wrong here. I just followed the tutorial. Let me know what's happening here. Thank you
Thanks #MikeM. it all worked now. I removed the LinearLayout surrounding the TabLayout and ViewPager and changed the FrameLayout to RelativeLayout and they all showed up. Thank you!
<RelativeLayout 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"
android:orientation="vertical"
tools:context=".TabGroupFragment">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/utility_white"
android:elevation="6dp"
android:id="#+id/tab_layout" />
<android.support.v4.view.ViewPager
android:layout_below="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/view_pager"/>
</RelativeLayout>