Introduction

After having an understanding of the Activity lifecycle and Builds system in Android Studio from my previous articles we must now learn about building a simple graphical user interface using the hierarchy of View and ViewGroup objects.
The layout is the ViewGroup element that is the base for developing a user interface. View objects generally consist of user interface widgets such as Buttons, Text fields, Layout and so on. Although ViewGroup objects are invisible view containers this only defines how alignments are seen. However, Layouts are the subclasses of ViewGroup.
viewgroup hierachy
Figure: Illustration of how ViewGroup objects form branches in the layout and contain other View objects.

Create a Linear Layout

The resulting code after applying the preceding procedure will look as in the following:
linear layout codepic

Adding a Text Field

The code will look like this after the addition of an <EditText> element as shown below.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal">
  7. <EditText
  8. android:id="@+id/edit_message"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:hint="@string/edit_message" />
  13. </LinearLayout>

Adding String Resources

Here we are analyzing the application using the Android Studio IDE. In Android Studio, from the res/values directory, open the strings.xml file and use the following procedure.
Now remove the default string "hello world". Now the following is the code after the modification of the strings in the string resources file:
string resource
Here, it means that in Android each string is considered a resource. String resources allow the user to manage all the user interface text in a single location that is quite reliable in finding and updating the resources of the entire application in one place. String resources allow the developer to manage various language version releases of a single application.

Adding a Button

In Android Studio, from the res/layout directory, edit the activity_main.xml file. In the <LinearLayout> element define or introduce a new element called <Button> just immediately below the <EditText> element.
Set the width and height of the button to "wrap_content" so the button can only be fitted into its text label. Define the button's text label with android: text attribute and set its value to the button Send string resource as we defined earlier. After adding the button code it will look as shown below.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal">
  7. <EditText
  8. android:id="@+id/edit_message"
  9. android:layout_width="odp"
  10. android:weight="1"
  11. android:layout_height="wrap_content"
  12. android:hint="@string/edit_message" />
  14. <Button
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:text="@string/button_send" />
  19. </LinearLayout>
Note: we have not added any listener to the button so it will not work or we have not referenced anything from Main_Activity.java.
In the next article we will learn how to navigate from one activity to another activity using this send button and this code.

Summary

This article illustrates the use of Layout and String resources since Layout and Button are the elements of ViewGroup objects. Mainly this article is just to convince beginners, how to use Layout and resources along with Button and EditText elements.
By just using this code above we will learn how to navigate to another Activity since the screen that bears the button with the Text area "please enter the text" is also an activity. To learn more about Activity click here.