CODEWITHSUNDEEP
androidandroid-recyclerviewandroid-constraintlayoutsticky-footer
htafoya
htafoya

Reputation: 19283

Android sticky-footer: Align footer view to table, until it reaches screen size, then become fixed.at the bottom

This should be similar to an iOS tableview footer, also seen in various websites (sticky-footer).

I want to achieve the following:

diagram

A is a RecyclerView with variable number of rows.

When A is smaller than screen (or parent) size, B (footer) should be placed bellow the last row.

When A + B are bigger than screen size, then B becomes fixed at the bottom and A content is scrollable.

We are currently performing this with onMeasure functions that calculate all components heights in order to resize A accordingly.

I was wondering if there is an easier way to do it, maybe with ConstraintLayout.

Upvotes: 4

Views: 2120

Answers (2)

Pawel Laskowski
Pawel Laskowski

Reputation: 6346

Put A and B in a vertical packed chain with a bias of 0 to align it to the top. You also need to set app:layout_constrainedHeight="true" for the RecyclerView so that its constraints are taken into account when it gets too big to fit them (parent's height remains match_parent in this case):

<?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/A"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Footer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/A"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

The above solution does not seem to work on Constraintlayout:2.0.0-beta2, looks like a bug introduced in that version. Works on 2.0.0-beta1 and 1.1.3.

Another way would be to set parent's height to wrap_content and then you can use the default chainstyle and remove the bias:

<?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="wrap_content">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Footer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/A"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

This solution works on all versions.

Upvotes: 5

ueen
ueen

Reputation: 692

Just try ConstraintLayout, this should very well be possible, just fix Bs height and constrain it to the bottom and A and turn the bias up to top.

Upvotes: 1

Related Questions