Develop Reference

Making the minimum width of a layout match the inner view's width

I have the following multiple-column layout on my app:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mcare="http://schemas.android.com/apk/res/com.vodafone.mCare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:id="#+id/container1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world" />
</LinearLayout>
<LinearLayout
android:id="#+id/container2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hi" />
<LinearLayout
android:id="#+id/container3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hi" />
</LinearLayout>
...etc...
</LinearLayout>
All the columns are supposed to be evenly-spaced when enough space is available.
The goal here is to force container1's (and only container1's) minimum width to match the same width of its child view (label1). All the other columns should be resized evenly throughout the rest of the available space, regardless of whether there is enough space to display their contents or not. Here's a rough diagram of what I'm trying to do:
I've tried a lot of different approaches but nothing seems to work so far. Any ideas? Thanks in advance for any suggestion.
Edit: Note that the layout above is just a simplified version of the actual layout on the application. All containers actually have more that one View inside them - with the exception of container1. In other words, only label1 can be moved outside its respective container.

Remove nested TextView inside LinearLayout.
Try like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/label1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hello world" />
<TextView
android:id="#+id/label2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hi" />
<TextView
android:id="#+id/label3"
android:layout_width="0dp"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hi" />
</LinearLayout>
********Edited Answer*************
I have try it with `TextView` inside `LinearLayout` as well, it's working fine:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hello world" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hi" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label3"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:layout_height="wrap_content"
android:text="Hi" />
</LinearLayout>
</LinearLayout>
Without your full XML file we can't help you.

How to design a xml file to display in more screen

I'm new android programmer, I designed a page screen of 4". I've initialized with "dp" unit of measurement.
but when I run my project in screen of 10" or 7" or 3"2 components go wrong.
I learned dp is for all of screen, but I don't know why my page not be set to all of screens.

If you could include any code of your XML file, that would be very helpful.
Aside from that, I believe you haven't set android:layout_width and android:layout_height so you are getting odd looking sizes for the other display sizes of you XML.
Add
android:layout_width="match_parent"
android:layout_height="match_parent"
to your <RelativeLayout>
e.g.
<RelativeLayout 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"
...
>
If you do in fact have this or it does not help with your issue
, then please respond with an example of your code.

my xml file is here, but I set visibility of one linearlayout to gone
and when user touch button the linearlayout will be visible and another linearlayout will be gone
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainLayout"
android:background="#drawable/darirann"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layoutTerm"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<ScrollView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_marginTop="200dp"
android:layout_height="150dp">
<LinearLayout
android:padding="5dp"
android:layout_width="wrap_content"
android:background="#ffffff"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/firstpageabout" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btnLoad"
android:layout_gravity="center"
android:textColor="#ffffff"
android:background="#114E7D"
android:gravity="center"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:text="ادامه"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layoutData"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:visibility="gone">
<Spinner
android:id="#+id/spState"
android:paddingRight="5dp"
android:layout_gravity="center"
android:background="#D3D3D3"
android:textSize="12sp"
android:layout_marginTop="200dp"
android:layout_width="150dp"
android:gravity="center"
android:layout_height="40dp" />
<Spinner
android:id="#+id/spCity"
android:paddingRight="5dp"
android:layout_gravity="center"
android:background="#D3D3D3"
android:textSize="12sp"
android:gravity="center"
android:layout_marginTop="5dp"
android:layout_width="150dp"
android:layout_height="40dp" />
<Button
android:layout_gravity="center"
android:id="#+id/btnNext"
android:textColor="#ffffff"
android:background="#114E7D"
android:layout_marginTop="10dp"
android:layout_width="120dp"
android:layout_height="40dp"
android:text="مرحله ی بعد" />
<Button
android:layout_gravity="center"
android:id="#+id/btnUpdate"
android:visibility="invisible"
android:textColor="#ffffff"
android:background="#840101"
android:layout_marginTop="80dp"
android:layout_width="200dp"
android:layout_height="40dp"
android:text="دریافت نسخه ی جدید این برنامه" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center|bottom"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgAds"
style="?android:attr/buttonStyleSmall"
android:layout_width="150dp"
android:layout_height="75dp"
android:visibility="gone"
android:layout_gravity="center_horizontal|center"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android Dialog: Cannot Enlarge

I have implemented a dialog but I cannot get the dialog to occupy a larger width of the screen. Is this a problem with my XML?
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#color/butGreyBack"
android:weightSum="60"
android:layout_weight="60"
android:layout_gravity="center"
android:layout_margin="0dp"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:weightSum="60"
android:layout_margin="0dp">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="30"
android:text="Default Title"
android:background="#00000000"
android:textColor="#android:color/white"
android:textSize="22sp"
android:layout_margin="0dp"
android:gravity="center" />
<TextView
android:id="#+id/tv_prompt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="30"
android:text="Are you sure?"
android:background="#00000000"
android:textColor="#android:color/white"
android:textSize="18sp"
android:layout_margin="0dp"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
android:background="#color/butGreyBack"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:weightSum="60"
android:layout_margin="0dp">
<Button
android:id="#+id/butOK"
style="#style/GreyButtonTheme"
android:background="#drawable/custom_button"
android:layout_weight="30"
android:layout_gravity="left"
android:text="OK"/>
<Button
android:id="#+id/butCancel"
style="#style/GreyButtonTheme"
android:background="#drawable/custom_button"
android:layout_weight="30"
android:layout_gravity="right"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I can enlarge the dialog by setting the layout_width of the buttons to e.g. 200px but ideally I would like a better means of using up more screen space without specifying absolute pixel sizes. How can I do this?
For example, how can I tell the dialog box to size to perhaps 60% of the screen width?

Android Relativelayout two buttons rightof one button

I was wondering how to use Relativelayout in order to make a tructure like this:
three buttons, let's call them A B and C; I want to put B and C one above the other and both of them on the right side of A as a single block matching the same width and height of A (so we'll have that B and C have half height of A but the same width).
Since I can't post images yet here you can find the image of what I'm looking for: http://img191.imageshack.us/img191/9765/stackg.jpg
The code I wrote about this part is this one:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<Spinner
android:id="#+id/A"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_below="#id/another_block_that_fills_all_the_line"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/B" />
<Spinner
android:id="#id/B"
android:layout_width="96dp"
android:layout_height="48dp"
android:layout_below="#id/another_block_that_fills_all_the_line"
android:layout_alignParentRight="true" />
<Spinner
android:id="#id/C"
android:layout_width="96dp"
android:layout_height="48dp"
android:layout_below="#id/B"
android:layout_alignParentRight="true" />
</RelativeLayout>
The problem is that it's not going to scale with every screen because I had to set static sizes. I tried a lot of different solutions like using all the possible combinations for the layout_align and changing wrap_content even randomly but still, I can't fit them in the way I want them to without using static sizes.

Use LinearLayout with layout_weight. Try this layout
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:layout_width="0dip" android:layout_height="fill_parent"
android:layout_weight="1.0"/>
<LinearLayout android:layout_width="0dip" android:layout_height="fill_parent"
android:layout_weight="1.0" android:orientation="vertical">
<Button android:layout_width="fill_parent" android:layout_height="0dip"
android:layout_weight="1.0"/>
<Button android:layout_width="fill_parent" android:layout_height="0dip"
android:layout_weight="1.0"/>
</LinearLayout>
</LinearLayout>

Try this,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<Button
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/relativeLayout"
android:layout_alignBottom="#+id/relativeLayout"
android:text="AAA"/>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/A"
android:layout_centerVertical="true"
android:background="#android:color/black">
<Button
android:id="#+id/B"
android:layout_width="wrap_content"
android:text="BBB"
android:layout_height="wrap_content"/>
<Button
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/B"
android:text="CCC"/>
</RelativeLayout>
</RelativeLayout>

It should be as below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:padding="10dp" >
<View
android:id="#+id/helper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Spinner
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/helper"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/A"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/A"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/helper"
android:orientation="vertical" >
<Spinner
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#android:color/black" />
<Spinner
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/black" />
</LinearLayout>

Why does image view take lot of space than mentioned by weight?

My XML code:
<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" >
<LinearLayout
android:id="#+id/rl_upload_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="50dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/upload_activity"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/ll_middle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/ll_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/app_icon_17"
android:contentDescription="#string/empty" >
</ImageView>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_eds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
android:baselineAligned="false"
android:gravity="center"
android:orientation="vertical" >
<EditText
android:id="#+id/ed_img_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/text_box_background"
android:hint="#string/name"
android:paddingLeft="12dp" />
<EditText
android:id="#+id/ed_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/text_box_background"
android:hint="#string/amount"
android:paddingLeft="12dp" />
<EditText
android:id="#+id/ed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/text_box_background"
android:hint="#string/desc"
android:paddingLeft="12dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/rl_upload_bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="center"
android:minHeight="70dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="center" >
<Button
android:id="#+id/button_upload"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/upload" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="center"
android:minHeight="50dp" >
<Button
android:id="#+id/button_cancel"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/discard" >
</Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
In this there is ImageVIew(id =image_view) which I want to take only 25% approx space (width) of screen and remaining width should be taken by layout containing edit texts (id =ll_eds).
But when the image is big in width, its taking almost 90% width of screen.
So what wrong I'm doing?
Roughly I want this kind of design.

Set layout_width to 0 dip when using layout_weight on a View.
See Android Engineer Romain Guy's answer: Android Layout Weight

If the sizes look reversed, try switching the weights of the image and the other layout. Sometimes the weight system of Android can easily throw people off
If #drawable/app_icon_17 is a permanent image that doesn't change, you can try a RelativeLayout. You can anchor the image to the left of the screen, and then put the other ViewGroup to the right of it.