I have implemented a scrollable tab + swipe, everything works fine.
However I have some issues related to the current PagerTabStrip :
1. I can't make the current title Bold
2. Can't choose the default tab I want to display (e.g : the tab with position 2) when rendering the view, like the tabs in the Google Play app
3. The first and last tab have respectively a margin on the left and the right, can I set it to 0dp ?
This is what I could do for styling the tabs :
Java :
strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
strip.setTabIndicatorColorResource(R.color.light_blue);
strip.setDrawFullUnderline(true);
Layout :
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_tab_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#drawable/pagertitle_border_bottom"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:textColor="#color/light_blue" />
Can anyone help me with the 3 points ? Thank you.
Well, I actually found a proper solution for that. Forget about PagerTabStrip ;)
Apparently, Google released a sample app that features the exact source code they used in Google Play app. It's super easy to use. Download the sample app and copy two files from there: SlidingTabLayout.java and SlidingTabStrip.java.
Then in your layout XML, add the following above the ViewPager (change com.example to your package name):
<com.example.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:layout_width="match_parent"
android:background="#android:color/white"
android:layout_height="0dp"/>
And add the following to the activity after you initialize the ViewPager:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(new GridPagerAdapter(getSupportFragmentManager()));
// Initialize the SlidingTabLayout. Note that the order is important. First init ViewPager and Adapter and only then init SlidingTabLayout
mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setViewPager(mViewPager);
}
SlidingTabLayout's API allows you to easily do basic styling such as, changing the tab color, the divider color, the indicator color, etc.
One more important thing, the SlidingTabLayout that Google provided works well when you have many tabs. But, if you have, for example, three tabs, you'll see that all the tabs are aligned to the left and there's a big gap between the last tab and the width of the view.
To overcome this, modify SlidingTabLayout.java after line 173 just below TextView textView = new TextView(context); add the following line:
textView.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f));
Now the space among the tabs will be divided correctly:
Have a look at this. This guy explains very clearly how to use Sliding Tab Layout
Understanding Sliding Tab Layout
For any customization
Change the code in the class SlidingTabLayout.java
Related
I have an android project that my client is requiring me to have a ViewPager similar to the image below.
Showing three panel at a time. The current selected panel will show full at the center, the panel before the selected one (if there is) will be shown half, and the panel after the selected one will be shown in half as well.
Do you guys have any idea in how to do this? Still new in Android an im slowly getting lost when it comes to this kind of stuff?
Here is the code that i have so far that will only show one panel.
ViewPager viewPagerShopPortfolio = (ViewPager)
mShopPortfolioImageAdapter = new ShopPortfolioImageAdapter(getChildFragmentManager(), portfolioListingModelList);
viewPagerShopPortfolio.setAdapter(mShopPortfolioImageAdapter);
And this is how my app looks like right now which only shows one panel.
Well, i found a second solution for this using the following codes:
XML:
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerShopPortfolio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:clipToPadding="false"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:background="#color/colorFontWhite" />
Java:
ViewPager viewPagerShopPortfolio = (ViewPager) view.findViewById(R.id.viewPagerShopPortfolio);
viewPagerShopPortfolio.setPageMargin(30);
Here is the following result:
You can override getPageWidth method of PageAdapter. For example return 0.7f to have all child pages span only 70% of the ViewPager's width.
Or you can use library:
https://github.com/Pixplicity/MultiViewPager
More information about that lib you can find in [that][2] answer.
In android.support.design.widget.TabLayout, how to make the active tab always appear at the center, just like in Play Newsstand app, as shown below.
The first and last tab should also appear at the center.
I tried using padding on the TabLayout. It is not working. This is the code that I wrote:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/yellow"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE"
app:tabMode="scrollable"
android:gravity="bottom"
android:clipToPadding="false"
android:paddingLeft="90dp"
android:paddingRight="90dp"
/>
In this case, the tabIndicator will also shift 90dp from left. It should remain at the center independent of the padding.
Checkout this solution: https://stackoverflow.com/a/36886331/651770
Could be solved by tabContentStart, but if you want to center both sides of Tablayout, you need to extend this class and set the padding by hand.
Maybe a little late, but you can try using this library :
https://github.com/jpardogo/PagerSlidingTabStrip
This can be done as they said :
Include the following dependency in your build.gradle file.
compile 'com.jpardogo.materialtabstrip:library:1.1.1'
Or add the library as a project. I tried to send a pull request, but looks like the original developer doesn't maintain it anymore.
Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the ViewPager it represents.
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager:
// Initialize the ViewPager and set an adapter
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));
// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(pager);
Hope this help.
I want to implement a tabbed view pager where the tabs are not part of the action bar.
What is the correct way of doing this since it doesn't seem supported by standard.
So far I have been using the following approach and it seems like it's been so much more effort than it should be that it bothers me:
Create horizontally oriented linear layout to act as tab bar view
Create individual tab views to populate tab bar along with styling
Create custom ongesturelistener for left and right swipe to go between tabs
Create animations for sliding-in/out upon swiping (fragment transactions)
Create animations for the tab bar upon swiping
This seems like it's way too much work when there is a viewpager and tabbar built in. It seems though this "proper" approach is limited to only being used in conjunction with the actionbar. Can anyone provide a simple example of what I am trying to achieve? (see following picture for clarity).
You don't need to build a ViewPager bundled with an ActionBar, they are both independent views.
You can simply hide the ActionBar on that activity doing something like:
ActionBar mActionBar = activity.getActionBar();
mActionBar.hide();
Although it's an ugly solution you can do that to test your code. I would suggest either add a Theme to that specific Activity without an ActionBar (something like Theme.Material.NoActionBar) - not sure it's the correct name of the theme, but you get the idea.
Not sure I answered your question accordingly, but if not please show us some code.
You just add a viewpager with a pager tab strip. Plenty examples out there.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
FragmentManager fm = getSupportFragmentManager();
fragmentPagerAdapter = new MyTabsPagerAdapter(
fm, tabsArray);
ViewPager mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(fragmentPagerAdapter);
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/default_screen_bg"
android:minWidth="1000dp">
put your image here
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingBottom="4dp"
android:paddingTop="4dp" />
</android.support.v4.view.ViewPager>
FIRST PAGE
[/IMG]
SECOND PAGE
[/IMG]
I want show my two pages like this, When loading first page the second page title should be shown indicating the user about a second page. How can I achieve this?, I can put two tabs or viewpager with view pager indicator, i want that functionality but actually what I ask here is the view that is marked the image, the next tab to display half of its title indicating the user of next page.
Thanks in advance..
You can directly use ViewPager with PagerTabStrip provided in android support-v4 library.
Download android Support-V4 library here
Then extract the android Support-V4 jar and paste into your project libs Folder.
Right click and Add to build path.
Now use View pager with PagerTabStrip in your Main layout as:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/pagetab"
>
<android.support.v4.view.PagerTabStrip
android:id="#+id/pagetab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:background="#ffffff"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
Now populate the ViewPager using Adapter in Main Class .see here
Now you can Achieve What you want.
I strongly advise you to use a library, instead creating the widget yourself.
That said, this library suit your requirements. It’s really easy to implement it:
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(yourViewPager);
You can found a complete implementation here
I'm seeing a very strange error when trying to use ViewPagerIndicator (http://viewpagerindicator.com/). I've narrowed it down to the TitlePageIndicator that is part of that library.
When I use the TitlePageIndicator, I am unable to swipe between tabs, and my fragments don't show up (although they are created and ran, the button in the upper right is created by the fragment that should be showing). It looks like this: http://imgur.com/RJaI9 (Sorry, new user so I can't inline pictures)
But without, my fragments appear correctly and I'm able to swipe between them. http://imgur.com/bboSd
I have no idea why this is happening. I'm using the latest ViewPagerIndicator library, but I'm thinking maybe it has something to do with how I imported it? I followed the instructions on the website:
created the new android project in eclipse from existing source, imported the compatibility library, then added it to my project in the android project properties.
Any help would be greatly appreciated, I've been stuck on this for 2 weeks :(
Code:
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.viewpagerindicator.TitlePageIndicator
android:id="#+id/titles"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/grocery_pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
FragmentActivity (From ActionBarSherlock):
public class GroceryActivity extends BaseFragmentActivity
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grocerylist);
// Set the pager with an adapter
ViewPager pager = (ViewPager) findViewById(R.id.grocery_pager);
pager.setAdapter(new GroceryViewPagerAdapter(getSupportFragmentManager()));
// Bind the title indicator to the adapter
//When these next two lines are commented out, everything works
TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.titles);
titleIndicator.setViewPager(pager);
}
}
I ended up finding the problem:
In my linear layout, I did not set the orientation of the layout. For some silly reason I thought the orientation field had to do with the orientation of the device, and not the layout itself. Adding the orientation:vertical field made everything work.
Hopefully this helps someone!