CODEWITHSUNDEEP
androidandroid-constraintlayout
Thore
Thore

Reputation: 450

ConstraintLayout: view in vertical chain should wrap content up to 1/3 of the space

I have two RecyclerViews view_a and view_b vertically on top of each other within a ConstraintLayout. Width: easy, match_parent. My problem is the height.

The bottom view_b should wrap its content, and expand up to 1/3 of the space. The top view_a should fill the remaining space.

E.g. if view_b contains only 1 item, I want it to fill only 1/10th of the height, and view_a should fill the remaining 9/10. But when view_b contains 1000 items, it should fill 1/3 (and scroll to show the hidden items), leaving 2/3 for view_a.

I tried the following. However, this only achieves a fixed 2:1 ratio of the views. If view_b is smaller than 1/3, it still fills the entire 1/3 at the bottom and does not wrap its content.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_a"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="LinearLayoutManager"
        app:layout_constraintBottom_toTopOf="@id/view_b"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="2" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_b"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_a"
        app:layout_constraintVertical_weight="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

I also tried adding app:layout_constraintHeight_default="wrap" to view_b. But then it always wraps its content and expands beyond the 1/3 and becomes too large.

Upvotes: 1

Views: 69

Answers (2)

MariosP
MariosP

Reputation: 9113

This can be achieved by setting the below attributes in the view_b (RecyclerView):

app:layout_constraintHeight_max="wrap"
app:layout_constraintHeight_percent="0.3"
app:layout_constrainedHeight="true"

From the above attributes if the view_b (RecyclerView) contains smaller amount of data from the 1/3 of the screen it will wrap to its content, but if contains a large amount of data and exceeds the 1/3 of the screen it will get the maximum height to be the 1/3 of the screen, leaving always the remaining space to view_a (RecyclerView).

The final xml should be like the below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_a"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_light"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/view_b"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_b"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_max="wrap"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constrainedHeight="true"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Mahdi Iranmanesh
Mahdi Iranmanesh

Reputation: 580

you can use Guideline like blow:

<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_a"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="LinearLayoutManager"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/view_b"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />


</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Related Questions