ViewPager view extending Display - android

I am new to Android Programming. This might be something simple that I am missing. I have a ViewPager within a CoordinatorLayoutalong with a toolbar and tablayout. However the ViewPager view seems to extend the display, so any other layout I use to populate the ViewPager gets cut off.
Example
XML code
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Related

How to hide Toolbar and TabLayout

The problem is that ToolBar is hiding, if you swap specifically for it. But if you scroll the contents of the window, the ToolBar remains motionless, but it should be vice versa.
But in general TabLayout should hide, and ToolBar always remain on top.
I do not know how to implement it, help, pls.
P.C. I read this topic - it didn't help
My code:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/MyMaterialTheme" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/backTabColor"
app:layout_scrollFlags="scroll|enterAlways"
app:tabTextAppearance="#style/TabLayoutTextAppearance"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Showing both Toolbar and TabLayout

I am using this xml to hide the Appbar on scrolling down it's working fine but I want to show toolbar and TabLayout both on scrolling up currently it is showing only TabLayout.
Here is my xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/layout_size_big"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
app:tabContentStart="150dp"
app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"
app:tabTextAppearance="#style/TabLayoutTheme"
custom:tabGravity="fill"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.SwipeRefreshLayout>
Currently getting something like this
Thank you
You have already added app:layout_scrollFlags="scroll|enterAlways" for TabLayout. Do the same for Toolbar. And remove CollapsingToolbarLayout.
Try with adding below line to your Toolbar.
app:layout_collapseMode="pin"
As per mentioned in Collapsing Toolbars section in Android Developer Blog,
use CollapsingToolbarLayout’s app:layout_collapseMode="pin" to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses.

Toolbar collapses on click of button in List Item

I am using CoordinatorLayout with AppBarLayout, So i am facing problem that is when i click List Item Button toolbar collapse.
It is working fine with till Support Library com.android.support:design:24.1.1 but it start giving problem when i update it.
Here is the XML code i am using
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff6600"
app:elevation="6dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="10dp"
android:gravity="top"
app:elevation="0dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs_view_tabs"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme"
android:fitsSystemWindows="true"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/tabTextColor" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_view_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here is Image link for better understanding of problem
So help me out in this if i am doing something wrong or its a library bug.
Thanks

Tablayout not sticking

I am using toolbar with tablayout. Below is my main xml file
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_booking_mng"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
In this current code toolbar is not scrolling. when I scroll the list.
But when I set app:layout_scrollFlags="scroll|enterAlways" in Tablayout tag then both the tablaout and toolbar are scrolling and both are getting outside of the screen.
I want only toolbar to scroll and tablayout should get pinned at top(just like whatsapp).
Give scroll flag for the Tablayout as
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
Hope this wil work.

Toolbar can't auto-hide when viewpager's list scrolling down

I use CoordinatorLayout and AppBarLayout to try get the effect that the toolbar hides automatically as the ListView contained in the viewPager's Fragment scrolling down,but it doesn't work!The Toolbar never hide as I wish!Any of your suggestion will be appreciated!
xml code:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:orientation = "vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout 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="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_primary_green"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#color/md_text"/>
</android.support.design.widget.AppBarLayout>
<!--<LinearLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:orientation="vertical"-->
<!--android:scrollbars="none"-->
<!-->-->
<android.support.v4.view.ViewPager
android:id="#+id/viewgroup"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent">
</android.support.v4.view.ViewPager>
<!--</LinearLayout>-->
</android.support.design.widget.CoordinatorLayout>
The reason is the AppBarLayout cannot be fully compatible with old controls.When I replaced the ListView with RecycleView,it works well.

Categories

Resources