I am trying to implement a carousel (the kind with the dots on the bottom to show the number of items / pages and the current selected item) using PageViewer.
The swipe part is working fine, but the indication that there a further content available was missing.
I tried using PagerTabStrip and PagerTitleStrip but they are showing the page title, but I want to show the dots.
I have read about a few libraries which provide the functionality but am trying to avoid using those.
Please let me know if there is a way I can extend my current code to accommodate it
EDIT
the updated layout code is as follows
`
<android.support.v4.view.ViewPager
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/activity_graph_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_marginTop="5dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.vivekji.munimji.activity.TabGraph">
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="48dp" android:background="#fff"/>
</android.support.v4.view.ViewPager>
`
Use CirclePageIndicator along with ViewPager
1. Add gradle dependency
dependencies {
compile 'me.relex:circleindicator:1.2.2#aar'
}
2. Use CircleIndicator in your layout
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="48dp"/>
3.Set up indicator with viewpager
ViewPager viewpager = (ViewPager) view.findViewById(R.id.viewpager);
CircleIndicator indicator = (CircleIndicator) view.findViewById(R.id.indicator);
viewpager.setAdapter(mPageAdapter);
indicator.setViewPager(viewpager);
Related
I am working on a Scrollable tabs and came to observe a custom scrollable tabe in a mediaplayer app but don't know what is used in this as per my knowledge it is like scrollable tabs.Any hint how to achieve this while changing from one fragment to another .I want to show a gape in the fragment while scrolling as in this app?THIS is what I created
this is what i want a gape between two fragment
I tried to give padding in the view pager but it is not working at all.
my layout content main .xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:background="#drawable/gradient2"
>
<android.support.v4.view.PagerTitleStrip
android:id="#+id/title"
style="#style/viewPagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="#drawable/gradient1">
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
I tried both padding and margine in the ViewPager but it is not working
Here is the similar property used try this https://github.com/astuetz/PagerSlidingTabStrip
Since I am using ViewPager, the easiest way to achieve some space is to use the setPageMargin() method of Viewpager, which in my case will be
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageMargin(200);
//200 is value in pixel
There is also a method setPageMarginDrawable() sets a drawable that will be used to fill the margin between pages (Android documentation).
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.
Hii Am currenly using a pagerslidingtabstrip and viewpager to host 3 slidding fragments. Everything works fine now but one of the title is a little bit longer than others! so it can't fit in the allocated place. so am getting some letters of that title and 3 dots. So i would like to ask if there is a good way to fix this such that each tab will take width corresponding to its lenght.
Note that it is possible to have this feature if i implement pagerAdapter with a layout(Viewpager and PagerTitleStrip as documented here: http://developer.android.com/training/implementing-navigation/lateral.html)
Try add this app1:pstsShouldExpand="false" property in your xml where you have defined PagerSlidingTabStrip
for example
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/tab_bg"
app1:pstsTextAllCaps="false"
app1:pstsShouldExpand="false"
/>
I'm try this and it's work for me
1. Create new pagerTitleStrip layout, "my_tabs.xml"
<code>< com.astuetz.PagerSlidingTabStrip
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/materialviewpager_pagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pstsPaddingMiddle="true"
app:pstsDividerPadding="20dp"
app:pstsIndicatorColor="#FFF"
app:pstsIndicatorHeight="2dp"
app:pstsShouldExpand="false"
app:pstsTabPaddingLeftRight="10dp"
app:pstsTabTextAllCaps="true"
tools:background="#A333"
/> </code>
2. On layout xml contain < com.github.florent37.materialviewpager.MaterialViewPager > set that new tab layout to your viewPager layout with :
<code>app:viewpager_pagerTitleStrip="#layout/my_tabs"</code>
3. If still no working, add <code>.setShouldExpand(true);</code> on pagerActivity.java before setViewPager.
<code>MaterialViewPager mViewPager;
....
mViewPager.getViewPager().setOffscreenPageLimit(mViewPager.getViewPager().getAdapter().getCount());
mViewPager.getPagerTitleStrip().setShouldExpand(true); //Works
mViewPager.getPagerTitleStrip().setViewPager(mViewPager.getViewPager());
.... </code>
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 have ViewPager with PagerTabStrip , when swiping from page to another, both the pager and the tab will be moving together. (like google paly)
It's working fine. now all the pages have common data, and one part is going to change when swiping, so i don't want to swipe the whole page, just the area that going to change.
As you can see in the following image just the red area will be effected when swipe pages, the green area will not move.
I've searched a lot, but i can't find anything useful, any help would be appreciated.
viewpager code:
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#FFFFFF"
android:textColor="#003366"
android:paddingTop="4dp"
android:paddingBottom="4dp"/>
</android.support.v4.view.ViewPager>
Using swipeyTabs is the answer.
The problem when using PagerTabStrip is that the PagerTabStrip will be inside the ViewPager tag see the following code:
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#FFFFFF"
android:textColor="#003366"
android:paddingTop="4dp"
android:paddingBottom="4dp"/>
</android.support.v4.view.ViewPager>
so you cant separate them form each other.
but when using the SwipeyTabs, each tag will be as a separate part, see the following code:
<net.peterkuterna.android.apps.swipeytabs.SwipeyTabs
android:id="#+id/swipeytabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
swipeytabs:bottomBarColor="#ff96aa39"
swipeytabs:bottomBarHeight="2dip"
swipeytabs:tabIndicatorHeight="3dip"
android:background="#ff3b3b3b"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1" />
In this case, you can customize your layout as you want by dealing with ViewPager and SwipeyTabs as two parts.
In your case, I guess you can put the SwipeyTabs and ViewPager in red position like in the image, and in the green areas, you have to just adjust them as your needs.
I found these links which may help you. Good luck with that.
Swipey tabs sample
ViewPager meets Swipey Tabs
Disclaimer: I misread your post. Separating the ViewPager from the PagerTabStrip may not work or may need another approach. I'll leave the answer here in case it may help anyway.
You can achieve that by embedding the ViewPager in a separate fragment and placing another independent fragment beneath, which is not controlled by the ViewPager.
Basically, your main activity consists of two fragments: one that contains the ViewPager (which contains more fragments), another one that contains your fixed view.
To do it properly, this needs support for nested fragments, which is only available on Android 4.2 or otherwise in the latest support library (revision 11).
Be aware when instantiating your adapter for the ViewPager, you need to use the FragmentManager returned by getChildFragmentManager().