Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Lazy loading in android RecyclerView

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 8.80k
    Comment on it

    Step 1:- create an xml file image_recyclerview.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.lazyloading">
        <view
            android:id="@+id/recycler_view"
            class="android.support.v7.widget.RecyclerView"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>
    

    Step 2:- create another xml file(recyclerview_item.xml) that will be inflated to above base xml file

     <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp"
            android:id="@+id/listview_row">
    
                <ImageView
                    android:id="@+id/iv_image"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_centerVertical="true"
                    android:scaleType="centerInside"
                    android:background="@drawable/defaultimage"  />
    
                <LinearLayout
                    android:id="@+id/description_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+idiv_image"
                    android:orientation="vertical"
                    android:paddingLeft="10dp"
                    android:paddingTop="15dp">
    
                    <TextView
                        android:id="@+id/tv_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" 
                        android:paddingRight="10dp"/>
    
                    <TextView
                        android:id="@+id/tv_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingRight="10dp" />
                </LinearLayout>
        </RelativeLayout>
    

    Step 3:- create a adaptar class that will fill the recyclerview

     private class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.CustomViewHolder>
      {
         ArrayList<DetailList> detailList = new ArrayList<DetailList>();
         public MyRecyclerAdapter(ArrayList<DetailList> myList) 
            {
               detailList = myList;
             }
          @Override
           public int getItemCount() 
             { 
                return detailList.size();
              }
           @Override
           public CustomViewHolder onCreateViewHolder(ViewGroup parent, final int viewType) 
              {
                View v =LayoutInflater.from(parent.getContext()).inflate(R.layout.all_songs_list_row_item, null);
               CustomViewHolder customViewHolder = new CustomViewHolder(v);
                return customViewHolder;
               }
          @Override
          public void onBindViewHolder(MyRecyclerAdapter.CustomViewHolder holder, final int position) 
              { 
                holder.tvTitle.setText(detailList.get(position).getTitle());
                holder.tvDescription.setText(detailList.get(position).getDescription());
                 setImage(detailList.get(position).getImageUrl(), holder.ivImage);
                }
    
            public class CustomViewHolder extends RecyclerView.ViewHolder
              {
                protected ImageView ivImage;
                protected TextView tvTitle, tvDescription, ;
                public CustomViewHolder(View view)
                  {
                     super(view);
                     this.ivImage = (ImageView) view.findViewById(R.id.iv_image);
                     this.tvDescription = (TextView) view.findViewById(R.id.tv_description);
                     this.tvTitle = (TextView) view.findViewById(R.id.tv_title);
                   }
                 }
              }
    

    Step 4:-Create a getter-setter class that hold details

    public Class DetailList
    {
    private String imageUrl, description,title
    public String getTitle() {return Title; }
    public void setTitle(String title) {this.title = title; }
    public String getDescription() {return description; }
    public void setDescription(String description) {this.description = description; }
    public String getImageUrl() {return imageUrl; }
    public void setImageUrl(String imageUrl) {this.imageUrl = imageUrl; }
    }
    

    Step 5:- code in your main Activity

    Get the Recycler view :-

      RecyclerView  mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    

    Set the List of object of class-DetailList

      ArrayList<DetailList> detailArrayList = new ArrayList<DetailList>();
      for(int i=0; i<10;i++)
      {
       String imageUrl="http//...image.jpeg"; // here is the imaginary url,please set your image url here.
       DetailList detailList=new DetailList();
       detailList.setTitle("Title"+i);
       detailList.setDescription("Description"+i);
       detailList.setDescription(imageUrl);
        detailArrayList.add(detailList);
       }
    

    Set the adapter

    MyRecyclerAdapter recyclerAdapter = new MyRecyclerAdapter(songList);
     mRecyclerView.setAdapter(recyclerAdapter);
    

    A function that set the image

     public void setImage(String imageUrl,ImageView ivImage)
        {
         // to get the image set, you need to download the image / and set to imageview
         // or you can use a third party library to set the image in recyclerview
        }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: