Android set fade alpha gradient on top and bottom listview like instagram live chat

Question

How to extend listview (or recyclerview) set top bottom gradient fade alpha?

EDIT:

issue:

xml layout:

<RelativeLayout>

    <ImageView /> // background image example: my_image.png (mach_parent)

    <ListView>
    </ListView>

</RelativeLayout>

Demetri

Answer 1

you can use requiresFadingEdge attribute in your xml. make a listview inside your layout with this attributes:

    android:fadingEdge="horizontal"
    android:fadingEdgeLength="30dp"
    android:fillViewport="false"
    android:requiresFadingEdge="vertical"

so as your items loaded inside the listview it will have faded bounds on its top and bottom like this image below:

fading edge list

so your code should be something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/th"
  tools:context="com.example.maghari_se.testfading.MainActivity">
<ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_alignParentBottom="true"
    android:visibility="visible"
    android:fadingEdge="horizontal"
    android:fadingEdgeLength="30dp"
    android:fillViewport="false"
    android:requiresFadingEdge="vertical">

</ListView>

Betweenwhiles

Great answer, saved my day! – Charlatanry

This worked out for me android:fadingEdge="vertical|horizontal" android:fadingEdgeLength="30dp" android:fillViewport="false" android:requiresFadingEdge="vertical|horizontal" – Antepast

Answer 2

You can use in RecyclerView

  <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/rv_list"
      android:layout_width="match_parent"
      android:orientation="horizontal/vertical"

      android:fadingEdge="horizontal/vertical"
      android:fadingEdgeLength="24dp"
      android:requiresFadingEdge="horizontal/vertical"

      tools:listitem="@layout/item_video"
      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
      android:layout_height="wrap_content"/>

Crake