Building A Simple Android Application Part - 1

Create a Layout

1. In Android Studio, from the res/layout directory, open the content_main.xml file.
2. Add the <LinearLayout> element.

The result looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="akraj.snow.test.MainActivity"
    tools:showIn="@layout/activity_main">
</LinearLayout>

Add a Text Field

1. In the content_main.xml file, within the <LinearLayout> element, define an <EditText> element with the id attribute set to @+id/edit_message.
2. Define the layout_width and layout_height attributes as wrap_content.
3. Define a hint attribute as a string object named edit_message.

The <EditText> element should read as follows:

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

Add a Button

1. In Android Studio, from the res/layout directory, edit the content_main.xml file.
2. Within the <LinearLayout> element, define a <Button> element immediately following the <EditText>element.
3. Set the button's width and height attributes to "wrap_content" so the button is only as big as necessary to fit the button's text label.
4. Define the button's text label with the android:text attribute as a string object named button_send.

Your <Button> should look like this:

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

Add String Resources

1. In Android Studio, from the res/values directory, open strings.xml
2. Add a line for a string named "edit_message" with the value, "Enter a message" and  "button_send" with the value, "Submit"

The result for strings.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My App</string>
    <string name="edit_message">Type a text</string>
    <string name="button_send">Submit</string>
    <string name="action_settings">Settings</string>
</resources>

Make the Input Box Fill in the Screen Width

1. In the content_main.xml file, add the <EditText> element's layout_weight attribute with the value, "1".
2. Also, change layout_width attribute a value of 0dp.

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

   Complete Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="akraj.snow.test.MainActivity"
    tools:showIn="@layout/activity_main">
    <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:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Run the app to see the results: