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?

Answer 1

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>

Answer 2

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"/>

Answer 3

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

Answer 4

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" />