How to customize toolbar in Bottomsheet layout?

How to customize toolbar in Bottomsheet layout? - android

I'm using a CollapsingToolbarLayout within a CoordinatorLayout for my bottomsheet's layout. The layout looks like this -
<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/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkBackgroundMainTranslucent"
app:behavior_hideable="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorScrim"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:contentDescription="#string/poster_string"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/bottomsheet_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/nestedScrollView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/bottomsheet_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I was wondering whether it would be possible to customize the toolbar inside the CollapsingToolbarLayout to add an up button and set its title without setting that toolbar as the supportactionbar.

you can put icons/images/button inside the toolbar through xml like this:
<android.support.v7.widget.Toolbar
android:id="#+id/bottomsheet_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin">
<ImageButton
... your usual crud height/width ...
android:id="#+id/contact_detail_edit/>
<TextView />
</android.support.v7.widget.Toolbar>
Then access them through the toolbar like so:
Toolbar bottomSheetToolbar = (Toolbar) bottomSheetLayout.findViewById(R.id.bottomsheet_toolbar);
ImageButton contact_detail_edit = (ImageButton)bottomSheetToolbar.findViewById(R.id.contact_detail_edit);
ImageButton contact_detail_favorite = (ImageButton)bottomSheetToolbar.findViewById(R.id.contact_detail_favorite);

Related

Scroll views under collapsing toolbar

I would like to create UI screen the same as twitter profile.
I want views scroll under collapsing toolbar but toolbar be pinned. I've tried to change scrollFlags of CollapsingToolbarLayout to scroll but then toolbar disappears while scrolling. If I add flags as scroll|exitUntilCollapsed then LinearLayout is not scrolled under toolbar. Also I want TabLayout to be sticky.
Any advice?
https://i.imgur.com/XCleWyY.gif
<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=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#mipmap/ic_launcher_round"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/userInfoContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NickName"
/>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>

fix toolbar top and header below

I have a header and a toolbar after it.
When scroll up the header the toolbar will be fix on top.
The problem is, I want the toolbar before header, on top of my activity, and when I scroll the header up the toolbar will only change its color.
toolbar
header (when scroll, change toolbar color)
any ideas how can I add the toolbar before header, on top of my activity and change its color when scroll up header?
<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:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout android:id="#+id/header"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="0dp"
android:id="#+id/imageViewProfile"
android:adjustViewBounds="true"
android:cropToPadding="false" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="?attr/colorPrimaryDark" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:scrollbars="none"
android:layout_alignParentLeft="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Try this:
<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:fitsSystemWindows="true"
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">
<RelativeLayout android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#color/colorAccent"
app:layout_collapseMode="parallax">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="0dp"
android:id="#+id/imageViewProfile"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:layout_centerHorizontal="true"
android:src="#mipmap/ic_launcher"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="?attr/colorPrimaryDark" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:scrollbars="none"
android:layout_alignParentLeft="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
-->
<include layout="#layout/content_scrolling"></include>
</android.support.design.widget.CoordinatorLayout>
OUTPUT
Hope this will help~

BottomNavigationView overlaps the content-android

i have created a activity with collapsing toolbar, but now i have added a bottom navigation view with 3 menu items in it.
but i noticed that, the content displayed in activity is hiding behind the bottom navigation view.
anyone having idea?
in short, the last some lines of my content layout are hiding behind bottom navigation view.
here is my xml 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:design="http://schemas.android.com/tools"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/p1"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:singleLine="true"
android:textColor="#android:color/white"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</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"
android:id="#+id/scroll"
android:padding="16dp"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_menu"
android:id="#+id/bottomMenu"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

android:layout_above="#+id/navigationbottom"
Insert this line at your view

NestedScrollView in CoordinatorLayout not showing overscroll

I have NestedScrollView with some texts and because that is in
CoordinatorLayout, when i scroll it to end of the NestedScrollView does not show overscroll effect, my guess is that when i reach end and try to scroll more i don't scroll nestedScrollView but i scroll CoordinatorLayout.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/activity_news_main_content"
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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_news_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_news_background_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/activity_news_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:background="#color/activity_news_collapsing_toolbar_background_color"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginBottom="#dimen/activity_news_title_margin_bottom"
app:expandedTitleMarginStart="#dimen/activity_news_title_margin_start"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/activity_news_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/activity_news_view_height"
android:layout_gravity="bottom"
android:background="#color/activity_news_collapsing_toolbar_background_color"/>
<include
android:id="#+id/app_bar"
layout="#layout/news_app_bar"/>
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/activity_news_padding">
<TextView
android:id="#+id/activity_news_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_news_subtitle_bottom_padding"/>
<TextView
android:id="#+id/activity_news_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

That design is wrong.
See:
<include
android:id="#+id/app_bar"
layout="#layout/news_app_bar"/>
You were including the layout in the CollapsingToolbarLayout which that should be in the NestedScrollView and not that CollapsingToolbarLayout.
Just do your stuffs in the NestedScrollView like this:
<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/activity_news_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--Here is the contents-->
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/activity_news_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/activity_news_description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>-->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_news_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarmain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/activity_news_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:contentScrim="#color/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/activity_news_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
And read this: CollapsingToolbarLayout
CollapsingToolbarLayout is a wrapper for Toolbar which implements a
collapsing app bar.

android: how to add a button with text inside collapsing toolbar

How to achieve the following layout. I could achieve without the add button. But how to add the ADD buttom and add button should disappear along with parallax of the image when scrolled up.
What i found is floating action buttons dont have facility to add text. I have to use button only.
My xml layout without the add button:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layoutplace1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="150dip"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
app:layout_anchor="#+id/appBarLayout"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="none">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ffffff"
android:gravity="bottom"
android:textAllCaps="false"
android:theme="#style/MyCustomTabLayout"
app:tabGravity="center"
app:tabIndicatorColor="#574ec1"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#574ec1"
app:tabTextColor="#8A000000" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:paddingBottom="56dp"
android:layout_marginTop="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_viewplace1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:itemTextColor="#8A000000"
app:itemIconTint="#8A000000"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
Also the text: "UDUPI SRIKRISHNA TEMPLE" which appears in double lines. is that possible.
I add title using
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Udupi Sri krishna Temple");
But the title shows only partially and shows ...
Instead i want it to be shown in multiple lines. is it possible

You can add button and image like this
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="150dip"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom|end"
app:layout_collapseMode="parallax"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
in your main scrollable content put this code
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>

You can add TextView, Button or any thing that you want to show on collapsible Layout.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="150dip"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/toolbar_title_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/btntest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
.......
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>

In order to add back button (or any other button or image), you can add it to the Toolbar. If you would like to make this button shown always, whether toolbar is collapsed or not, you can add this line to the toolbar:
app:layout_collapseMode="pin"
If you want the button to disappear when toolbar collapses, replace this line with:
app:layout_collapseMode="parallax"
Then you can find this button/image by id from the activity/fragment and add listener to it. The full code for the Toolbar:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
android:fitsSystemWindows="true"
app:title="#string/app_name">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/tech"
android:scaleType="centerCrop"/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/toolbar_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_back_arrow_left"/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to customize toolbar in Bottomsheet layout? - android

Related

Scroll views under collapsing toolbar

fix toolbar top and header below

BottomNavigationView overlaps the content-android

NestedScrollView in CoordinatorLayout not showing overscroll

android: how to add a button with text inside collapsing toolbar

Categories

Resources