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.
Related
I'm building an Android app, and using a TableLayout ViewGroup to display my data.
I would like the TableView to occupy the entire width of the screen, however I'm having trouble getting this to work.
What seems to happen, is the table is only as wide as the widest element in the table, in this case, the image that I put in it.
Here's a screenshot to illustrate the problem.
Additionally, here's the XML source code of my layout.
What specifically should I do to have the layout stretch to the entire width of the screen?
Thanks in advance!
You only have 1 column. Therefore, it should be stretchColumns="0".
Creating a single-column TableLayout is pointless and wasteful. Use a vertical LinearLayout, please. You will probably find that it works better with respect to your problem as a side benefit.
Also, do not repeat the xmlns:android="http://schemas.android.com/apk/res/android" -- it only needs to go on the root element.
BTW, columns are indexed starting from 0, so you are stretching a non-existent column in your existing TableLayout.
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.
What is the best layout to use to support the app on different devices (Size of screen)?
EDIT
I am not just talking about resizing the layout, obviously the OS does that automatically. I am talking about repositioning the objects in my layout.
by repositioning I mean moving the objects according to the size of the screen. For instance i created my layout for a larger screen which looks great, but when i run the app on a smaller device (smaller screen) some of my User Interface elements were out of the bound of my screen.
There is no "best" layout. Almost all types of layouts will scale to different devices (Android is designed around this concept) other than AbsoluteLayout, which is deprecated anyway.
LinearLayout is best if you just have a row (horizontal or vertical) of content to insert. Using values such as dip values, fill_parent, or wrap_content will automatically adjust themselves to their content or screen size.
RelativeLayout, as Vladimir pointed out, is best for layouts where views are positioned relative to other objects within the layout. For instance, a TextView positioned beside a "Submit" button, is a common example.
FrameLayout is sort of a replacement for AbsoluteLayout; you can layer objects on top of each other, just specifying margin offsets from the sides of the frame.
TableLayout is, as it sounds, a layout for Table style design. You can have multiple rows and columns, and set certain columns to stretch to fit the size of the display, so that no matter the screen size, the layout fits as you designed.
EDIT: If you're having objects falling outside of the screen area, try wrapping your root layout in a <ScrollView>. This will allow the layout to be scrollable.
e.g.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
..... //and so on
</RelativeLayout>
</ScrollView>
All Layouts are flexible in terms of size... the rule is: don't use AbsoluteLayout. That's all.
And with regards to the repositioning concerns... well, use always dips instead of pixels and you are good to go. Again, don't use AbsoluteLayout, the rest of the layouts should work fine on every screen size. Sometimes you can anticipate those "disappearing acts" by wrapping your layout in a ScrollView.
RelativeLayout is what you should be looking at. It easily resizes the elements relative to their neighbors. Just make sure to include drawables for all resolutions and densities
LinearLayout,RelativeLayout,FrameLayout are import Layouts....
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.
I'm trying to divide a page in three parts. I'd like to do it in percentage values, however that is not supported by Android. Instead I have to use android:layout_weight. But I have a hard time understanding it and getting it right. Especially how the actual size gets calculated. Is there a way to get a percentage value (0..100%) out of android:layout_weight?
I went through a few cases (see attached screenshot) to describe the problems. The colored fields are all <LinearLayout> with android:layout_height="fill_parent", because I want the full screen to be divided between those.
Case 1
Okay, simple. Every <LinearLayout> gets 33%.
Case 2
Ups?! The first (yellow) <LinearLayout> disappears completely? Why?
Case 3
Confused again. The yellow <LinearLayout> is back. However, the two first <LinearLayout> with the heavier weight get smaller? What is going on?
Case 4
I have absolutely no idea what the maths behind all this is.
Is there a way to get a percentage value (0..100%) out of android:layout_weight?
Sure. Make them add up to 100.
For your "percentage value", you want the android:layout_height of the individual items within the LinearLayout to be 0px.
When you use android:layout_height="fill_parent" for the bars, you are not leaving any available space. (Since they are filling the parent.) Because all 3 are set to fill, the requested height is actually 3x the parent height, so the weights are being applied to a negative remaining space. This explains the weird behavior you are seeing, and why setting layout_height to 0px solves it.