I am building a custom gridview and using picasso for image download.I heared that picasso will cache automatically. But when I scroll ,the images get refreshed.I think I have made a mistake. Please check my code and help me to find the bug.I have posted my code below.
public class MoviesGridAdapter extends BaseAdapter{
private Context context;
private ArrayList<Movie> movies;
private LayoutInflater inflater;
private View gridView;
private final String BASE_IMAGE_URL = ""; // unable to expose the link
private Picasso mPicasso;
public MoviesGridAdapter(Context context,ArrayList<Movie> movies) {
this.context = context;
this.movies = movies;
mPicasso = Picasso.with(context);
mPicasso.setIndicatorsEnabled(true);
}
#Override
public int getCount() {
return movies.size();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
gridView = convertView;
ViewHolder holder;
// when the view got recycled
if(gridView == null){
inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
gridView = new View(context);
holder = new ViewHolder();
gridView = inflater.inflate(R.layout.grid_inner_layout,null);
holder.movieView = (ImageView) gridView.findViewById(R.id.imageView);
gridView.setTag(holder);
} else {
// if the view still available
gridView = convertView;
holder = (ViewHolder) gridView.getTag();
}
// loading the image with picasso image loader
mPicasso.
.load(BASE_IMAGE_URL + movies.get(position).getPosterUrl())
.resize(500, 750)
.error(R.mipmap.ic_launcher)
.into(holder.movieView);
return gridView;
}
static class ViewHolder{
ImageView movieView;
}
}
gridview xml
<GridView
android:id="#+id/moviesGridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="150dp"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
gridview item layout xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="250dp"
android:id="#+id/imageView"
android:background="#android:drawable/screen_background_dark_transparent"/>
</LinearLayout>
Thanks !
Related
I newly started using Picasso on Android. So I don't understand full it fully. I have an images fragment which works fine and I can see my text and images (mostly). There is no errors. My problem is that I have an array of images that I would like to output. But the problem is it putting one image at position x,y then putting the next image in the same place. It's not putting them in a Gridview format. Does anybody know why please?
My fragment XML
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myPhotos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="00dp"
android:numColumns="auto_fit"
android:verticalSpacing="20dp"
android:horizontalSpacing="30dp"
android:stretchMode="columnWidth"
android:paddingTop="25px"
android:gravity="center"
/>
MyFragment code
public class ImagesFragment extends Fragment {
private View view;
private ImageAdapter imageAdapter;
private GridView gridView;
public ImagesFragment() {
}
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.images_fragment,container,false);
GridView gridView = view.findViewById(R.id.myPhotos);
imageAdapter = new ImageAdapter(getActivity(),3);
gridView.setAdapter(imageAdapter);
return view;
}
}
ImageAdapter
public class ImageAdapter extends BaseAdapter {
//The content of our screen
private Context context;
private ImageView imageView;
private int start;
private Integer[]imagesArray;
//ImageInfo images;
public ImageAdapter(Context context, int start)
{
this.context = context;
this.start = start;
imagesArray = new Integer[4];
imagesArray[0] = 0x55555;
imagesArray[1] = 0x545555;
imagesArray[2] = 0x454454;
imagesArray[2] = 0x121210;
}
public int getCount()
{
return imagesArray.length;
}
public Integer getItem(int position)
{
return imagesArray[0];
}
public long getItemId(int position)
{
return 0;
}
public View getView(int position, View convertView, ViewGroup parent)
{
if (convertView == null)
//Don't put in the constructor
imageView = new ImageView(context);
else
imageView = (ImageView) convertView;
if(start ==0)
//Works fine loads all the images at array index 0
Picasso.get().load(imagesArray[0]).resize(400,600).into(imageView);
else
//WHERE THE PROBLEM IS.. I think.
for(int i=1;i<=start; i++)
Picasso.get().load(imagesArray[i]).resize(400,600).into(imageView);
return imageView;
}
}
The problem here is,you are using convertview for a GridView.Convert view is actually FrameLayout.
Convert your GridView into a Frame Layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_images"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="2">
</GridView>
</FrameLayout>
Then use convertview in picasso
Picasso
.with(context)
.load(imageUrls[position])
.fit() // will explain later
.into((ImageView) convertView);
I am creating a android app where i need to display blog post in recycler-view / card-view grid like attached any examples or suggestion?
or like this one
or like this ?
Grid View Example
I hope this screenshot of my app is a bit close to what you want as shown in your 3rd screenshot. I will show you my source code just for you get an idea.
LAYOUT.XML File This is the layout File
<LinearLayout
android:id="#+id/layer"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/addBttn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"/>
<Button
android:id="#+id/doneBttn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"/>
</LinearLayout>
<GridView
android:layout_below="#id/layer"
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:numColumns="auto_fit"
android:focusable="true"
android:clickable="true"/>**
This is the ADAPTER Class used to fill in the data to GridView
Then you can set the Adapter created to your grid view like this from any of your Activities
public class gridViewAdapter extends BaseAdapter{
private Context context;
private View view;
private LayoutInflater layoutInflater;
private final ArrayList<Uri> Images;
public gridViewAdapter(#NonNull Context context,ArrayList<Uri>images) {
this.context = context;
Images = images;
}
#Override
public int getCount() {
return Images.size();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(convertView == null) {
view = new View(context);
view = layoutInflater.inflate(R.layout.grid_item_layout,null);
ImageView imageView = (ImageView)view.findViewById(R.id.imageView1);
imageView.setImageURI(Images.get(position));
}
return view;
}
}
gridView =(GridView) this.findViewById(R.id.gridView);
gridViewAdapter gridAdapter = new gridViewAdapter(this,imgUriList);
gridView.setAdapter(gridAdapter);
I Created custom grid view with product list based on web service(json).but i facing new issue.when i set size(100dp) for image view height & width it working perfectly.but i set wrap_content or match parent it's view images are blink & blink again..
my fragment class :
public class HorizontalAdapter extends BaseAdapter {
private ArrayList<HomeCategoriesData> mArrayList;
private Context mContext;
private LayoutInflater mLayoutInflater;
public HorizontalAdapter(Activity homeActivity, ArrayList<HomeCategoriesData> mArrayList) {
this.mContext = homeActivity;
this.mArrayList = mArrayList;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mArrayList.size();
}
#Override
public Object getItem(int position) {
return mArrayList.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder mViewHolder;
if (convertView == null) {
mViewHolder = new ViewHolder();
convertView = mLayoutInflater.inflate(R.layout.item_categories_item, null);
mViewHolder.mTvName = (TextView) convertView.findViewById(R.id.tv_categories_name);
mViewHolder.mIvimage = (ImageView) convertView.findViewById(R.id.iv_categories_img);
convertView.setTag(mViewHolder);
} else {
mViewHolder = (ViewHolder) convertView.getTag();
}
mViewHolder.mTvName.setText(mArrayList.get(position).getName());
Picasso.with(mContext).load(mArrayList.get(position).getCat_img()).into(mViewHolder.mIvimage);
convertView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(mContext,mArrayList.get(position).getName(),Toast.LENGTH_SHORT).show();
//calling fragment from adatper class...
SellerSubCategoryFragment frag = new SellerSubCategoryFragment();
FragmentManager fm = ((MainActivity)mContext).getSupportFragmentManager();
Bundle bundle = new Bundle();
bundle.putString("id", String.valueOf(mArrayList.get(position).getId()));
frag.setArguments(bundle);
fm.beginTransaction().replace(R.id.content_frame,frag).addToBackStack(null).commit();
}
});
return convertView;
}
private class ViewHolder {
TextView mTvName;
ImageView mIvimage;
}
}
my adapter class xml file :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_categories_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/tv_categories_name"
style="#android:style/TextAppearance.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_top_categories_name_5"
android:gravity="center"
android:lines="1"
android:textColor="#color/black" />
</LinearLayout>
my out put issue are ,
so what i do? and what is the problem.why i cannot set wrap_content or match_parent in this grid view?. my custom grid view are ExpandapleHeightGridView
I am using TwoWayView library from Lucas to create a horizontal ListView.
Everything works fine on GS3, Galaxy Note 2 Android 4.1.2 & Android 4.3.
However, I installed my app on my coworker Motorola G Android 4.44, and the ListView did not show any image. I can click on them, but I can't see any image. It only shows red or transparent color.
ListView Adpater:
public class ListViewAdapter extends BaseAdapter {
private List<ListViewObject> ObjectList;
private Context mContext;
public ListViewAdapter(Context context, List<ListViewObject> newList){
this.mContext = context;
this.ObjectList = newList;
}
#Override
public int getCount() {
return ObjectList.size();
}
#Override
public ListViewObject getItem(int position) {
return ObjectList.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = new ViewHolder();
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.listview_layout, parent, false);
viewHolder.imageView = (ImageView)convertView.findViewById(R.id.ListViewImage);
viewHolder.layout = (RelativeLayout)convertView.findViewById(R.id.ListViewLayout);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolder)convertView.getTag();
}
Picasso.with(mContext)
.load(getItem(position).getImageUrl())
.resize(100, 100)
.centerCrop()
.into(viewHolder.imageView);
return convertView;
}
class ViewHolder {
RelativeLayout layout;
ImageView imageView;
}
}
ListView Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ListViewLayout"
android:layout_width="52dp"
android:layout_height="43dp" >
<ImageView
android:id="#+id/ListViewImage"
android:layout_width="50dp"
android:layout_height="40dp"
android:scaleType="fitXY"
android:layout_marginLeft="2px"
android:layout_marginTop="2px" />
Main Layout:
<org.lucasr.twowayview.TwoWayView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/TwoWayView"
style="#style/TwoWayView"
android:layout_width="match_parent"
android:layout_height="43dp"
android:layout_marginTop="595dp"
android:background="#color/transparent"
android:drawSelectorOnTop="true" />
MainActivity:
public void ListView_Load() {
for (File file : listFile){
mListViewObject = new ListViewObject();
mListViewObject.setImageUrl("file:///" + file.getAbsolutePath());
ListViewObject_List.add(mListViewObject);
}
listViewAdapter = new ListViewAdapter(this, ListViewObject_List);
TwoWayListView.setAdapter(listViewAdapter);
}
can someone please please guide me on this?
Thank you very much for your help.
This question already has answers here:
Array Adapter Load Images from Res Folder (Android App)
(2 answers)
Closed 7 years ago.
Hello I have been working on android GridView I am unable to arrange my imageviews in the form of the picture
Like this
After working on GridView I can only arrange my images Like this
Unable to understand how to do so and also I want to play different sound after clicking each button..
Here is the code of gridview.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth" >
Here is the mainactivity code
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_layout);
GridView gridView = (GridView) findViewById(R.id.grid_view);
// Instance of ImageAdapter Class
gridView.setAdapter(new ImageAdapter(this));
}
}
Here is the ImageAdapter code
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.alif, R.drawable.baa,
R.drawable.taa, R.drawable.saa,
R.drawable.raa, R.drawable.jeem,
R.drawable.zaal, R.drawable.haa,
R.drawable.zouen, R.drawable.haah,
R.drawable.zowad, R.drawable.hamza,
R.drawable.yaa, R.drawable.daal,
R.drawable.yay
};
// Constructor
public ImageAdapter(Context c){
mContext = c;
}
#Override
public int getCount() {
return mThumbIds.length;
}
#Override
public Object getItem(int position) {
return mThumbIds[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.);
imageView.setLayoutParams(new GridView.LayoutParams(100, 100));
return imageView;
}
First create new item.xml file with this code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="1dp"
android:id="#+id/itemimg"
android:layout_gravity="center"
/>
</LinearLayout>
then please change your adapter class getview method like this :
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = null;
LayoutInflater inflater;
final ViewHolder holder = new ViewHolder();
if (convertView == null) {
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
itemView = inflater.inflate(R.layout.item, null,false);
} else {
itemView = convertView;
}
holder.img = (ImageView) itemView.findViewById(R.id.itemimg);
holder.img.setImageResource(mThumbIds[position]);
return itemView;
}
static class ViewHolder {
ImageView img;
}
hope this help