CODEWITHSUNDEEP
androidandroid-studioandroid-recyclerviewandroid-animation
Taha Sami
Taha Sami

Reputation: 1697

How to hide Items on recyclerview scrollbar gradually

How I can hide Items on recyclerview scrollbar gradually

I want like this Image

enter image description here

Tool Bar

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@color/posts_toolbar"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp">

    <com.salah250.forvo.Funcations.TextViewFont
        android:id="@+id/txt_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/posts_title"
        android:textColor="@color/posts_title"
        android:textSize="18dp" />

</android.support.v7.widget.Toolbar>

Activity Posts

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:background="@color/posts_main"
    android:orientation="vertical"
    tools:context=".Posts.PostsActivity">

    <include layout="@layout/toolbar_posts" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_posts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never" />

</LinearLayout>

I looked before I could post here and I could not find any topics talking about it at all, I hope to get some ideas for doing that.

Upvotes: 3

Views: 418

Answers (1)

majov
majov

Reputation: 545

You can put gradient image in front of your RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:background="@color/posts_main"
    android:orientation="vertical"
    tools:context=".Posts.PostsActivity">

    <include layout="@layout/toolbar_posts" />

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

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_posts"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:overScrollMode="never" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:src="@drawable/gradient"/>

    <FrameLayout/>            

</LinearLayout>

@drawable/gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >

    <gradient
    android:angle="270"
    android:endColor="#00FFFFFF"
    android:startColor="#302e43" />

</shape>

Then also add empty view with height of gradient to the header of your RecyclerView so topmost item will be not faded

Upvotes: 4

Related Questions