LinearLayout We will kick start the learning journey of building Android UIs with a GridView layout called LinearLayout. Open the "activity_main.xml" is the layout file for MainActivity's UI, follow these steps diligently and you will pick up valuable learning points along the way: Switch to Text view (bottom left of Figure 9), then change the default RelativeLayout to LinearLayout and delete the default TextView block from the XML page. Switch to Design view, you should now see the LinearLayout layout appear under the Device Screen node of the Component Tree pane. Highlight this LinearLayout node, then locate the orientation property in the Properties pane below the Component Tree pane, click and set it to horizontal. Drag and drop a Button control from the Widgets palette onto the virtual device's screen. The Button control is also appeared under the Device Screen node of the Component Tree pane. (Figure 12) Figure 12: Drag and Drop a Button control Continue to add one more Button controls from the Widgets palette onto the virtual device's screen. The two buttons will be placed side by side horizontally (Figure 13). Figure 13: LinearLayout with two Button Controls Learning Point 1: The state (color, size, margin, padding, weight, etc) of each UI component can be altered through their properties. You can see a complete list of properties pertaining to a particular UI component on the Properties pane (bottom right) in
android:paddingLeft="50dp" android:paddingTop="70dp" Once you are done playing with the padding property, undo any changes and recover the screen to the state as shown in Figure 14. layout:height Back to the screen in Figure 13, keeping the LinearLayout (Horizontal) selected, look for layout:width and layout:height properties in the Properties pane, change their value to "wrap_content". What did you see? The LinearLayout has been adjusted to just fitting the two buttons as shown in Figure 18. Figure 18: Just Fitting Learning 4: The layout:width and layout:height properties of the LinearLayout allow you to set the width and height of the layout. You can specify width and height with exact measurements in dp (density-independent pixels) but more often than not, you will use one of these constants to set the width or height, namely "fill_parent", "match_parent", or "wrap_content". Note that fill_parent has been deprecated starting from API Level 8 and is replaced by match_parent. The match_parent constant will stretch the layout to fit its parent GridView entirely (minus the padding, if any), e.g. the screen, whereas the wrap_content will size the layout to fit its entire child Views. The android:layout_width and android:layout_height attributes in the <LinearLayout> node in the "activity_main.xml" would have been modified as shown. Switch to Text view and look for them. android:layout_width="wrap_content" android:layout_height="wrap_content" Once you are done here, undo any changes and recover the screen to the state as shown in Figure 14. Orientation
Figure 30: Dropped a Button control Check out "the activity_relative_layout.xml" in the Text view (Figure 31). Figure 31: LinearLayout with one Button Controls You will notice that the TextView has been assigned a new android:id attribute as shown: android:id="@+id/textView2" and the new <Button> node has the following attributes referencing the "Hello world!" TextView through its android:id attribute. These attributes determine the position of this button in relation to the TextView. android:layout_below="@+id/textView2" android:layout_toRightOf="@+id/textView2" android:layout_toEndOf="@+id/textView2" The actual distances are determined by the following margins: android:layout_marginLeft="23dp" android:layout_marginTop="48dp" In the Design view, drag and drop a second Button control from the Widgets Palette (Figures 32 and 33) towards the bottom of the screen. When the button is nearing the edge of the screen, a dialog box pops up updating you with information about the respective margins for aligning to the right and bottom of the parent ViewGroup, i.e. the RelativeLayout (Figure 32).
Figure 39: New Resource added to strings.xml If you look into the "activity_table_layout.xml" file (Figure 40), the android:text attribute of the TextView is now pointing to the new string resource through this syntax @string/sign_in. Figure 40: TextView points to the new String Resource The outcome of this is shown in Figure 41. Figure 41: TextView new Value Learning 7: When you need a new text string, do not hard code it. Instead, you should create a new string resource that takes that text string as value. You will then reference this string resource in the XML or in code whenever you need to use text string on any UIs. That is reusability and maintainability at its best. You should always visit Figures 37 to 41 for reference. You will continue to the TableLayout UI on your own. The completed UI should look like that in Figure 42. Beside the Large Text widget for the "Sign In..." label, Drag and drop two Medium Text Widgets onto the UI and change text properties to "Email" and "Password" respectively. (Follow the steps from Figures 37 to 40.) Drag and drop an E-mail and a Password Text Fields (which are actually EditText Views) onto the UI and insert the words "Email" and "Password" into their respective hint properties. You should use the two string resources that you have created above. How? In the Properties pane, click in the text field beside the hint property, a button that marked "..." will appear, then click on it to bring out the Resources window (similar to what you see in Figure 37). This time, you should see the two strings you created above for "Email"
the LinearLayout. It will affect the width of Views in horizontal orientation and height in vertical orientation. Remove the android:android_weight attribute from both buttons, add four more Button controls, set the android:layout_width attribute of all the five buttons to "match_parent", and change their android:textattribute to some newly created string resource. The final UI should look like that in Figure 50. (You have done all these before, so take it as a revision. ;P) Figure 50: The new Look The modified *activity_main.xml* should like that in Figure 51. Figure 51: Modified activity_main.xml Icon Caption It is more common for a Button control to be rendered with a text caption, but it can also be rendered with an icon or both. Open "activity_main.xml" in the Text view, follow the from Figures 52 to 54 to add an icon on top of the text caption of the LinearLayout button. We will use the default icon called "ic_launcher" provided by Android Studio. Figure 51: Add drawable to Button Figure 53: Add drawable to Button Figure 54: Add drawable to Button There you are, the ic_launcher icon has been added on top of the LinearLayout button (Figure 55).
Figure 62: Import an Image Figure 63: Import an Create a sub directory called "drawable" under the res directory (Figures 64 and 65). Figure 64: Create a drawable directory Figure 65: Create a drawable directory Add a drawable resource file called "button_custom" inside the drawable directory (Figures 66 and 67). Figure 66: Add a drawable resource file Figure 67: Add a drawable resource file The newly created drawable resource file will be saved as *button_custom.xml*. Your drawables should now contain these resources as shown in Figure 68. Figure 68: All the drawable Resources Open the *button_custom.xml* and add the following code as in Figure 69.
"?android:attr/textAppearanceLarge" (Figure 72) which is equal to 22sp. Similarly, there the two other TextViews being called "Medium Text" and "Small Text" by Android Studio. Their android:textAppearance attributes have been assigned the text sizes of "?android:attr/textAppearanceMedium" and "?android:attr/textAppearanceSmall" respectively. The text size for the former is 18sp whereas the later 14sp. Figure 72: TextView Add two to the TextView as highlighted in Figure 72. Figure 73: TextView In the highlighted line, you have made the TextView selectable by setting its android:textIsSelectable attribute to "true", it allow users to make selection gesture on its content which in turn triggers the copy and paste function of the Android system. In the second highlighted line, you have enabled the text to change color when it is touched by setting the android:textColorHighlight to some color value. When it is set to "true" Try it up on an AVD or a physical device! a glimpse of that running on my AVD (Figure 74). It works! Figure 74: Highlight, Copy, EditText The EditText is an extension of TextView that possesses rich editing capabilities. It provide a text field to allow the user to input text. It can be either a single line or multiple line. Touching an EditText control places the cursor and automatically displays the soft keyboard. In addition to typing, EditText comes equipped with a variety of productive features, such as allow users to select, cut, copy, and paste text, input auto-completion, and customize keyboard to suit input type.
Add the "onRadioButtonClicked" method to the "LinearLayout.java" like this (Figure 88); Figure 88: Event Handler for Radio Buttons This is how the completed UI look like in an AVD (Figure 89) Figure 89: CheckBoxes at work! Tip: Use RadioButton when you want to show all the options to the Otherwise, you should consider using Spinner instead. ToggleButton A ToggleButton is an on/off switch. It can be used in turning on and off features like vibration mode, silent mode, WiFi connection, and so on. We will add a ToggleButton to the LinearLayout page to toggle WiFi connection. Open the "activity_linear_layout.xml" in Design view, drag a ToggleButton widget from the Palette and placed it below the RadioGroup. Set its textOn and textOff properties to "WiFi On" and "WiFi Off" respectively (Figure 90) Figure 90: ToggleButton Open the "activity_linear_layout.xml" in Text view, assigned "onToggleClicked" to the Android:onClick attribute. The completed XML for the toggle button should look like that in Figure 91. Figure 91: ToggleButton in XML Add the "onToggleClicked" method to the "LinearLayout.java" like this (Figure 92);
Open the "activity_linear_layout.xml" in Design view, drag an AutoCompleteTextView widget (under the Expert section of the Palette) and placed it below the Spinner (Figure 103). Figure 103: activity_linear_layout.xml In the "LinearLayout.java", create an ArrayAdapter and attach it to the spinner as shown in Figure 104. Figure 104: Binding AutoCompleteTextView to Data Source Launch it on an AVD, type in a letter and the AutoCompleteTextView in action (Figure 105) Figure 105: AutoCompleteTextView at work! Progress Bar It is a common practice to show users a progress bar on their screen when they are uploading or downloading lengthy stuff from the Internet. In Android, the progress bar is implemented through a ProgressDialog class which is actually a UI by itself. You will create a progress bar on the "RelativeLayout" page and get it to simulate a task in progress upon a button click. Open the "activity_relative_layout.xml" in Text view, change the android:text attribute and add an android:onClick attribute to the <New Button> node as android:text="Show Progress..." android:onClick="showProgress" In the "RelativeLayout.java", add the showProgress method as shown in Figure 106. This method will be called when the "Show Progress..." button is clicked. The code will instantiate a ProgressDialog object and set some of its properties like setMessage and setProgressStyle. This ProgressDialog object will run in a separate thread so that it does not block the main UI thread.
Figure 106: showProgress method Launch it on an AVD, navigate to RelativeLayout page, click on the "Show Progress..." button, and watch the progress bar in action as shown in Figure 107. Figure 107: Progress Bar at work! DatePicker and TimePicker. the DatePicker and TimePicker. They are the familiar faces on many web applications that ask you for date and time information. Just pick (click) a date or time, free of typing and thus free of hassle of having to handle formatting issues in code. You will construct a new Activity to explore them. Create a new Activity called "DateTimePickers", the default RelativeLayout as it is, but remove the default TextView. drag and drop a DatePicker and a TimePicker from the Palette to the screen (Figure 108). Figure 108: The Picky Duo Open the "activity_date_time_pickers.xml", you see the XML code as shown in Figure 109. Note the android:onClick attributes for the DatePicker and TimePicker. Figure 109: activity_date_time_pickers.xml Open the "DateTimePickers.java" that hosts the "activity_date_time_pickers.xml", insert the highlight code as shown in Figure 110. The getDate and getTime methods will be invoked to echo the date or time selected on the screen whenever a user click on the respective controls.