How to improve my RecyclerView performance with large size photos inside the my App?

Question

I create one RecyclerView in may app and it work slowly and not quick .

this is my adapter

public class PostAdapter extends 
RecyclerView.Adapter<RecyclerView.ViewHolder> {

private Context context;
private List<PostDataModel> models;

public static final String TITLE = "title";
public static final String CONTENT = "content";
public static final String IMAGE_DIR = "image_dir";



public PostAdapter(Context context, List<PostDataModel> models) {
    this.context = context;
    this.models = models;
}

  @Override
  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int  
         viewType) {
        View view = 
  LayoutInflater.from(context).inflate(R.layout.post_layout, parent, false);
        return new PostViewHolder(view);

  }

 @Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) 
 {
    if (holder instanceof PostViewHolder) {
        final PostDataModel model = models.get(position);
        PostViewHolder viewHolder = (PostViewHolder)holder;

    Picasso.with(context).load(model.getImage_dir()).into(viewHolder.image);
        viewHolder.title.setText(model.getTitle());
        viewHolder.content.setText(model.getContent());
        viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(context, PostActivity.class);
                intent.putExtra(IMAGE_DIR, model.getImage_dir());
                intent.putExtra(TITLE, model.getTitle());
                intent.putExtra(CONTENT, model.getContent());
                context.startActivity(intent);
            }
        });
    }


 }

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


 public class PostViewHolder extends RecyclerView.ViewHolder{
        private ImageView image;
        private TextView title;
        private TextView content;
    public PostViewHolder(View itemView) {
        super(itemView);
        image = itemView.findViewById(R.id.image_view);
        title =  itemView.findViewById(R.id.txt_title);
        content = itemView.findViewById(R.id.txt_content);
    }
  }
}

and this is my DataFakeGenerator :

public class PostFakeGenerator {

public static List<PostDataModel> getData(Context context){
    List<PostDataModel> models = new ArrayList<>();
    for (int i = 0; i <10 ; i++) {
        PostDataModel model = new PostDataModel();
        switch (i){
            case 0:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum");     
  model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                 R.drawable.horse1,null));
                model.setImage_dir(R.drawable.horse1);
                break;
            case 1:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum");                    
   model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                  R.drawable.horse2,null));
                model.setImage_dir(R.drawable.horse2);
                break;

            case 2:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum." );                    
       model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                      R.drawable.horse3,null));
                model.setImage_dir(R.drawable.horse3);
                break;

            case 3:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum.");                    
   model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                  R.drawable.horse4,null));
                model.setImage_dir(R.drawable.horse4);
                break;

            case 4:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum.");                    
         model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                        R.drawable.horse5,null));
                model.setImage_dir(R.drawable.horse5);
                break;

            case 5:
                model.setTitle("post "+i);
                model.setContent("Lorem Ipsum.");                   
    model.setImage(ResourcesCompat.getDrawable(context.getResources(),
                   R.drawable.horse6,null));
                model.setImage_dir(R.drawable.horse6);
                break;
        }

        models.add(model);

     }
      return models;
  }


}

this is my Activity :

public class MyNoticeActivity extends AppCompatActivity {

 private RecyclerView recyclerView;
 private PostAdapter adapter;
 private boolean grid;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my_notice_activity);

    setupRecyclerView();
    setupToolbar();

}

public void setupToolbar(){
    Toolbar toolbar = findViewById(R.id.toolbar_my_notice);
     setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(true);

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
    });
}

public void setupRecyclerView(){
    adapter = new PostAdapter(this, PostFakeGenerator.getData(this));
    recyclerView = findViewById(R.id.recycler);
    showAlphaAnimation(recyclerView);
    recyclerView.setLayoutManager(new StaggeredGridLayoutManager
                             (2,StaggeredGridLayoutManager.VERTICAL));
    grid = true;
    recyclerView.setAdapter(adapter);
}

public void showAlphaAnimation(View view){
    AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
    alphaAnimation.setDuration(1000);
    alphaAnimation.setFillAfter(true);
    view.startAnimation(alphaAnimation);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my_notic_activity_menu,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.change_layout_manager:
            if (grid) {
                recyclerView.setLayoutManager(new LinearLayoutManager(this, 
                                    LinearLayoutManager.VERTICAL, false));
                grid = false ;
                recyclerView.setAdapter(adapter);
                item.setIcon(R.drawable.vc_grid_layout_manager);
            }else {
                recyclerView.setLayoutManager(new StaggeredGridLayoutManager
                                   (2,StaggeredGridLayoutManager.VERTICAL));
                grid = true;
                recyclerView.setAdapter(adapter);
                item.setIcon(R.drawable.vc_list_layout_manager);
            }
            break;
    }
    return super.onOptionsItemSelected(item);
  }
}

this is my layout activity :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.davod.a4nal.Activity.MyNoticeActivity"
  android:layoutDirection="rtl">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout_city"
    app:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_my_notice"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
        <com.example.davod.a4nal.Custom.CustomFontTextView
            android:text="انتخاب شهر"
            android:textSize="@dimen/standard_size_title"
            android:textColor="@color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </android.support.v7.widget.Toolbar>
 </android.support.design.widget.AppBarLayout>



    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

and this is my sample of post in recyclerView :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
 android:padding="8dp"
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:src="@drawable/horse_banner_1" />

<TextView
    android:id="@+id/txt_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:textColor="@color/text_title_color"
    android:textSize="@dimen/standard_size_title"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image_view"
    tools:text="title" />

<TextView
    android:id="@+id/txt_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:maxLines="3"
    android:ellipsize="end"
    android:textColor="@color/text_title_color"
    android:textSize="@dimen/standard_size_content"
    app:layout_constraintStart_toStartOf="@+id/txt_title"
    app:layout_constraintTop_toBottomOf="@+id/txt_title"
    tools:text="afsdfh jahf kjsajkfg skjdgfjk sjdgf sdgf " />
</android.support.constraint.ConstraintLayout>

what am I doing to improve performance and app work quickly ? I decrease size of photo and still work slowly . I change layouts from Liner Layout to Constraint Layout and didn't work . do you have a solution for me ? tanks.

Did you try using a library like [Glide](https://github.com/bumptech/glide) or [Picasso](https://square.github.io/picasso/) to load the images? That could have some performance benefits. — Kartik Arora, Jan 07 '18 at 18:09
please see this https://stackoverflow.com/questions/27188536/recyclerview-scrolling-performance — abbasalim, May 23 '18 at 14:28

score 0 · Answer 1 · answered Jan 07 '18 at 18:14

0

You can set setHasStableIds to true on your recyclerView. It should improve the performance. More about it.

answered Jan 07 '18 at 18:14

karandeep singh

2,294
1
15
22

I do it but My recyclerView cluttered . and still slowly :( – DaVoD Hoseiny Jan 07 '18 at 20:14
Actually, you are holding do many objects in the memory in your PostFakeGenerator. setImage is holding the actual resource in the memory. Ideally you should have file paths and not the drawable in the object. – karandeep singh Jan 07 '18 at 20:24
what should I do to fix it ? – DaVoD Hoseiny Jan 07 '18 at 20:27
try not to use model.setImage in your data generator class and then check the performance. – karandeep singh Jan 07 '18 at 20:29
I want to use Image from local not internet . – DaVoD Hoseiny Jan 07 '18 at 20:32
you can use the drawable id instead of the complete drawable. You are not using them anyway what I can see from your code. – karandeep singh Jan 07 '18 at 20:34

score 0 · Answer 2 · answered Jan 08 '18 at 04:40

0

Try to make onClick events inside PostViewHolder rather than onBindViewHolder.

It might slow your data binding and onclicks. and use setHasStableIds(true) inside your constructor method.

answered Jan 08 '18 at 04:40

Rashiq

650
1
9
23

How to improve my RecyclerView performance with large size photos inside the my App?

2 Answers2