Dynamically aligned Variable Sized cells in a Layout - android

What I have to do is draw variable size cells from left to right. Since the data is from server, its length can't be determined (thus the need for variable sized cells.). I have tried the gridviews, tablelayouts but they align them in an order. What I want is something like this:
a sample http://img18.imageshack.us/img18/4136/samplejy.png
the most important thing is they are kind of aligned in a column (though one column can have further multiple columns) but there is no row as such..the cells are in some kind of array which I have to align from left to right and not from top to bottom.. If anyone has tried anything like this it will be very helpful.. thanks

Related

Prevent views being pushed off screen

I am trying to have 3 LinearLayouts ordered horizontally (basically forming three columns) within another LinearLayout where the width of the middle layout can vary depending on it's content.
All columns should be visible at all times filling the viewport from left. The left and irght column will be assigned a max width. So only the size of middle layout varies. If the total width of all columns exceeds the viewport size the middle column must not overlap or push out the other columns. But instead it should use the remaining space.
I tried using layout weights but that would put the right column always on the right side and the middle column would fill up all the space even though it's content would not require that.
When I try to use a RelativeLayout as a container I either end up with all three columns overlapping each other or the first column disappears.
I thought the below code (only schematic for now, as I don't have access to the code atm) should work, but as written above the first LinearLayout does not show up. The last LinearLayout seems to be in place as desired.
<RelativeLayout>
<LinearLayout
android:layout_alignParentStart>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_alignParentEnd>
</LinearLayout>
</RelativeLayout>
Does anyone know how I can fix this? Please let me know if you need more detailed code examples etc. I will try to provide them as soon as possible.
I found a few other questions concerning this or similar topics but the solutions always used either layout weights or something like the code snippet above. So far I had no luck with those approaches, maybe because those questions where either for slightly different use cases or a few years old so that the api has changed in the mean time.
Any pointers are greatly appreciated :-)
Yes. You want to defined the center columns with a layout_width="0dp" and a layout_weight="1". The left and right columns will be layout_width="wrap_content".
A LinearLayout should contain the 3 inner "column" LinearLayouts.
I finally found a solution that works.
Using the layout_weight as describe by Jeffrey Blattman alone does only work when the views get large enough to fill the screen.
But as long as the views only fill a part you get gaps between them as the middle view fills up the remaining space. This is something I want to avoid in this case.
For some other reason I had to put my layout into a fragment. Now when I set the dimensions of the fragment to wrap_content the behavior is exactly as I want it. So the views do not get blown up while they are to small but are laid out as if there was no layout_weight defined. But still when growing larger the edge views stay within the screen.

Image list with text

I want to achieve something similar to the attached image
I was thinking of using TableLayout with 2 columns for each row.
There will be padding in order to be apart of each other. Then I will put white background for the cell. Lastly, I'll just add the ImageView and TextView.
The images and text are dynamically generated. I will get the image URL and display them.
So, are there any better or more efficient way for implementing what I want to achieve? TableLayout doesn't seem to be that efficient.
Your diagram looks pretty much like a grid - for which you can use a GridLayout in Android: https://developer.android.com/reference/android/widget/GridLayout.html
A layout that places its children in a rectangular grid.
The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is taken into account).
Every one of the items in the grid can be a Cardview (https://developer.android.com/training/material/lists-cards.html) - and that way you will also benefit of a consistent look and feel with Android, without much effort.
Take into account that the cards (every item in the grid) will have the same height, tho: How to make a grid layout of CardViews with variable height?.
If the height of the elements will be variable, you should better take a look to the StaggeredGridLayoutManager: https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
What you have to do is use a RecyclerView with a GridLayoutManager.
For a full working implementation: https://inducesmile.com/android/android-gridlayoutmanager-with-recyclerview-in-material-design/

Android TableLayout Format

So I have a table layout that Im adding rows to through code since its not a constant table or a constant amount of rows. The problem Im having is right now my last column isnt fitting all the text because the middle row is set to stretch and its taking up most the view. Is there a way to set weights for the columns so that I can have the one row be bigger than the rest but still show everything else.
The problem Im having is right now my last column isnt fitting all the text because the middle row is set to stretch and its taking up most the view.
Then either change it so the last column is the stretch column, or list both (e.g., android:stretchColumns="1,2").
Is there a way to set weights for the columns so that I can have the one row be bigger than the rest but still show everything else.
By listing more than one in android:stretchColumns, the stretching effect is applied equally to all. You can think of this as the columns having equal weight.

Two columns of autowrapped text

I need to lay out several (for example, two) labels (textviews) as columns. The texts can be longer altogether than one screen line and may not contain line breaks, so they need to be formatted (wrapped) to fit the screen width.
I can arrange labels as columns if they are shorter altogether than a screen line. I can wrap a text to fit the screen if there’s only one column. But if the texts are longer and there are more than one column, I cannot achieve what I want, because the first column always fills the whole screen width.
I tried to do this via xml-markup. I tried a lot of markups using LinearLayout, TableLayout and RelativeLayout. All didn’t work. Maybe, I didn’t use them properly.
I can imagine the ways using code to manually calculate views’ widths, but haven’t tried. Any solution is welcome, but using markup only are preffered.

Relative stacking with Linear Layout in Android?

I have 6 images I want to display as 2 rows with 3 images in each. I'm using nested LinearLayouts to achieve this, and it works well except for one thing:
The height of the largest image dictates the size of the linear layout, meaning there is empty space a lot of the time. In other words, my problem is as follows:
I keep getting the layout shown on the left, and I want the layout shown on the right.
I am aware that you can just use GridView, but that will still prevent the exact layout shown on the right, so I'm at a loss really. Many thanks.
Instead of 2 rows of three columns, you need 3 columns of 2 rows. LinearLayouts would be fine, just to be sure set the Gravity of the individual cells to Gravity.TOP.
You could equally achieve the whole grid using RelativeLayout instead of Linear. Each of your bottom row would just need android:layout_below and android:layout_alignLeft set to be the ImageView above it.

Categories

Resources