Home » Android » android – How to make View fill remaining space in ConstraintsLayout

android – How to make View fill remaining space in ConstraintsLayout

Posted by: admin June 15, 2020 Leave a comment

Questions:

How to make View FrameLayout fill all remaining space in ConstraintLayout

I have xml like:

<ImageView
    android:background="#FF0000"
    android:id="@+id/header"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_header"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="wrap"
    app:layout_constraintWidth_default="spread"/>
<FrameLayout
    android:background="#00FF00"
    app:layout_constraintHeight_default="spread"
    app:layout_constraintWidth_default="wrap"
    app:layout_constraintTop_toBottomOf="@id/header"
    app:layout_constrainedHeight="true"
    app:layout_constraintBottom_toTopOf="@id/footer"
    android:id="@+id/task_fragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<LinearLayout
    android:background="#FFFF00"
    android:orientation="vertical"
    android:id="@+id/footer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="spread"
    app:layout_constraintWidth_default="spread"
    app:layout_constraintBottom_toBottomOf="parent">
    <ImageButton
        style="?borderlessButtonStyle"
        android:id="@+id/btn_ar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="0dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_ar"/>
</LinearLayout>

There are header, footer and FrameLayout in the middle I want to make FrameLayout to fill all remaining space.

I don’t understand, which properties I have to use to expand FrameLayout. Please help me!

EDIT: Or any solution with different layout.

How to&Answers:

This work, go with ConstraintLayout because has better performance.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:background="#FF0000"
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_header"
        android:minHeight="30dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintWidth_default="spread"/>

    <FrameLayout
        android:id="@+id/task_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#00FF00"
        android:orientation="vertical"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@+id/btn_ar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/header"
        app:layout_constraintWidth_default="wrap">

    </FrameLayout>

    <ImageButton
        android:id="@+id/btn_ar"
        style="?borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:padding="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_ar"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer:

This is really simple. To make any view fill up the available space either horizontally or vertically, just set the layout_width/layout_height to 0dp according to your need.

Answer:

<FrameLayout
    android:id="@+id/task_fragment"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="#00FF00"
    android:orientation="vertical"
    app:layout_constrainedHeight="true"
    app:layout_constraintBottom_toTopOf="@+id/btn_ar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/header"
    app:layout_constraintWidth_default="wrap">

</FrameLayout>

This should work.

Explanation:

All you want is to make the top of this FrameLayout constraint to the bottom of the header, and the bottom of this FrameLayout constraint to the top of the footer.

After setting all the constraints, you still need to set the layout param of FrameLayout to match the constraint. In order to do this, you can try to set layout_height to 0dp. This will make the height of FrameLayout have the effect of match_constraint.

For more detail, you can check this doc: https://developer.android.com/reference/android/support/constraint/ConstraintLayout (just search the keyword match constraint and you will find that block), or simply check this similar answer: Set width to match constraints in ConstraintLayout