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).
Related
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);
I have a layout in my head that should look like that: http://i.imgur.com/H1nTRvd.png
Only part that will be dynamic is the blue one. I don't know the number of tabs that will be created before I load the activity, hence the number is acquired from server (could be either 5 or 24 for all I know).
The bottom buttons should not move when I swipe and the blue area changed.
Currently I have this implemented w/o tabs list using embedded fragment in my activity and gesture listener. There's no good looking transaction animation between fragments.
#Nick Pakhomov: You can use PagerTabStrip
PagerTabStrip
is intended to be used as a child view of a ViewPager widget in your XML layout. PagerTabStrip is most often used with fragment, which is a convenient way to supply and manage the Lifecycle of each fragment.
So here’s how a ViewPager with a PagerTabStrip in it would look like in the layout file:
<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_tab_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
/>
</android.support.v4.view.ViewPager>
Please check this PagerSlidingTabStrip demo . I hope it will helps you .
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>
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().
The goal is to display two Fragments (Frag A, Frag B) on the screen in a different layout depending on the screen orientation (portrait or landscape).
When the device is in Portrait mode, only one of Frag A and Frag B is displayed at a time using swiping to switch between UIs. ViewPager works perfectly for this.
When the device is in Landscape mode, Frag A is displayed on the left of the screen and Frag B is displayed on the right. A simple LinearLayout works perfectly for this.
The problem arises when trying to get both working in the same application. It seems like the ViewPager class must be referred to in the Java source code (in the onCreate method). This means that a UI element is defined in both the XML and the source code... which seems like a problem when the device is in Landscape mode and there should not be ViewPager object but one is referred to in the source code. Am I approaching this correctly? If one layout is using ViewPager, does every other layout need a ViewPager?
layout/activity_mymain.xml
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyMainActivity" >
<!--
This title strip will display the currently visible page title, as well as the page
titles for adjacent pages.
-->
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
layout-land/activity_mymain.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment android:name="com.example.ActionFragment"
android:id="#+id/action_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.example.SummaryFragment"
android:id="#+id/summary_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
From MyMainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_topmain);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
}
ViewPager is used to instantiate View objects at runtime, so it needs to be defined in the code.
What I was trying to do is very similar to the different tablet/handset layouts described in the Fragments Guide, where they recommend using separate Activities.
(If anyone knows of a way to handle swiping entirely in XML, that would be a much better solution)