I have a complex layout situation in which an horizontal LinearLayout holds two other LinearLayouts. The content for those layouts is dynamic, can be any kind of views, and is generated at runtime from different independent sources.
I want to display both of them as long as there is enough space, and limit them to 50% of the available space each otherwise. So I want those child LinearLayouts to have layout_width="wrap_content" when there is enough space, and layout_weight="0.5" when there isn't. This means that the space distribution could be 10-90, 25-75, 60-40; it would only be 50-50 when there isn't enough space to show the entire content of both views. So far I haven't find a way to do this from XML, so I'm doing it from code. My question is can I achieve what I want using only XML attributes? Will a different kind of layout be able to do it?
Here is my current layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:id="#+id/title_frame"
android:layout_width="wrap_content"
android:layout_height="48dp"/>
<LinearLayout
android:id="#+id/options_frame"
android:layout_width="wrap_content"
android:layout_height="48dp"/>
</LinearLayout>
Try this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:id="#+id/title_frame"
android:layout_width="wrap_content"
android:layout_height="48dp" android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/options_frame"
android:layout_width="wrap_content"
android:layout_height="48dp" android:layout_weight="1">
</LinearLayout>
</LinearLayout>
I tried it with textviews and this should work according to ure requirements.
It appears this cannot be achieved using only XML attributes.
Change layout_width="wrap_content" to layout_width="fill_parent" as you are using weight concept .
Related
I'm trying to design my layout as below. My current approach is to have a LinearLayout wrapping two other LinearLayouts. Each of these has layout_weight=1. Then the bottom layout wraps another two and each of those also has layout_weight=1. I've heard that nested weights is not advised - but is it? Otherwise, what would be a better alternative?
Thanks
This would be my approach:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<View android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal">
<View android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#ffff00"/>
<View android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#00ffff"/>
</LinearLayout>
</LinearLayout>
I believe weights might be "inefficient” because in order to apply them appropriately, a layout has to be measured first. If its children apply weights as well, it may lead to repeated measurements of same layouts, potentially hampering performance.
If your layout will be complex, you might want to consider alternative approaches (e.g. creating a custom ViewGroup), but remember:
We should forget about small efficiencies, say about 97% of the time:
premature optimization is the root of all evil.
so make sure you actually have a problem before trying to solve it.
I have read everything I can find, and I just can't figure this out. I have an XML with a heading, then a listview, and then 2 buttons on the bottom row. In order to make the layout look perfect, I have "hardcoded" the size (467dp) of the listview. This is fine on my Samsung Galaxy S4, but I'm not sure it will look appropriate on other phones of slightly different sizes. I tested it on a Galaxy 8" tab and it did not look right. I then tested it on a 10.1" tab and it (again) did not look right. Basically the bottom buttons were up in the middle of the screen. I got around this by creating layouts for sw600dp and sw720dp. For each of those I had to hardcode a different size for the listview. It would seem to me that there is a better way to have a heading-listview-button XML that would display (relatively) the same on any device. Can anyone please tell me how to to alter my XML so I don't have to hardcode the size of the listview?
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/title_line"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="#string/workout_locations">
</TextView>
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="467dp"
android:longClickable="true" >
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/help_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/add_description"
/>
</LinearLayout>
</LinearLayout>
android:layout_weight="1 add this in the buttons
I wonder if this might help:
ensure that the entire layout is a relativeLayout, and inside it, put the listview
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp" // the size of the buttons height
android:longClickable="true" >
</ListView>
and below it another relativelayout with the buttons inside it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/help_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/add_description"
/>
If this still causes an issue, then you could write :
android:layout_above="#+id/relButtonLayout"
inside the listview.
Use layout_weight to take up as much room that can be afforded.
<ListView android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:longClickable="true" >
</ListView>
If you've hardcoded some sizes, you can bet it won't look good in most of the devices. In order to do that, it's always better using layout_height and layout_weight set to wrap_content or match_parent depending on what you need.
There's another important tool for the case you describe: layout_weight, as you might have already used. Messing with a ListView to fit the design you want can be hard at the first time, but once you discover how to set up its layout it's easy for the rest of them.
In my case, this definition always work as should:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/mylistview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical" >
</ListView>
</LinearLayout>
Take a look at it: I've set a singular LinearLayout (in this case because it has more views than just the ListView I'm showing), but I'm setting the weight of that ListView to 1, being the sumWeights of that LinearLayout 1. This way you assure yourself the ListView will expand as long as it can, without the needing of hardcoding values.
It's just a matter of playing around with it for a while, but the less values you hardcode, the more adaptable will be on other devices.
I have an Android application that goes about like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.90" >
<Button
android:id="#+id/button_1_of_10"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/text_0x1701" />
<Button
android:id="#+id/button_2_of_10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/button_1_of_10"
android:layout_below="#+id/button_1_of_10"/>
<!--Another 8 buttons-->
<RelativeLayout
android:id="#+id/contentpane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button_1_of_10" >
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/actionbuttonslayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.10">
</RelativeLayout>
</LinearLayout>
I need the 10 buttons to fill up the entire height from the top to the footer (the 0.1 weighted RelativeLayout), while all the buttons keep an equal height. However, I want to know whether there is a kind of equivalent to the layout_weight from LinearLayout, but for RelativeLayouts, as it's not performant to have nested weights in LinearLayouts. I'm not really looking for other solutions, because I still have some thing to try, but I want to know whether or not this is possible?
My question, just to be clear, is: Is it possible to have an amount of Buttons with an equal height in a RelativeLayout and at the same time fill up all the available space?
To use weight you need to use a LinearLayout, just make a linear layout with the buttons take the space you want and then on each button inside have android:layout_height="0dp" and also a android:layout_weight="1"
You don't need to sum all the weights to 1, just think of items with the same weight have the same size
I am trying to place a TableLayout as the only item inside a LinearLayout (It has a background icon I want to cover the whole screen) and I want to centre it and say use 60% of the width and 70% of the height for example. I have this, and it looks ok, but I am not sure it will work across many devices and am wondering whats the best, most general way to express it.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:padding="0dip"
android:gravity="center_vertical|center_horizontal"
android:baselineAligned="false"
>
<TableLayout
android:background="#FFFF0000"
android:layout_width="200dp"
android:layout_height="250dp"
android:gravity="center_vertical|center_horizontal"
android:stretchColumns="field">
</TableLayout>
</LinearLayout>
I messed around with layout_Weights, but the only thing I managed to do was make the table disappear.
Thanks
Stephen
LinearLayout can only do child sizing by weights for one dimension but as you're only worried really about sizing a single view, you can accomplish this by nesting LinearLayouts.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:gravity="center"
android:weightSum="1.0">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="1.0"
android:layout_weight="0.7">
<TableLayout
android:background="#FFFF0000"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:stretchColumns="field"
android:layout_weight="0.6">
</TableLayout>
</LinearLayout>
</LinearLayout>
Whether this layout will look good across devices depends on your content. In general I tend towards reasonable paddings/margins, but again it's very dependent on content.
Try using a RelativeLayout instead of the LinearLayout, because if there is only one child in the linear, it will occupy the full space of its parent.
I think that the way you did is good. You'll probably have some differences between different devices, but you can set different layouts for other screens densities and orientations.
Using layout_weight would help only if you had more than one child inside the LinearLayout.
I'm having trouble figuring out why my image isn't within the bounds of my imageview. Instead, it is floating off to the left and hidden. Is this only because the Graphical Interface doesn't show it?
EDIT:
I edited the original code to more clearly show the issue i'm having and added a picture(i want the image to show in the red box):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="195"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
android:src="#drawable/img" />
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Ok I have it working. The height attribute of "block_container" is set to a random 200dp you WILL want to change the height to whatever your needs are, or potentially set it to "wrap_content". I tested this on emulator and device.
I am also assuming that you want all three block to be equally spaced. Notice how the parent "block_container" has a weight_sum of 9? Well the children are equal widths because they have a weight of 3 each (3 blocks * 3 weight each = 9 weight total).
I noticed before it looks like you were trying to use weight as width directly e.g. a weight of 569. Just remember weight != width directly.
EDIT: added the missing id attributes from some of the views
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/block_container"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="9"
>
<View
android:id="#+id/left_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
android:src="#drawable/logo" />
<View
android:id="#+id/right_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Why are you setting android:layout_height to be 0dp? I can't even get it to display unless I change this to something like fill_parent.
Either way, its because of your layout_weight for the parent LinearLayout. Specify a larger layout_weight for your ImageView and it will come into view.
<ImageView
android:id="#+id/my_img"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="279"
android:src="#drawable/my_img" />
This worked for me.. but math might not be right.
I don't know where to begin with the issues with what you posted, some simple observations before even debugging further:
Your layouts ALL need ids (e.g. android:id="#+id/another_layout")
You have a width on the second linear layout of 0dp
Your first linear layout has a height of 0 dp, combined with the previous I'm surprised it renders at all
The last inner linear layout again has a width of 0dp
What are you trying to achieve? To me there seems to be a lot of layouts unless you have removed some elements to make it easier to understand? You could post a simple image of what you are trying to do then perhaps we can help you refine the markup?