I have created a navigation drawer and added fragments to it.Now I want to insert tab layout into one of the fragment.I have added tab layout into one fragment containing 2 tabs,but I dont know how to add contents into each of these tabs separately.Please help me
enter image description here
I need my tabs to look like in the image..Each tab having its own fragment
I don't know how to add contents into each of these tabs separately
Answer : Same as you add TabLayout in activity.
fragment_parent.xml is parent fragment having TabLayout.
<android.support.design.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"
android:fitsSystemWindows="true"
tools:context=".NewFragment">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabTextAppearance="?android:attr/textAppearanceMedium"
app:tabTextColor="#ffffff"
android:layout_height="?android:actionBarSize"
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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
FragmentParent.java
public class NewFragment extends Fragment {
private RecyclerView mRecyclerView;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_parent, container, false);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("A"));
tabLayout.addTab(tabLayout.newTab().setText("B"));
tabLayout.addTab(tabLayout.newTab().setText("C"));
final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
viewPager.setAdapter(new PagerAdapter(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;
}
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:
return new FragmentChild();
case 1:
return new FragmentChild();
case 2:
return new FragmentChild();
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
}
fragment_child.xml
<?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">
</LinearLayout>
FragmentChild.java
public class FragmentChild extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_child, container, false);
}
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 want to add in a fragment a tab with pagerview (scrollable).
public class MyFragment extends Fragment {
private FragmentTabHost tabHost;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
tabHost = new FragmentTabHost(getActivity());
tabHost.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent);
tabHost.addTab(tabHost.newTabSpec("one").setIndicator("One"), OneFragment.class, null);
tabHost.addTab(tabHost.newTabSpec("two").setIndicator("Two"), TwoFragment.class, null);
return tabHost;
}
#Override
public void onDestroyView(){
super.onDestroyView();
tabHost=null;
}
}
With this layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
I tried several solutions, but do not work.
I need to use fragment, not fragmentActivity.
The code written up work.
Small Code for Tablayout + ViewPager
// find views by id
ViewPager vp= findViewById(R.id.viewpager);
TabLayout tl = findViewById(R.id.tablayout);
// attach tablayout with viewpager
tl.setupWithViewPager(vp);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
// add your fragments
adapter.addFrag(new SampleFragment(), "Tab1");
adapter.addFrag(new SampleFragment(), "Tab2");
adapter.addFrag(new SampleFragment(), "Tab3");
// set adapter on viewpager
vp.setAdapter(adapter);
XML layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Note If you are not using AndroidX yet, you need to change following in layout.
Change com.google.android.material.tabs.TabLayout to android.support.design.widget.TabLayout
Chagne androidx.viewpager.widget.ViewPager to android.support.v4.view.ViewPager
But I'll strongly recommend to migrate to AndroidX, see #this answer to understand why.
And this is common ViewPagerAdapter for all your Viewpager in app.
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
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();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
public void addFrag(Fragment fragment) {
mFragmentList.add(fragment);
mFragmentTitleList.add("");
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
}
If you need to set ViewPager in Fragment, please check #this answer.
Used xml file like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
and your java file is here:
public class MyFragment extends Fragment {
private View view;
private TabLayout tabLayout;
//This is our viewPager
private ViewPager viewPager;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view = inflater.inflate(R.layout.sticker_fragment, container, false);
tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
viewPager = (ViewPager) view.findViewById(R.id.pager);
Viewpager adapter = new Viewpager(getActivity().getSupportFragmentManager(), getActivity());
//Adding adapter to pager
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
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;
}
}
after that viewpager adapter is like this:
public class Viewpager extends FragmentStatePagerAdapter {
final int PAGE_COUNT = 2;
private String tabTitles[] = new String[]{"Local","Online"};
private Context context;
public Viewpager(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
OneFragment oneFragment=new OneFragment();
return oneFragment;
case 1:
TwoFragment twoFragment=new TwoFragment();
return twoFragment;
default:
return null;
}
}
#Override
public int getCount() {
return tabTitles.length;
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
First time working with com.android.support:design:23.1.1, and having some issues getting TabLayout to work.
My app is basically set up as such:
One main activity called LandingActivity which has a DrawerLayout with menu items in it.
When selecting a menu item, I load different Fragments into a FrameLayout in the LandingActivity.
Some of the loaded Fragments should show tabs at the top, some shouldn't.
My issue is, on the Fragment which is supposed to show tabs at the top, it has extra space in the nav bar like it should have tabs there, but nothing shows.
Code:
activity_landing.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:menu="#menu/drawer" />
LandingActivity where I load the fragments:
public void selectDrawerItem(MenuItem menuItem) {
// Create a new fragment and specify the planet to show based on
// position
Fragment fragment = null;
switch(menuItem.getItemId()) {
case R.id.drawer_home:
fragment = HomeFragment.newInstance();
break;
case R.id.drawer_customize:
fragment = CustomizeFragment.newInstance();
break;
default:
fragment = HomeFragment.newInstance();
}
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();
home_fragment.xml (one which has tabs)
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
HomeFragment.java
public class HomeFragment extends Fragment {
public static HomeFragment newInstance() {
Bundle args = new Bundle(); alreadySelectedFollowingInfo);
HomeFragment fragment = new HomeFragment();
fragment.setArguments(args);
return fragment;
}
public HomeFragment() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
final View v = inflater.inflate(R.layout.fragment_home, container, false);
final TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("One"));
tabLayout.addTab(tabLayout.newTab().setText("Two"));
final ViewPager viewPager = (ViewPager) v.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) {
}
});
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
return inflater.inflate(R.layout.fragment_home, container, false);
}
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:
BlogFragment tab1 = BlogFragment.newInstance();
return tab1;
case 1:
TrendingFragment tab2 = TrendingFragment.newInstance();
return tab2;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
}
Might not be relevant, but tool_bar.xml used in activity_landing.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimary">
That's about all I've got. Can't figure out what's going on.
EDIT:
New code:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
final View v = inflater.inflate(R.layout.fragment_home, container, false);
ViewPager viewPager = (ViewPager) v.findViewById(R.id.viewpager);
setupViewPager(viewPager);
TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
return v;
}
private void setupViewPager(ViewPager viewPager) {
PagerAdapter adapter = new PagerAdapter(getFragmentManager());
adapter.addFragment(BlogFragment.newInstance(), "ONE");
adapter.addFragment(TrendingFragment.newInstance(), "TWO");
viewPager.setAdapter(adapter);
}
class PagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public PagerAdapter(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);
}
}
return inflater.inflate(R.layout.fragment_home, container, false);
in your onCreateView means that you return a newly inflated home fragment without any of your initialization code.
You should be returning the view that you created at the beginning of onCreateView:
return v;
Sample PagerAdapter that provides tab titles:
public class PagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
public PagerAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
#Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
#Override
public int getCount() {
return mFragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
And so, your refactored onCreateView code would be something like:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_home, container, false);
final TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
final ViewPager viewPager = (ViewPager) v.findViewById(R.id.viewpager);
PagerAdapter adapter = new PagerAdapter(getFragmentManager());
adapter.addFragment(BlogFragment.newInstance(), "One");
adapter.addFragment(TrendingFragment.newInstance(), "Two");
viewPager.setAdapter(adapter);
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
return v;
}
Return your initialized infleted view while you are returning
return inflater.inflate(R.layout.fragment_home, container, false);
while you should return view v from first line of onCreateView
final View v = inflater.inflate(R.layout.fragment_home, container, false);
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>