Android DataBinding-Gossip Buzzer

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

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

DEMO

1. Essential

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

Peruse: Android working with DataBinding

2. Making New Project

1. Make another venture 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 = valid

}

}

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 activities res organizer. These drawable organizers contains in addition to symbol important 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 model, utils and see. Once made, move the MainActivity to see bundle.

The following is the last task structure and documents required.

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

For showing, 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 worth 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() {

bring name back;

}

open void setName(String name) {

this.name = name;

notifyPropertyChanged(BR.name);

}

@Bindable

open String getEmail() {

bring email back;

}

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, follow the underneath

/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() {

bring numberOfFollowers back;

}

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() technique changes over a number to comprehensible configuration. 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 arrangement.

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-postfix in-jsp

/Converts the number to K, M postfix

/Ex: 5500 will be shown as 5.5k

open static String convertToSuffix(long tally) {

on the off chance that (tally < 1000) return “” + check;

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

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

tally/Math.pow(1000, exp),

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

}

}

GridSpacingItemDecoration gives separating 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 broadens RecyclerView.ItemDecoration {

private int spanCount;

private int separating;

private boolean includeEdge;

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

this.spanCount = spanCount;

this.spacing = separating;

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;

on the off chance that (includeEdge) {

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

outRect.right = (segment + 1) * dispersing/spanCount;

on the off chance that (position < spanCount) {

outRect.top = separating;

}

outRect.bottom = separating;

} else {

outRect.left = segment * dispersing/spanCount;

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

on the off chance that (position >= spanCount) {

outRect.top = dispersing;

}

}

}

}

2.1 DataBinding in RecyclerView

Restricting a RecyclerView design is like typical official aside from not many changes in onCreateViewHolder and onBindViewHolder strategies.

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

In this format, information restricting is empowered by keeping the root component as <layout>. The Post model 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”

android:scaleType=”centerCrop”

Leave a Reply

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