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.

No comments:

Post a Comment

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...