I am developing an application with Gallery option. I have some set of URL's in JSON. I already parse it and saved in String ArrayList. Now I just want to display those images in GalleryView. I have gone through various references which are not helpful. I have used UniversalImageLoader as well, It worked for one URL only.I need to load multiple URL's which is present in my ArrayList. Kindly give me some tips to achieve it.
UPDATED
This is my Gallery Activity class
public class Gallery extends AppCompatActivity {
public ArrayList<GalleryItem> imageURL;
private ImageView selectedImageView;
ArrayList<Drawable> dataDraw= new ArrayList<>();
private GridView mGridView;
public Gallery gallery;
private GalleryImageAdapter galImageAdapter;
public String url="my_url";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallery);
mGridView = (GridView) findViewById(R.id.galleryGrid);
imageURL=new ArrayList<>();
new AsyncHttpTaskforGallery().execute(url);
// galImageAdapter = new GalleryImageAdapter(this, dataDraw);
galImageAdapter=new GalleryImageAdapter(this,R.layout.gallery_item,imageURL);
mGridView.setAdapter(galImageAdapter);
}
public class AsyncHttpTaskforGallery extends AsyncTask<String, Void, Integer> {
@Override
protected Integer doInBackground(String... params) {
Integer result = 0;
try {
HttpClient httpclient = new DefaultHttpClient();
HttpResponse httpResponse = httpclient.execute(new HttpGet(params[0]));
int statusCode = httpResponse.getStatusLine().getStatusCode();
if (statusCode == 200) {
String response = streamToString(httpResponse.getEntity().getContent());
parseResult(response);
result = 1;
}
else {
result = 0;
}
} catch (Exception e) {
Log.d("TAG", e.getLocalizedMessage());
}
return result;
}
@Override
protected void onPostExecute(Integer result) {
if (result == 1) {
galImageAdapter.setGridData(imageURL);
}
else {
}
}
}
String streamToString(InputStream stream) throws IOException {
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(stream));
String line;
String result = "";
while ((line = bufferedReader.readLine()) != null) {
result += line;
}
if (null != stream) {
stream.close();
}
return result;
}
private void parseResult(String result) {
try {
JSONArray posts = new JSONArray(result);
GalleryItem galleryItem;
for (int i = 0; i < posts.length(); i++) {
JSONObject post = posts.optJSONObject(i);
String path = post.optString("path");
String newText=path.replace("\\", "/");
String image="http://***/"+newText;
Log.e("imageURL", image);
galleryItem=new GalleryItem();
galleryItem.setImage(image);
imageURL.add(galleryItem);
}
}
catch (JSONException e) {
e.printStackTrace();
}
}
}
GalleryAdapter
public class GalleryImageAdapter extends ArrayAdapter<GalleryItem> {
private Context mContext;
private int layoutResourceId;
private ArrayList<GalleryItem> mGalleryData = new ArrayList<GalleryItem>();
public GalleryImageAdapter(Context mContext, int layoutResourceId, ArrayList<GalleryItem> mGalleryData) {
super(mContext, layoutResourceId, mGalleryData);
this.layoutResourceId = layoutResourceId;
this.mContext = mContext;
this.mGalleryData = mGalleryData;
}
public void setGridData(ArrayList<GalleryItem> mGalleryData) {
this.mGalleryData = mGalleryData;
notifyDataSetChanged();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
ViewHolder holder;
if (row == null) {
LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.imageView = (ImageView) row.findViewById(R.id.IMVgallery);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}
GalleryItem item = mGalleryData.get(position);
Picasso.with(mContext).load(item.getImage()).into(holder.imageView);
return row;
}
static class ViewHolder {
ImageView imageView;
}
}
Displaying Images in gridview is not looking good. I need to display in galleryview and on clicking the image, it should expand.
GalleryView -> Use a RecyclerView with GridLayoutManager
Then in your RecyclerView Adapter's ViewHolder initialisation, load the image in to the respective ImageView using Picasso library.
Now what happens in when a User clicks on individual images? Are you planning to open it in a full screen view?
If yes, use ViewPager for the same. Again use the similar technique. Use Picasso to load image in the respective ImageView in your ViewPager adapter.
For picasso library, refer to: http://square.github.io/picasso/
Let me know if you need more help with this.
UPDATE:
Try to find out how to implement a RecyclerView with GridLayoutManager
Your recyclerview item view should have an imageview in it, which you will populate with the image using Picasoo library in ViewHolder's initialisation.
In onClick of ImageView -> Open another activity with the same set of URIs and use these URIs to populate the ViewPager with these images.
UPDATE 2:
Lets say, your Gallery's Adapter is "MyAdapter". It should something like this:
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private Context mContext;
private ArrayList<String> mUrls;
public MyAdapter(Context context, ArrayList<String> urls) {
mContext = context;
mUrls = urls;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_gallery_item_layout, null);
MyViewHolder rcv = new MyViewHolder(layoutView);
return rcv;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Picasso.with(mContext).load(mUrls.get(position)).into(holder.mImageView);
//Do something here
}
@Override
public int getItemCount() {
return mUrls.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder{
private final ImageView mImageView;
//Other views
public MyViewHolder(final View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.gallery_item_imageview);
mImageView.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view){
//This is were the magic happens:
//We are opening the full image viewer activity that contains a ViewPager to show the images
Intent intent = new Intent(mContext, MyFullViewActivity.class);
intent.putStringArrayListExtra("urls", mUrls);
intent.putInt("starting_index", getPosition());
mContext.startActivity(intent);
}
});
//Initialize other views here
}
}
}
Note that in ImageView's onCLick, we will start another activity "MyFullViewActivity", this activity has a ViewPager with an imageview in the item layout. We are also passing two intent extras to this activity:
"urls" : This is the list of urls that will be used by the ViewPager
"starting_index" : It will tell the activity to start at the index provided in this value. i.e. If user clciks on 2nd image in your gallery, the MyFullViewActivity should start with that index, rather than starting with the first index everytime.
Now you can implement a ViewPagerAdapter and change the images accordingly (using Picasso as described in the above example).
Let me know in case you need more help with this.
UPDATE 3:
Here is how you initialize the recyclerview:
RecyclerView mGalleryViewRecyclerView = findViewById(R.id.my_gallery_recycler_view);
GridLayoutManager mGridLayoutManager = new GridLayoutManager(mContext, 2); // here 2 indicates the number of columns in each row.
mGalleryViewRecyclerView.setLayoutManager(mGridLayoutManager);