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);
Related
I'm trying to create an app where I can swipe through photos. I currently have the images saved as bitmaps. How can I use ViewPager to swipe through the images? (Preferably without Picasso or Glide)
You said you have the bitmaps, store it in arraylist. First, make an Adapter for your ViewPager.
public class AdapterPagerImageSlider extends PagerAdapter {
private ArrayList<Bitmap> bitmaps;
private Context context;
private LayoutInflater layoutInflater;
public AdapterPagerImageSlider(Context context, ArrayList<Bitmap> bitmaps) {
this.context = context;
this.bitmaps= bitmaps;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.inflater_imageslider, container, false);
ImageView imageView = view.findViewById(R.id.image);
imageView.setImageBitmap(bitmaps.get(position)); //this set image from bitmap
container.addView(view);
return view;
}
#Override
public int getCount() {
return bitmaps.size();
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
#Override
public boolean isViewFromObject(#NonNull View view, #NonNull Object o) {
return (view == o);
}
}
Then, make a layout and name it inflater_imageslider
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Last, declare that adapter and set it to your ViewPager.
ArrayList<Bitmap> bitmaps = new ArrayList<>();
//code of storing your bitmaps to arraylist here : bitmaps.add(yourbitmap);
ViewPager vp = findViewById(R.id.vp);
AdapterPagerImageSlider adapter = new AdapterPagerImageSlider(MainActivity.this, bitmaps);
vp.setAdapter(adapter);
Hope it helps.
I have an activity which contains a listView. Each item of the listView contains a swipeable set of images (which I have unsuccessfully tried to implement using a ViewPager).
My issue is this: when I try to implement a simple image slider using a view pager (i.e. Activity contains a ViewPager, and the View Pager's adapter supplies the images), the output is as expected, but if I try doing what I have mentioned in the previous paragraph (i.e. The Activity contains a listView and each item of the listView is a ViewPager which displays a swipeable set of images), I get a blank output. Please help me out! I have posted some code below:
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView list = (ListView) findViewById(R.id.stylistDisplay);
//To keep things simple I am sending only one item of the list to the adapter
list.setAdapter(new StylistAdapter(Cart.getList().get(0), this));
}
static class StylistAdapter extends BaseAdapter {
Stylist stylistObj;
Context context;
LayoutInflater inflater;
public StylistAdapter(Stylist obj, Context context) {
this.stylistObj = obj;
this.context = context;
inflater = ((Activity)this.context).getLayoutInflater();
}
#Override
public int getCount() {
return 1;
}
#Override
public Object getItem(int position) {
return stylistObj;
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final ViewItem item;
if (convertView == null) {
convertView = inflater.inflate(R.layout.stylist_photos_view_pager, null);
item = new ViewItem();
item.photosViewPager = (ViewPager) convertView.findViewById(R.id.photos_view_pager);
convertView.setTag(item);
} else {
item = (ViewItem) convertView.getTag();
}
PhotosAdapter adapter = new PhotosAdapter(context);
item.photosViewPager.setAdapter(adapter);
return convertView;
}
private class ViewItem {
ViewPager photosViewPager;
}
}
activity_main.xml
<FrameLayout 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.temp.customer.MainActivity">
<ListView
android:id="#+id/stylistDisplay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:background="#color/backGround"
android:padding="13.3dp"
android:clickable="true"
android:dividerHeight="5dp" />
</FrameLayout>
stylist_photos_view_pager
<RelativeLayout xmlns:android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/photos_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
PhotosAdapter.java
public class PhotosAdapter extends PagerAdapter {
private Context context;
private int[] GalImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.three
};
public PhotosAdapter(Context context) {
this.context = context;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
View viewItem = inflater.inflate(R.layout.stylist_individual_details, container, false);
ImageView imageView = (ImageView) viewItem.findViewById(R.id.iv1);
imageView.setImageResource(GalImages[position]);
TextView textView1 = (TextView) viewItem.findViewById(R.id.tv1);
textView1.setText("hello world");
((ViewPager)container).addView(viewItem);
return viewItem;
}
#Override
public int getCount() {
return 3;
}
#Override
public boolean isViewFromObject(View view, Object object) {
boolean temp = view == ((LinearLayout) object);
return temp;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((LinearLayout) object);
}
}
I've experienced similar issue, and have to say that it is a bad idea to use ViewPager as a listItem, since ViewPager is supposed to be used for fragments primarily.
I guess that your functionality should be similar to some horizontal pictures, on the main feed which is vertical. You can think of using horizontal scroll views which is a bit of a pain, but still more realistic to do that. You might also end up managing your own scrolling behavior, which might already be implemented by some libraries.
BUT I MIGHT BE WRONG!
This thread has a similar issue:
Placing ViewPager as a row in ListView
After reading around for a while I tried explicitly setting the height of the viewPager and its parent. This worked for me.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="200dip"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="200dip" >
</android.support.v4.view.ViewPager>
</LinearLayout>
I don't know if there is a better solution, but if you do get a better solution please comment!
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 !
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
I am trying to use the GridView to create a set of Image buttons.
I am using an array list to store the images. Every time an image is assigned to a button through the getView() method, the images array list is reduced by one.
my problem is that only one button is shown in my grid! I am not sure if this is because the getView() method is called more than one time for each button. If so, I guess the array of images becomes empty before all buttons are assigned.
Any help is appreciated.
here is my code
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridView1"
android:layout_width= 'fill_parent'
android:layout_height= 'fill_parent'
android:numColumns="auto_fit"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
item_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="35dp"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
/>
</RelativeLayout>
Images as assigned randomly to the buttons and then removed from the list:
the assignImag()e method is in the MainActivity class and is called every time from the getView() method of the adapter class:
public class MainActivity extends Activity {
ArrayList imgs = new ArrayList();
GridView gridView;
.....
......
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ButtonAdapter(this));
}
public class ButtonAdapter extends BaseAdapter
{
private Context context;
ImageButton imageButton;
public ButtonAdapter(Context c)
{
context = c;
}
//---returns the number of images---
public int getCount() {
return imgs.size();
}
//---returns the ID of an item---
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent)
{
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null) {
gridView = new View(context);
gridView = inflater.inflate(R.layout.item_layout, null);
imageButton = (ImageButton) gridView.findViewById(R.id.button1);
// assign image to the button
assignImage(imageButton);
} else {
gridView = (View) convertView;
}
return gridView;
}
}
}
public void assignImage(ImageButton b){
Random generator = new Random();
int index = generator.nextInt(imgs.size());
b.setContentDescription(imgs.get(index).toString());
b.setBackgroundResource(imgs.get(index));
imgs.remove(index);
}
}
Modify your adapter like this:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4,
-----
R.drawable.imgN
};
// 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.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(67, 55));
return imageView;
}
}
No need to create separate layout for each image in the gridView