Hierachy of view and View Group objects is made use of to come up with a graphical user interface for an Android app. View objects are nothing but the UI widgets. This includes buttons or text fields andViewGroup objects are view containers that are invisible. It defines the way to lay out the child views like those in a grid or a vertical list.
Figure1: Example representing the way ViewGroup objects generates branches in the layout and comprises of other View objects.
In this section, we will generate a layout in XML that would comprise of a text field and a button. Also we will see the response post pressing the Send button that involves sending of the content of the text field to another activity.
Generating of a Linear Layout
The first step would be to open the activity_main.xml file present in the res/layout/ directory in Eclipse.
When a layout file is opened in Eclipse, the first thing that you will see is the Graphical Layout editor. As far as this article is concerned, we will be going to work directly with the XML. This will require you to click on the activity_main.xml tab which is present at the bottom of the screen to open the XML editor.
The BlankActivity template that would be created to start the project will generate the activity_main.xml file that contains a RelativeLayout root view and a TextView child view.
Delete the <TextView> element and replace the <RelativeLayout> element by <LinearLayout>. Post doing this, add the android: orientation features and set it to "horizontal". The outcome would be as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal/vertical" > </LinearLayout>
LinearLayout is nothing but a subclass of view group that arranges child views in either a vertical or horizontal orientation. The orientation will depend on the value set for the parameter android:orientation . Every child that is present in LinearLayout would be displayed on the screen in the order in which it would be formulated in the XML.
The two attributes: android:layout_width and android:layout_height, are obligatory for all views in order to identify their size.
For the reason that the LinearLayout is the root view in the layout, the complete screen should be filled that is available in the application. This can be done by setting the width and height to "match_parent". The value entered in reflects that the view requires to be expanded its width or height so as to match the width or height of the parent view.
Add a Text Field
In order to create a text field that is user-editable , you need to add an <EditText> element inside the <LinearLayout>.
Much in a similar way of View object, the need is to declare few XML attributes to identify properties of EditText object. The below code reflects the way one should declare it inside the element:
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />
Add String Resources
Each string should be specified as a resource when being a developer you require to add text in the user interface. In order for you to find the text easily and update it, you have the String resources with you that would permit to take care of all UI text in a single location.
The Android project by default comprises of a string resource file at res/values/strings.xml. Delete the <string> element named "hello_world" by opening this file. After this you need to add a new one with the name of "edit_message". The value for this can be set to "Enter a message."
A “Send” string has to be added for the button “button_send” once you are in this file.
The outcome of the strings.xml would appear as:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">A new Introduction</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> </resources>
Add a Button
Just after the <EditText> element, add a <Button> to the layout:
<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” thereby making the button to appear as large as it is required to fit the text of the button. android:id attribute is not required by this button fir the reason that it won't be referenced from the activity code.
Make the Input Box Fill in the Screen Width
The below figure 2 represents the layout that is designed so as to make the EditText and Button of the length and width that is required to fit the content.
Figure 2: Representing the EditText and Button widgets to fit the content text
This looks and implements good for the button but as far as text field is concerned, it does not works fine for the reason that it is quite possible to type something longer by a user. So, the best would be to fill in the screen width that is unused with the text field. This can be done inside a LinearLayout with the assistance of weight property that can be declared making use of the android: layout_weight attribute. The weight value is nothing but a number that declares the quantity of unused area that each view should take or consume relative to the number taken in by sibling views.
The article objective was to come up with the generation of a Graphical User Interface and the techniques involved coming up with a idea so as to utilize the unused space in the EditText widget.