Draw a floating view on a recycler view item

Question

I want to draw a floating view outside a recycler view item. It's like a tooltip in excel, each cell will be an item, and some items will have that tooltip:

I tried to use

clipChildren="false"

but it's still covered by other items.

This is item layout:

<?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="50dp"
    android:layout_height="50dp"
    android:clipChildren="false"
    android:orientation="vertical">

    <View
        android:id="@+id/box"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f0f0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="30dp"
        android:layout_height="20dp"
        android:background="#ff00"
        android:translationX="10dp"
        android:translationY="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

And this is activity layout with recycler view:

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

This is my result:

And expected result is something like this:

Is there any way to archive this?

I think ItemDecorator will help you or special [library](https://stackoverflow.com/questions/41804545/tooltip-in-items-within-recyclerview-overlap-above-items) — sdytik, Oct 31 '22 at 07:07
@Cheticamp it's just Excel, when we do the calculation inside the cell, it will show the resulting tooltip like this -> what I want is to be able to show the same thing for some cells in recycler view items — Man Ho, Nov 01 '22 at 02:55
Sorry, not the first image - the image under "This is my result:" The red are the "tool tip" things and the black, grey and white bands are your _RecyclerView_ items? — Cheticamp, Nov 01 '22 at 13:25
@Cheticamp Ah sorry, yes, the red are tooltips, black and gray are RecyclerView items, white is just an empty area — Man Ho, Nov 02 '22 at 03:12

score 0 · Answer 1 · answered Nov 02 '22 at 18:02

It looks like each RecyclerView item is partially overwriting the previous item. It is not clear to me how you got the first image (not the Excel image but the next one), but you can try setting the following attributes in the XML for the RecyclerView. The result is to write the items in the reverse order from what is normally done.

<androidx.recyclerview.widget.RecyclerView
    ...
    android:clipChildren="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintTop_toTopOf="parent"
    app:reverseLayout="true" />

You could also set these, or any combination of these, in code. I would play around with these values to see where it gets you.

Draw a floating view on a recycler view item

1 Answers1