How do I create an interactive GridView using Picasso for Android? - android

Hi I'm trying to create a GridView using images from an online depository using Picasso.
I also want the user to be able to click on the image and it load up full screen to view.
So far I have managed to get it working almost perfectly. The only problem is the image that shows when they click on the grid is not the one that they clicked on, in fact it randomly chooses an image each time.
I was hoping somebody could take a look at my code and tell me where I am going wrong.
Thanks.
So this is my MainActivity class:
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gv = (GridView) findViewById(R.id.grid_view);
gv.setAdapter(new GridViewAdapter(this));
gv.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
// passing array index
i.putExtra("id", position);
startActivity(i);
}
});
}
}
This is my GridView class:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import static android.widget.ImageView.ScaleType.CENTER_CROP;
final class GridViewAdapter extends BaseAdapter {
final Context context;
final List<String> urls = new ArrayList<String>();
public GridViewAdapter(Context context) {
this.context = context;
// Ensure we get a different ordering of images on each run.
Collections.addAll(urls, Info.URLS);
Collections.shuffle(urls);
// Triple up the list.
ArrayList<String> copy = new ArrayList<String>(urls);
urls.addAll(copy);
urls.addAll(copy);
}
#Override public View getView(int position, View convertView, ViewGroup parent) {
SquaredImageView view = (SquaredImageView) convertView;
if (view == null) {
view = new SquaredImageView(context);
view.setScaleType(CENTER_CROP);
}
// Get the image URL for the current position.
String url = getItem(position);
// Trigger the download of the URL asynchronously into the image view.
Picasso.with(context) //
.load(url) //
.placeholder(R.drawable.placeholder) //
.error(R.drawable.error) //
.fit() //
.into(view);
return view;
}
#Override public int getCount() {
return urls.size();
}
#Override public String getItem(int position) {
return urls.get(position);
}
#Override public long getItemId(int position) {
return position;
}
}
And finally my FullScreen Class:
import com.squareup.picasso.Picasso;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class FullImageActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);
// get intent data
Intent i = getIntent();
// Selected image id
int position = i.getExtras().getInt("id");
GridViewAdapter ia = new GridViewAdapter(this);
ImageView iv = (ImageView) findViewById(R.id.full_image_view);
Picasso.with(this) //
.load(ia.getItem(position)) //
.placeholder(R.drawable.placeholder) //
.error(R.drawable.error) //
.fit()
.centerCrop()//
.into(iv);
}
}

I believe this is your culprit:
Collections.addAll(urls, Info.URLS);
Collections.shuffle(urls); // this reshuffles on every new instance
GridViewAdapter ia = new GridViewAdapter(this); // your full screen activity is creating a new instance.
Since I cannot comment yet, the answer is No. When you say startActivity, it will create a new instance of the FullScreenActivity, and then in that FullScreenActivity you are also instantiating a new Adapter which in turn does the shuffle work.
Please put in a breakpoint if you are in doubt.

You reinitialized the adapter for whatever reason here GridViewAdapter ia = new GridViewAdapter(this); That's when the shuffling occurs, in the constructor.
You should not have an adapter in your 2nd Activity. Adapters are for lists. You should simply pass that Activity the image URL.
GridView gv = (GridView) findViewById(R.id.grid_view);
GridViewAdapter adapter = new GridViewAdapter(this);
gv.setAdapter(adapter);
gv.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
// Sending image url to FullScreenActivity
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
i.putExtra("url", adapter.getItem(position));
startActivity(i);
}
});
and
public class FullImageActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);
// get intent data
Intent i = getIntent();
string url = i.getExtras().getString("url");
ImageView iv = (ImageView) findViewById(R.id.full_image_view);
Picasso.with(this) //
.load(url) //
.placeholder(R.drawable.placeholder) //
.error(R.drawable.error) //
.fit()
.centerCrop()//
.into(iv);
}
}

You are creating an adapter twice - once in MainActivity, second time in FullImageActivity. Each time it is created shuffled, that's the reason. Nice copy-paste from Picasso sample btw ;)

Related

Android: How to format getIntent().getIntExtra

I am trying to retrieve the image resource file in another class, the intent putExtra has been placed in the MainActivity but I'm not sure how to retrieve that in the other class? I've tried getIntent().getIntExtra("category", search_name); but I just get errors. The idea is that the user claiks on the photo of a recipe category and then in the other class I can match that resource image file to the category name and retrieve the corresponding recipes.
Also this gridview slows down the app, how would I wrap and call this in an Async?
MainActivity
GridView gv = findViewById(R.id.gridview);
gv.setAdapter(new SetImageAdapter(this));
gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Intent intent = new Intent(MainActivity.this, Category.class);
intent.putExtra("Category", SetImageAdapter.categories[position]); // put image data in Intent
startActivity(intent); // start Intent
}
});
GridView Adapter
package com.stu54259.plan2cook;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class SetImageAdapter extends BaseAdapter {
public static Integer[] categories = {
R.drawable.african, R.drawable.american,
R.drawable.asian, R.drawable.comfort,
R.drawable.desserts, R.drawable.greek,
R.drawable.italian, R.drawable.vegetarian,
R.drawable.mexican,
};
private Context Cont;
public SetImageAdapter(Context c) {
Cont = c;
}
public int getCount() {
return categories.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imgview = new ImageView(Cont);
imgview.setLayoutParams(new GridView.LayoutParams(370, 250));
imgview.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgview.setPadding(10,10,10, 10);
imgview.setImageResource(categories[position]);
return imgview;
}
}
In your MainActivity :
GridView gv = findViewById(R.id.gridview);
gv.setAdapter(new SetImageAdapter(this));
gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Intent intent = new Intent(MainActivity.this, Category.class);
intent.putExtra("CategoryPosition", position); // put image data in Intent
startActivity(intent); // start Intent
}
});
In your Category activity :
int position = getIntent().getIntExtra("CategoryPosition",0);
int selectedDrawable = SetImageAdapter.categories[position];
//Get name of the selected drawable :
String search_name = getResources().getResourceEntryName(selectedDrawable);
The possibility reason why the performance of your GridView is slow is the drawable resource size, make sure that all image used has a small resolution as well as smaller size.

how to show full size image on clicking thumbnail in gridview

In my project i want that whenever anyone clicks on thumbnail , full size image should open in an activity which user can zoom . but facing problem in passing the url of image (i used arraylist).
below is the code
import android.content.Intent;
import android.database.Cursor;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import java.util.ArrayList;
public class NoticeList_Seminar extends AppCompatActivity {
GridView gridView;
ArrayList<Notice_Activity_Seminar> list;
Notice_List_Adapter_Seminar adapter_seminar = null;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.noticelistlayout_seminar);
gridView = (GridView) findViewById(R.id.gridView);
list = new ArrayList<>();
adapter_seminar = new Notice_List_Adapter_Seminar(NoticeList_Seminar.this, R.layout.noticeitemslayout_seminar, list);
gridView.setAdapter(adapter_seminar);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//Intent intent = new Intent(getApplicationContext(), FullImageActivity.class);
// passing array index
//intent.putExtra("id",i);
//startActivity(intent);
Toast.makeText(getApplicationContext(),"full image", Toast.LENGTH_SHORT).show();
}
});
Cursor cursor = App_Activity_Seminar.sqLiteHelper_seminar.getData("SELECT * FROM NOTICE_SEMINAR");
list.clear();
while (cursor.moveToNext()) {
int id = cursor.getInt(0);
String name = cursor.getString(1);
String date = cursor.getString(2);
byte[] image = cursor.getBlob(3);
list.add(new Notice_Activity_Seminar(id, name, date, image));
}
adapter_seminar.notifyDataSetChanged();
}
}
code for FullImage activity
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import static com.example.shakshi.demo.R.id.imageView;
public class FullImageActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);
// get intent data
Intent i = getIntent();
// Selected image id
int pos = i.getIntExtras("position",0);
imageView.setImageResource(Notice_List_Adapter_Seminar.noticeList[pos]);
/* Intent i = getIntent();
// Selected image id
int position = i.getExtras().getInt("id");
Notice_List_Adapter_Seminar imageAdapter = new
Notice_List_Adapter_Seminar(FullImageActivity.this);
ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
imageView.setImageResource(Notice_List_Adapter_Seminar.noticeList[position]);
}
}
changes i have done
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int
i, long l) {
String url = String.valueOf(adapterView.getItemAtPosition(i));
Intent intent = new Intent(NoticeList_Workshop.this,
FullImageActivity.class);
intent.putExtra("url", url);
startActivity(intent);
}
});
in Full Image Activity
String url = getIntent().getExtras().getString("url");
ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
imageView.setImageResource(Integer.parseInt(url));
Use gridViewOnClickListener and Intent.
GridView grdview = (GridView) findViewById(R.id.gridview);
grdview.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
String url = list.get(position);
Intent intent = new Intent(FirstActivity.this, SecondActivity.class);
intent.putExtra("url", url);
startActivity(intent)
}
});
In SecondActivity onCreate() method,
String url = getIntent().getExtras().getString("url");
Set the Source of Imageview = url;
If you are using Gridview. You get onItemClickListener which also gives you the position of the item which got clicked. So in your onItemClickListener you can get the image url from the arraylist at that position and pass it to your next activity.
And if you are using Recyclerview then you can use callback pattern and using that you can send the same url as a String on which the user has clicked to the containing activity. You can then pass this url to the next activity.

How To Load Separate Pages In Android Gridview While Clicking Blocks or Items?

I want to load separate pages while clicking on Gridview blocks. By clicking Gridview Items , i want to load a full page that will be contained image or some description. I have set the gridview basic settings. Is it possible or how can i do that for a descriptive page viewing while clicking gridview blocks-items in android.
package com.android20.personalities;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.app.Activity;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gv = (GridView) findViewById(R.id.gridView);
gv.setAdapter(new ImageAdapter(this));
gv.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)
{
}
});
}
}
The Java class of ImageAdapter
package com.android20.personalities;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
Context imgCntxt;
public ImageAdapter(Context c)
{
this.imgCntxt= c;
}
#Override
public int getCount() {
return images.length;
}
#Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
#Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imgview;
if(convertView==null)
{
imgview = new ImageView(imgCntxt);
imgview.setScaleType(ImageView.ScaleType.FIT_XY);
}
else
{
imgview = (ImageView) convertView;
}
imgview.setImageResource(images[position]);
return imgview;
}
public Integer[] images =
{
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4,
R.drawable.image5,
R.drawable.image6,
R.drawable.image7,
R.drawable.image8,
R.drawable.image9,
R.drawable.image10
};
}
Onclick of gridview item you can start new activity load content by passing griditem position., or by checking position add content in intent
you can add onClickListner in Image adapter itself and do the stuff in your coding to go to other activity with position and write code for showing image with full screen .
Check this might be helpful http://www.androidhive.info/2013/09/android-fullscreen-image-slider-with-swipe-and-pinch-zoom-gestures/

how to add images in array from sd card instead of drawable

i am working on a image GridView app in which i am adding images in array from drawable, but now i want to add images in array from sd card.
note: i want to add images from specific folder like: "sdcard/android/data/com.example.images"
GridView Class
package com.example.androidhive;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
public class AndroidGridLayoutActivity 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));
/**
* On Click event for Single Gridview Item
* */
gridView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(),
FullImageActivity.class);
// passing array index
i.putExtra("id", position);
startActivity(i);
}
});
}
}
ImageAdapter Class:
package com.example.androidhive;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
// R.string.http_icons_iconarchive_com_icons_martz90_circle_512_android_icon_png
R.drawable.pic_1, R.drawable.pic_2, R.drawable.pic_3,
R.drawable.pic_4, R.drawable.pic_5, R.drawable.pic_6,
R.drawable.pic_7, R.drawable.pic_8, R.drawable.pic_9,
R.drawable.pic_10, R.drawable.pic_11, R.drawable.pic_12,
R.drawable.pic_13, R.drawable.pic_14, R.drawable.pic_15 };
// 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(70, 70));
return imageView;
}
}
example of what i want:
// Keep all Images in array
public Integer[] mThumbIds = {
// how to add images from sd card here
};
how do i add images to array from sd card instead of drawable.
Just put all filenames from that specific folder in a ArrayList<String>. Then change getView() a bit to let the ImageView load from file.
You can create a Drawable from a Bitmap, you should check out a library like "Universal Image Loader" and then use
Drawable d = new BitmapDrawable(getResources(),bitmap);

values arent being passed to intent

Stack Trace
Picture of stack trace here
Values aren't being passed to the other intent. Every time I try to start the activity with the intent in it, it crashes.
//This activity will retrieve and display the different rewards that are available.
public class RewardsActivity extends Activity {
#Override
public void onCreate(Bundle SavedInstanceState)
{
super.onCreate(SavedInstanceState);
setContentView(R.layout.rewards);
//stores retrieves and stores the current gridview
GridView gridView = (GridView)findViewById(R.id.grid_view);
//Instance of ImageAdapter class that will load the images into the gridview
gridView.setAdapter(new ImageAdapter(this));
//This function is used to set a listener on each item in the grid so that when its clicked it will go to the other view.
gridView.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView<?> parent, View v,int position, long id)
{
Intent i = new Intent(getApplicationContext(),RewardsViewActivity.class);
i.putExtra("id", position);
startActivity(i);
}
});
}
This new intent is being passed to, when it's passed here it is stored in a variable then used in a ImageView to load an image.
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class RewardsViewActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_view);
// get intent data
Intent i = getIntent();
// Selected image id
int position = i.getExtras().getInt("id");
ImageAdapter imageAdapter = new ImageAdapter(this);
ImageView imageView = (ImageView) findViewById(R.id.full_image);
imageView.setImageResource(imageAdapter.finalImages[position]);
}
}
ImageAdapter.java
package org.android.pps;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
/*This class will be used handle the loading of the image view that will display all the
images of the rewards. (this will be used along with RewardsActivity and rewards.xml)
*/
public class ImageAdapter extends BaseAdapter {
//variable that will store the current context of the application
private Context c;
private Integer num = 6;
private int[] rewards_num=new int[num];
private Integer[] Images = new Integer[6];
public Integer[] finalImages;
//for loop will set the correct image to the array if its either activated or deactivated
public Integer[] fillImageArray()
{
//Array that will be used to show the reward images
Integer[] Activated ={
R.drawable.rewards1,
R.drawable.rewards2,
R.drawable.rewards3,
R.drawable.rewards4,
R.drawable.rewards5,
R.drawable.rewards6,
};
Integer[] Deactivated ={
R.drawable.rewards1b,
R.drawable.rewards2b,
R.drawable.rewards3b,
R.drawable.rewards4b,
R.drawable.rewards5b,
R.drawable.rewards6b,
};
//for loop that checks to see all the rewards that a particular users has to assign a particular image.
for(int x = 0;x<rewards_num.length;x++)
{
for(int y = 0;y<6;y++)
{
if(rewards_num[x]==y)
{
Images[x]=Activated[y];
}
else
{
Images[x]=Deactivated[y];
}
}
}
return Images;
}
//constructor with the context being passed.
public ImageAdapter(Context m)
{
c = m;
}
public int getCount() {
return 6;
}
public Object getItem(int position) {
return Images[position];
}
public long getItemId(int position) {
return 0;
}
// The function View create a new ImageView for each item that is being referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
finalImages = fillImageArray();
ImageView imageView = new ImageView(c);
imageView.setImageResource(finalImages[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(300, 300));
return imageView;
}
}
finalImages in noi initialized there .........
it is finalImages in the getview which is not get called in 2nd activity (RewardsViewActivity )...........
if possible move this line to constructor finalImages = fillImageArray();

Categories

Resources