How to place a layout below toolbar in collapsing toolbar layout?
17,651
Solution 1
Add this line into your RelativeLayout.
app:layout_behavior="@string/appbar_scrolling_view_behavior"
Solution 2
Put a margin to the RelativeLayout android:layout_marginTop="?attr/actionBarSize"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:gravity="bottom"
android:paddingLeft="30dp"
android:scaleType="centerCrop">
Solution 3
<?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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="140dp"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:fitsSystemWindows="true"
android:gravity="bottom"
android:paddingLeft="30dp"
android:scaleType="centerCrop">
<TextView
android:id="@+id/eventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Event Name"
android:textColor="#ffffff"
android:textSize="14sp"/>
<TextView
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/eventName"
android:layout_marginTop="10dp"
android:text="Date"
android:textColor="#ffffff"
android:textSize="14sp"/>
<TextView
android:id="@+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/date"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:text="Time"
android:textColor="#ffffff"
android:textSize="14sp"/>
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<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">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="adlfjsd adsf adsf dsafasd fsda f af dsaf afl djsaflk sjdafl jsalf jsdalf jsdal fjasdl fjalsd jflas jflsa djfdl"
android:textSize="100sp"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Author by
Admin
Updated on June 17, 2022Comments
-
Admin almost 2 years
I want a collapsing toolbar layout in my app. For this I have added the collapsing toolbar inside the app bar. I have added the relative layout with some text views under the layout. This relative layout I want to show below the toolbar and it should get collapsed till the toolbar.
For now as I have added this, Its getting merged with the toolbar. Looks like below:
EDIT : Edited with nested scroll view. Scrolls till the status bar, Should scroll till the toolbar.
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="140dp" 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" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:titleEnabled="false"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:fitsSystemWindows="true" android:gravity="bottom" android:paddingLeft="30dp" android:scaleType="centerCrop"> <TextView android:id="@+id/eventName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Event Name" android:textColor="#ffffff" android:textSize="14sp"/> <TextView android:id="@+id/date" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/eventName" android:layout_marginTop="10dp" android:text="Date" android:textColor="#ffffff" android:textSize="14sp"/> <TextView android:id="@+id/time" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/date" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:text="Time" android:textColor="#ffffff" android:textSize="14sp"/> </RelativeLayout> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <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"> <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.siddhi.meavita.Activities.PlanDetailsActivity" tools:showIn="@layout/activity_plan_details"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="PLAN" android:layout_centerHorizontal="true" android:textAppearance="@android:style/TextAppearance.Large" android:id="@+id/textView6" android:layout_marginTop="10dp" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="false" android:layout_alignParentStart="false" android:layout_below="@+id/textView6" android:layout_marginTop="40dp"> <Button android:layout_width="150dp" android:layout_height="40dp" style="?android:attr/borderlessButtonStyle" android:text="Schedule" android:id="@+id/schedule" android:layout_gravity="center_horizontal" android:background="@drawable/list_background" /> <Button android:layout_width="150dp" android:layout_height="40dp" style="?android:attr/borderlessButtonStyle" android:text="Check List" android:id="@+id/button4" android:layout_gravity="center_horizontal" android:layout_marginTop="20dp" android:background="@drawable/list_background" /> <Button android:layout_width="150dp" android:layout_height="40dp" android:text="Vendors" style="?android:attr/borderlessButtonStyle" android:id="@+id/button5" android:layout_gravity="center_horizontal" android:layout_marginTop="20dp" android:background="@drawable/list_background" /> <Button android:layout_width="150dp" android:layout_height="40dp" android:text="Invitee" style="?android:attr/borderlessButtonStyle" android:id="@+id/button6" android:layout_gravity="center_horizontal" android:layout_marginTop="20dp" android:background="@drawable/list_background" /> </LinearLayout> </RelativeLayout> </android.support.v4.widget.NestedScrollView>
How can I place this below toolbar and scroll upto the toolbar? Thank you..