Sunday, July 19, 2009

Change UI elements by changing main.xml

In the previous article, "Exercise: Hello World with EditText input", all the elements are placed in a single LinearLayout, both the OK and Cancel button's width are defined as wrap_content. It can be noted that the layout is not good aligned.

The layout can be changed by changing main.xml, without any modification on the java code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Who you are?"
/>
<EditText
android:id = "@+id/message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:id = "@+id/ok"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id = "@+id/cancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>





<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Who you are?"
/>
<EditText
android:id = "@+id/message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id = "@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id = "@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>






<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Who you are?"
/>
<EditText
android:id = "@+id/message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right|bottom"
>
<Button
android:id = "@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id = "@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>



Download the project files

No comments: