Using ListView Inside ConstraintLayout

I have read on Android Developers that ConstraintLayout can be used to design a responsive layout for an application. There is a parent ConstraintLayout which houses a toolbar and

Solution 1:

While using ConstraintLayout you have to add constraints for 'constraintTop',constraintRight,constraintBottom,constraintLeft or constraintStart and constraintEnd. only if you constraint all your four sides the constraint layout (or Constraint Start or End with other References) works well. Otherwise the layout will not work correctly

For Further Reference https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0

https://developer.android.com/training/constraint-layout/index.html

Solution 2:

There are a couple of things that you can improve with the XML and make the design easier.

First, the main layout will match the screen, to have the preview correctly simulate that, you can set its width/height to match_parent

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

Then, Android Studio should be giving you warnings/errors and saying The view is not constrained horizontally/vertically. In ConstraintLayout, you have to use constraints to specify how your views are placed. If you don't, by default they will position at 0/0 and most probably will look different when it runs on the device:

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

Now, you should be able to that the main_area overlaps with the toolbar. To fix it, you can change main_area height to match the constrains:

android:id="@+id/main_area"
android:layout_height="0dp"

You should be able to obtain a design similar to what you intended.

Solution 3:

Here is your desired result, I've made some changes like margins, src just to make it work in my studio, so you'll have to choose whatever you were using, just replace mine with your src's and margins etc...

<?xml version="1.0" encoding="utf-8"?>
<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
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    android:id="@+id/empty_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/tv_empty_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="list_is_empty"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:id="@+id/iv_empty_view"
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_empty_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<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.design.widget.FloatingActionButton
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:id="@+id/fab"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Here's the output:

Solution 4:

I was also facing the same issue.

1. I made a mistake of keeping layout_width of ListView as fixed width. I changed it to match_constraint and it's coming correctly without any cut.
2. For height I was facing similar issue so I changed it to match_constraint and it worked.