Tuesday 25 September 2018

Android Architecture Components : Data Binding Part 3

Hi ,
Today I am going to share the third part of Data Binding Demo. You can check out previous posts for more understanding.
In this post I am sharing the data binding in RecyclerView and Adapters.

-> Firstly I created one layout named : friend_layout.xml

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

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

</layout>

-> Now I created one another layout for thumbnail in Grid , named : post_row_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:bind="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="post"
            type="info.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"
            android:profileImage="@{post.profileImage}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="H,1:1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</layout>

-> I have created the thumbnail layout named: post_row_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:bind="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="post"
            type="info.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"
            android:profileImage="@{post.profileImage}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="H,1:1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</layout>

-> Now let's move to entity part , named : Post.java

public class Post {
    String profileImage;
    public String getProfileImage() {
        return profileImage;
    }

    public void setProfileImage(String profileImage) {
        this.profileImage = profileImage;
    }

    @BindingAdapter({"android:profileImage"})
    public static void loadImage(ImageView view, String imageUrl) {
        // If you consider Picasso, follow the below
        Picasso.with(view.getContext()).
                load(imageUrl).
                placeholder(R.drawable.ic_launcher_background).
                into(view);
    }

}

 -> The adapter class will be named : PostsAdapter.java

public class PostsAdapter extends RecyclerView.Adapter<PostsAdapter.ViewHolder> {
    ArrayList<Post> list = new ArrayList<>();
    Activity activity ;
    LayoutInflater mLayoutInflator;

    class ViewHolder extends RecyclerView.ViewHolder{
       PostRowLayoutBinding postBinding;
        public ViewHolder(PostRowLayoutBinding itemBinding) {
            super(itemBinding.getRoot());
            this.postBinding = itemBinding;
        }
    }
    public PostsAdapter(ArrayList<Post> list, Activity friendsListActivity) {
        this.list = list;
        this.activity = friendsListActivity;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (mLayoutInflator == null) {
            mLayoutInflator = LayoutInflater.from(parent.getContext());
        }
        PostRowLayoutBinding binding = DataBindingUtil.inflate(mLayoutInflator,R.layout.post_row_layout,parent,false);
        return new ViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
      
       holder.postBinding.setPost(list.get(position));
       holder.postBinding.thumbnail.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Toast.makeText(activity,position+" Friends clicked!!",Toast.LENGTH_LONG).show();
           }
       });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

}

Now the activity class , is named as : FriendsListActivity.class

public class FriendsListActivity extends AppCompatActivity {

    ArrayList<Post> aryList =new ArrayList<>();
    FriendLayoutBinding dataBinding;
    RecyclerView recyclerView;
    PostsAdapter mAdapter;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        dataBinding = DataBindingUtil.setContentView(this, R.layout.friend_layout);
        initViews();
    }

    private void initViews() {
        recyclerView = dataBinding.recyclerView;
        recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
        recyclerView.addItemDecoration(new GridSpacingItemDecoration(3, Utils.dpToPx(4,getApplicationContext()), true));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setNestedScrollingEnabled(false);
        mAdapter = new PostsAdapter(addFriends(), this);
        recyclerView.setAdapter(mAdapter);
    }

    private ArrayList<Post> addFriends() {
        Post post = new Post();
        post.setProfileImage("https://www.ienglishstatus.com/wp-content/uploads/2018/04/profile-images-for-lover.jpg");
        aryList.add(post);

        Post post1 = new Post();
        post1.setProfileImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLGja2adSQA0iRqBPSP16wx-9QCHK7P0ADoFRAjKfo4elX5unVpg");
        aryList.add(post1);

        Post post2 = new Post();
        post2.setProfileImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm92-cGpGAlpNqJPHzWhSA_p83pkxvQjsLXMrGN1uX8Fw36Zha");
        aryList.add(post2);

        Post post3 = new Post();
        post3.setProfileImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRMXMX3L3ENBdFykfCjGVXomO8qXa082hm80ZAJJIYjNw6pVap");
        aryList.add(post3);

        Post post4 = new Post();
        post4.setProfileImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaAPF9U-hEs5XN_WcGS25NZvaWTAQCklIoi8OJ_aKQMHmf0RdF");
        aryList.add(post4);

        Post post5 = new Post();
        post5.setProfileImage("https://avatarfiles.alphacoders.com/665/66525.jpg");
        aryList.add(post5);

        Post post6 = new Post();
        post6.setProfileImage("https://dp.profilepics.in/profile-pictures-for-facebook-whatsapp/stylish-profile-pics/stylish-profile-pics-for-whatsapp-facebook-05.jpg");
        aryList.add(post6);

        Post post7 = new Post();
        post7.setProfileImage("https://www.androidcrush.com/wp-content/uploads//2016/10/Hope-Whatsapp-Images-Free-Download-1.png");
        aryList.add(post7);

        Post post8 = new Post();
        post8.setProfileImage("https://i.pinimg.com/originals/53/54/f7/5354f750a2816333f42efbeeacb4e244.jpg");
        aryList.add(post8);

        Post post9 = new Post();
        post9.setProfileImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDEDfz0OsWGMtJJH1MuG0Deaxmr7kEsgwU9XtLbW4pZLe8_nYuLQ");
        aryList.add(post9);

        return aryList;
    }
}

Here I have added some random image urls to show the thumbnails in grid.That's it.

1 comment:

  1. Everybody keeps searching for Good morning photo with beautiful flowers wish their friends good morning. In today's post, we have brought you a great. We all receive many good morning sms and text on our mobile phones from our friends, relatives and family members but among all Good Morning Photos have a great impact as they are delightful and filled with positivity. We have lots of Good morning images in HD which you can use for free. We have images for everyone in this category like for friends, love and for your family. Use these photos to share your wishes with them as good morning photos with wishes share your love for them in a more appealing way.
    visit for more info - https://www.goodmorningimageshddownload.com/

    ReplyDelete

Advanced Kotlin Coroutines : Introduction

 Hi,  Today I am unwraping the topic in Kotin world i.e. Coroutine . If you want to get started with Kotlin coroutine and ease your daily de...