placing TextView, EditText and Button in Android Layout xml file

Question

I am new to android programming and am trying to understand the android architecture and how are applications built around it.

So there is no real world need for this as of now. Its just some experimentation that I am doing to learn the stuff. What I want here is 3 different views, TextView, EditText and Button, horizontally next to each other. To achieve this here's the activity_main.xml that I am using : -

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

  <EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/text_to_appear_on_button" />

</LinearLayout>

On running the MainActivity.java, that has setContentView(R.layout.activity_main);, in the onCreate(), I get the TextView and the EditText widgets on the screen, horizontally next to one another, but not the Button. I wonder why ?

And strangely I have observed that the last element inside <LinearLayout>..</LinearLayout> is the one that gets vanished from the screen. So if <Button .. /> is exchanged with say <TextView .. />then its the <TextView> element that will not be visible on the screen now.

Please explain what am I missing out here.

I am running the MainActivity.java on the emulator and am using Eclipse as my IDE, if this information helps further.

Answer 1

It depends on what you want to do. If you want three things horizontally in a LinearLayout, you will likely run out of space on the screen. To guarantee that all three fit, set:

android:layout_width="match_parent"
android:layout_weight="1"

For all 3. You can mess around with the weight as you see fit, but basically this will tell the rendering to fit all three objects on the screen horizontally, each one taking up 1/3 of the screen (if you change weight, it will be different values).

If using LinearLayout, you will probably nest multiple layouts, with a main vertical LinearLayout containing several horizontal ones. It is a valid approach, and is probably a matter of preference. LinearLayout allow for weights, which can be extremely useful because they are one way of guaranteeing things don't get cut off the screen.

RelativeLayout is another approach, wherein you specify where things on the screen are relative to each other (Left, Right, Above, Below). While these don't use weights, you can align elements with the edges of the screen and get the same effect.

As I said, the approach is largely a matter of preference, and usually some mesh of both works pretty well.

Answer 2

I recommend to you use relative layout for your xml ,If you use linear your widgets are assigned one by one,not your wish.its for your further developement

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/RelativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="101dp"
            android:layout_marginTop="50dp"
            android:text="TextView" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/textView1"
            android:layout_below="@+id/textView1"
            android:layout_marginTop="67dp"
            android:ems="10" >

            <requestFocus />
        </EditText>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/editText1"
            android:layout_below="@+id/editText1"
            android:layout_marginTop="59dp"
            android:text="Button" />

    </RelativeLayout>