CODEWITHSUNDEEP
androidlistviewandroid-recyclerview
Farzad
Farzad

Reputation: 2090

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

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

enter image description here

EDIT:

issue:

enter image description here

xml layout:

<RelativeLayout>

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

    <ListView>
    </ListView>

</RelativeLayout>

Upvotes: 20

Views: 9609

Answers (2)

Murad Hamidov
Murad Hamidov

Reputation: 21

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"/>

Upvotes: 2

setare maghari
setare maghari

Reputation: 546

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>

Upvotes: 39

Related Questions