View overlapping with Toolbar using ConstraintLayout

Question

I'm having an issue of an overlapping ListView with a compat Toolbar using the ConstraintLayout
All i want to do is have a toolbar and then in the rest of the space have a listview. Pretty simple

This is my layout

<android.support.constraint.ConstraintLayout 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.support.v7.widget.Toolbar
        android:id="@+id/app_toolbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Toolbar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:visibility="visible"
        app:layout_constraintTop_toTopOf="parent"
        />

  <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/app_toolbar2"
        />

</android.support.constraint.ConstraintLayout>

I'm not sure if the problem is that ListView's layout_height has precedence over everything else so to fit a ListView as high as the parent for sure there's either overlap or truncation at the bottom given that the toolbar took some space. What's the right way to make the ListView take the remaining vertical space after the toolbar?

Nikunj · Answer 1 · 2022-03-25T13:59:57.863

26

As per the official docs of ConstraintLayout :

You need to use MATCH_CONSTRAINT (0dp) instead of MATCH_PARENT

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

Just change Listview widht & height = "0dp"

<ListView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/app_toolbar2"/>

edited Mar 25 '22 at 13:59

answered Mar 31 '18 at 06:03

Nikunj

3,937
19
33

Upvote for that explanation..I've been struggling with constraint layout for a while now but couldn't find time to read the docs.. – Edgar Aug 06 '19 at 15:21
setting view height to 0dp means that the view will cover the entire space left out by other views right? An upvote for that solution! – Prajwal Waingankar Aug 25 '20 at 13:58

score 23 · Accepted Answer · answered Mar 31 '18 at 03:51

Try this, should work:

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<android.support.constraint.ConstraintLayout
    android:id="@+id/main_area"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

this worked but the nested `ConstraintLayout` was unnecessary. The trick was the layout_width and height = "0dp" instead of `match_parent`. I didn't know 0 had a special meaning here — Hilikus, Mar 31 '18 at 05:19
Great answer, I just think that the second ConstraintLayout is not necessary, app:layout_constraintTop_toBottomOf="@+id/toolbar" can be put directly on ListView with android:layout_height="0dp" — Kevin Ramirez Zavalza, Jun 15 '18 at 18:43
nothing is working for me. I tried putting 0dp Still doesn't work for me — Abhishek Dwarakanath, Nov 28 '20 at 14:09

score 2 · Answer 3 · answered Mar 31 '18 at 06:57

Used below method for add Toolbar

- <android.support.design.widget.CoordinatorLayout> or ConstraintLayout
    -<android.support.design.widget.AppBarLayout>
       - <android.support.v7.widget.Toolbar>
       - </android.support.v7.widget.Toolbar>
   - </android.support.design.widget.AppBarLayout>

  -<LinearLayout
     app:layout_behavior="@string/appbar_scrolling_view_behavior">
     -<ListView>
     -</Listview>
  -</LinearLayout>
-</android.support.design.widget.CoordinatorLayout> or ConstraintLayout

score 2 · Answer 4 · answered May 29 '21 at 13:21

Try this.. Should be work. use this code inside constraint layout.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar" />

Thracian · Answer 5 · 2018-03-31T05:36:53.873

1

Add app:layout_behavior="@string/appbar_scrolling_view_behavior" to your ListView to set scrolling and spacing behaviour. It works with CoordinatorLayout or RelativeLayout, probably it will work with ConstraintLayout too.

edited Mar 31 '18 at 05:36

answered Mar 31 '18 at 03:35

Thracian

43,021
16
133
222

i had tried this. It doesn't work. everything looks exactly the same – Hilikus Mar 31 '18 at 05:02

score -1 · Answer 6 · answered Oct 06 '19 at 15:47

-1

Basically Framelayout trying to overlap other views thats why its happening, try put framelayout in other viewgroup

Cheers

answered Oct 06 '19 at 15:47

blackHawk

6,047
13
57
100

View overlapping with Toolbar using ConstraintLayout

6 Answers6

Linked