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.
Related
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.
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.
I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<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="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !
Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.
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 :)
I have requirement like play store app where there is view pager with images and videos
and scroll to view details .Unfortunately when user scrolls the scroll is jumpy but if i remove the scrollview the view pager works perfectly fine .
The layout look and feel is something like this
http://cl.ly/MBRB
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:fillViewport="true">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:background="#drawable/loading_image"
android:gravity="top"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/product_image_pager"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/titles"
style="#style/CirclePageIndicator"
android:layout_alignParentBottom="true"
android:padding="10dip"
android:paddingBottom="10dp" />
</RelativeLayout>
<include layout="#layout/app_screen_menu" />
</LinearLayout>
</ScrollView>
Btw i am loading images from server .
Thanks
You are using 2 scrollisteners
A viewpager uses a scrolllistener
A scrollview uses a scrolllistener
These two scrollistener are fighting for the ScrollEvent.
You can solve this by implementing onInterceptTouch. In this method you can decide who wins the fight over the ScrollEvent
Take a look at this protected post regarding a similair issue containing 2 scrollviews