Toolbar overlaps other content in Android-CodePudding

I'm trying to develop an app using a custom toolbar and it overlaps the other content on screen. I have a recycler view that I'm using to show card views with text on them.

In the design view it seems to be okay and shows that the recycler view is below the toolbar and unobstructed.

Android Studio Design view shows the toolbar not obstructing the recycler view.

However, when launching the app, it clearly overlaps.

The app is launched and the content is hidden behind the toolbar.

activity_main.xml

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp">

<include
    android:id="@ id/toolbar"
    layout="@layout/toolbar"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

<androidx.recyclerview.widget.RecyclerView
    android:id="@ id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/toolbar"
    app:layout_constraintTop_toBottomOf="@id/toolbar"
    android:background="@android:color/darker_gray"
    android:padding="4dp"
    android:scrollbars="vertical"
    />
</RelativeLayout>

toolbar.xml

<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/purple_200"
android:elevation="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:id="@ id/back_icon"
        android:src="@drawable/ic_baseline_arrow_back_24" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_toEndOf="@id/back_icon"
        android:layout_centerVertical="true"
        android:text="@string/inventory_menu"
        android:textSize="20sp"
        android:textColor="@color/white"/>

    <ImageView
        android:id="@ id/add_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@id/delete_icon"
        android:layout_marginEnd="30dp"
        android:src="@drawable/ic_baseline_add_circle_outline_24" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:id="@ id/delete_icon"
        android:src="@drawable/ic_baseline_delete_24"/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>

example_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp"
android:layout_marginBottom="4dp">


<RelativeLayout
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="4dp">

    <TextView
        android:id="@ id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line1"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:layout_alignParentTop="true" />

    <TextView
        android:id="@ id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line 2"
        android:textSize="15sp"
        android:layout_below="@ id/textView"
        android:layout_marginStart="8dp"/>


</RelativeLayout>
</androidx.cardview.widget.CardView>enter code here

CodePudding user response：

I've met this problem before, and the way I solve it was kept adjusting android:layout_marginTop(of the recyclerview) until nothing overlapped.

CodePudding user response：

You can try using a CoordinatorLayout instead of RelativeLayout as the parent. Look at this tutorial.

With ConstraintLayout released you should not use RelativeLayout, as it's slower and less capable.

Note: CoordinatorLayout and ConstraintLayout are not same thing and have very different use cases.