FUNDAMENTAL UI DESIGN

Every item in a user interface is a subclass of the Android View class, which is present inside
the package (android. view) The Android SDK provides a set of pre-built views that can be
used to construct a user interface. Typical examples include items such as the Button,
ImageButton CheckBox, Progress bar and Text view classes
Views: Views are the base class for all visual interface elements. All user interface Ul controls,
including the layout classes, are derived from View. A View is an object widget that draws
something on the screen by the help of user interaction. Examples of widgets are buttons,
text boxes labels etc

View Groups: View Groups are extensions of the View class that can contain multiple child
Views. In order to Extend the ViewGroup class to create compound controls made up of
interconnected child Views. The ViewGroup class is also extended to provide the Layout
Managers that help us to control layout within our Activities. Examples of View groups are
FrameLayout, LinearLayout, etc

Fragments: Fragments, introduced in Android 3.0 which uses API level 11, are used to
encapsulate portions of your UI. Each Fragment includes its own user interface (UI) layout
and receives the related input events.

Activities: Activities, represent a single screen that user interact Activities are the Android
equivalent of Forms in traditional Windows desktop development. To display a UI, we assign
a View (usually a layout or Fragment) to an Activity.

Layout Manager(refer the notes of module 1)

 Flow Layout

 Grid Layout

 Card Layout

 Border Layout

 Box Layout

 Null Layout
i. Flow Layout: This is default layout of applet where we found components are placed in left
to right and sizes are fixed.
ii. Border Layout: This is default layout of frame where components are added in north,
south, west and center direction.
iii. Grid Layout: This layout divides the frame into row and column.
iv. Card Layout: This layout clicks the first panel so that second panel is visible and goes on.
v. Box Layout: This layout is mostly found in case of swing and in this layout, panel are added
in vertical manner to a box and then box is added to frame so that the total content is now
visible
vi. Null Layout: This layout can place the visual component in any position of frame or applet

TextView
A standard read-only text label that supports string formatting, multiline display, and
automatic word wrapping. It inherits all TextView methods such as setText() and getText().

Properties of TextView

1. Auto link: Controls whether links such as urls and email addresses are automatically
found and converted to clickable links.
2. Background: Used to set the background color.
3. Buffer type: Determines the minimum number of characters that getText () will
return.
4. Clickable: Defines whether this view reacts to click events.
5. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
6. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
7. height: height of textview
8. width : width of textview
9. On click: Name of the method in this View’s context to invoke when the view is
clicked.
10. Text: Text to display.
11. textSize: set the size of the displayed text
Button
Properties of Button
1. Auto link: Controls whether links such as urls and email addresses are automatically
found and converted to clickable links.
2. Background: Used to set the background color.
3. Buffer type: Determines the minimum number of characters that getText () will
return.
4. Clickable: Defines whether this view reacts to click events.
5. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
6. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
7. height: height of textview
8. width : width of textview
9. On click: Name of the method in this View’s context to invoke when the view is
clicked.
10. Text: Text to display.
11. textSize: set the size of the displayed text

Example of Text View and button

<?xml version=”1.0” encoding=”utf-8”?>

<LinearLayout
android: layout_width=”fill_parent”
android:layout_height=”fill parent”
android:orientation =”vertical “>
<Button
android:id=”@+id/button1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click here”/>
<TextView
android:id =”@+id/textview1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click on the Button”/>
</LinearLayout>

Image Button
It is a button for which you can specify a customized background image .

Properties of ImageButton

1. Background: Used to set the background color.

2. Clickable: Defines whether this view reacts to click events.
3. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
4. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
5. height: height of textview
6. width : width of textview
7. On click: Name of the method in this View’s context to invoke when the view is
clicked.
8. Src: set the location of the image to be displayed.
9. Text: Text to display.
Example of Text View and button
<?xml version=”1.0” encoding=”utf-8”?>

<LinearLayout
android: layout_width=”fill_parent”
android:layout_height=”fill parent”
android:orientation =”vertical “>
<TextView
android:id =”@+id/textview1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”example of image button”/>
android:textSize="25dp" />

<ImageButton
android:id="@+id/Button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/[Link]"
</ImageButton>

<ImageButton
android:id="@+id/Button2"
android:layout_width="30 dp"
android:layout_height="29 dp"
android:src="@drawable/[Link]"
</ImageButton>
</LinearLayout>

EditText:
An editable text entry box that accepts multiline entry, word-wrapping, and hint text.

Properties of EditText
1. Auto link: Controls whether links such as urls and email addresses are automatically
found and converted to clickable links.
2. Background: Used to set the background color.
3. Buffer type: Determines the minimum number of characters that getText () will
return.
 4. Clickable: Defines whether this view reacts to click events.
5. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
6. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
7. height: height of textview
8. width : width of textview
9. On click: Name of the method in this View’s context to invoke when the view is
clicked.
10. Text: Text to display.
11. textSize: set the size of the displayed text

CheckBox-

A two-state button represented by a checked or unchecked box. It’s like a Swing JCheckbox
inherits all of TextView attributes and Button attributes

Properties of CheckBox
1. Auto link: Controls whether links such as urls and email addresses are automatically
found and converted to clickable links.
2. Background: Used to set the background color.
3. Buffer type: Determines the minimum number of characters that getText () will
return.
4. Clickable: Defines whether this view reacts to click events.
5. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
6. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
7. height: height of textview
8. width : width of textview
9. On click: Name of the method in this View’s context to invoke when the view is
clicked.
10. Text: Text to display.
11. textSize: set the size of the displayed text

Example of CheckBox and EditText

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout
android: layout_width=”fill_parent”
android:layout_height=”fill parent”
android:orientation =”vertical “>

<TextView
android:id =”@+id/textview1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=” SELECT THE COUNTRIES”/>
android:textSize="25dp" />

<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="INDIA" />

<CheckBox
android:id="@+id/checkBox2"
android:layout width="wrap_content"
android:layout_height="wrap_content"
android:text="SRI LANKA" />

<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PAKISTAN" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

ToggleButton
A two-state button that can be used as an alternative to a check box. It is particular arly
appropriate where pressing the button will initiate an action as well as change a state .A
toggle button allow the user to change a setting between two states.
 On state
 Off state
Properties of ToggleButton
1. Auto link: Controls whether links such as urls and email addresses are automatically
found and converted to clickable links.
2. Background: Used to set the background color.
3. Buffer type: Determines the minimum number of characters that getText () will
return.
4. Clickable: Defines whether this view reacts to click events.
5. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
6. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
7. height: height of textview
8. width : width of textview
9. On click: Name of the method in this View’s context to invoke when the view is
clicked.
10. Text: Text to display.
11. textSize: set the size of the displayed text
12. Text off: The text for the button when it is not checked.
13. Text on: The text for the button when it is checked.
14. Checked: set the initial state of toggle button [true/false]
Example of ToggleButton
<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height="fill_parent"
android:orientation="vertical" >

<ToggleButton
android:id="@+id/toggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ON"
android:checked=”TRUE”/>

<ToggleButton
android:id="@+id/toggleButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="turn_on"
android:textOff="turn_off" />

<Button
android:id="@+id/btnDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="display" />
</LinearLayout>
RadioButton and RadioGroup

They two-state grouped buttons. A set of these presents the user with a number of possible
options, of which only one can be enabled at a time. A radio button has two states that can be
either checked or unchecked. Once the radio button is unchecked, the user be able to press
or click it to check it. Radio buttons are normally used together in a Radio Group. When a
number of radio buttons live inside a radio group, checking one radio button unchecks all the
others.
Properties of RadioButton

1. Background: Used to set the background color.

2. Buffer type: Determines the minimum number of characters that getText () will
return.
3. Clickable: Defines whether this view reacts to click events.
4. Id: Used to set the unique id value for the [Link] will be find using findViewByld()
method on activity
5. height: height of textview
6. width : width of textview
7. On click: Name of the method in this View’s context to invoke when the view is
clicked.
8. Text: Text to display.
9. textSize: set the size of the displayed text
10. marginTop-used to set the margin value of top of radiobutton
11. marginBottom-used to set the margin value of bottom of radiobutton
12. orientation: set the horizontal and vertical orientation of view

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textViewl"
android:layout_width="wrap content"
android:layout_height="wrap_content"
android:text="Select Gender”/>

<RadioGroup
android:id="@+id/genderGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20d
android:orientation="horizontal" >

<RadioButton
android:id="@+id/maleRadioButton1"
android:layout_width="wrap_content"
android:layout height="wrap_content"
android:text=” Male" />

<RadioButton
android:="@+id/femaleRadioButton2"
android layout_width="wrap_content"
android:layout height="wrap_content"
android:text="Female" />
</RadioGroup>
</LinearLayout>
Progress Bar
ProgressBar is used to show the progress of an operation. ProgressBar is a Visual indicator
of progress in a number of operations. Displays a bar to the user representing how far the
operation has progressed, the application can change the amount of progress (modifying the
length of the bar) as at move forward.

Properties of ProgressBar
1. Animation resolution: Timeout between frames of animation in milliseconds.
[integer]
2. Clickable: Defines whether this view reacts to click events. [boolean]
3. Content description: Defines text that briefly describes content of the view. [string]
4. Id: Supply an identifier name of this view, to later retrieve it with
[Link]()
5. On click: Name of the method in this View’s context to invoke when the view is
clicked. [string]
6. Progress: Defines the default progress value, between 0 and max. (integer)
7. Text direction: Direction of the text.
8. Style: A reference to a custom style. [reference) and its value is
“?android:progressBarStyle=”Horizontal”
9. Max: used to set the maximum value for the progress bar
Example of ProgressBar:
<?xml version=”1.0” encoding=”utf-8”?>
< LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >

<TextView
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”
android:text=”Progress-Bar Example”
android:textSize=”30dp”/>
<ProgressBar
android:layout_width=”wrap_content”
android:layout_height=”wrap_content
android:id=”@+id/Progressbar_default”
android:max=”100”
Style=“?android:progressBarStyle=”Horizontal”/>
</LinearLayout>

Autocomplete TextView
It is an editable text view which explains conclusion suggestions automatically when the user
is typing. From which the user can choose an item. The list of suggestions is displayed in a
drop-down menu.
Properties of Autocomplete TextView
1. Completion hint: Defines the hint displayed in the drop down menu.
2. Completion threshold: Defines the number of characters that the user must type
before completion suggestions are displayed in a drop down menu.
3. Content description: Defines text that briefly describes content of the view.
4. Id: Supply an identifier name of this view, to later retrieve it with
[Link]()
5. Text direction: Direction of the text.

Example of Autocomplete view:

<? xml version="1.0" encoding="utf-8"?>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Name of Fruits” />

<AutoCompleteTextView
Android:id=”@+id/txtfruits”
Android:layout_width=”fill_parent”
Android:layout_height=”wrap_content”/>
</LinearLayout>

Public class sample extends Activity

{
Public void onCreate(Bundle s)
{
[Link](s)
setContentView([Link]);
string[] frt={“apple”,”orange”,”banana”,”anar”,”pineapple”};
ArrayAdapter ad=new ArrayAdapter(this,frt);
AutoCompleteTextView Av=( AutoCompleteTextView)FindViewById(@+id/txtfruits);
[Link](1);
[Link](ad);
}
}
Spinner

A composite control that displays a Text View and an associated List View that lets you select
an item from a list to display in the textbox. It is prepared from a Text View displaying the
current selection, combine with a button that displays a selection dialog when pressed.

Properties of Spinner

1. Add states from children: Sets whether this ViewGroup’s drawable states also include
its children’s drawable states. [boolean]

2. Always drawn with cache: Defines whether the ViewGroup should always draw its
children using their drawing cache or not. (boolean]

3. Animate layout changes: Defines whether changes in layout (caused by adding and
removing items) should cause a Layout Transition to run. [boolean]

4. Animation cache: Defines whether layout animations should create a drawing cache
for their children [boolean]

5. Clip children: Defines whether a child is limited to draw inside of its bounds or not.
(boolean] 6. Id: Supply an identifier name of this view, to later retrieve it with
[Link]() or

[Link](). [reference]

6. Prompt: The prompt to display when the spinner’s dialog is shown. [reference]
 7. Spinner mode: Display mode for spinner option. [enum]evede is the

Dagetoan dideg

8. Split motion events: Sets whether this ViewGroup should split MotionEvents to
separate child views during touch event dispatch. [boolean]

Example of Spinner:

[Link]-

Xml version=”1.0” encoding=”utf-8”?>

inearLayout xmlns:android=[Link]

android:layout_width=”fill_parent”

android:layout_height=”fill_parent

android:orientation=”vertical”

android:id=”@+id/layout”>

<TextView
Example of Spinner:

[Link]-
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="[Link]

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:id="@+id/layout" >

<TextView

android:id="@+id/textViewla

android:layout width mil parent"

android:layout weight="wrap_content"

android:text="Spinner Example" />

<Spinner

android:id="@+id/spinnerl"

android:layout_width="fill_parent"
android:layout_height=”wrap_content”
android:drawSelectorOnTop=”true” />

<EditText

Android:id=”@+id/editTextl”

Android:layout_width=”match_parent”

Android:layout_height=”wrap_content”>

<requestFocus />

</EditText>

</LinearLayout>
8.11 ListView:
A View Group that creates and manages a vertical list of Views, display them as rows within
the list. The simplest List View displays to the String value of each object in an array, use a
Text View for each item.
Properties of List View

Add states from children: Sets whether this ViewGroup’s drawable states also include its
children’s drawable states. [boolean]

2. Always drawn with cache: Defines whether the ViewGroup should always draw its children
using their drawing cache or not. [boolean]
3 Animate layout changes: Defines whether changes in layout (caused by adding and
removing items) should cause a Layout Transition to run. [boolean] 4. Animation cache:
Defines whether layout animations should create a drawing cache for their

Children (boolean]

5. Clip children: Defines whether a child is limited to draw inside of its bounds or not.
[boolean]

6. Id: Supply an identifier name of this view, to later retrieve it with [Link]() or
Activity findViewById(). [reference]

Divider: Drawable or color to draw between list items. [reference, color]

9. Entries: Reference to an array resource that will populate the ListView. [reference]

10. List selector: Drawable used to indicate the currently selected item in the list.
[reference, color]

11. Stack from bottom: Used by List View and GridView to stack their content from the
bottom. [boolean]

Example of ListView

In this example, we create list of items which is shown in screen and we can scoll it down
from top to bottom and vice versa.

[Link]

<?xml version=”1.0” encoding=”utf-8”?>

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="10dp"

</TextView>

android:textSize="20sp">

[Link]

package [Link]:

import [Link];
public class Listview3Activity extends ListActivity (

static final String[] FRUITS new String[] { "Apple", "Avocado", "Banana", "Blueberry",
"Coconut", "Durian", "Guava", "Kiwifruit", "Jackfruit", "Mango", "Olive", "Pear", "Sugar-
apple");

@Override

public void onCreate(Bundle savedInstanceState) ( [Link](savedInstanceState);

// no more this

// setContentView([Link].list_fruit):
setListAdapter (new ArrayAdapter<String>(this, [Link]. main, FRUITS));

ListView listView getListView();

[Link](true);

[Link](new OnItemClickListener()

publicvoidonItemClick (AdapterView<?>parent, Viewview, int position, long id) (

// When clicked, show a toast with the TextView

text

[Link](getApplicationContext(), ((TextView) view).getText(), [Link]

SHORT).show();
512 GridView

Mango

ado

mana

uit,
GndView will fill the entire screen. Android has a GridView control that can display data in
the form of a grid. Although we use the term data here, the contents of the grid can be text,
images, and so on.

The GridView control displays information in a grid. The usage pattern for the GridView is to
define the grid in the XML layout and then bind the data to the grid using an android widget
ListAdapter We have to add the uses-permission tag to the [Link] file to make
this example work.

Example of GridView

In this example, we have to display English alphabet A-Z.

[Link]

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="[Link]

android:id="@+id/gridViewl"
android:numColumns="auto_fit"

android:gravity="center"

android:columnWidth="50dp"

android:stretchMode="columnWidth"

android:layout_width="fill_parent"
android:layout_height="fill_parent" >

</GridView>

Gridview1 [Link]

package [Link];
import [Link];

public class GridviewlActivity extends Activity /

GridView gridView;

static final String[] numbers new String[] {

"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
"W", "X", "Y", "Z");

@Override

public void onCreate(Bundle savedInstanceState) { [Link](savedInstanceState);

setContentView([Link]);

gridView (GridView) findViewById([Link]):

ArrayAdapter<String>adapter newArrayAdapter<String>(th
[Link].simple_list_item_1, number

[Link] (adapter);

[Link](new OnItemClickListener

public void onItemClick(AdapterView<?>parent, Vie

int position, long id) {

[Link](getApplicationContext

((TextView) v).getText(), Toast.LENGTH_SHORT).show();

5.13 Image View

Is Android, we can use "[Link]. ImageView" class to display an image file. Image file
is ample to use but hard to master, because of the various screens and dpi in Android devices
Android will find the image automatically. In this case, both "[Link]" and "android2
png" images are used for demonstration.

Example

res

drawable-hdpi

[Link]

ic [Link]
drawable-Idpi

drawable-mdpi

[Link]

ic_launcher.png

layout

[Link]

Just add an Image View and Button for demonstration. By default, image View I will display
"android1.
<<LinearLayout xmlns:android=[Link] android:layout_width=fill_parent”

Android:layout_height=”fill_parent”

Android:orientation=”vertical” >

<ImageView

Android:id=”@+id/imageView1”

Android:layout_width=”wrap_content”

Android:layout_height=”wrap_content”
Android:src=”@drawable/androidl” />

<Button

Android:id=”@+id/btnChangeImage”

Android:layout_width=”wrap_content”

Android:layout_height=”wrap_content”

Android:text=”Change Image” />

</LinearLayout>
514 Scrollview

A ScrollView is a FrameLayout which put one child in it containing the whole contents to
scroll, the child may itself be a layout manager with a composite hierarchy of objects.

ScrollView is a control for development a View container with a vertical scrollbar. This is
useful when we have too much to fit onto a single screen.

Properties of ScrollView

1. Add states from children: Sets whether this ViewGroup's drawable states also include its
children's drawable states. [boolean]

2. Always drawn with cache: Defines whether the ViewGroup should always draw its children
using their drawing cache or not. [boolean]
3. Animate layout changes: Defines whether changes in layout (caused by adding and
removing items) should cause a Layout Transition to run. [boolean]

4. Animation cache: Defines whether layout animations should create a drawing cache for
their children (boolean]

5. Clip children: Defines whether a child is limited to draw inside of its bounds or not.
(boolean)

6. Id: Supples an identifier name of this view, to later retrieve it with [Link]() or
Activity findViewById(). [reference]
[Link]

id="[Link]

layout width="match parent"

android:layout_height="match_parent" tools:context=".MainActivity">

<ImageView

android:id="@+id/imageView!"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"

android:src="@drawable/ic_launcher" />

<ScrollView

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/imageViewl"

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<Button

android:id="@+id/button1"

android:layout_width="fill_parent"

android:layout height="wrap_content"
android:layout_marginTop="10dp"

android:text="Button" />

<Button

android:id="@+id/button2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="Button" />

<Button

android:id="@+id/button3"

android:layout_width="fill_parent"

android:layout_height="wrap_content
android:layout_marginTop="10dp"

android:text="Button" />
<Button

android:id="@+id/button4"

android:layout_width="fill_parent"

android:layout height="wrap content"

android:layout_marginTop="10dp"

android:text="Button" />

<Button

android:id="@+id/button5"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="Button" />

<Button

android:id="@+id/button6"
android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="Button" />

<Button

android:id="@+id/button7"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="Button" />