7. Android UI - FormWidgets and Layouts

In android, all user interface elements are built up using View and ViewGroup objects.

View is a base class for widgets like textboxes, edit text boxes, buttons and all such components with which user can interact.
ViewGroup on the other hand is base class for layouts. User cannot interact with view groups directly but they act as container for different Views and view groups and are used to organize contents of the screen.

Form Widgets (Views)
1. Buttons - buttons are widgets which allow user to perform some actions on touching it. We can use either Button class or ImageButton class depending upon whether we want to display text or an image on the button.

         <Button android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="Login"/>

2. Text Fields - text field allows user to enter text in the app. As soon as user touch a text field, it displays the cursor and keyboard automatically. We can specify input type as well for example: text, textEmailAddress, number etc and thus virtual keyboard will open accordingly.

  <EditText android:id="@+id/email"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:inputType="textEmailAddress" />

3. Checkboxes - Using checkboxes, user can select multiple options from a set. 

   <CheckBox android:id="@+id/checkbox_option"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="Option 1"/>

4. Radio Buttons - Radio button allows a user to select only one option from a set. As radio buttons are mutually exclusive, these must be grouped together inside radioGroup.

 <RadioGroup android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal">

       <RadioButton android:id="@+id/radio_yes"

                                          android:layout_width="wrap_content"

                                          android:layout_height="wrap_content"

                                          android:text="Yes"/>

                                       <RadioButton android:id="@+id/radio_no"

                                          android:layout_width="wrap_content"

                                          android:layout_height="wrap_content"

                                          android:text="No"/>

                           </RadioGroup>

5. Toggle Buttons - Toggle allows user to change a setting which can be in two states. (Yes/No, On/Off)

   <ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"                             android:textOn="ON" android:textOff="OFF"/>

6. Spinners - It also allows user to select a value from a set. However, touching the spinner displays a drop-down with all other values and user can select a value from this list. We can use <Spinner> element for creating spinners. To populate spinner with values, we need to write Adapter in source code.
  <Spinner
    android:id="@+id/spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

7. ProgressBar - It is used to show progress of a task for example while uploading or downloading from internet.

Different Layouts (View Groups)
1. Linear Layout - In linear layout, all the elements are displayed in a linear manner (either vertical or horizontal) using android:orientation property.
<LinearLayout android:orientation="vertical"> .... </LinearLayout>
OR
<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

2. Relative Layout - in this, every elements arranges itself relative to sibling elements or parent element. We can arrange these using different attributes: android:layout_alignParentTop, android:layout_centerVertical, android:layout_below, android:layout_toRightOf.

<RelativeLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <EditText android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
                                                 android:hint="Your Name" />
                                                <Button android:layout_width="96dp"
                                                 android:layout_height="wrap_content"
                                                 android:layout_below="@id/name"
                                                 android:layout_alignParentLeft="true"
                                                 android:text="Cancel" />   
                                               <Button android:layout_width="96dp"
                                                 android:layout_height="wrap_content"
                                                 android:layout_below="@id/name"
                                                 android:layout_alignParentRight="true"
                                                 android:text="Ok" />
                                           </RelativeLayout>

3. Table Layout - Using table layout, we can arrange items in rows and columns.

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<TableRow android:layout_width="fill_parent"
                                            android:layout_height="wrap_content"
                                            android:gravity="center_horizontal"
                                            android:padding="15dp" >
                                        <TextView android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:text="Row 1 column 1"
                                            android:padding="15dp" />
                                         <TextView android:id="@+id/TextView04"
                                            android:gravity="center"
                                            android:text="Row 1 column 2"
                                            android:padding="15dp" />
                                        </TableRow>
                                    </TableLayout>

4. List View - it displays list of scrollable items. Items are inserted into the list using an Adapter class that extracts data from a source like DB query or an array. 

5. Grid View - this is used when we want to show data in the form of grid(mainly images or icons). Audio/video players also used grid layout to show thumbnail images. Again, items are automatically inserted into grid using ListAdapter.

<GridView android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >