I have the following program, in which I want to add a collapsing toolbar. It is a tab-layout, with multiple fragments attached.
XML File
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabContentStart="72dp" />
</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>
JAVA File
public class Competitions extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = getIntent();
setContentView(R.layout.competition);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Competitions");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new IntChal(), "International Challenges");
adapter.addFragment(new XMach(), "Xtreme Machines");
adapter.addFragment(new TVoltz(), "Technovoltz");
adapter.addFragment(new Robotron(), "Robotron");
adapter.addFragment(new Dimensions(), "Dimensions");
adapter.addFragment(new Tinker(), "Tinkerer");
adapter.addFragment(new Aero(), "Aerostrike");
adapter.addFragment(new Lamp(), "Solar Urja Lamp");
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);
}
}
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
onBackPressed();
return true;
}
return super.onOptionsItemSelected(item);
}
}
I had tried this before, but when I replaced my toolbar with a collapsing toolbar, all that happened that it would collapse if I scroll the toolbar portion. What I require is that on scrolling the fragment down, the toolbar should collapse. How do I do that.
P.S. I am a beginner , so please explain why your solution works.
EDIT
Okay, what I want is that when I scroll the fragment, the toolbar should collapse on it's own. With the following solutions, what is happening is that I have to manually first collapse the toolbar , and then scroll through the fragment, which is not what I want. Please help me do the same
Try to create Scrolling Activity project in android studio. Which gives you a collapsing toolbar. Steps: Android studio -> Add New Project -> Give project details -> in step Add an activity to mobile select Scrolling Activity . Done
Change your toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
See example here at 'https://github.com/chrisbanes/cheesesquare' for more reference, it is working fine for me. i hope it can help you.
seem your layout is correct, refer this tutorial it will help you to achieve your goal.
Update:
Adding app:layout_scrollFlags="scroll|enterAlways" to toolbar will resolve your issue.
Related
I didn't find any relevant posts to this problem. I am trying to implement simple tabs (tab layout) with swipe using this tutorial. However, my fragment is appearing multiple times even when I click for the first time. Please find below the relevant code. Will appreciate any help provided.
FragmentPagerAdapter Implementation:
public class SectionsPageAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public SectionsPageAdapter(FragmentManager manager) {
super(manager);
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
}
Main Class:
SectionsPageAdapter mSectionsPageAdapter = new
SectionsPageAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter and add fragments.
ViewPager mViewPager = (ViewPager) findViewById(R.id.container);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mSectionsPageAdapter.addFragment(new TodayFragment(), "TAB1");
mSectionsPageAdapter.addFragment(new WeeklyFragment(), "TAB2");
mSectionsPageAdapter.addFragment(new PhotosFragment(), "TAB3");
mViewPager.setAdapter(mSectionsPageAdapter);
tabLayout.setupWithViewPager(mViewPager);
main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Fragments are one liner so I don't think there is any problem there. Please find below 2 screenshots taken 1) onLoading activity 2) after clicking on tab2 for 1st time.
Can you share with us the layout code for your second fragment? Id like to see if the lack of a solid background may be causing the issue.
I have in my Main Activity an Action bar navigation using tabs using Fragments (with Material Design), as below which works well, but now I wish to have Tab navigation within my Fragments...
// Add Fragments to Tabs in Main Activity
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new FeedsFragment(), "Latest Updates");
adapter.addFragment(new ClubTeamsFragment(), "Club Teams");
adapter.addFragment(new FixturesFragment(), "Fixtures");
adapter.addFragment(new ResultsFragment(), "Results");
adapter.addFragment(new ClubFieldsFragment(), "Club Fields");
viewPager.setAdapter(adapter);
}
I'm pretty sure that TabHost is now deprecated.
I wish to achieve the attached image. The blue tabs are at the Main Activity level and the gray date tabs are in the selected fragment view.
I have read a few post about using Tab Host or Fragment Activity, or do I use Activity that is extended to Fragment?
See below answer that I achieved with using fragment tabs inside fragment tabs that are in my MainActivity
Inside my fragment using getChildFragmentManager()
public class FixturesTabs extends Fragment {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRetainInstance(true);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fixtures_new_tabs,container, false);
// Setting ViewPager for each Tabs
ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
setupViewPager(viewPager);
// Set Tabs inside Toolbar
TabLayout tabs = (TabLayout) view.findViewById(R.id.result_tabs);
tabs.setupWithViewPager(viewPager);
return view;
}
// Add Fragments to Tabs
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getChildFragmentManager());
adapter.addFragment(new TodaysFixturesFragment(), "Today");
adapter.addFragment(new WeekFixturesFragment(), "Week");
adapter.addFragment(new MonthFixturesFragment(), "Month");
adapter.addFragment(new AllFixturesFragment(), "Month");
adapter.addFragment(new MyTeamsFixturesFragment(), "My Teams");
viewPager.setAdapter(adapter);
}
static class Adapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public Adapter(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);
}
}
}
And my XML named "fixtures_new_tabs.xml" to match the inflated layout
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/result_tabs"
android:background="#color/grey"
app:tabTextColor="#color/medium_grey"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabIndicatorColor="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
</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>
</RelativeLayout>
Hope this helps or points others in the direction for their solution..
P.S. If you get a white screen after implementing this, you might have added the same parent fragment to it's child fragment.
I changed a few things in Han and BENN1TH solution because the tab did not align properly, i added only two fragment. (they added five fragments).
I hope this helps.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/result_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
I have gone through these but does not seems to work
working with
android.support.design.widget.TabLayout
needs to set custom views to each child tab as a match parent to child size
pragmatically give a size
View v = LayoutInflater.from(this).inflate(R.layout.layout_two, null);
v.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabLayout.getTabAt(0).setCustomView(v);
this works as a match parent because there is no background but once add a inflate view issue comes
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
though about the tabIndicator as well
setting its height to app:tabIndicatorHeight="0dp" or adding android:tabStripEnabled="false" does not help.
here is a picture with boundaries which clearly shows the small gap like padding(blue bar is my TabLayout with two tabs )
left one is inflated
right one is normal .setIcon
any help to make inflated one match parent with no gaps ?
Here is my code
XML
<android.support.design.widget.CoordinatorLayout
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.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="30dp">
//------- INSIDE THIS I HAVE A TAB
<android.support.v7.widget.Toolbar
android:background="#drawable/capture"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
//------ HERE comes THE TAB That I DEAL
<android.support.design.widget.TabLayout
android:tabStripEnabled="false"
app:tabIndicatorHeight="0dp"
android:id="#+id/tab_layout"
android:scrollbars="none"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
android:orientation="vertical" >
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:background="#467"
android:id="#+id/viewpager"
android:layout_below="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
myClass
public class LayoutExampleActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout_example);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPagerAdaptor(viewPager);
tabLayout.setupWithViewPager(viewPager);
setTabs();
}
private void setupViewPagerAdaptor(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "First");
adapter.addFragment(new GalleryFragment(), "Second");
// adapter.addFragment(new FragmentOne(), "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);
}
}
public void setTabs() {
tabLayout.getTabAt(0).setCustomView(R.layout.layout_one);
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
}
}
Set tabPaddingStart and tabPaddingEnd attributes.
like this:
<android.support.design.widget.TabLayout
...
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp" >
This question might be duplicated.
see: Cannot remove Padding from Tabs when using Custom views with Tab Layout
I've a similar tab layout, with 4 tabs.
When I go from tab 0 to tab 2 and then I come back to tab 0, Fragment0 is reloaded.. Same problem when I go from a tab to another "away" tab.
I would to load Fragment only first time and re-use them, without reloading.
This is a part of my code (I've using this tutorial):
MyActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = MyActivity.this.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(MyActivity.this, R.color.colorPrimaryDark));
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setupWithViewPager(viewPager);
setupTabIcons(); //I have only icon, not text.
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(MyFragment.newInstance(0));
adapter.addFragment(MyFragment.newInstance(1));
adapter.addFragment(new DifferentFragment());
adapter.addFragment(new TestFragment());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = 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) {
mFragmentList.add(fragment);
}
#Override
public CharSequence getPageTitle(int position) {
return null;
}
}
my_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<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/tabs"
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>
As you can see in the Documentation setOffscreenPageLimit
Inside your function setupViewPager(ViewPager viewPager) add this:
viewPager.setOffscreenPageLimit(limitNumberOfPages); //before setAdapter
viewPager.setAdapter(adapter);
And the limitNumberOfPages is an int that contains the amount of pages that can be scrolled without reloading the fragments. If you have 4 tabs, you should use:
int limitNumberOfPages = 3;
The default number for this property is 1.
I solved it by myself
Simple, use:
viewPager.setOffscreenPageLimit(numberOfPages);
From reference: Set the number of pages that should be retained to either side of the current page in the view hierarchy in an idle state.
In my case, I need 3 pages that should be retained.
ViewPager holds Fragments left and/or right of the selected Tab.
This is needed for fast animating tab change.
You can keep references of your Fragments in Your Activity, but this references can be null.
In the middle of my layout I want to have 2 tabs to choose between viewing 2 different lists in the second half of the screen. How can I do this?
Here is an image illustrating what I wish to achieve. This image has a questions tab and an answers tab in the middle of the screen. Depending on which tab you select it shows a different listview:
I wish to achieve this exact same thing.
I tried doing it with TabHost widget, but for the life of me I couldn't get rid of the title bar (I tried selecting themes with no title bar, tried setting the theme in the manifest to a no title bar one)
I also tried make action bar tabs, but those were at the top of the screen....
How can I create tabs in the middle of my screen like in the image?
I had to do the same today! I tried with PagerTabStrip, because I thought you can't use TabLayout if it's not with a Toolbar. Turns out I was wrong, and it's even used in Google iosched. So you can put a TabLayout + ViewPager wherever you want.
I know you want to do some very custom tabs, which would be easier to customize if they were buttons, but in my opinion it's better to use TabLayout + ViewPager, since it makes things more scalable.
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:id="#+id/top_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"></LinearLayout>
<RelativeLayout
android:id="#+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/top_layout"
android:layout_weight="1">
<android.support.design.widget.TabLayout
android:id="#+id/pager_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:minHeight="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccentSecondary"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccentSecondary"
app:tabTextAppearance="#style/TournamentWaitingTimerTabTextAppearance" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/pager_header"></android.support.v4.view.ViewPager>
</RelativeLayout>
</LinearLayout>
MainActivity class:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Locate the viewpager in activity_main.xml
ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
// Set the ViewPagerAdapter into ViewPager
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new LeftFragment(), "Players");
adapter.addFrag(new RightFragment(), "Prizes");
viewPager.setAdapter(adapter);
TabLayout mTabLayout = (TabLayout) findViewById(R.id.pager_header);
mTabLayout.setupWithViewPager(viewPager);
}
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();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
You can change the adapter you use, it doesn't matter.
To customize tabs, I'd take a look at this amazing tutorial.
You can try using a ViewPager with PagerTabStrip
You can add fragments as page tabs by implementing a FragmentPagerAdapter
In your layout xml file, you should be able to move around the ViewPager to anywhere in your layout like you would most other components. I haven't tried centering it, but I have placed things above and below it, and it behaves as you would expect.
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
</android.support.v4.view.ViewPager>
FragmentPagerAdapter example
public class FragmentPagerAdapter extends android.support.v4.app.FragmentPagerAdapter
{
final int PAGE_COUNT = 2;
private final String[] PAGE_TITLES =
{
"Fragment1",
"Fragment2"
};
public FragmentPagerAdapter()
{
super(getSupportFragmentManager());
}
#Override
public int getCount()
{
return PAGE_COUNT;
}
#Override
public CharSequence getPageTitle(int position)
{
return PAGE_TITLES[position];
}
#Override
public Fragment getItem(int position)
{
switch(position)
{
case 0:
return new Fragment1();
case 1:
return new Fragment2();
default:
return null;
}
}
}
and in your main Acivity:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mCustomPagerAdapter = new FragmentPagerAdapter();
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mCustomPagerAdapter);
...
}