android - How to make gridView like this - android

I was wondering how can I make a gridView like this .As you can see in this image ,it's a very beautiful gridView but I don't know how can I make one .
is this a gridView or something else ?

For varying columns and rows in a GridView, you can use this library:-
https://github.com/felipecsl/AsymmetricGridView
For writing text over images, use custom adapter with layout inflater.

This is called Staggered gridview. Try any one of these libraries
https://github.com/etsy/AndroidStaggeredGrid
https://github.com/maurycyw/StaggeredGridView
https://github.com/jacobmoncur/QuiltViewLibrary
https://github.com/bulletnoid/StaggeredGridView

In the custom Adapter implement the following functions to create separate views
#Override
public int getViewTypeCount() {
return 3;
}
#Override
public int getItemViewType(int position) {
return position % 3;
}

Related

GridLayout multiple grid sizes

Hi I'm trying to make a activity where the size of each grid it 1*1 and occasionally an 2*2 grid appears.
Here's What I'm trying to achieve:
I am using recycler view to populate my layout.
here is my staggered grid StaggeredGridLayoutManager staggeredGridLayoutManager=new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
I tried using different layouts but I didn't get what I wanted.thanks in advance.
If you all items have the same size (as a grid) you can use a GridLayoutManager and you can use the method setSpanSizeLookup(SpanSizeLookup) to change the default span (=1).
Something like:
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
return // your implementation ...... ;
}
});
You can use FlexboxLayoutMananger
Here you can find the usage:
https://github.com/google/flexbox-layout/blob/master/README.md#flexboxlayoutmanager-within-recyclerview

Is there a way to populate a RecyclerView row with more than one ViewHolder object? What should the adapter implement?

I am implementing a recycler view with two ViewHolder types. After creating the first item as first-type view holder, I have a list of items of the same, second type. Now, I would like to juxtapose the second type items in order to define a two-column recycler view list considering the second type. Is it possible to do that? I have no idea of what should be implemented in the adapter and honestly I have found no good suggestions here. I guess I might not post my adapter code, since I don't know whether it is possible to do what I aim, I hope a conceptual answer may be sufficient too. I have an image, made with a not good image editor of my smartphone, I hope it is clear:
I am late but I found out a solution.
I associate to the recyclerview a GridLayoutManager with span count = 2.
Since I have, at the top of the recyclerview, an EditText (I use it as a search bar), as you can see in the image, I have to set the lookup of the grid. This is done by setSpanSizeLookup(). So, in the onViewCreated() method of my fragment class that initializes the recyclerview (I have a Fragment hosting the recyclerview), I insert the following code:
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
int type = adapter.getItemViewType(position);
if (type == RecyclerAdapter.SEARCH)
return 2;
else
return 1;
}
});
recyclerView.setLayoutManager(gridLayoutManager);
where the part "if (type == RecyclerAdapter.SEARCH) return 2;" means that the view holder for the search bar is going to occupy one whole row, 2 grid cells (since the span = 2).
In my recyclerview adapter, the method getItemViewType is essential:
#Override
public int getItemViewType(int position) {
if (position == 0)
return SEARCH;
else
return DESCRIPTION;
}
where SEARCH and DESCRIPTION are two static final variables.

Android expandable recycler view with grid layout manager, with specific expanding behaviour

I want to use an expandable recyclerview with grid layout manager, but with specific expanding behaviour which expand to the full width of the screen.
Is there any way or maybe libraries to achieve this? Thank you.
You need to add a transformation in your ViewHolder. Check this post: link
I donĀ“t know if Christopher's link allows for the expandable to occupy the whole 2 grids. There might be a way using a combination of getItemViewType(), and setSpanSizeLookup().
#Override
public int getItemViewType(int position) {
if (position == positionOfClickedItem + 2){
return TYPE_EXPANDABLE;
} else {
return TYPE_CAR_ITEM;
}
}
Bind the data according to its position, and carry the position to your activity to set SpanSizeLookup. You would then have to notify the adapter of a change:
// Create a SpanSizeLookup which returns 2 grids span if its the expandable or 1 otherwise.
gridLayout.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
if (position == positionOfClickedItem) {
return 2;
} else {
return 1;
}
}
});
I think the transformation answer works better but just in case the Span size is important.

Material fastscroll thumb with GridView and ArrayAdapter

I have a GridView layout that makes use of an ArrayAdapter to populate its contents. I want to make use of fast-scrolling and as such have added the following attributed to the layout XML:
android:fastScrollAlwaysVisible="true"
android:fastScrollStyle="#android:style/Widget.Material.FastScroll"
I am now able to make use of fast scrolling to navigate but would now like to add a material thumb preview as such:
From my understanding, I would have to implement the SectionIndexer interface from my ArrayAdapter as so:
class exampleArrayAdapter extends ArrayAdapter<...> implements SectionIndexer
At this point, I have reached a bump and can't figure out how to get the thumb preview and fear I may be doing something wrong. Pointers as to how I can get this working or what I should look up would be appreciated.
I have finally had time to look back at this, and the solution turns out to be very trivial! This is what I did:
#Override
public Object[] getSections() {
ArrayList<String> labels = new ArrayList<>();
for (LaunchableActivity activity: mActivityInfos) {
labels.add(activity.getActivityLabel());
}
return labels.toArray();
}
#Override
public int getPositionForSection(int i) {
return i;
}
#Override
public int getSectionForPosition(int i) {
// We do not need this
return 0;
}
I had a list of LaunchableActivity and based of that created a sections array to be returned. For my needs, all I required was to implement getPositionForSection and not getSectionForPosition. Your use case may vary.
The source code where I implemented this is available here, specifically on commits:
a2c9ddd1c647919afbf24262ac1a7772a08e468c
08802e17f4c75835c28232353fed68964f5d7746
0d73a788c6b92d7b9c05a2871778da42af02afd8
f13a59f02690481801bd07ffc593648b8e71d036

how to generate a UI for a ListView Adapter for FaceBook like Feed

how to creat a Arraylist adapter which will change the view based on a flag in the LISTVIEW, Flag can be IMAGE , IMAGETEXT, VIDEO , VIDEOTEXT, TEXT
e.g like in facebook post , 1. if a friend posts a text, list row will only contain a text with his Name
2. if a friend posts a Image , list row will only contain a image with his Name
3. if a friend poasts a Video , list row will only contain a Video with his Name , and only Video onClick() ,
Playing that Video in a external Player
Flag = text. view to be attached is text.xml
Flag = Video, View to be attached is video.xml
Flag = Image ,View to be attached is image.xml
ANY HELP ON THIS.
Thanks in Advance...
override getItemViewType(int position) and getViewTypeCount() method in your adapter and
inflate you view according to it from getView(). In you case write methods like
#Override
public int getItemViewType(int position) {
if(list.get(position).flag == text)
return 0;
else if(list.get(position).flag == image)
return 1;
else
return 2;
}
#Override
public int getViewTypeCount() {
return 3;
}
I am not pretty much sure but it's my concept that firstly create a layout for row that can hold every thing that you want show(image, video, text etc ). And make this layout such a way if one thing is not present then it automatically wrapped(means if video is not present then video space will not be there).
Now make json of every list row and pass it to Adapter of list. Then override getView() method of the
adapter and parse json there and display according to your layout.
i implemented similar Custom Adapter for ListView which is used in this link , also used ViewHolders
check this link
http://www.androidhive.info/2014/06/android-facebook-like-custom-listview-feed-using-volley/

Categories

Resources