I am trying to make the toolbar appear in this layout always visible instead of it appearing only when it is scrolled out completely. I have an image inside collapsing toolbar that needs to get hidden when scrolled out fully.
This is what I tried.. Any opinion on how to achieve it?
<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"
android:fitsSystemWindows="true"
tools:context=".activities.Event_details">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/topLayout"
app:layout_anchorGravity="top"
android:layout_gravity="top" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorWhite"
android:id="@+id/toolbarTitle"
android:layout_centerVertical="true"
android:layout_marginEnd="?android:attr/actionBarSize"
android:textStyle="bold"
android:textSize="@dimen/page_innerheader_titletxt"
android:text="@string/app_name"/>
<TextView
android:id="@+id/save_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/save"
android:textColor="@color/colorYellow"
android:layout_centerVertical="true"
android:textSize="@dimen/textsize16"
android:layout_toStartOf="@id/toolbarButton"
android:layout_marginEnd="15dp"/>
<Button
android:id="@+id/toolbarButton"
android:layout_width="60dp"
android:layout_height="30dp"
android:text="@string/done"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:textColor="@color/colorPrimary"
android:background="@drawable/rect_yellow"
android:layout_marginEnd="10dp"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="6dp"
app:layout_anchor="@id/topLayout"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/party"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<!--
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorWhite"
android:id="@+id/toolbarTitle"
android:layout_centerVertical="true"
android:layout_marginEnd="?android:attr/actionBarSize"
android:textStyle="bold"
android:textSize="@dimen/page_innerheader_titletxt"
android:text="@string/app_name"/>
<TextView
android:id="@+id/save_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/save"
android:textColor="@color/colorYellow"
android:layout_centerVertical="true"
android:textSize="@dimen/textsize16"
android:layout_toStartOf="@id/toolbarButton"
android:layout_marginEnd="15dp"/>
<Button
android:id="@+id/toolbarButton"
android:layout_width="60dp"
android:layout_height="30dp"
android:text="@string/done"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:textColor="@color/colorPrimary"
android:background="@drawable/rect_yellow"
android:layout_marginEnd="10dp"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main_eventdetails" />
</android.support.design.widget.CoordinatorLayout>
P.S: I also tried using the toolbar inside the collapsing toolbar but I can make only the title and button visible but I want the whole toolbar to have a colorPrimary background.
I tried these links collapsing toolbar fixed and this AppBar layout behaviour and some from the other SO threads. But nothing seems to solve my problem.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivBack"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginTop="@dimen/activity_vertical_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_arrow_back" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/activity_horizontal_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:text="Title"
app:layout_constraintBottom_toBottomOf="@+id/ivBack"
app:layout_constraintStart_toEndOf="@+id/ivBack"
app:layout_constraintTop_toTopOf="@+id/ivBack" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll">
// Your Image View
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
// RecyclerView if required
<android.support.v7.widget.RecyclerView
android:id="@+id/rvContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="128dp" />
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
In this code snippet, I have created a Toolbar and CoordinatorLayout which are inside the ConstraintLayout
Toolbar contains the ConstraintLayout which set the back button and title.
CoordinatorLayout has AppBarLayout which has CollapsingToolbarLayout in which you can set you ImageView.