31

I was trying my hand with recyclerview and floating action button for an app. The problem I encountered is that the floating action button hinders with the buttons in recyclerview. I looked up how the android apps such as phone app(one where you have contacts displayed in gridvew) are designed to deal with this, I see that there is empty space left in the bottom which gives space between recyclerview and floating action button, user just needs to scroll to the bottom to avoid the overlap. I tried to add a view after recyclerview but not its not getting displayed, also this view should move along with the recyclerview rows. What am I missing to show a view in the end of the recyclerview. My layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#6fbababa">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"/>

    <ImageButton
        android:id="@+id/button_floating_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_fab"
        android:background="@null"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="12dp"
        android:elevation="2dp"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_below="@id/my_recycler_view"
        android:background="@color/white"/>

</RelativeLayout>

enter image description here

Update: Modified the layout code to make it work.

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>
Psypher
  • 10,717
  • 12
  • 59
  • 83

4 Answers4

50

Add bottom padding to the RecyclerView. Also, don't use android:layout_height="wrap_content" unless you've overridden onMeasure in the layout manager. Current layout managers do not yet support wrap content.

Add the attribute android:clipToPadding="false" to achieve the goal. As mentioned in comments.

Evin1_
  • 12,292
  • 9
  • 45
  • 47
yigit
  • 37,683
  • 13
  • 72
  • 58
  • 1
    Adding padding to the recyclerview is causing a section of the screen to be occupied which is cutting off the view to the row in the end of the screen. Its not showing up empty space below the last row, instead its showing over the lastrow – Psypher Jan 04 '15 at 19:46
  • 19
    Just resolved that issue...we also need to add android:clipToPadding="false" in recyclerview..this is the final result that worked for me – Psypher Jan 04 '15 at 19:50
  • @ɥʇᴉɾuɐɹ awesome, you made my day :-) – cgr Sep 29 '15 at 13:57
  • Actually it supports wrap_content. The problem is that it does not recalculate after new elements are drawn on the screen. But it works fine for previous elements. So all you need to do is leave RecyclerView last on the layout file. And you can set the element placing with a RelativeLayout. Check my answer. – Dpedrinha Nov 21 '15 at 20:53
  • This solution makes my bottom view disappear on scrolling up. Anyone knows why? – eskalera Aug 01 '16 at 18:54
  • android:layout_height="wrap_content" is now supported after support library 23.2. http://android-developers.blogspot.ca/2016/02/android-support-library-232.html#recyclerview – esong Aug 05 '16 at 23:36
  • To avoid that the scrollbars is clipped you can add `android:scrollbarStyle="outsideOverlay" ` in addition. – dthulke Sep 09 '19 at 21:26
3

Here's an example (in this case a listView, but could be anything) underneath a recycler view that takes up the rest of the parent's height. Note layout_alignParentBottom and layout_above attributes.

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ListView
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none"
    **android:layout_alignParentBottom="true"**
    />

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:layout_above="@+id/list_view"
    />

Lars
  • 9,976
  • 4
  • 34
  • 40
1

I have created an utility method for that so you can add padding easily

public void addLastChildPadding(RecyclerView.ViewHolder holder,int padding,int recyclerListSize,int position){

if(recyclerListSize-1==position){
holder.itemView.setPadding(0,0,0,padding);
}
}
Manokar
  • 239
  • 3
  • 12
0

Try this at once

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false">

        </android.support.v7.widget.RecyclerView>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:orientation="horizontal">

            <android.support.v7.widget.AppCompatButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="15dp"
                android:layout_weight="1"
                android:background="@drawable/button_primary_color_border"
                android:text="70%"
                android:textColor="@android:color/darker_gray"
                android:textSize="20sp" />

            <android.support.v7.widget.AppCompatButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="15dp"
                android:layout_weight="1"
                android:background="@drawable/button_primary_color_border"
                android:text="60%"
                android:textColor="@android:color/darker_gray"
                android:textSize="20sp" />
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>
</LinearLayout>

</LinearLayout>

Remove images and other string according to your uses.

AMAN SINGH
  • 3,491
  • 6
  • 28
  • 44