Handling visibility of a view while scrolling Recyclerview

As the name suggests RecyclerView, the views in it are recycled. When you are using a recyclerView and use some small views, for example- say textviews and images etc., in its row then on scrolling the recyclerview the views in the row change. This happens because the views get recycled and reused as onBindViewHolder method in its adapter is called several times as recyclerview needs a view unless it has a new one. So each time you set visibility in child views, other views states are also changed. So whenever you scroll up and down, these views are getting re-drawn with wrong visibility options.

Solution to this problem is very simple.

First take a boolean value to save the clicked value of the item or view as follows:

holder.imgVw.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                if (isClicked) {

                        holder.txtvw.setVisibility(View.VISIBLE);

                } else {

                        holder.txtvw.setVisibility(View.GONE);

                }

            }

        });

               

Then simply register an Interface in your adapter on the click of particular child view as follows:

holder.imgVw.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                yourListener.onSelectingView(position, holder.txtvw.getId);

                if (isClicked) {

                        holder.txtvw.setVisibility(View.VISIBLE);

                } else {

                        holder.txtvw.setVisibility(View.GONE);

                }

            }

        });

Now in your activity, in the implemented methods of your listener do the following:

@Override

    public void onSelectingView(int position, String id) {

        adapter.notifyDataSetChanged();

        mRecyclerView.invalidate();

    }

That's all.. your view will not change its visibility on scrolling of the recyclerview.

Happy coding and remember "Code to make it better..!!"

Rounded Image with Glide

Glide is a fast and efficient open source image loading framework for Android that wraps memory and disk caching, and resource pooling into a simple and easy to use interface.
Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs.
Glide includes a flexible API that allows developers to plug in to almost any network stack. By default Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug in to Google's Volley project or Square's OkHttp library instead.
Glide's primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.

Download
You can download a jar from GitHub's releases page.
Or use Gradle:

dependencies {
  compile 'com.github.bumptech.glide:glide:3.7.0'
  compile 'com.android.support:support-v4:19.1.0'
}

Basic
The basic way to load a remote image into an ImageView with Glide is quite simple:

Glide.with(context)  //you can pass either context or activity or fragment
    .load("YOUR_IMAGE_URL") //or fragmentactivity,Glide accepts everything
    .into(YOUR_IMAGEVIEW);

For Circular ImageView, you can use RoundedBitmapDrawable with Glide as follows:
(No Custom ImageView is required for this)

 Glide.with(context).load(YOUR_IMAGE_URL).asBitmap().centerCrop().into(new BitmapImageViewTarget(YOUR_IMAGEVIEW) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            YOUR_IMAGEVIEW.setImageDrawable(circularBitmapDrawable);
        }
    });
This will make your imageview look circular.

That's all.. and always code to make it better.. :)

Card View (Android)

Hi guys, this blog of mine will give you an example of a new user interface widget introduced in Android support library (v7:21.0.+) that is: CardView that helps in building rich Android apps.

CardView widget, is an extension of existing FrameLayout class. This helps to wrap other UI elements as Google style cards. CardView widgets can have shadows and rounded corners.
Following the blog will show you how to use the CardView in your application.

Add CardView Support Library
Android SDK doesn’t includes the CardView class, and hence for using CardView in your project you first need to add the card view support library to your project. Android Studio users can add the following gradle dependency in your build.graddle file to add CardView to project.

dependencies {
       compile 'com.android.support:cardview-v7:21.0.+'
}

Declare CardView Layout

Now that we have added the build dependencies to project, let us go ahead to declare the CardView layout. You can define the layout of your cardView according to your needs. For example, I am adding a textview and an ImageView in my layout.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/card_view"

    android:layout_width="match_parent"

    android:layout_height="240dp"

    android:layout_margin="16dp">

<RelativeLayout 

    android:layout_width="match_parent"

    android:layout_height="match_parent">

<ImageView

                android:id="@+id/imgvw"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_alignParentTop="true"

                android:layout_centerHorizontal="true"

                android:layout_margin="16dp"

                android:src="@drawable/sample_image" />

             <TextView

                android:id="@+id/txtvw"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_centerInParent="true"

                android:text="CardView Example" />

</RelativeLayout>

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

Customize CardView Appearance

The CardView layout declaration is pretty straight forward. CardView widget allows you to control the background color, shadow, corner radius etc. For using the custom attributes in XML, you need to add the following namespace declaration to your parent layout and then add your other attributes to customize your cardview style as follows.

<android.support.v7.widget.CardView 

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:cardView="http://schemas.android.com/apk/res-auto"

    android:id="@+id/card_view"

    android:layout_width="match_parent"

    android:layout_height="240dp"

    android:layout_margin="16dp"

   app:cardCornerRadius="8dp"

    app:cardBackgroundColor="#fff"

    app:cardElevation="4dp" ... >

<-- Define your layout here -->

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

That's it...Enjoy!! and always Code to make it better..!!