My Life with Android
Introduction Android Componets UserInterface Advanced UI Data Storage Advanced Concepts Others New Studio

Introduction

Android Form widgets (or) UI {User Interface} (or) Views

- Used to interact(communicate) with user to get data.
- Ex : Login screens to get username and password.



1. Text (Android Term : TextView)

2. White Box (Android Term : EditText)

3. Push Button(Android Term : Button)

4. Check Box (Android Term : CheckBox)

UI Element Description
<TextView> Displays text to the user.
<EditText> Accept user input.
<Button> Perform an action.
<ImageButton> Perform an action.
<CheckBox> Specific type of two-states button.
<RadioButton> Specific type of two-states button.
<ToggleButton> Specific type of two-states button
<RatingBar> Two states (On, Off)
<SeekBar> Selection of integer values
<ProgerssBar> Shows some progress
<WebView> Displays web pages
<Spinner> Select an item from a drop down menu
<ListView> Display a list of items
<GridView> Display items in a two-dimensional scrolling grid

Basic Android User Interface XML Syntax



Some common properties


android:id="@+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F0AA0B"
android:text="Gender"
android:textColor="#FF0A90"
android:textSize="18sp"
android:textStyle="bold|italic"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"

Android - Layout

An Android layout(simply view element container) is a class that handles arranging the way its children appear on the screen. Anything that is a View (or inherits from View) can be a child of a layout. All view elements like textbox, label, buttons etc need to be contained inside the layout.All of the layouts inherit from ViewGroup (which inherits from View) so you can nest layouts.To design UI for an App, you need to know about Android Layout. This Layout is in-turn contained in a layout file location inside res/layout directory of the Android app. An Android Activity uses the Android Layout & shows output on the screen.

The standard Layouts are: 1. LinearLayout
2. RelativeLayout
3. FrameLayout
4. TableLayout
5. AbsoluteLayout
6. GridLayout
7. List View
8. Grid View
Layout Description
Linear Layout LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.
Relative Layout RelativeLayout is a view group that displays child views in relative positions.
Table Layout TableLayout is a view that groups views into rows and columns.
Absolute Layout AbsoluteLayout enables you to specify the exact location of its children.
Frame Layout The FrameLayout is a placeholder on screen that you can use to display a single view.
List View ListView is a view group that displays a list of scrollable items.
Grid View GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

Android - Views,ViewGroups

The basic building block for user interface is a View object which is created from the View class and 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 like buttons, text fields, etc.

The ViewGroup is a subclass of View and provides invisible container that hold other Views or other ViewGroups and define their layout properties.

At third level we have different layouts which are subclasses of ViewGroup class and a typical layout defines the visual structure for an Android user interface and can be created either at run time using View/ViewGroup objects or you can declare your layout using simple XML file main_layout.xml which is located in the res/layout folder of your project.
Following is a simple example of XML file having LinearLayout:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

Once your layout has created, you can load the layout resource from your application code, in your Activity.onCreate() callback implementation as shown below :


public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}