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:

layout-2016-02-23-231204

Subscribe To Android Learning

Subscribe To Android Learning

Join our mailing list to receive the latest android tutorials from our site.

You have Successfully Subscribed!

Pin It on Pinterest

Shares
Share This