How to get a Layout partially under another

Viewed 204
<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

enter image description here

what I want is..

enter image description here

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

3 Answers

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

recyclerView with overlap

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"

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.

Related