CODEWITHSUNDEEP
androidandroid-recyclerviewandroid-toolbar
VanessaF
VanessaF

Reputation: 793

Problem integrating a toolbar into an recyclerview

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:Screenshot Emulator Screenshot Android Studio

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.

Upvotes: 0

Views: 361

Answers (2)

Javad Dehban
Javad Dehban

Reputation: 1292

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?

Upvotes: 1

Mohamed Nageh
Mohamed Nageh

Reputation: 2043

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>

Upvotes: 2

Related Questions