CODEWITHSUNDEEP
androidandroid-constraintlayout
Hilikus
Hilikus

Reputation: 10331

View overlapping with Toolbar using ConstraintLayout

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?

Upvotes: 19

Views: 20831

Answers (6)

Nikunj
Nikunj

Reputation: 4157

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

Upvotes: 27

Saif Jaradat
Saif Jaradat

Reputation: 171

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

Upvotes: 2

blackHawk
blackHawk

Reputation: 6307

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

Cheers

Upvotes: -1

Sagar Jethva
Sagar Jethva

Reputation: 1014

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

Upvotes: 1

Thracian
Thracian

Reputation: 67218

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.

Upvotes: 0

vivek verma
vivek verma

Reputation: 1766

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>

Upvotes: 23

Related Questions