Develop Reference

How to get a Layout partially under another

<androidx.drawerlayout.widget.DrawerLayout
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:id="#+id/drawerLayout"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways"/>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="-80dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/menu_drawer"
/>
The frame layout contains my recycler view..
I've added a collapsing toobar layout for the linear layout
I'm trying to get the frame layout to halfway up the collaping toolbar layout
but This is the result I'm getting
what I want is..
If you have a better method to do this please feel free to help. Im a complete noobie..
I'm sorry for my lack of artistic expertise in the paint image....
Please Check the Answers below For solution If you have the same problem..I've solved mine using the same

Add these attribute inside of your FrameLayout
app:layout_anchor="#id/app_bar"
app:behavior_overlapTop="45dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_anchorGravity="bottom"
EDIT:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorSurface">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/placeholder_200_dp"
android:background="#color/red"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/app_bar"
app:behavior_overlapTop="45dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAttendanceHistory"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchorGravity="bottom"
android:layout_marginStart="#dimen/margin_medium"
android:layout_marginEnd="#dimen/margin_medium"
android:background="#drawable/card_white_design"
tools:listitem="#layout/item_student_attendance" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The Above layout will make my FrameLayout overlap by 45dp

You should be able to use the elevation attribute on your views to set the Z axis elevation, which will allow those 2 surface to be at different elevations.

It's because of this line:
android:layout_marginTop="-80dp"
You need to remove this first then,
All you need to do is adding this line of code to the FrameLayout:
app:behavior_overlapTop="150dp"

Toolbar overlaps other content

I have a ViewPager that horizontally scrolls through multiple fragments, however, I've added a toolbar but it overlaps the ViewPager content.
I know there are other similar questions asked here, nothing worked for me, unfortunately.
this is the main_view.xml
<RelativeLayout 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.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>
Probably I should add another layout somewhere, but I'm not sure where. A hint would be nice, since I've been struggling with this for the last couple of hours.

Implement like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/appbarlt">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="#+id/appbarlt"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>

Give relation to your viewpager with appbar when using Relative Layout.
RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
Try this code:
<RelativeLayout 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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>

use this in below layout of Toolbar layout
android:layout_marginTop="?attr/actionBarSize"

Bottomsheet always hiding my last elements of Recyclerview

My recyclerview's items are loaded dynamically. The bottom sheet UI is a small music player. I want to show the recyclerview above the music player UI. But currently, the music player UI is hiding the last elements of recyclerview. The music player's ui is hidden/shown dynamically. Can you please show me how the recyclerview's elements can all be shown without being obstructed by the bottomsheet UI(music player)?
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/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="#dimen/detail_backdrop_height"
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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:transitionName="#string/transition_album_cover"
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>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<FrameLayout
android:id="#+id/bottom_ui_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<include layout="#layout/music_player_ui" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>

Just set paddingBottom and clipToPadding="false" to the recyclerView
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="your_music_player_ui_height" />

Try setting the height of the RecyclerView to "0dip" and if using a ConstraintLayout, constrain the RecyclerView to the top and bottom of the parent view.

You can fix this issue by putting the recycler view inside the frame layout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</FrameLayout>

Collapsing Linear Layout

I'm working on android application just for learning purposes an in the app I have a Relative layout who has another linear layout in it and a RecyclerView. The RecyclerView is there to show a list of friends for the particular user and the Linear layout is to give an option to the user to click on it and to be redirected to another activity where he can add new friends. This is the .xml file.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/addFriendLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/add_new_friend"
android:gravity="center"
android:textSize="24sp"
android:textStyle="bold"
android:layout_margin="16dp"
android:textColor="#color/addNewFriendTextColor"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/friendsRecyclerView"
android:layout_below="#+id/addFriendLayout"/>
</RelativeLayout>
What I want to do?
-When the user scroll up I want that Linear layout to hide behind the toolbar and then when user scroll down to collapse and become visible.
This is one similar case like mine but I didn't understand how to do it.
Stack Overflow link

check this code.. I hope this may help you
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
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="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="44dp"
app:expandedTitleMarginStart="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="20dp">
<!--your design here-->
</LinearLayout>
<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.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Android app toolbar not hiding in scroll

Here is what I tried, the frame layout is fragment.. and that fragment displays a list on screen. when scrolling that list i want toolbar to hide... the code below is not working, what am i doing wrong. i am trying to follow tutorials
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<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
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/purple2"
android:minHeight="56dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/ToolbarTitle" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp" />
< /LinearLayout>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

You are missing the indicator of what is the scroll to follow.
Add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your ListView and everything should work.
* EDIT *
Upon further investigation I've discovered that basically the problem is the ListView. It doesn't implement NestedScrollingChild and hence the scrolling behaviour will not work.
The best you can do is transform that ListView into a RecyclerView with a LinearLayoutManager (which basically will look the same).
Other option is to add in Java code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listView.setNestedScrollingEnabled(true);
}
but of course it will only work on Lollipop.