Android Development

Android Knowledge Hyperlink in RecyclerView – Profile Display screen

In my earlier article, we discovered the fundamentals of information binding. Immediately, we are going to put the fundamentals into observe by putting in a profile display utilizing knowledge hyperlink ideas. The profile display will comprise the profile particulars on the prime and the part under will comprise grid publish photos. The grid will probably be realized with the assistance of a RecyclerView implementing the information hyperlink within the adapter class.

Utilizing DataBinding in an adapter class helps maintain the code very minimal, as many parts will probably be taken under consideration within the presentation itself.


1. Stipulations

This instance requires primary information of Android knowledge hyperlinks. Begin with DataBinding by studying the tutorial under.

Learn: Android working with DataBinding

2. Create a brand new mission

1. Create a brand new mission in Android Studio from File ⇒ New mission and choose Primary exercise from fashions.

2. Allow DataBiding in app / construct.gradle. Additionally add the dependencies RecyclerView and Glide and Sync the mission.


// …

implementation: com.github.bumptech.glide: glide: four.6.1 & # 39;
annotationProcessor com.github.bumptech.glide: compiler: four.6.1 & # 39;

implementation recyclerview-v7: & # 39;

three. Add INTERNET permission in AndroidManifest.xml as a result of the pictures have to be loaded from a URL.

four. Obtain and add to your initiatives res folder. These folders that may be drawn comprise probably the most vital icon for FAB.

5. Add the assets under to the respective assets strings.xml, dimens.xml and couleurs.xml

Knowledge hyperlink


# 222222 # 111111 # fecb2f # 333

6. Create three named packages mannequin, utils and view. As soon as created, transfer the Core enterprise at view package deal.

You can see under the ultimate mission construction and the required information.

7. Create Person class underneath mannequin package deal. To make this class observable, lengthen the category of BaseObservable.

For demonstration, each Observable and ObservableField are utilized in the identical class.

For variables identify, e mail, profileImage and about, the @Bindable annotation is used and NotifyPropertyChanged is known as to outline new knowledge
variables variety of posts, numberOfFollowers, NUMBEROFVERIFIED & # 39; after are declared as ObservableFields
@BindingAdapter is used to hyperlink profilImage at ImageView to load the picture from URL utilizing the Glide library.

import android.databinding.BaseObservable;
import android.databinding.Bindable;
import android.databinding.BindingAdapter;
import android.databinding.ObservableField;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

import data.androidhive.databinding.BR;

Public class Person extends BaseObservable
String identify
E mail string;
String profileImage;
String about;

// the meta-fields of the profile are ObservableField, will replace the interface
// at any time when a brand new worth is outlined
public ObservableField numberOfFollowers = new ObservableField <> ();
public ObservableField numberOfPosts = new ObservableField <> ();
public ObservableField numberOfFollowing = new ObservableField <> ();

public Person ()

public String getName ()
return the identify;

public void setName (string identify)
this.identify = identify;
notifyPropertyChanged (BR.identify);

public String getEmail ()
return the e-mail;

public void setEmail (String e mail)

@BindingAdapter ()
public static void loadImage (ImageView view, String imageUrl)
Glide.with (view.getContext ())
.load (imageUrl)
.apply (RequestOptions.circleCropTransform ())
.into (see);

// If you happen to take into account Picasso, observe the directions under.
// Picasso.with (view.getContext ()). Load (imageUrl) .placeholder (R.drawable.placeholder) .into (view);

public String getProfileImage ()
return profileImage;

public void setProfileImage (String profileImage)

public String getAbout ()
come again about;

public void setAbout (String about)

public ObservableField getNumberOfFollowers ()

public ObservableField getNumberOfPosts ()

public ObservableField getNumberOfFollowing ()
return numberOfFollowing;

eight. Create one other named class Put underneath mannequin package deal. This mannequin class offers knowledge to RecycleurVoir.

import android.databinding.BindingAdapter;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class Put up

9. Underneath utils package deal, create two named lessons and GridEspacementItemDé

convertToSuffix () This technique converts a quantity right into a human readable format. For instance, 5500L will probably be transformed to 5.5k and 5050890L will probably be transformed to 5.1m.
We hyperlink this operate to TextViews to show posts, followers, and followers in a human-readable format.

package deal data.androidhive.databinding.utils;

Public class BindingUtils

// Convert the quantity to suffix Ok, M
// Ex: 5500 will probably be displayed as 5.5k
public static String convertToSuffix (lengthy depend)
if (depend <1000) returns "" + depend;
int exp = (int) (Math.log (depend) / Math.log (1000));
return String.format ("%. 1f% c",
depend / Math.pow (1000, exp),
"kmgtpe" .charAt (exp – 1));

GridEspacementItemDécoration offers spacing between parts within the RecyclerView grid.

package deal data.androidhive.databinding.utils;

import android.view.View;

Public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {

personal int spanCount;
personal int spacing;
includeEdge personal boolean;

public GridSpacingItemDecoration (int spanCount, int spacing, boolean includeEdge)
this.spanCount = spanCount;
this.spacing = spacing;
this.includeEdge = includeEdge;

public void getItemOffsets (Rect on view, Present view, RecycleView guardian, State RecyclerView.State)
int place = guardian.getChildAdapterPosition (view);
int column = place% spanCount;

if (includeEdge)
outRect.left = spacing – column * spacing / spanCount;
outRect.proper = (column + 1) * spacing / spanCount;

if (place < spanCount) outRect.bottom = spacing; else }

2.1 Knowledge binding in RecyclerView

The binding of a RecyclerView presentation is just like the conventional binding, aside from a number of modifications within the onCreateViewHolder and onBindViewHolder strategies.

ten. Create a named structure post_row_item.xml. This structure accommodates a ImageView render the picture in RecyclerView.

On this presentation, the information binding is enabled by preserving the basis ingredient because the . the To publish mannequin associated to this structure utilizing label.

11. Create a named class underneath view package deal.

Because the identify of the structure is post_row_item.xmlthe generated hyperlink class will probably be PostRowItemBinding.
In onCreateViewHolder () technique, the post_row_item structure is inflated with the assistance of PostRowItemBinding class.
holder.binding.setPost () bind the To publish mannequin at every row.

package deal data.androidhive.databinding.view;

import android.databinding.DataBindingUtil;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.Checklist;

import data.androidhive.databinding.R;
import data.androidhive.databinding.databinding.PostRowItemBinding;
import data.androidhive.databinding.mannequin.Put up;

Public class PostsAdapter extends RecyclerView.Adapter {

personal record postList;
personal LayoutInflater layoutInflater;
personal listener PostsAdapterListener;

Public class MyViewHolder extends RecyclerView.ViewHolder

public PostsAdapter (Checklist postList, PostsAdapterListener listener)

public MyViewHolder onCreateViewHolder (guardian of ViewGroup, int viewType)
if (layoutInflater == null)
layoutInflater = LayoutInflater.from (guardian.getContext ());

PostRowItemBinding binding =
DataBindingUtil.inflate (layoutInflater, R.structure.post_row_item, guardian, false);
return a brand new MyViewHolder (hyperlink);

onBindViewHolder public void (holder of MyViewHolder, last int place) {
holder.binding.setPost (postList.get (place));
holder.binding.thumbnail.setOnClickListener (new View.OnClickListener () );

public int getItemCount ()
returns postList.dimension ();

public interface PostsAdapterListener
void onPostClicked (publish publish);


2.2 Development of the profile display

Now we have now all of the information in place. Let's begin by constructing the primary interface.

12. Open the structure information of the primary exercise i.e activity_main.xml and content_main.xml and allow the information hyperlink by including , and Key phrases.

13. Lastly open and make the modifications under.

Because the identify of the primary enterprise construction is activité_main, the generated hyperlink class will probably be ActivityMainBinding.
renderProfile () shows person info corresponding to identify, description, publications, subscribers, and variety of observe ups.
initRecyclerView () Initialize the RecyclerView with pattern picture knowledge.
MyClickHandlers manages the clicking occasions of the person interface parts. Right here, all of the binding of the clicking occasions is completed by way of an XML presentation solely. We don’t explicitly attribute something from the exercise code.

package deal data.androidhive.databinding.view;

import android.content material.Context;
import android.content material.res.Assets;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;

import data.androidhive.databinding.R;
import data.androidhive.databinding.databinding.ActivityMainBinding;
import data.androidhive.databinding.mannequin.Put up;
import data.androidhive.databinding.mannequin.Person;
import data.androidhive.databinding.utils.GridSpacingItemDecoration;

Public Class MainActivity Extends AppCompatActivity Implements PostsAdapter.PostsAdapterListener

Run and take a look at the applying as soon as. Make certain the machine has an Web connection as a result of the pictures will probably be downloaded from the community.

If in case you have questions, publish them within the part under.

Hello! I’m founding father of androidhive and passionate programming. My expertise embrace Android, iOS, PHP, Ruby on Rails and rather more. If in case you have an concept that you want to me to develop? Let's speak about