Android DataBinding in RecyclerView – Profile Screen

In my past article, we have taken in the Basics of DataBinding. Today, we are going to put the rudiments energetically by executing a profile screen utilizing information restricting ideas. The profile screen will have profile subtleties at the top and the underneath segment will have post pictures in matrix position. The lattice will be accomplished utilizing a RecyclerView actualizing the information authoritative in connector class.

Utilizing DataBinding in a connector class, keeps the code to insignificant as part of things will be taken consideration in the design itself.

1. Essential

This precedent needs fundamental information in android information official. Begin with DataBinding by perusing the beneath instructional exercise.

Peruse: Android working with DataBinding

2. Making New Project

1. Make another undertaking in Android Studio from File ⇒ New Project and select Basic Activity from formats.

2. Empower DataBiding in application/build.gradle. Additionally include the RecyclerView and Glide conditions and Sync the undertaking.

android {

dataBinding {

empowered = genuine

}

}

conditions {

/…

execution ‘com.github.bumptech.glide:glide:4.6.1’

annotationProcessor ‘com.github.bumptech.glide:compiler:4.6.1’

execution ‘com.android.support:recyclerview-v7:27.1.0’

}

3. Include INTERNET consent in AndroidManifest.xml as the pictures should be stacked from a URL.

<uses-consent android:name=”android.permission.INTERNET”/>

4. Download res.zip and add to your undertakings res organizer. These drawable envelopes contains in addition to symbol essential for FAB.

5. Add the underneath assets to separate strings.xml, dimens.xml and colors.xml

<resources>

<string name=”app_name”>Data Binding</string>

<string name=”action_settings”>Settings</string>

<string name=”toolbar_profile”>Profile</string>

<string name=”posts”>POSTS</string>

<string name=”followers”>FOLLOWERS</string>

<string name=”following”>FOLLOWING</string>

</resources>

<resources>

<dimen name=”fab_margin”>16dp</dimen>

<dimen name=”activity_margin”>16dp</dimen>

<dimen name=”dimen_8dp”>8dp</dimen>

<dimen name=”profile_image”>100dp</dimen>

<dimen name=”fab_profile”>30dp</dimen>

<dimen name=”profile_name”>15dp</dimen>

<dimen name=”profile_about”>13dp</dimen>

<dimen name=”profile_meta”>24dp</dimen>

<dimen name=”profile_meta_label”>10dp</dimen>

</resources>

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<color name=”colorPrimary”>#222222</color>

<color name=”colorPrimaryDark”>#111111</color>

<color name=”colorAccent”>#fecb2f</color>

<color name=”profile_meta”>#333</color>

</resources>

6. Make three bundles named show, utils and see. Once made, move the MainActivity to see bundle.

The following is the last task structure and records required.

android-databinding-venture structure

7. Make User class under model bundle. To make this class Observable, broaden the class from BaseObservable.

For exhibit, both Observable and ObservableField are utilized in a similar class.

For factors name, email, profileImage and about., @Bindable explanation is utilized and notifyPropertyChanged is called after setting new information

Factors numberOfPosts, numberOfFollowers, numberOfFollowing are announced as ObservableFields

@BindingAdapter is utilized to tie profileImage to ImageView so as to stack the picture from URL utilizing 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 info.androidhive.databinding.BR;

open class User expands BaseObservable {

String name;

String email;

String profileImage;

String about;

/profile meta fields are ObservableField, will refresh the UI

/at whatever point another esteem is set

open ObservableField<Long> numberOfFollowers = new ObservableField<>();

open ObservableField<Long> numberOfPosts = new ObservableField<>();

open ObservableField<Long> numberOfFollowing = new ObservableField<>();

open User() {

}

@Bindable

open String getName() {

return name;

}

open void setName(String name) {

this.name = name;

notifyPropertyChanged(BR.name);

}

@Bindable

open String getEmail() {

return email;

}

open void setEmail(String email) {

this.email = email;

notifyPropertyChanged(BR.email);

}

@BindingAdapter({“profileImage”})

open static void loadImage(ImageView see, String imageUrl) {

Glide.with(view.getContext())

.load(imageUrl)

.apply(RequestOptions.circleCropTransform())

.into(view);

/If you think about Picasso, pursue the beneath

/Picasso.with(view.getContext()).load(imageUrl).placeholder(R.drawable.placeholder).into(view);

}

@Bindable

open String getProfileImage() {

return profileImage;

}

open void setProfileImage(String profileImage) {

this.profileImage = profileImage;

notifyPropertyChanged(BR.profileImage);

}

@Bindable

open String getAbout() {

return about;

}

open void setAbout(String about) {

this.about = about;

notifyPropertyChanged(BR.about);

}

open ObservableField<Long> getNumberOfFollowers() {

return numberOfFollowers;

}

open ObservableField<Long> getNumberOfPosts() {

return numberOfPosts;

}

open ObservableField<Long> getNumberOfFollowing() {

return numberOfFollowing;

}

}

8. Make another class named Post.java under model bundle. This model class gives information to RecyclerView.

import android.databinding.BindingAdapter;

import android.widget.ImageView;

import com.bumptech.glide.Glide;

open class Post {

String imageUrl;

@BindingAdapter(“imageUrl”)

open static void loadImage(ImageView see, String imageUrl) {

Glide.with(view.getContext())

.load(imageUrl)

.into(view);

}

open String getImageUrl() {

return imageUrl;

}

open void setImageUrl(String imageUrl) {

this.imageUrl = imageUrl;

}

}

9. Under utils bundle, make two classes named BindingUtils.java and GridSpacingItemDecoration.java

convertToSuffix() strategy changes over a number to intelligible arrangement. For instance, 5500L will be changed over as 5.5k and 5050890L will be changed over as 5.1m.

We tie this capacity to TextViews so as to show the posts, adherents and following in comprehensible organization.

bundle info.androidhive.databinding.utils;

open class BindingUtils {

/https://stackoverflow.com/questions/9769554/how-to-change over number-into-k-thousands-m-million-and-b-billion-addition in-jsp

/Converts the number to K, M addition

/Ex: 5500 will be shown as 5.5k

open static String convertToSuffix(long check) {

in the event that (tally < 1000) return “” + check;

int exp = (int) (Math.log(count)/Math.log(1000));

return String.format(“%.1f%c”,

check/Math.pow(1000, exp),

“kmgtpe”.charAt(exp – 1));

}

}

GridSpacingItemDecoration gives dispersing between RecyclerView lattice components.

bundle info.androidhive.databinding.utils;

import android.graphics.Rect;

import android.support.v7.widget.RecyclerView;

import android.view.View;

open class GridSpacingItemDecoration expands RecyclerView.ItemDecoration {

private int spanCount;

private int dispersing;

private boolean includeEdge;

open GridSpacingItemDecoration(int spanCount, int dispersing, boolean includeEdge) {

this.spanCount = spanCount;

this.spacing = dispersing;

this.includeEdge = includeEdge;

}

@Override

open void getItemOffsets(Rect outRect, View see, RecyclerView parent, RecyclerView.State state) {

int position = parent.getChildAdapterPosition(view);

int section = position % spanCount;

in the event that (includeEdge) {

outRect.left = dividing – section * separating/spanCount;

outRect.right = (section + 1) * dividing/spanCount;

in the event that (position < spanCount) {

outRect.top = dividing;

}

outRect.bottom = dividing;

} else {

outRect.left = section * dividing/spanCount;

outRect.right = dividing – (section + 1) * separating/spanCount;

in the event that (position >= spanCount) {

outRect.top = dividing;

}

}

}

}

2.1 DataBinding in RecyclerView

Restricting a RecyclerView format is like ordinary official aside from few changes in onCreateViewHolder and onBindViewHolder techniques.

10. Make design named post_row_item.xml. This format contains an ImageView to render the picture in RecyclerView.

In this design, information restricting is empowered by keeping the root component as <layout>. The Post demonstrate in bound to this design utilizing <variable> tag.

<?xml version=”1.0″ encoding=”utf-8″?>

<layout xmlns:bind=”http://schemas.android.com/apk/res/android”>

<data>

<variable

name=”post”

type=”info.androidhive.databinding.model.Post”/>

</data>

<android.support.constraint.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”>

<ImageView

android:id=”@+id/thumbnail”

android:layout_width=”0dp”

android:layout_height=”0dp”

Leave a Reply

Your email address will not be published. Required fields are marked *