Viewpager with outside control - android

I want to implement simple view pager with control from outside view.
Here is mockup:
view_with_pager.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" >
<View android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/darker_gray"
android:id="#+id/control_header"
/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/control_header"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
My purpose is to control view pager only with control_header. Maybe there is any simple way to implement this feature. Thanks
P.S. I added horizontal scroll bar just for example. It could be any view controlled with fingers like ViewPager.

Related

How make put ViewPager inside ScrollView and scroll all view as one part?

I have an activity that have viewpager inside scrollview like the follwoing
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--someViews-->
</LinearLayout>
<!--then viewPager-->
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</ScrollView>
Then the view pager holds some fragments which have a tall view too.
The problem is the scroll view not scrolling because of the view is not need to scroll but the view inside the viewpager fragment's not scrolling
so, Is it possible to make the whole view including the inside view pager scroll as one view?
What I am saying that I don't need to scroll the viewpager fragment as separated part I need to scroll it as part of activity view.
Thanks
I believe the setup you are looking for would work inside a CoordinatorLayout using the NestedScrollView widget like so:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Display1" />
<TextView
android:id="#+id/subTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/subtitle"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Body1" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have just tested this with a sample project with a single text view in a Fragment and I was able to both scroll the view and swipe through the pages.
Please note though: I did have to provide a specific height for the ViewPager in order for it to display.

Using Recycler view inside Sticky Scroll view not working

I have a requirement where I need to code a screen which has a info view in top and view pager with two tabs in the bottom. View pager has two tabs with Recycler View inside it.
The View pager should stick whenever the user scrolls up and then the recycler view inside it should start scrolling. To achieve this I created two separate fragments for top part and bottom part and wrote the xml like this.
<com.citi.mobile.dashboard.views.StickyScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/core_color_FFFFFF_white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/title_id"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/top_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
<FrameLayout
android:id="#+id/bottom_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="sticky">
</FrameLayout>
</LinearLayout>
Inside the the bottom container I have a View Pager.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/TransTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/core_color_0077bb_blue"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/core_color_0077bb_blue"
app:tabTextAppearance="#style/ledgerTabLayoutTextAppearance"
app:tabTextColor="#color/core_color_666666_grey"
custom:typefaceName="Roboto-Medium" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/transaction_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
This has two tabs and each has a recycler view inside this. When I run this the parent scrollview stops working and only the recyclerview scrolling works.
Try adding android:nestedScrollingEnabled="false" to the recyclerview in your xml.

How to display tab widget in the middle of layout?

I am trying to display tab widget in the middle of layout as shown below.
I have few text views, progress bar etc. before tab widget.
Is this possible to implement in android?
If it is, how can I do that?
Yes, it is possible.
Let's say you have a vertical LinearLayout as your main layout. You would have something like this:
<?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">
<!-- put your top widgets/progress bars here
their height needs to be fixed or wrap_content -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pagertabstrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
</LinearLayout>

Adding fab Button at the junction of two ViewPager widgets

I have implemented a navigation drawer. In the FrameLayout of navigation drawer I have added a fragment which contains 2 ViewPagers taking exactly half the screen each. Now I want to add a FAB button at the junction of these two viewpagers as shown here.
In my case both viewpagers occupy exactly half screen which is slightly different from what is shown in image. Can somebody help me in getting the FAB at the junction.
The code for the fragment containing the 2 viewpagers is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shirt_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pant_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
You could enclose your linear layout into FrameLayout and add your button like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
<ImageButton
android:layout_gravity="center_vertical|right"
...
/>
</FrameLayout>

Interaction with a ViewPager in a SlidingUpPanel

I'm trying to use the SlidingUpPanel from umano and have the slider be a ViewPager.
However, when trying to scroll left and right the ViewPager isn't moving. It appears the touch events are being intercepted by the SlidingUpPanel.
<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" >
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/slider_layout"
android:layout_gravity="bottom">
<!-- Top Panel -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<!-- Sliding Panel -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pager">
</android.support.v4.view.ViewPager>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>
Try:
Use the setDragView method for the ViewPager.
Use the setEnableDragViewTouchEvents so the dragview/ViewPager can have it's own touch
events.
Alternatively make a seperate View apart from the ViewPager that is intended to be for dragging and set the DragView to this View accordingly, the ViewPAger should receive the touch events seperately and can handle them. (the latter is how I do it and works with other layout)

Categories

Resources