Problem integrating a toolbar into an recyclerview

Question

I have a problem and I need your help. I have created a RecyclerView and it was okay. Now I want to have a toolbar at the top with a black background and red text. The RecyclerView, which is basically a list of items, should start under the toolbar. I inserted a toolbar but unfortunately it is not displayed at all, altough in the blueprint of Android Studio it can be seen. However, on the normal layout screen you can't see it and also on the editor you can't see it. Here I have some screenshots:

Here is the XML layout file:

<?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"
    tools:context=".MyDrinks">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="432dp"
        android:layout_height="135dp"
        android:background="@android:color/black"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@android:color/holo_red_dark">

        <TextView
            android:id="@+id/textView_ToolBar_ActivityTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="24sp"
            android:text="Test Toolbar" />
    </androidx.appcompat.widget.Toolbar>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="4dp"
        android:scrollbars="vertical"
        android:background="@android:color/white"
        ></androidx.recyclerview.widget.RecyclerView>



</RelativeLayout>

Does anyone know what the problem might be? So basically the toolbar is not displayed at all and secondly the recyclerview list starts at the very top which I do not want. I'd appreciate every feedback.

score 2 · Accepted Answer · answered Jun 01 '20 at 11:08

The Recyclerview is overlapped with the Toolbar. Add this to the RecyclerView

android:layout_below="@+id/toolbar_mainActivity"

You XML should be like this:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar_mainActivity"
    android:layout_width="432dp"
    android:layout_height="135dp"
    android:background="@android:color/black"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextColor="@android:color/holo_red_dark">

    <TextView
        android:id="@+id/textView_ToolBar_ActivityTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="24sp"
        android:text="Test Toolbar" />
</androidx.appcompat.widget.Toolbar>


<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    android:scrollbars="vertical"
    android:layout_below="@+id/toolbar_mainActivity"
    android:background="@android:color/white"
    ></androidx.recyclerview.widget.RecyclerView>

Thanks Mohamed Nageh for your comment. Basically your solution works, but I do not understand why I have to use this command "android:layout_below="@+id/toolbar_mainActivity"". In other activicites I also use a toolbar and there I do not need it — VanessaF, Jun 01 '20 at 13:14
You're welcome. That's because you're using RelativeLayout. In RelativeLayout you arrange your views relative to each other position. If you take a look at this doc https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams#attr_android:layout_below. you will find the answer ;) Also, check this question https://stackoverflow.com/questions/5387112/what-is-the-difference-between-linear-and-relative-layout Don't forget to mark it as the answer :) — Mohamed Nageh, Jun 01 '20 at 13:21
Thanks Mohamed Nageh. Can I also use ConstrainedLayout with fixed dp sizes (as I did in the relative layout) for this purpose? — VanessaF, Jun 01 '20 at 13:27
Thanks Mohamed Nageh for your comment. Can I just define all constraines to the parents and then drag and drop the elements with Android Studio Layout editor? Or is there a way how I can just drag and drop elements in the layout of Android? — VanessaF, Jun 01 '20 at 13:29
Sure, You can always drag and drop items from the Editor. But It's recommended to understand how ConstraintLayout and Constraints work to be able to fix any Issues that appears after the drag & drop process - If any - — Mohamed Nageh, Jun 01 '20 at 14:00

Javad Dehban · Answer 2 · 2020-06-01T13:35:30.317

you can use LinearLayout or RelativeLayout

LinearLayout means you can align views one by one (vertically or horizontally).

RelativeLayout means based on relation of views from its parents and other views.

LinearLayout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/black"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@android:color/holo_red_dark">

        <TextView
            android:id="@+id/textView_ToolBar_ActivityTest"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:gravity="center"
            android:text="Test Toolbar"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="24sp" />
    </androidx.appcompat.widget.Toolbar>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:padding="4dp"
        android:scrollbars="vertical" />
</LinearLayout>

or RelativeLayout:

  <?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:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/black"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@android:color/holo_red_dark">

        <TextView
            android:id="@+id/textView_ToolBar_ActivityTest"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:gravity="center"
            android:text="Test Toolbar"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="24sp" />
    </androidx.appcompat.widget.Toolbar>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar_mainActivity"
        android:background="@android:color/white"
        android:padding="4dp"
        android:scrollbars="vertical" />
</RelativeLayout>

ConstraintLayout :

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/black"
        android:clipToPadding="true"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@android:color/holo_red_dark"
        tools:ignore="MissingConstraints">

        <TextView
            android:id="@+id/textView_ToolBar_ActivityTest"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:gravity="center"
            android:text="Test Toolbar"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="24sp" />
    </androidx.appcompat.widget.Toolbar>


    <ImageButton
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar_mainActivity"
        android:padding="4dp"
        android:scrollbars="vertical"
        app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>

Could I help you?

Thanks Javad for your answer. But I want to set the size of the components with dp in the relative layout. I read that RelativeLayout is not good and you should rather use ConstrainedLayout. Can I use also ConstrainedLayout with dp sizes in this case? — VanessaF, Jun 01 '20 at 13:16
for simple xml you not need to ConstraintLayout. but I'm edit my answer — Javad Dehban, Jun 01 '20 at 13:34

Problem integrating a toolbar into an recyclerview

2 Answers2