Adding SlidingTab inside tab - android

I am using a library for sliding tabSmartTabLayout - ogaclejapan. I want to add one more sliding tab inside one tab of parent sliding tab. But when I do so I can't see the second sliding tab.
Refer the image
Here is the MainActivity which contains the parent sliding tab.
<?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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/root"
tools:context="com.virtualsquadz.letsgo.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:id="#+id/topBar"
android:layout_marginTop="#dimen/_16sdp"
android:paddingBottom="#dimen/_5sdp">
<ImageButton
android:layout_width="wrap_content"
android:id="#+id/backButton"
android:layout_height="wrap_content"
android:src="#drawable/back_0"
android:background="#null"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/title_transport"
android:text="Getting Around"
style="#style/title_transport"
android:paddingTop="#dimen/_2sdp"
android:layout_centerInParent="false"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="#+id/viewpagertab"
android:layout_below="#id/topBar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:stl_indicatorAlwaysInCenter="false"
app:stl_indicatorWithoutPadding="false"
app:stl_indicatorInFront="false"
app:stl_indicatorInterpolation="smart"
app:stl_indicatorGravity="bottom"
app:stl_indicatorColor="#40C4FF"
app:stl_indicatorThickness="4dp"
app:stl_indicatorWidth="auto"
app:stl_indicatorCornerRadius="2dp"
app:stl_overlineColor="#4D000000"
app:stl_overlineThickness="0dp"
app:stl_underlineColor="#4D000000"
app:stl_underlineThickness="1dp"
app:stl_dividerColor="#4D000000"
app:stl_dividerThickness="1dp"
app:stl_defaultTabBackground="?attr/selectableItemBackground"
app:stl_defaultTabTextAllCaps="true"
app:stl_defaultTabTextColor="#color/flight_white"
app:stl_defaultTabTextSize="#dimen/_12sdp"
app:stl_defaultTabTextHorizontalPadding="#dimen/_16sdp"
app:stl_defaultTabTextMinWidth="0dp"
app:stl_distributeEvenly="true"
app:stl_clickable="true"
app:stl_titleOffset="24dp"
app:stl_drawDecorationAfterTab="false"
/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/viewpagertab"
android:layout_marginTop="#dimen/_5sdp"
/>
</RelativeLayout>
MainActivity.java
SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager) ;
ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
.add(R.string.transportOption1, R.layout.activity_flights)
.add(R.string.transportOption2, R.layout.activity_train)
.add(R.string.transportOption3, R.layout.activity_buses)
.add(R.string.transportOption4, R.layout.activity_cars)
.create());
viewPager.setAdapter(adapter);
viewPagerTab.setViewPager(viewPager);
Similary I designed for 'trains' inside train.java
SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab2);
ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager2) ;
ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
.add(R.string.trainSearchOption1, R.layout.trainsearchoption1)
.add(R.string.trainSearchOption2, R.layout.trainsearchoption2)
.create());
viewPager.setAdapter(adapter);
viewPagerTab.setViewPager(viewPager);
I tried to find the solution from here. But unfortunately I couldn't find an answer. If you are wondering which ViewPager should be called if they are nested then take a situation as example - First child view pager is called when swipping left / right and when we are at extreme end of left / right respectively of child view pager then parent view pager is called. Or we can also click on tabs of parent to change it.

Google Material Design guidelines doesn't allow using nested tabs. It is a bad programming practice.
It is highly recommend to modify your UI to conform to Google design guidelines.

Related

ViewPager like playstore

I am trying to make viewpager work like one in google playstore in movies,music,books section.
Below is screenshot of one:
This is screenshot of viewpager i want:
below is my xml code:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vp"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginBottom="5dp">
</android.support.v4.view.ViewPager>
below is java code:
ViewPager vp;
int mResources[]= {R.drawable.b,R.drawable.c,R.drawable.d};
vp = (ViewPager)findViewById(R.id.vp);
vp.setPageMargin(-10);
vp.setAdapter(new ViewPageAdapter(ViewPagerActivity.this,mResources));
below is xml for single item:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#eee"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="220dp">
<android.support.v7.widget.CardView
android:elevation="10dp"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/c"
android:id="#+id/imageView" />
</android.support.v7.widget.CardView>
Thanks in advance for help
If I'm not mistaken, you want a ViewPager whose next/previous items partly showing.
If so, set minus page margin to the viewPager by ViewPager.setPageMargin(int), and add (positive) margins to each item's left and right.
I hope it'll help you.
You should use RecyclerView with LinearLayoutManager with a horizontal orientation. This post should answer your question. ViewPager is typically used in conjunction with entire fragments as opposed to scrolling components within those fragments according to the documentation.

How do I change the text size and color within tabs when using SlidingTabLayout in Android?

So the effect will be each individual tab will be a little larger in addition to the text color change. I've tried using the setCustomTabView() but it only applies to the first tab and the rest of my tabs are unrendered.
So here is an example using setCustomTabView():
In your layout you have the ViewPager and the SlidingTabLayout :
<com.yourProject.SlidingTabLayout <--- IMPORT latest from Google[*see link]
android:id="#+id/sliding_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager android:id="#+id/viewPager"
android:layout_marginTop="#dimen/text_size_medium"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java and also here you will find SlidingTabStrip, which is also needed.
Then in your fragment or activity, set the custom view for the the sliding tab like this:
viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);
mSlidingTabLayout = (SlidingTabLayout) rootView.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.accent));
mSlidingTabLayout.setCustomTabView(R.layout.sliding_tab_layout_custom, R.id.item);
mSlidingTabLayout.setDistributeEvenly(false);
mSlidingTabLayout.setViewPager(viewPager);
With your custom layout for the tab being:
../layout/sliding_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/text_size_small"
android:textColor="#color/primary"
android:textSize="#dimen/text_size_medium"/>
</LinearLayout>
The example was tested, so it should work. Hope it helps :)

placing viewpager with sliding tabs inside fragments as a nested format

What i am trying to do:
I am using a drawer where i have 10 fragments
Inside one of the fragment i am trying to add view pager with
sliding tabs(that has view pager indicator as per jake wharton)
What is happening:
When i tried to do this i get error as described here in one of my
other stackoverflow question
I am not able to bring the architecture described in the figure
below
Question::
Is placing view pager with sliding tabs not possible inside
fragments ?
If so are there any samples online ? (Jake wharton sample is done
with placing widgets in activity not fragments)
If any other way is available are there any open source library for
this
Note: i am aware nested way is not advised, but i need to get this architecture
Architecture i am trying to get it:
At first, you can try this sample from Google https://developer.android.com/samples/SlidingTabsBasic/project.html. It also contains the SlidingTabLayout class, try it, if you use something different.
This project is similar to your (has the same layout) except navigation drawer.
So, let's do the following things:
your main layout may look like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#color/drawer_back"
android:gravity="left|center_vertical"
android:orientation="vertical">
<ListView
android:id="#+id/left_drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="0dip"
android:layout_gravity="left"
android:layout_weight="1"
android:background="#color/drawer_back"
android:choiceMode="singleChoice"
android:clipToPadding="false"
android:divider="#android:color/darker_gray"
android:dividerHeight="1dp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
For fragment with sliding tabs use the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<yourpackage.slidinglayout.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_shadow" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:layout_marginTop="#dimen/small_padding"
android:background="#android:color/white"/>
</LinearLayout>
After that you should create a Fragments for your ViewPager and etc. but I think, you've already done it.
Fragment with sliding tabs and ViewPager - it's up to you.
On drawer item with sliding tabs clicked, simple use the FragmentTransaction:
mCurrentFragment = new SlidingTabsFragment();
mTransaction.replace(R.id.content_fragment, mCurrentFragment);
mTransaction.commit();

How to overlay Android ViewPagerIndicator on Page viewer?

I have implemented the JakeWharton Android-ViewPagerIndicator. I have shared my screens.
This is a two part question: -
1) I want to put the Page Indicator over the Page Viewer. That is the page viewer should be full screen and the Circular Page indicator must fall on this. I making a tutorial for an app and want to use this. It is similar to the Vine app tutorial. I have tried using FrameLayout and RelativeLayout but not able to achieve this.
This is my code and screen shot:
ViewPager_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.viewpagerindicator.UnderlinePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="5dp" />
</LinearLayout>
MainActivity.java
viewPager = (ViewPager) findViewById(R.id.pager);
adapter = new ViewPagerAdapter(MainActivity.this, rank, country,
population, flag);
viewPager.setAdapter(adapter);
mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
mIndicator.setFades(false);
mIndicator.setViewPager(viewPager);
2) I want to disable Swipe Left that is I want to move forward only not backward. How do I do this. I tried modifying the circularpageindicator class by checking the previous page number and the current page number. If the previous page number is > that current then i don't do anything. This worked for the Indicator but the page viewer still moves.
Try this to put Indicator overlay on ViewPager
<?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:layout_width="match_parent"
android:layout_height="240dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:id="#+id/pager"/>
<com.viewpagerindicator.UnderlinePageIndicator
android:id="#+id/indicator"
android:padding="5dip"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
</RelativeLayout>
If you want to put Indicator on top instead bottom, change
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
to
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
Hope this help.

android fragment listview shows items partially

I have an activity with the associated activity.xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pattern_background"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:clickable="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
...
<LinearLayout
android:id="#+id/llComments"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</ScrollView>
<include
android:id="#+id/layoutComments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/widget_comentarios_fragment" >
</include>
In the LinearLayout with id llComments I introduce a fragment called CommentsFragment dynamically from the activity with the following code:
private Fragment commentsFragment;
private FragmentTransaction ft;
...
llComentarios = (LinearLayout) findViewById(R.id.llComments);
...
Bundle args = new Bundle();
args.putString(Constants.IDMODEL, getId());
commentsFragment = CommentsFragment.newInstance(args);
ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.llComments, commentsFragment).commit();
The Fragment associated xml file is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="#+id/comments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#color/transparent"
android:dividerHeight="10dp"
android:paddingLeft="#dimen/indicator_internal_padding"
android:paddingRight="#dimen/indicator_internal_padding" />
</LinearLayout>
The problem I cannot solve is to show in the activity more than one item (in fact I am showing one and a third items) in the list if I do not fix a height for the listview.It should adapt to as many items I add to the list in the fragment through the adapter. I have tried different combinations of heights in the layouts and views, but still does not work. Maybe I am annulating one with other.
Any help would be appreciated.
Thanks in advance
After some days I find out the exact problem. I was including a ListView into a ScrollView, and that's clearly not recomended by Android developers.
You can look for further info here: Why ListView cannot be used in a ScrollView?
Anyway, if you want to do it, you can do that with a hack. Take a look at these proposals:
How can I put a ListView into a ScrollView without it collapsing?
For me that worked. Problem solved.

Categories

Resources