Adding a Button and Input Box

Whats up Geeks,

Till now we have learned about the following including the last tutorial on Adding a String Resources:

> About Android.
> Android SDK Installation.
> Setting Up Android Bundle and Adding Platform and Packages.
> Setting Up Environment for App Development.
> About Android Layouts including Creating Linear Layout, Relative Layout, Grid View.
> Adding a Text Field.


So Geeks, now we are going to learn about Adding a Button and a Input Box during our Android App Development phase.

Firstly, we are going to learn Adding a Button.

Now add a <Button> to the layout, immediately following the <EditText> element:

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

The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. This button doesn't need the android:id attribute, because it won't be referenced from the activity code.


So in this way we can add a button to our in the fragment_main.xml file.


The layout is currently designed for both EditText and Button widget as big as necessary to fit their content as shown in below figure:

Figure: The EditText and Button widgets have their widths set to "wrap_content".

This works fine for the button, but not as well for the text field, because the user might type something longer.

So, it would be nice to fill the unused screen width with the text field.

We can do this inside a LinearLayout with the weight property, which we can specify using the android:layout_weight attribute.

The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views.

The default weight for all views is 0, so if we specify any weight value greater than 0 to only one view, then that view fills whatever space remains after all views are given the space they require. So, to fill the remaining space in your layout with the EditText element, give it a weight of 1 and leave the button with no weight.

    <EditText
        android:layout_weight="1"
        ... />

In order to improve the layout efficiency when you specify the weight, we should change the width of the EditText to be zero (0dp). Setting the width to zero improves layout performance because using "wrap_content" as the width requires the system to calculate a width that is ultimately irrelevant because the weight value requires another width calculation to fill the remaining space.

    <EditText
        android:layout_weight="1"
        android:layout_width="0dp"
        ... />

Figure: The EditText widget is given all the layout weight, so fills the remaining space in the LinearLayout.

Here’s how our complete layout file should now look:

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

This layout is applied by the default Activity class that the SDK tools generated when we created the project, so we can now run the app to see the results:


In this way we can design our fragment_main.xml file.

See ya in the next tutorial geeks.