Get Jetpack Compose FlowRow to produce a masonry layout - android

Android has a view-based layout for achieving a masonry style layout where elements that could fit in a row would also evenly consume the remain row space:
I'm trying to replicate this with the Accompanist FlowRow, but as I browse the source, I don't think it was written to perform the extra measure and resizing necessary to adjust it's placeable elements. Seems the best I can get from it is:
Anyone have an example of getting FlowRow modified to layout in this way? I just started browsing source to perform custom layouts, so a pointer or two would help.
I think the algorithm would be something like:
Get the parent container width
Get the width of each item where its width is set to wrap its content
Take n items where the total width of n <= parent width
Add the remaining row width (width/n) to each item's width
Set the x, y positions of those items
Repeat starting with n+1 item

Related

How to set a constraint layout width of an item in a recyclerview to a percentage of the parents width, not a fixed dp value?

I have a problem with recyclerview items width:
i already looked through android docs and stack so i think, there is no solution to this problem.
i have an ordinary recyclerview with a horizontal gridlayout
sorry, but i dont have enough reputation to embed pictures
Picture of recyclerview
and i want the items of it being shown next to each other, but I want to make the width of the items depend on the width of the parent (in this case, the recyclerview width used in the other fragment).
I can show you what i want by using a fixed value (in this example 200dp)
Picture of the solution I want, but here a fixed value for width is used
However if my constraint of the item is set to "match parent" like here:
Picture constraint set to match parent
The result is, that the width of the items seen in the phone always depends of the width of the recyclerview. in my case its cut nearly in half:
recyclerview cut in half
also android studio only allows one view as a top level layout, so i cannot use a guideline that is set to any %
possible solution to that?
If you have width of recycler view (in pixel not dp), just divide it by number of items in a row, and in your adapter in "onBindViewHolder" method set item width. this solution is when all of your item has same width.
In addition for height of every item use WRAP_CONTENT.

How to set multiple scroll views size to change dynamically relative to each other?

I have two scroll views in a vertical linear layout.
I want them to be relative to each other so that they fill the entire linear layout and compensate if one cant cover half the screen.
Lets call that scroll views TOP and BOT.
If the screen can display 4 rows and both scroll views have infinite rows, each scroll views should display 2 rows and be able to scroll down to se the rest rows.
If TOP has 1 and BOT infinite rows, BOT should be resized to 3/4 of the linear layout.
If TOP have infinite and Bot has 1 row TOP should still just display 2, i.e. it should never pass the linear layouts vertical center.
Here are some pictures for reference:
my setup with weight set to 0.5/0.5.
result of 0.5/0.5 weight. Notice the gray bar above the BOT title bar. This empty space should be filled by the BOT bar.
if Using fixed size or wrap content the TOP will push the Bot out of view.
How can I have them hugging each other and still set TOP to a maximal height?
Preferable in XML.
Its better to set the weight dynamically. Count the number of items in both views. Set the weight of each view according to the ratios of their number of items. You can refer set weight dynamically for setting weights at run time

android GridLayout divider row

I'm trying to implement a tabular layout that has a header and a bunch of rows underneath it. I've chosen the GridLayout (android.support.v7.widget.GridLayout) as there's some requirements for some elements to span multiple columns (but those are of no concern to the question).
My header cells each contain a LinearLayout with a bunch of TextViews, they're dynamically filled in code,for the sake of example, have a look at the image below.
The second row should contain the divider which is a simple view, that should span my header columns (3).
The problem is the width of the divider - if I choose MATCH_PARENT, it will push the GridLayout to fill the whole remaining space to the right. The grid needs to wrap the content and center itself horizontally. It seems to me there's a conflict between the grid's layout (WRAP_CONTENT) and the divider's layout (MATCH_PARENT).
How can I fix the width of the divider without hardcoding it?
http://i61.tinypic.com/2415eg5.png
In red, my LinearLayouts (header), green, the GridLayout itself, the thin blue line at the bottom is the divider.
Thanks,
MO
SOLUTION (as provided below):
I had to set the column weight for the divider to 1, without specifying a width (actually setting it to zero). Because of my specific requirement to handle all of these in code, the solution was to manually instantiate the GridLayout.LayoutParams class and use
ColumnSpec = GridLayout.InvokeSpec(row_index, num_spanned_cols, weight)
Hope this helps others in the future.
If you set the width to 0dp then give it android:layout_weight="1"
(you could give it any weight you want) it should fill all the available space and not push your bounds if I understand what you are asking correctly

Get size of GridView when creating items within its adapter

I want to arrange a set of custom widgets inside a GridView. There are predefined templates which describe a count of elements and arrangement config. Max width and heigh for each of them have to be provided in order to avoid scrolling. How can I get a size of the displayed GridView when computing items size in adapter's "GetView" method?
You have access to few functions in order to get a GridView Height and Width as any other View. Look at the documentation here.
The size of a view is expressed with a width and a height. A view
actually possess two pairs of width and height values.
The first pair is known as measured width and measured height. These
dimensions define how big a view wants to be within its parent (see
Layout for more details.) The measured dimensions can be obtained by
calling getMeasuredWidth() and getMeasuredHeight().
The second pair is simply known as width and height, or sometimes
drawing width and drawing height. These dimensions define the actual
size of the view on screen, at drawing time and after layout. These
values may, but do not have to, be different from the measured width
and height. The width and height can be obtained by calling getWidth()
and getHeight().
Try doing a quick search on their doc next time, even if it's Xamarin, the Android doc is pretty reliable and you only need some adjustment to make it work.
(e.g.) : grivView.Width; instead of gridView.getWidth(); one being a property on Xamarin to follow C# standards, the other is a function.

Android ellipse overflow priority

I have 2 textviews per horizontal linearlayout row on two rows. All the views are set as 0dp width and weight 1. They all have the same font and text size etc.
The views on the left side are gravity aligned left and the two on the right are gravity aligned right.
When both textviews text length overflow android always gives precedence to the textview on the right and ellipse the views on the left.
Is there a method that can be used to control which view ellipses when both views on the same row would not fit.
Ideally I want the views on the right to ellipse in favor of those on the left. Or failing that make them ellipse evenly per row.
thanks
i don't think there is a feature of order of the views to manage how they are measured.
you can customize the linearLayout by extending it in order to support this feature , but this is too hardcore for this task .
i would suggest putting the problematic views (those that take too much space and you don't with them to take too much space) into a new layout , and set its width to match_parent .
this way , it should take the rest of the space at the end of the measurements of the other views ,

Categories

Resources