I am using Toolbar and more than one Textview with some text,but when i scroll i am trying to hide my toolbar but its not hiding,following is my xml code can anyone help me with this,Thanks in advance..
<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="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:fitsSystemWindows="true">
<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:layout_collapseMode="pin" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:paddingTop="24dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product Name:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_prodname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Brand:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_brandnm"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_description"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
android:layout_marginTop="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Price:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_price"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Category:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_catname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subcategory:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_subcatname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>-->
</android.support.design.widget.CoordinatorLayout>
Put you toolbar inside "NestedScrollView"
Maybe this will help? https://github.com/ksoichiro/Android-ObservableScrollView
You can just observe the scrolled area and show/hide the toolbar when necessary.
Use this code for Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
Explanation :
The scroll flag used within the attribute app:layout_scrollFlags must be enabled for any scroll effects to take into effect.
For more information and different scrolling effects check Handling-Scrolls-with-CoordinatorLayout
If you want to achieve that without using any libraries, you have to put Toolbar inside the CollapsingToolbarLayout. Here is the working layout.
<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="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
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="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// put your contents here..
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Related
Hi I'm trying to use Collapsing Toolbar but when the collapsing toolbar collapses the title of the toolbar moves outside the screen. I'm using right alignment for the text as i'm trying to build an app in Urdu language. I have searched on this and not no solution. Need help!
See the screenshot here
XML
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.mrvirk.urduapp.MainActivity">
<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:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_collapseMode="parallax"
android:contentDescription="#string/app_name"
android:src="#drawable/quran"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/Quran"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="6dp"
android:layout_marginBottom="16dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/quranTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="12dp"
android:textStyle="bold"
android:layout_marginTop="12dp"
android:text="#string/Quran"
android:textColor="#color/colorPrimary"
android:layout_gravity="right"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="12dp">
<TextView
android:id="#+id/quranIntro"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:padding="10dp"
android:text="#string/intro"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/quranDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:lineSpacingMultiplier="1.5"
android:padding="20dp"
android:layout_marginTop="12dp"
android:text="#string/description"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="97dp"
android:elevation="6dp"
android:scaleType="fitCenter"
android:src="#drawable/fav"
app:layout_anchor="#id/appbar"
app:backgroundTint="#color/white"
app:layout_anchorGravity="bottom|left|end"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
Thanks in Advance :)
I could not find a better answer or solution to this problem. Now i have added a TextView at the right of the toolbar title. Which basically consume some space so the title comes at the required place. And i know its not the best practice. If someone has a better solution Please share.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:title="#string/Quran"
android:gravity="right"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>
in your CollapsingToolbarLayout try to add this app:layout_scrollFlags="scroll|exitUntilCollapsed"
like this
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
I'm trying to collapse my header view while scrolling up the view pager.
In the following image relativelayout3 is the layout I want to collapse..
Something like playstore preview image collapse in app page..
I tried searching and the following line in relativelayout3, But it didnt work
app:layout_scrollFlags="scroll|enterAlways"
And this my complete 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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout3"
app:layout_scrollFlags="scroll|enterAlways"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:id="#+id/toolbar"
android:background="#color/cornflower_blue_two"
android:elevation="5dp">
<ImageButton
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#null"
android:src="#drawable/ic_dots_vertical" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:background="#null"
android:src="#drawable/ic_arrow_left" />
</RelativeLayout>
<ss.com.bannerslider.views.BannerSlider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/blue"
android:layout_below="#id/toolbar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout3">
<TextView
android:id="#+id/product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Blah Blah"
android:textColor="#color/dark_gray"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/product"
android:layout_below="#+id/product"
android:text="Blah inc."
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/brand"
android:layout_alignBottom="#+id/brand"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/brand"
android:background="#color/ratings"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="4.7"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/brand"
android:layout_marginTop="14dp"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tabLayout" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Consider using CollapsingToolbarLayout. Please refer Collapsing Toolbar Example.
<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="250dp"
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="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cartoon"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffe5e5"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Output
More Reference
this is my xml
<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"
app:layout_scrollFlags="scroll|snap"
android:id="#+id/road_coordinator_id"
android:background="#color/primary_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:background="#color/primary_light"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/maintoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/viewpager_id"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/road"
android:layout_below="#+id/mainbackdrop"
tools:context=".Fragments.road">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/cameraicon"
android:id="#+id/camera_road"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"
android:id="#+id/location"
android:layout_below="#+id/camera_road"
android:textSize="20sp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gps_icon"
android:layout_alignParentRight="true"
android:layout_below="#+id/camera_road"
android:id="#+id/road_gps_id"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_loc_road"
android:layout_marginTop="45dp"
android:layout_below="#+id/camera_road"
android:layout_alignParentLeft="true"
android:hint="Location"
android:layout_alignParentStart="true" />
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/road_landmark"
android:textSize="20sp"
android:layout_below="#+id/edit_loc_road"
android:hint="Landmark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/road_desc"
android:textSize="20sp"
android:layout_below="#+id/road_landmark"
android:hint="Description"/>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/user_road"
android:textSize="20dp"
android:layout_below="#+id/road_desc"
android:hint="Reporter"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone number"
android:textSize="20dp"
android:layout_below="#+id/user_road"
android:id="#+id/phone_road_id"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="57dp"
android:id="#+id/buttonroad"
android:background="#drawable/pressed"
android:layout_below="#+id/user_road"
android:layout_toStartOf="#+id/camera_road" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:id="#+id/btncancel"
android:layout_alignTop="#+id/buttonroad"
android:background="#drawable/pressed"
android:layout_toEndOf="#+id/camera_road" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
////////////////////////////////////////////////////////////////////
So inside the collapsing toolbar layout i have a toolbar and its stuck at the top.There should be a toolbar below which there is a view pager .
I am not able to figure out why. If its a silly mistake forgive me. I am new to android.
My Activity xml file
///////////////////////////////////////////////////////////
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame_replace"
android:layout_below="#+id/toolbar">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
///////////////////////////////////////////////////////////////
I am replacing the frame layout with fragment. The toolbar in my activity is getting replaced by the fragment toolbar once the fragment is back pressed. I hope this helps explain my problem more clearly.
android:fitsSystemWindows="true" add this line in your root view.
I decided I wanted to add a collapsible toolbar to a part of my app today. I followed a guide (as I really knew nothing about collapsible toolbars) and it totally went south. Everything is showing incorrectly. Please excuse my lack of experience with these types of layouts. Thanks in advance you wonderful people of StackOverflow
Here is my layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/list_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/list_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/list_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="12dp">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/list_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="addItem"
android:visibility="gone"
app:fabSize="normal"
app:layout_anchor="#+id/list_main"
app:layout_anchorGravity="bottom|end" />
<LinearLayout
android:id="#+id/list_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:id="#+id/list_sheet_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_share"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/share" />
<TextView
android:id="#+id/list_sheet_copy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_content_copy"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/copy" />
<TextView
android:id="#+id/list_sheet_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_mode_edit"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/edit_literal" />
<TextView
android:id="#+id/list_sheet_delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_delete"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/delete" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Here is what it looks like:
Ok, I figured it out. It is because I (stupidly) didn't have the appbar layout as the parent for the collapsing toolbar, instead it was itself. Correct layout looks like:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/list_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".ui.ListCollapseActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/list_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/list_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/list_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="addItem"
android:visibility="gone"
app:fabSize="normal"
app:layout_anchor="#+id/list_main"
app:layout_anchorGravity="bottom|end" />
<LinearLayout
android:id="#+id/list_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:id="#+id/list_sheet_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_share"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/share" />
<TextView
android:id="#+id/list_sheet_copy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_content_copy"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/copy" />
<TextView
android:id="#+id/list_sheet_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_mode_edit"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/edit_literal" />
<TextView
android:id="#+id/list_sheet_delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_delete"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/delete" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I do not want the toolbar to collapse in the coordinator layout below. No matter what I do it collapses (the tabs do not collapse but the toolbar with the title does).
Second issue is that the nestedscrollview in the viewpager has a few EditTexts. On opening of softkeyboard when an edittext at the bottom is clicked the softkeyboard goes over the edittext. On closing the softkeyboard and then doing second attempt it successfully moves the edittext text up.
<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="match_parent">
<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"
app:layout_collapseMode="none">
<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/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="36dp"
android:paddingLeft="6dp"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_48dp"
android:visibility="gone" />
This is one of the views within the viewpager:
<android.support.v4.widget.NestedScrollView 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="22dp"
android:layout_marginRight="22dp"
android:layout_marginTop="15dp"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/symbolAutoCompleteBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="Enter Symbol Here"
android:inputType="textCapCharacters" />
<TextView
android:id="#+id/companyNameBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<TextView
android:id="#+id/currentPriceBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE PRICE"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="NUMBER OF SHARES"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE DATE"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:id="#+id/dateText"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:id="#+id/datePickerImage"
android:src="#drawable/ic_event_note_black_24dp" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Try this
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/collapsing_toolbar_bg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
The atrribute:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
prevents the collapsing toolbar layout from getting completely collapsed.
And replace android:src="#drawable/collapsing_toolbar_bg" with your image resource