I would like to build an heterogeneous grid widget in Android like the one is used in apps like Google+ for tablets or Pinterest. I cannot find any tutorial and it seems particularly difficult.
Unfortunately GridView can have only cells of same size while I want to achieve different sizes cells. Can you point me to any good tutorial? I only know that I have to extend AbsListView.
Depending on how variable the items' heights are, you have a few options:
If you're looking to do a GridView with many variations of heights (e.g. Pinterest) you should play around with StaggeredGridView - as far as I can tell, it's the best open source solution out there right now.
In the image you posted, it looks as if there are parent rows with variable height children - this is a slightly easier problem to solve, and can be mimicked by using a regular ol' ListView and a subclass of BaseAdapter. Writing out the code for this is too involved for a SO answer, but i'll give you an overview of how I might achieve this effect.
The BaseAdapter must determine the rough layout of each row ahead of time such that it can report to the listview how many rows it will require - you'll need to override getCount().
In getView() of your adapter, you will inflate a single LinearLayout (or perhaps use convertView if it's been recycled) and add as many children (again, more LinearLayouts) as you will require for the width of the device (you should figure this out at runtime, unless you want to just create a phone and tablet version).
Each child LinearLayout added to the row should be set to weight=1 such that they stretch to the entire width of the parent row. In the screenshot you posted, there are 3 columns (the third id cut off).
Each child LinearLayout you just added to the row represents a column. You should set their orientations to vertical, being as they are columns!
Within each column, if you were to add a single child, you'd have a gridview.
If you wish to achieve the effect above, you can add more items to each column.
For example, row 1, column 1 has one large child. Columns 2 and 3 in row 1 both have 2 half-height children.
Related
I would like to create a grid layout in which each item is taking as much space as possible (minus padding), but only as long as there are columns available (after that the next item would be inserted in the next row while keeping the size). Additionally, each item must be a square and is added dynamically.
Example layout with 10 items would be as follows:
I have tried to achieve this by setting weights, ratio constraints, overriding onMeasure - but I just can't get it to work. I would be happy with either a programmatic or an XML-based solution (as long as each item can be added programmatically). I would prefer the solution to be in Kotlin, but I would be happy with a Java-based one as well.
It's probably worth saying that each item in the grid layout is a layout (RelativeLayout as of now) to make inflating it and setting a layered background drawable programmatically easy.
I think you might be able achieve what you want with a different Layout
Have a look at https://github.com/google/flexbox-layout it has lots of methods to control how the cells grown or shrink and includes automatic or manual wrapping of cells.
Take a look at RecyclerView. You would need to pass GridLayoutManager. This tutorial may or may not help you. For square items, I suggest using CardView but it's not necessary. If you are targeting tablets as well as smartphones, check this out. And for dynamically adding new items, you should notify recyclerView's adapter. See this link. You can also extend RecyclerView or GridLayoutManager for more control over items.
I have been developing android for a while and I have been facing many similar layouts to the one in screenshot (in both iOS and Android)
So what I would like to achieve is the different number of childs in each row.
Well, first I would like to ask is there a specific name for this layout type, it is not gridview although very close to it.
The structure seems like it can be populated with an adapter since all child buttons look alike
Any help, suggestion, solution or example library is much appreciated.
Taken from Foursquare for Android
Since there is a chance of more than two childs (as you said) therefore what i think is that you can't accommodate so many childs as they would not be visible unless the listview row is horizontally scrollable.......I think you can use gallery widget as an item of listview and then you can have different childs in each row... You can google about the gallery widget, instead of images add your custom layout as gallery item.
re: example http://www.youtube.com/watch?v=Ej--SFh963M
Similar to the above app, I am trying to create a scrolling list of images, like a Listview but with images only. (I also need to set it to fill a set height and width, say 85% of the height, 10% of the width of the screen). Is a one column Griview best? (I have had troubles in the past selecting the image height of a gridview programatically).
Any online tutorials precisely for this you have used?
If your view is going to have only one element per row, then the best and correct way of implementation is to use a ListView. The GridView should or can be used when there are going to be multiple elements per row. I believe the purpose of ListView satisfies its role for your need.
For creating a GridView with uneven rows similar to how Pinterest looks. Includes own OnItemClickListener and OnItemLongClickListener, selector, and fixed position restore. Check out this link, there is a library named "StaggeredGridView" : https://github.com/maurycyw/StaggeredGridViewDemo
As there is no text and only one column of buttons, it seems like I overlooked the obvious answer of using a scrollview of buttons, which is what I will go with. Thanks for your assistance.
I am quite new to android, so I apologize in advance for any inconveniences my question may provoke.
I would like to create a listview that looks exactly like this image.
http://www.flickr.com/photos/42311831#N07/10145401953/
The listview would have 2 columns, each having custom views with variable height (represented on the image with rectangular shapes in different colors).
Creating this with 2 different listviews would be quite an easy job.
My approach would be creating 2 listviews and making them kind of "listen" to each-others on-scroll event, and responding to it by scrolling themselves simultaneously. That would mean, if I scroll down one of those 2 listviews, the other one would respond as if I had scrolled it down as well.
I am not sure that this is the right solution, so I would like to ask if anyone has experience with creating a component like this one?
Thank you very much for your time,
Bojan
thaats not a listview its a gridview. a gridview that could be adjusted as per the content in each grids, you can create a simple gridview with fixed size in a same way a you create a linear layout, that is
define a gridview xml
define gridview row xml (this contains textviews, edittext, buttons etc) or from your image it can have colors like red,green,blue etc
you can set number of gridview as 1 while portrait mode and 2 while landscape mode to get what your image is looking
create above xml and in your activity you can inflate it just the way listviews are inflated.
or incase you need grids with uneven sizes check this library
http://www.androidviews.net/2013/01/pinterest-like-adapterview/
i hope im clear and you appreciate my effort :)
I am developing an app and am looking for some general guidance:
The app is a memory trainer, and will have a couple of different modes:
Numbers: Up to 400 digits will be displayed on the screen in a gridlike pattern
Faces: Images of faces will appear, approximately 9 to a page, also in a grid pattern
The question is: can I accomplish this with a single xml layout file, and should I use the same layout type for each (and if so, what should it be!) ? It's a large app, so consistency would be heavenly.
I would prefer a layout with flexibility, and I am leaning toward GridView right now.
Any thoughts?
A Grid view is basically like a list view where items are arranged in a static grid.
It retrieves views from the Adapters as scrolled by user.
A table layout is a layout manager and does not do scrolling if required.this means u have to put it inside a scroll view. This implies that all of the data you are displaying must be populated into the TableLayout up-front, so the ScrollView knows the total space it is to scroll in. It also does not directly give you per-"item" selection or interaction, because a TableLayout doesn't have items, it is just a layout manager.
Also Adapter -based view should be used where significant amount of data is there to be scrolled. So it seems that grid view would be more suitable in the situation u r working.