Develop Reference

Children views having equal height

I have a horizontal LinearLayout with two buttons with text inside.
The LinearLayout's and the buttons layout_height is wrap_content.
The text of one of the two buttons takes two lines unlike the other's which takes one line.
So at the end one of the buttons has a bigger height than the other which is something that I don't want.
I know how to solve this programmatically. So the reason I making this question is to know whether I can solve this through xml.
One possible solution is, for the button whose text is one line, set
layout_height="match_parent"
and it works fine.
But the problem here is that generally I don't know which button will occupy the biggest height.
In essence what I want to do is: having a LinearLayout with Views inside
I want to set the height of all the children Views to be equal to the height of the View which when has its content wrapped has the max height.
And the question is if this is possible through xml?
An example XML. Also I forgot to add that I already have 0dp in the widths.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_string" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_other_string" />
</LinearLayout>

I guess what you search is android:baselineAligned="false", this will avoid that the text are on the same baseline and the buttons will start at the same y position on the screen.
Here without android:baselineAligned="false":
And here with:
However if you also want that both buttons are equal sized try this layout example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="aaaaa"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="bbbbbbb bbbbbbbb bbbbbbbb bbbbbbbbbbbb bbbbbb"/>
</LinearLayout>
That will look like this:

Use this thing to set weigh Sum and weight layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 2" />
</LinearLayout>
</LinearLayout>

How to separate layouts with weightSum in android?

I seem to be having issues understanding weightSum and LayoutWidth. My code is below:
<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="3">
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
My understanding of this is the 1st layout will take up 1/3 of the space and 2nd layout will take 2/3 of the space, but the reverse is happening, i.e. 1st layout is taking 2/3 and 2nd layout is taking 1/3
Why is this happening? Trying hard to understand this.

Taking your android:orientation="vertical", you want to get this ratio vertically therefore your android:layout_height attribute should be 0dp for both the child LinearLayout.
Set -
android:layout_height="0dp"
for both the inner LinearLayout.
Alternatively if you want to obtain the ratio horizontally then use android:orientation="horizontal" set -
android:layout_width="0dp"
for both the inner LinearLayout.
The thing is when you want to achieve ratio then you don't set that particular dimension (width or height) to match parent. Rather set it to 0dp so that Android can handle it for you automatically.

<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>

Combine layout_weight with minWidth

I have a layout which I want to split into 2 views using layout_weight (1:2). But, I want the left view to have at least 400dp width.
For example, if the left view gets 420dp width by using weight then leave it, but if it has less than 400dp, than let it be 400dp and give the other view all the rest.
This is the layout I've tried and did not work for me.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Please help,
Thanks!

I think this is what you need:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="400dp"
android:background="#android:color/holo_blue_bright"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"/>
</LinearLayout>
Basically, let the first layout take the needed space but no less than 400dp. The second one will take all the remaining. As with all the cases when weight is involved, be sure that the needed space (for width) for the 2 children is less than what the parent can offer, otherwise you will have things off screen.
Note: I tried it on phone layout, but 400dp was off screen in portrait so it seemed like the first layout was taking all the space, so please make sure to try it out on a device with more than 400dp in the direction you want your layout span :-)

Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:weightSum="3" >
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:minWidth="400dp" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/holo_green_light" />
</LinearLayout>

ImageButton relative size and position

I am trying to scale an ImageButton to fit 50% of the screen width and center it horizontally, no matter what the original image or device screen sizes are. This image describes more accurately what is the final result I am looking for.
Any help would be very much appreciated. Thank you.

One way to achieve the effect you are looking for is to use the weight attribute of the children of a LinearLayout combined with 2 invisible Views that will act as 25% padding on either side. Seriously, though, your question could have been way better, please read the SO posting guidelines next time.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:visibility="invisible"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.5"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:visibility="invisible"/>
</LinearLayout>

Layoutproblem with webview and buttons

I have a layout problem and don't know how to solve it.
I like to display a webview and 2 buttons on the screen.
I defined this with a LinearLayout containing the webview and another linearlayout, which holds the 2 buttons.
This looked very good so far. Since the newer devices have larger screensizes , my screen looks very ugly
because my buttons are too small.
The inner linearlayout which holds the 2 buttons is defined with layout_height="60px", which I guess is my problem.
How would you manage this to look good on any device ? Is there a possibility to define sizes depending on the screensize ?
Or should I set the height of my inner linearlayout at runtime as a factor of screenheigh ?
What is the best way to do this ?
regards
Screenshot showing my buttons are too small on HD screen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:id="#+id/textviewerlayout"
android:orientation="vertical">
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="60px"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:id="#+id/textviewerbuttonlayout"
android:orientation="horizontal">
<Button
android:id="#+id/vorher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:text="" />
<Button
android:id="#+id/nachher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:text="" />
</LinearLayout>
</LinearLayout>

Rather then using px, use dp. This will use density-independent pixels which are calculated per device based on the screen size and resolution. Look here for more info. Because HD screens use higher density pixels, your buttons will appear smaller due to their hardcoded pixel size. Using dp (or dip) will make them approximately the same size across multiple devices.

Like Jorgan said use dp than the px.
Take a look if it this is what are looking for:
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textviewerbuttonlayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFFFFF"
android:orientation="horizontal" >
<Button
android:id="#+id/vorher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="" />
<Button
android:id="#+id/nachher"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="" />
</LinearLayout>
Using weight to determine height is gonna make it look good in any size, but if you want to make a specific layout for tablet or land scape you should make it in theirs folders.

http://developer.android.com/guide/practices/screens_support.html
Check the above link under the topic Best practices
Here is a quick checklist about how you can ensure that your application displays properly on different screens:
Use wrap_content, fill_parent, or dp units when specifying dimensions in an XML layout file.
Do not use hard coded pixel values in your application code
You can use a single relative layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/mywebview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/button1"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="67dp"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="57dp"
android:text="Button" />
</RelativeLayout>