Android Controls - widget guidelines

[1] LinearLayout

• LinearLayout is a view group that align all children in a single direction, vertically or horizontally. The default orientation is horizontal.

  In vertical LinearLayout,all children are stacked one after another,so a vertical list will only have one child per row,no matter how wide they are and a horizontal list will only be one row high. You can specify the layout direction with the android:orientation attribute or setOrientation() method.

  
  

  Gravity: which specifies the alignment of all the child elements(right, center,or left alignment) by calling setGravity() method or android:gravity attribute.

  LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space is should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

• 
  
  
  
  

<LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <TextView

            android:id="@+id/personinformation_txtvw_title"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:gravity="center"

            android:text="@string/title" />

 </LinearLayout>

[2] RelativeLayout

• RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left of center).
• if you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout ,which improves performance .

[3] FrameLayout

• FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
• FrameLayout contain many widgets but only one will appear at a time.
• control the position of multiple children within a FrameLayout by assigning gravity to each child,using android:layout_gravtiy attribute.
• child view are drawn in a stack,with the most recently added child on top.
• The size of the FrameLayout is the size of its largest child(with padding),visible or not(if FrameLayout's parnt permits).
  
  
  
  
  

[4] TabularLayout

• A layout that arranges its children into rows and columns.
• TableLayout containers do not display border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can hold one View object.
• The table has as many columns as the row with the most cells.
• a TableLayout can specify certain columns as shrinkable or stretchable .

setColumnShrinkable() :- the column width can be shrunk to fit the table into its parent object.

setColumnStretchable() :- it can expand in width to fit any extra space. The total width of the table is defined by its parent container.

setColumnCollapsed() :- hide a column .

• The children of a TableLayout cannot specify the layout_width attribute. Width is always MATCH_PARENT. However, the layout_height attribute can be defined by a child; default value is WRAP_CONTENT. If the child is a TableRow, then the height is always WRAP_CONTENT.
• Cells must be added to a row in increasing column order, both in code and XML. Column numbers are zero-based. If you don't specify a column number for a child cell, it will autoincrement to the next available column. If you skip a column number, it will be considered an empty cell in that row.
  
  
  
  
  

[5] AbsoluteLayout

• AbsoluteLayout specify exact lacation(X/ Y coordinates) of its children means Per-child layout information.
• Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning.

[6] Buttons

• A button consists of text that communicates what action occurs when the user touches it.
• Android supports two different types of buttons:

1) basic buttons

i) default

ii)small

2) borderless buttons

• Basic buttons are traditional buttons with borders and background.
• Default buttons have slightly larger font size and are optimized for display outside of form content
• Small buttons are intended for display alongside other content. They have a smaller font and smaller minimum height. Use small buttons in forms where they need to align with other UI elements.

[Default Bsuttons] [Small Buttons]

• Borderless buttons resemble basic buttons except that they have no borders or background. You can use borderless buttons with both icons and text. Borderless buttons are visually more lightweight than basic buttons.

<Button

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" />

[7] ImageView

• Use “android.widget.ImageView” class to display an image file.
• Image file is easy to use but hard to master, because of the various screen and dpi in Android devices.
• Put your images into folder “res/drawable-ldpi“, “res/drawable-mdpi” or “res/drawable-hdpi“.

<ImageView

android:id="@+id/home_imgv_penguins"

android:layout_height="150dp"

android:layout_width="100dp"

android:layout_margin="5dp"

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

[8] ImageButton

• A button with an image (instead of text) that can be pressed or clicked by the user
• The image on the surface of the button is defined either by the android:src attribute in the XML element or by the setImageResource(int) method.
• To remove the standard button background image, define your own background image or set the background color to be transparent.
• define a different image to show different states(focused,selected,etc..) 
   

E.g., a blue image by default, an orange one for when focused, a yellow one for when pressed.

 <ImageButton android:id="@+id/home_imgbtn_repeatactive" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/repeatactive" android:layout_marginLeft="30dp" android:layout_marginTop="90dp" android:background="@android:color/transparent"/>

[9]ImageSwitcher

• ImageSwitcher is a view useful to switch smoothly between two images and thus provides ways of transitioning from one to another through appropriate animations.
• concept of showing a gallery of images that scrolls at the top of the android screen landscape and upon selection of one image, it gets displayed as a larger image in the lower part through the use of an ImageSwitcher

<Gallery android:id="@+id/Gallery01" android:layout_width="fill_parent" android:layout_height="wrap_content"> </Gallery>

<ImageSwitcher android:id="@+id/ImageSwitcher01" android:layout_width="fill_parent" android:layout_height="fill_parent">

</ImageSwitcher>

[10] ScrollView

• A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects.
• A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.
• You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling.
• ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView.
• The ScrollView can have only one child control, so we can make a container (Linear, relative, Table Layouts) the child of the ScrollView and put all the controls inside this child.
  
  
  

[Horizontal And Vertical ScrollView]

a. HorizontalScrollView

• HorizontalScrollView only supports horizontal scrolling. For vertical scrolling, use either ScrollView or ListView.

<HorizontalScrollView

android:id="@+id/listview" android:layout_width="fill_parent" android:layout_height="fill_parent"

android:background="#ddd" >

<LinearLayout

android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="horizontal" >

</LinearLayout>

</HorizontalScrollView>

b. VerticalScrollView

• By default Scrollview is VerticalScrollView.

[11] View

• A View occupies a rectangular area on the screen and is responsible for drawing and event handling.
• View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.).
• The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.
• views in a window are arranged in a single tree.
• Add views either from code or by specifying a tree of views in one or more XML layout files. There are many specialized subclasses of views that act as controls or are capable of displaying text, images, or other content.

[12] ListView

• ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter .
  
  
  
  
  

• The adapter is assigned to the ListView via the setAdapter method on the ListView object.
• An adapter extend the BaseAdapter class. Android provides some standard adapters; the most important are ArrayAdapter and CursorAdapter.
• ArrayAdapter can handle data based on Arrays or java.util.List.
• SimpleCursorAdapter can handle database related data.
• ArrayAdapter uses the toString() method of the data input object to determine the String which should be displayed.
• The ArrayAdapter class allows to remove all elements in its underlying data structure with the clear() method call. You can then add new elements via the add() method or a Collection via the addAll() method.
  
  
  
  

[13] SeekBar

• A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys. Placing focusable widgets to the left or right of a SeekBar is discouraged.
  
  
  
• The seekbar has three states: drag start, changing and drag ended.

[14] ProgressBar

• Visual indicator of progress 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 it moves forward.
  
  
  
  
  
• There is also a secondary progress displayable on a progress bar which is useful for displaying intermediate progress, such as the buffer level during a streaming playback progress bar.
• In indeterminate mode, the progress bar shows a cyclic animation without an indication of progress. This mode is used by applications when the length of the task is unknown.
• The indeterminate progress bar can be either a spinning wheel or a horizontal bar.

<ProgressBar

android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.ProgressBar.Small" android:layout_marginRight="5dp" />

[15] RatingBar

• A RatingBar is an extension of SeekBar and ProgressBar that shows a rating in stars.
• The user can touch/drag or use arrow keys to set the rating when using the default size RatingBar.
• The number of stars set (via setNumStars(int) or in an XML layout) will be shown when the layout width is set to wrap content (if another layout width is set, the results may be unpredictable).
  
  
  
  
  

<RatingBar android:id="@+id/home_ratingBar1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="100dp" android:layout_marginTop="60dp" android:stepSize="0.84" android:rating="2.5"/>

• In this case, the rating bar contains 4 stars, each increase 1.0 value, so, it contains the minimum of 1.0 (1 star) and maximum value of 4.0 (4 stars). In addition, it made the 2nd star (2.0) selected by default.

[16] ToggleButton

• A toggle button allows the user to change a setting between two states.
• Add a basic toggle button to your layout with the ToggleButton object.
• Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.
• The ToggleButton and Switch controls are subclasses of CompoundButton .

[Toggle Button]

Switches (in Android 4.0+)

<ToggleButton

android:id="@+id/togglebutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="Vibrate on" android:textOff="Vibrate off" android:onClick="onToggleClicked"/>

[17] TextView

• Displays text to the user .

<TextView

android:id="@+id/home_txtv_142bpm" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="This is textview" android:layout_marginTop="150dp" android:layout_marginLeft="120dp" android:textColor="#FFD700"/>

[18] EditText View

<EditText

android:id="@+id/second_edttxt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/edttxt" android:inputType="number" />

[19] Spinner

• A view that displays one child at a time and lets the user pick among them.
• In the default state, a spinner shows its currently selected value.
• Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.
• The items in the Spinner come from the Adapter associated with this view.
• if the available choices for your spinner are pre-determined, you can provide them with a string array defined in a string resource file:
  
  
  
  
  

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

<resources>

<string-array name="planets_array">

<item>Mercury</item>

<item>Venus</item>

<item>Uranus</item>

<item>Neptune</item>

</string-array>

</resources>

• to supply the spinner with the array using an instance of ArrayAdapter:

Spinner spinner = (Spinner) findViewById(R.id.spinner);

// Create an ArrayAdapter using the string array and a default spinner layout

ArrayAdapter<CharSequence> adapter =ArrayAdapter. createFromResource(this,R.array.planets_array, android.R.layout.simple_spinner_item);

// Specify the layout to use when the list of choices appears

adapter.setDropDownViewResource (android.R.layout.simple_spinner_dropdown_item);

// Apply the adapter to the spinner

spinner.setAdapter(adapter);

[20] Video View

• Use for displays a video file.
• The VideoView class can load images from various sources (such as resources or content providers), takes care of computing its measurement from the video so that it can be used in any layout manager, and provides various display options such as scaling and tinting.

[21] Dialog

• A dialog is a small window that prompts the user to make a decision or enter additional information.
• A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.
  
  
  
  
  

AlertDialog :- A dialog that can show a title, up to three buttons, a list of selectable items, or a custom layout.

DatePickerDialog :- A dialog that allows the user to select a date

TimePickerDialog :- A dialog that allows the user to select a Time

[22] DatePickerDialog

• Android provides controls for the user to pick a date as ready-to-use dialogs.
• Each picker provides controls for selecting each part of the date (month, day, year). 
  
   

[23] TimePickerDialog

• Android provides controls for the user to pick a time as ready-to-use dialogs.
• Each picker provides controls for selecting each part of the time (hour, minute, AM/PM)
  
  
  

[24] AlertDialog

• A subclass of Dialog that can display one, two or three buttons. 
  
  
  

[25] Gallery

• This class was deprecated in API level 16.
• A view that shows items in a center-locked, horizontally scrolling list.
• The default values for the Gallery assume you will be using Theme_galleryItemBackground as the background for each View given to the Gallery from the Adapter.

[26] PassWordField

• you can use “android.widget.EditText“, with inputType="textPassword" to render a password component.

<EditText

android:id="@+id/txt_password" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Enter password" android:inputType="number" />

[27] AddressField

• A class representing an Address, i.e, a set of Strings describing a location. The addres format is a simplified version of xAL (eXtensible Address Language) .

[28] RadioButton

• Radio buttons allow the user to select one option from a set.
• A radio button is a two-states button that can be either checked or unchecked.
• When the radio button is unchecked, the user can press or click it to check it.
• Radio buttons are normally used together in a RadioGroup. When several radio buttons live inside a radio group, checking one radio button unchecks all the others.

 <RadioGroup

android:id="@+id/radioSex" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton

android:id="@+id/radioMale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radio_male" android:checked="true" />

<RadioButton

android:id="@+id/radioFemale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radio_female" />

</RadioGroup>

[29] CheckBox

• A checkbox is a specific type of two-states button that can be either checked or unchecked.
  
  
  

<CheckBox

android:id="@+id/chkAndroid" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/chk_android" android:checked="true" />

[30] GridLayout

• The grid is composed of a set of infinitely thin lines that separate the viewing area into cells.
• grid lines are referenced by grid indices.
  
  
  
• A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge.
• Children occupy one or more contiguous cells, as defined by their rowSpec and columnSpec layout parameters.
• Each spec defines the set of rows or columns that are to be occupied; and how children should be aligned within the resulting group of cells.
• If a child does not specify the row and column,GridLayout assigns cell locations automatically using its: orientation, rowCount and columnCount properties.
• Space between children may be specified either by using instances of the dedicated Space view or by setting the leftMargin, topMargin, rightMargin and bottomMargin layout parameters. When the useDefaultMargins property is set, default margins around children are automatically allocated.
• GridLayout's distribution of excess space is based on priority rather than weight.

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

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="4"

android:rowCount="4"

android:orientation="horizontal" >

<TextView android:text=" R 1, C 1 " />

<TextView android:text=" R 1, C 2 " />

<TextView android:text=" R 1, C 3 " />

<TextView android:text=" R 2, C 1 " />

<TextView android:text=" R 2, C 2 " />

<TextView android:text=" R 2, C 3 " />

<TextView android:text=" R 3, C 1 " />

<TextView android:text=" R 3, C 2 " />

<TextView android:text=" R 3, C 3 " />

</GridLayout>

[31] Sliding Drawer

• SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen.
• SlidingDrawer can be used vertically or horizontally.
• A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it.
• The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions.

<SlidingDrawer

android:id="@+id/drawer"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:handle="@+id/handle"

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

<ImageView

android:id="@id/handle"

android:layout_width="88dip"

android:layout_height="44dip" />

</SlidingDrawer