Multi-column image grid with dynamic loading in android - android

I want to load list of images from the server.
1) I prefer if I can use the screen space optimally by adjusting the image columns.
2) User should be able to click each image individually and navigate to the next screen.
3) Further, when the screen first loads, I would like to load few image slots with loading image and replace them when we get the data from the server. It will add additional image slots as well (i.e after replacing first few) based on the data. so that user can see we are waiting for the data.
See below
What I already tried.
1) Using custom list view and adapter approach (http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/), I created a layout with two listviews, acting as two columns and loaded images each one separately. Issue is user will see two scrollbars when image list is long. Also cannot adjust the number of columns based on screen size.
2) Same custom list view with, row layout having two imageviews. Issue here is user cannot click individual imageview.
I was not able to replace images to implement the third requirement.
How can I implement this. Are there any resources/controls I can use.
Thanks
Pa

I would probably use a gridview and an adapter for the gridview items. Just load a local image for loading to the imageview of the griditems and replace them with the images from the server

Related

Design a Grid view with categories and load images on demand in android

I want to create a grid view similar to the image shown below. The category panel
can be scrolled horizontally and has a list of items. When clicked on a category the grid view is loaded dynamically and selected category is underlined/highlighted. Grid also loads images on scroll vertically as well.
Currently, I download a xml with images to a gridview and use Picasso library to load images.
What I want to know is
1) how to add the categorizing to my current implementation?
2) Do I load a single xml with categories and image list first and then load images after or do I keep a xml per category.
3) How do I manage the grid adapter when user clicks on different categories
4) How do I design the category scroll view at top?
Well, after reading the question thoroughly your not asking for a Solution, your asking a Suggestions !!
So, i come up with some approaches to guide you regarding the implementation.
As you mentioned in your question, you have different different categories and each of the category having the grid of images. one main hing is like you can select the category / you can swipe the grid view to change another category in your app.
Why not, these all you can do. Did you used Fragments & ViewPager ?
by combination of Using ViewPager with FragmentPagerAdapter you can achieve the same what your planning.
Here i am explaining you in details >>
your category size is fixed ?
if yes you can make static fragments for those. if it is not fixed in a size / order then you can create PageAdapter with the list of your categories and set that adapter to your view pager in home screen
Now you have a categories, After that you can create a corresponding fragment activity to hold a gridview and based on the page adapter position you can load the categories into the gridview
Here your all fragments having the same gridview, so you easily control it by using vie pager and respective gridview loading and controls you can made in the fragment.
By using this, there is no way of creating such no of xml files & classes as you mentioned in the question. It is a simple and easy way to handle
The big advantage in this approch is like, you no need to bother about the size of categories (as your making as adapter, 35,50,100 that number go's on) it will add the categories to your view pager
fragment loading also you can make a single fragment and re-use the same in all over application as every category having the same grid view .
Here is a sample example to use the fragments with gridviews in a view pager and this
Also you can find a lot of examples in SOF like this..
if you find any difficulty then come with a piece of code/trail what you did and ask in SOF.
Let me if any clarifications required.

Android: Is this just a custom ListView?

Feed in Four Square android app looks like this:
A rectangular box with actual post, below which is a Text like 10 people like this and so on.
Is this just a listView with Actual content having margins and a different background, and TextViews below it.
Because when i had a complicated ListView with an ImageView and 5-6 TextViews, it takes lot of time to load the UI.
1 of my friends who work on iOs said Instead of Custom ListView Items, use ImageView which look like a Custom View with images and textviews. Which makes loading lot faster. But ofcourse it takes lot to implement such thing.
I just want to know, if its just another custom listview?
And that my delay to load the UI is because of someother reason?
Such techniques are available in android too??
Thank You
Could be a ListView with complicated children views. Could also be an ExpandableListView.
There's a few reasons why it may load faster than something you've used before:
The images were probably already cached on the file system, so it loads from local storage rather than downloading the image.
The images were already the correct dimensions, so no resizing was needed.
Image loading was done on a background thread as to not lag the UI while images were being loaded into memory.
You could expand a complex layout for each ListView item in Adapter.getView() and remove (View.setVisibility(View.Gone)) on the views you don't need based on the item's object you want to render.
If you want to reuse the expanded layout don't forget to set the visibility of everithing again to View.VISIBLE.
I'm already doing this in my code:
if (post.getImageURL() != null && !post.getImageURL().isEmpty()) {
holder.image.setVisibility(View.VISIBLE);
holder.image.setScaleType(ScaleType.FIT_CENTER);
displayImage(post.getImageURL(), holder.image);
} else {
holder.image.setVisibility(View.GONE);
}
In this case I'm hidding an optional image.

displaying data in ListView programmatically

I'm developing an Android App and I need to display some data in a scrollable Listview.
I will extract some strings from objects that I right now have stored in linked lists (until i come up with a better solution).
I want to display a view that looks almost like the contacts app. A list with a small picture to the left and a larger text to the right of the picture with a smaller text the bigger one. When I click on one of the items it should open a new activity.
How do I create the view? If I adds an object in the linked list it should appear in the list.
I have checked some sample code, but they all uses Arrayadapter and I dont understand how I am supposed to do.
Check this article about Adapters: http://www.vogella.com/articles/AndroidListView/article.html
If you want to add new objects in ListVew use:
adapter.notifyDataSetChenged();
Check the libraries in this question, you have what you need there:
Lazy load of images in ListView

Change ImageView content within a GridView in Android

I am new to Android and Java. I am building an app that allows users to push a button which launches an image chooser where they can select from images on the sd card. The app loads with a grid view with 2 cells. One cell has an image view that has a default image. The other is the button. Once, the image is chosen, the image view needs to be displayed in the Image View of the Grid View.
I am using a string path that is being decoded from the images uri to create a bitmap. I then am calling imageView.setImageBitmap(bitmap). This is doing nothing. I have tried updating the image resource with a different image in the drawable folders and still nothing. I added a seperate image view just under the grid in my activity, and that image is updating fine which leads me to believe that this has to do with the grid view (this is my first grid view).
Any help is very much appreciated.
Thank you.
GridView is maybe not the right choice if you've only got two cells. You will probably have an easier time with a simple LinearLayout that has the two items you're dealing with.
But, here's how you do it with a GridView:
Create your adapter by extending BaseAdapter. The most important method is getView(), but it's where you should be doing the least amount of work.
When the GridView goes to redraw itself, it'll go through for each visible position and call getView() for each one. You'll be supplied a View. If the view is null, inflate a new one from your XML resources, populate it, and return it. If the view is NOT null, populate the existing one with the appropriate data. The widget is being efficient by recycling views.
The trick you need is that when you want the image to change, you need to call notifyDataSetChanged() on your adapter in order to trigger the redraw (which is when you'll populate the new image in the view for the appropriate cell).
That's the two-minute version. At Google I/O a year or two back, they did a talk on The World of ListView and posted it on YouTube. It was a good talk and pretty much everything there applies to GridView as well.

Image in a custom List Android

I have created a custom adapter to display a list, there is an image that is displayed in each row ( the image is the same for all rows, except using an array i am assigning it different values depending on the position). An xml file defines the relative layout that i am using. My problem is that i can either get the entire row to be clickable or nothing at all, I only want this image to be clickable, instead of the entire row. How would i be able to do this ? i am new to android and am pretty much following different tutorials trying to create my list. Any help would be appreciated.
layout is like this :
TEXT:
[Image]
TEXT:
thats wat a row looks like...getting two texts from two different arrays and shows it, a third array is used to link to the image. I just want this image to be clickable instead of the entire row.
Thanks
Android's list component manages clicks per row. This makes it very difficult to achieve what you want to do. Two solutions come into mind:
1) If your list is never very long you could simply use linear layout and scroll view to build the list. This approach won't work if you fill in the list dynamically and you can't be sure that there won't be a very large number of rows as it would use too much memory in that case.
2) Other option is to use ListView but make your text components and images different view types in list ie. break you row into three.
That can be achieved overriding list adapter's getItemViewType(int)
http://developer.android.com/reference/android/widget/Adapter.html#getItemViewType(int)
In this approach you can make the image rows clickable but the text rows not.

Categories

Resources