i'm new in this forum. I have a problem with CardView. I use recyclerview to binding data and to show a big list of image using picasso with staggeredgridlayoutmanager. But when i scroll the view, the image refresh (naturally), the cards change position and return to original dimension, sometimes disappear. is there a solution? and how i use the cache to save the images that i load with picasso?
this is the code:
public final static class BusStopViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private ImageView mImage;
private WeakReference<OnItemClickListener> mOnItemClickListenerWeakReference;
/**
* This is the interface to implement to listen to the click on the item
*/
public interface OnItemClickListener {
/**
* Invoked when we select a bus stop
*
* @param position The selected position
*/
void onItemClicked(int position);
}
Context context;
public BusStopViewHolder(View itemView, Context context) {
super(itemView);
this.context = context;
mImage = ViewUtility.findViewById(itemView, R.id.country_photo);
itemView.setOnClickListener(this);
}
/**
* We use this to register a specific OnItemClickListener
*
* @param onItemClickListener The OnItemClickListener
*/
public void setOnItemClickListener(final OnItemClickListener onItemClickListener) {
Log.e("setOnItemClickListener", "true");
this.mOnItemClickListenerWeakReference = new WeakReference<OnItemClickListener>(onItemClickListener);
if (this.mOnItemClickListenerWeakReference == null)
Log.e("setOnItemClickListener", "null");
}
/**
* This binds the model to the View
*
* @param image The model to map
*/
private LruCache<String, ImageView> mMemoryCache;
private int flag = 0;
public void bind(Image image, int position) {
Picasso.with(context).load(image.url).fit().centerInside().into(mImage); //todo risolvere gestione eventi
mImage.setOnClickListener(this);
}
public final static class BusStopAdapter extends RecyclerView.Adapter<BusStopViewHolder> implements BusStopViewHolder.OnItemClickListener {
/**
* The model for the Adapter
*/
private List<Image> mModel;
/**
* The Reference to the Listener for BusStop selection
*/
private WeakReference<OnImageStopListener> mOnItemClickListenerWeakReference;
@Override
public void onItemClicked(int position) {
Log.e("onItemClicked 1", "true");
OnImageStopListener listener;
if (this.mOnItemClickListenerWeakReference != null && (listener = this.mOnItemClickListenerWeakReference.get()) != null) {
Log.e("OnItemCLicked 2", "true");
listener.onBusStopClicked(mModel.get(position), position);
}
}
/**
*
This is the interface to implement to listen to the click on the item
*/
public interface OnImageStopListener {
/**
* Invoked when we select a bus stop
*
* @param busStop The selected BusStop
* @param position The selected position
*/
void onBusStopClicked(Image busStop, int position);
}
/**
* Creates a BusStopAdapter for the given model
*
* @param model The model for this Adapter
*/
Context context;
BusStopAdapter(final List<Image> model, Context context) {
this.mModel = model;
this.context = context;
}
/**
* We use this to register a specific OnBusStopListener
*
* @param onImageStopListener The OnBusStopListener
*/
public void setOnBusStopListener(final OnImageStopListener onImageStopListener) {
Log.e("setOnBusStopListener", "true");
this.mOnItemClickListenerWeakReference = new WeakReference<OnImageStopListener>(onImageStopListener);
if (this.mOnItemClickListenerWeakReference.get() == null)
Log.e("setOnBusStopListener", "null");
else Log.e("setOnBusStopListener", "NOT null");
}
int i = 0;
@Override
public BusStopViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
// We inflate the data and return the related ViewHolder
final View layout = LayoutInflater.from(viewGroup.getContext())
.inflate(R.layout.simple_img_layout, viewGroup, false);
return new BusStopViewHolder(layout, context);
}
int j = 0;
@Override
public void onBindViewHolder(BusStopViewHolder busStopViewHolder, int position) {
busStopViewHolder.bind(mModel.get(position), position);
busStopViewHolder.setOnItemClickListener(this);
}
public void setData(List<Image> mModel) {
this.mModel = mModel;
}
@Override
public int getItemCount() {
return mModel.size();
}
}
this is the xml file:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="4dp"
card_view:contentPadding="0dp"
android:layout_gravity="fill"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/country_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dip"
android:paddingTop="0dip"
android:paddingBottom="0dip"
android:adjustViewBounds="true"
android:layout_gravity="fill"
android:minHeight="150dp"
android:minWidth="150dp"
android:layout_centerInParent="true"
android:scaleType="fitCenter" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_design_support_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/ciao"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
style="@style/AppTheme"
/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="wrap_content"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="@dimen/material_botton_margin"
android:layout_marginRight="@dimen/material_botton_margin"
android:src="@drawable/ic_search_white_24dp"
app:backgroundTint="@color/colorAccent"
app:backgroundTintMode="src_over"
app:fabSize="normal"
app:rippleColor="#00FF00"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
1.You should use Glide by Google
2.If possible, You should define the height and width of the image (View and Image).
3.Use placeholder for Image
4.If you don't have a link for the image, you should set null for ImageView.
P.s: please, post your code here.