Is there any way to have embedded scrollable tabs? - android

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 .

Related

Android TabLayout prevent activation of tabs adjacent to selected

I have a tab-based app. I am using A TabLayout for my tabs and a subclass of FragmentStatePagerAdapter to instantiate the fragment for the selected tab. I have disabled swiping between tabs. I am still seeing a callback to create a fragment for tabs adjacent to the selected tab. In other words, if the tab at index 0 is activated, I also see a callback to GetItem for the tab at index 1.
I want to disable that behaviour. In other words, it should only request a fragment for the active tab. Is that possible?
<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:id="#+id/root">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
app:tabPaddingTop="0dp"
app:tabMode="fixed"
app:tabGravity="fill" />
<jockusch.calculator.droid.AndroidViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The reason this is happening is due to you using a ViewPager.
ViewPager, by default, will auto-create the adjacent Fragments because this allows the user to swipe to them whenever they wish. Creating them only when they're ready to swipe might cause lag or some unpleasant visual effects.
ViewPager has a method called setOffscreenPageLimit(int limit) which can limit the amount of adjacent it keeps in memory, however I believe it's not possible to decrease it to 0 due to ViewPager's innate behavior.
If you've already disabled swiping between tabs, then it sounds like what you want isn't a ViewPager. Consider just using FragmentTransactions to replace the active Fragment.
viewPager.setOffscreenPageLimit(0)
is what you are looking for.
But a ViewPager doesn't allow offscreen limit less than 1.
source
Use something else than a viewPager to get your desired effect. One way of doing it without viewPager would be to have a frameLayout instead and inflate a new fragment and destroy the previous one when a tab is selected.

scrollable tabs custom user Interface

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).

Slide between couple of fragments

I want to slide between fragments - not the whole screen , only part of it.
I saw SlidingPaneLayout but it didnt quite do what I wanted.
Use ViewPager to slide Fragments. Click here for tutorial.
If you want to place you slider in specific position, simply adjust ViewPager:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="100sp"
android:layout_height="100sp" />

How to achieve a custom layout with next page title shown half, indicating the user of next page as shown in android

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

Swipe part of the page using pager view

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().

Categories

Resources