Search code examples
androidlistviewcardview

why CardView causing slow down the scrolling process?


I was using listView without with the custom layout which is having Linear layout as parent layout. Scrolling was fine, Then I need to implement CardView for elevation and round corner, After implementation list Scrolling become slow.Moreover it is also slowing down the RecyclerView Process. here is my xml.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/WhiteSmoke"
    android:layout_margin="5dp"
   android:orientation="vertical">



   <android.support.v7.widget.CardView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="6dp">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/listviewback"
        android:orientation="vertical"
        android:padding="5dip">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/custom_listviewIV"
                android:layout_width="40dip"
                android:layout_height="40dip"
                android:layout_marginLeft="5dip"
                android:layout_marginRight="5dip"
                android:src="@drawable/avatar2"

                />

            <TextView
                android:id="@+id/custom_listviewMainTv"
                android:layout_width="180dip"
                android:layout_height="45dip"
                android:layout_marginLeft="2dip"
                android:layout_toLeftOf="@+id/custom_listviewLinearLay"
                android:layout_toRightOf="@+id/custom_listviewIV"

                android:maxLines="2"
                android:paddingTop="2dip"
                android:text="Goverment  "
                android:textColor="@color/GreyDark"
                android:textSize="15sp"
                android:textStyle="bold"/>

            <LinearLayout
                android:id="@+id/custom_listviewLinearLay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_margin="2dip"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/custom_listviewRating"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_gravity="right"
                    android:layout_marginBottom="2dp"
                    android:background="@drawable/tv_round"
                    android:backgroundTint="@color/primary_dark"

                    android:gravity="center"
                    android:text="4.2/5"
                    android:textColor="@color/white"
                    android:textSize="13sp" />


            </LinearLayout>

        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="5dip"
            android:background="@color/GreyLight" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dip"
            android:orientation="vertical"
            android:paddingLeft="10dip"
            android:paddingTop="1dip"
            android:paddingRight="10dip"

            >

            <TextView
                android:id="@+id/custom_listviewFirstTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"

                android:text="Fsc Pre Engineering1"
                android:textColor="@color/greyligher"
                android:textSize="13sp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/custom_listviewSecondTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:text="Fsc Pre Engineering2"
                android:textColor="@color/greyligher"
                android:textSize="13sp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/custom_listviewThirdTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:text="Fsc Pre Engineering3"
                android:textColor="@color/greyligher"
                android:textSize="13sp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/custom_listviewFourthTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="more+"
                android:textColor="@color/black"
                android:textSize="13sp"
                android:visibility="gone" />

          </LinearLayout>
        </LinearLayout>
       </android.support.v7.widget.CardView>
       </LinearLayout>

here is my adapter code

public class CustomAdaptor extends BaseAdapter {

private ArrayList<Data> myDataList;
private Context context;
LinearLayout linearLayout;

public CustomAdaptor(ArrayList<Data> mylist, Context context) {
    this.myDataList = mylist;
    this.context = context;
}

public int getCount() {
    return myDataList.size();
}

public Object getItem(int position) {
    return myDataList.get(position);
}

public long getItemId(int position) {
    return position;
}


public View getView(final int position, View convertView, ViewGroup parent) {

    View view = View.inflate(context, R.layout.custom_listview, null);
    linearLayout= view.findViewById(R.id.layout);
    TextView collegeName = view.findViewById(R.id.custom_listviewMainTv);
    TextView rating =  view.findViewById(R.id.custom_listviewRating);
    ImageView country =  view.findViewById(R.id.custom_listviewIV);
    LinearLayout ll= view.findViewById(R.id.custom_listviewLinearLay);
    TextView firstTv=  view.findViewById(R.id.custom_listviewFirstTv);
    TextView secondTv=  view.findViewById(R.id.custom_listviewSecondTv);
    TextView thirdTv=  view.findViewById(R.id.custom_listviewThirdTv);
    TextView fourthTv=  view.findViewById(R.id.custom_listviewFourthTv);

    collegeName.setText(myDataList.get(position).getName());
    rating.setText("" + myDataList.get(position).getRating());
    Double n=0.0;
    if (n==myDataList.get(position).getRating()) {
        ll.setVisibility(View.GONE);
    }

    if(!myDataList.get(position).getCourseList().isEmpty()) {
        if (!myDataList.get(position).getCourseList().get(0).lst.get(0).getCourseName().equals("")) {
            firstTv.setVisibility(View.VISIBLE);
            firstTv.setText(myDataList.get(position).getCourseList().get(0).lst.get(0).getCourseName());

        }
        if (myDataList.get(position).getCourseList().get(0).lst.size()>1) {
            if (!myDataList.get(position).getCourseList().get(0).lst.get(1).getCourseName().equals("")) {
                secondTv.setVisibility(View.VISIBLE);
                secondTv.setText(myDataList.get(position).getCourseList().get(0).lst.get(1).getCourseName());

            }
        }
        if (myDataList.get(position).getCourseList().get(0).lst.size()>2) {
            if (!myDataList.get(position).getCourseList().get(0).lst.get(2).getCourseName().equals("")) {
                thirdTv.setVisibility(View.VISIBLE);
                thirdTv.setText(myDataList.get(position).getCourseList().get(0).lst.get(2).getCourseName());

            }
        }
        if (myDataList.get(position).getCourseList().size()>1) {
            fourthTv.setVisibility(View.VISIBLE);
            fourthTv.setText("+More");

        }else if(myDataList.get(position).getCourseList().get(0).lst.size()>3) {
            fourthTv.setVisibility(View.VISIBLE);
            fourthTv.setText("+More");
        }
        String img = "" + myDataList.get(position).getImage();
        img = img.replaceAll(" ", "%20");
        Glide.with(context).load(img).into(country);

        view.setTag(myDataList.get(position).getId());
    }
    else {
        linearLayout.setVisibility(View.GONE);
    }


    return view;

}

}


Solution

  • Cardview is probably just the "breaking point" for how much graphic content that cna be used in an unoptimized way without lagging. As mentioned in some comments you should be using a ViewHolder, here is a simple example of using a viewholder:

    public View getView(int position, View convertView, ViewGroup parent) {
    
        ViewHolder holder;
    
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_entry, null);
            holder = new ViewHolder();
            holder.nameTextView = (TextView) convertView.findViewById(R.id.person_name);
            holder.surnameTextView = (TextView) convertView.findViewById(R.id.person_surname);
            holder.personImageView = (ImageView) convertView.findViewById(R.id.person_image);
            convertView.setTag(holder);
        }
        else {
            holder = (ViewHolder) convertView.getTag();
        }
    
        Person person = getItem(position);
    
        holder.nameTextView.setText(person.getName());
        holder.surnameTextView.setText(person.getSurname());
        //holder.personImageView.setImageBitmap(person.getImage());
    
        return convertView;
    }
    

    you can read more about it here

    Additionally you should be using RecyclerView and not ListView, to optimize performance.