Android CoordinatorLayout, AppBarLayout and inkluded RelativeLayout with Button Overlap

Question

My Problem: The Content of the included RelativeLayout/RecyclerView does not stop before the buttons displayed at the bottom of the screen (see Fig. 1). Therefore the last Elements inside the RecyclerView are overlapped by the buttons after scrolling (see Fig. 2).

My current source code:

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.julian.brainy.ProjectListActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:theme="@style/MyActionBarTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        app:expandedTitleGravity="bottom"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:toolbarId="@+id/toolbar">

        <ImageView
            android:id="@+id/bgImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:contentDescription="@null"
            android:minHeight="100dp"
            android:scaleType="fitXY"
            android:src="@drawable/bg5"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />

        <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/MyActionBarTheme.PopupOverlay"
            app:titleTextColor="@color/brainyPrimary" />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<include
    layout="@layout/content_project_list" />

<Button
    android:id="@+id/projectOverviewCreateProject"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentStart="true"
    android:layout_gravity="bottom"
    android:layout_marginBottom="60dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:stateListAnimator="@null"
    android:layout_marginTop="5dp"
    android:background="@color/brainyPrimary"
    android:text="@string/btn_create_project"
    android:textColor="@color/brainyWhite" />

<Button
    android:id="@+id/btndirectlearning"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:stateListAnimator="@null"
    android:layout_alignParentEnd="true"
    android:layout_alignParentStart="true"
    android:layout_gravity="bottom"
    android:layout_margin="5dp"

    android:background="@color/brainyPrimaryExperimental"
    android:text="@string/btn_start_timer_project_list"
    android:textColor="@color/brainyWhite" />

</android.support.design.widget.CoordinatorLayout>

and the included XML:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/projectOverviewCreateProject"
android:background="@android:color/transparent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ProjectListActivity"
tools:showIn="@layout/activity_project_list">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/projectOverviewCreateProject"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:clipToPadding="false"
    android:scrollbars="vertical" />

</RelativeLayout>

I tried to use a ConstraintLayout, but it broke the AppBar.

Update: Now the included Layout exceeds the top of the AppBarLayout.

Source code changed:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/content_project_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        app:layout_constraintBottom_toTopOf="@id/projectOverviewCreateProject"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/projectOverviewCreateProject"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:layout_margin="5dp"
        android:background="@color/brainyPrimary"
        android:stateListAnimator="@null"
        android:text="@string/btn_create_project"
        android:textColor="@color/brainyWhite"
        app:layout_constraintBottom_toTopOf="@id/btndirectlearning"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="spread"
        tools:layout_editor_absoluteX="5dp"
        tools:layout_editor_absoluteY="459dp" />

    <Button
        android:id="@+id/btndirectlearning"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:layout_margin="5dp"

        android:background="@color/brainyPrimaryExperimental"
        android:stateListAnimator="@null"
        android:text="@string/btn_start_timer_project_list"
        android:textColor="@color/brainyWhite"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="spread"
        tools:layout_editor_absoluteX="222dp" />
</android.support.constraint.ConstraintLayout>

Gregorio Palamà · Answer 1 · 2019-01-17T23:34:36.913

Put the and the two Buttons in a ConstraintLayout. Then, give the buttons the right rules so they will stay at the bottom of the layout, and modify the tag to look like this:

<include
    android:layout_height="0dp"
    android:layout_width="match_parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@id/projectOverviewCreateProject"
    layout="@layout/content_project_list" />

EDIT: to solve the issue related to the RecyclerView overlapping the appBar, just add this to your ConstraintLayout:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

With
app:layout_behavior="@string/appbar_scrolling_view_behavior" — Julian, Jan 18 '19 at 09:28

Android CoordinatorLayout, AppBarLayout and inkluded RelativeLayout with Button Overlap

1 Answers1