Android User-Interface

Views

 A View is a rectangular area visible on the screen. It has a width and

height, and sometimes a background color.
 The illustration shows Views of three different types.
An ImageView displays an image such as an icon or photo.
A TextView displays text. A Button is a TextView that is sensitive to
touch: tap it with your finger and it will respond. And a ViewGroup is
a big View—often invisible—that contains and positions the smaller
Views inside of it.
 A View on the screen is drawn by a Java object inside the Android
device. In fact, the Java object is the real View. But when talking
about what the user sees, it’s convenient to refer to the rectangular
area on the screen as the “View”.
Quiz On Views
Android - UI Layouts
 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
Layout Code
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);
}
Android Layout Types
 There are number of Layouts provided by Android which you will use in almost all the Android
applications to provide different view, look and feel.
Android Linear Layout
 Android Linear Layout is a view group that aligns all children in
either vertically or horizontally.
Layout Weight
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 it 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.
Weights
Equal distribution
To create a linear layout in which each child uses the same amount of space on the screen, set the
android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of
each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".

Unequal distribution
You can also create linear layouts where the child elements use different amounts of space on the
screen:

 If there are three text fields and two of them declare a weight of 1, while the other is given no
weight, the third text field without weight doesn't grow. Instead, this third text field occupies only
the area required by its content. The other two text fields, on the other hand, expand equally to fill
the space remaining after all three fields are measured.

 If there are three text fields and two of them declare a weight of 1, while the third field is then given
a weight of 2 (instead of 0), then it's now declared more important than both the others, so it gets
half the total remaining space, while the first two share the rest equally.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:src="@drawable/ic_chat"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:textAppearance="?android:textAppearanc
eMedium"
android:hint="Send Message"/>
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:src="@drawable/ic_send"/>
</LinearLayout>
Android Relative Layout
 Android Relative Layout enables you to specify how child views are positioned
relative to each other. The position of each view can be specified as relative to
sibling elements or relative to the parent.

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 or center).
Layout Attributes
 Each layout has a set of attributes which define the visual properties of that layout.
There are few common attributes among all the layouts and their are other
attributes which are specific to that layout. Following are common attributes and
will be applied to all the layouts:
Positioning Views
 RelativeLayout lets child views specify their position relative to the parent view or
to each other (specified by ID). So you can align two elements by right border, or
make one below another, centered in the screen, centered left, and so on. By
default, all child views are drawn at the top-left of the layout, so you must define
the position of each view using the various layout properties available from
RelativeLayout.LayoutParams. Some of the many layout properties available to
views in a RelativeLayout include:
 android:layout_alignParentTop
 If "true", makes the top edge of this view match the top edge of the parent.
 android:layout_centerVertical
 If "true", centers this child vertically within its parent.
 android:layout_toRightOf
 Positions the left edge of this view to the right of the view specified with a resource ID.

android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
Positioning Views
 The value for each layout property is either a boolean to enable a
layout position relative to the parent RelativeLayout or an ID that
references another view in the layout against which the view
should be positioned.
 Improve layout performance
 Layouts are a key part of Android
applications that directly affect the
user experience. If implemented
poorly, your layout can make your
app memory-intensive with slow UIs.
The Android SDK includes tools to
help identify problems in your layout
performance. With this
documentation, you can
implement smooth scrolling
interfaces with a minimal memory
footprint.

 Improve layout hierarchies

 Load views on demand

 Optimize layout hierarchies
 A RelativeLayout is a very powerful utility for designing a user interface because it
can eliminate nested view groups and keep your layout hierarchy flat, which
improves performance. If you find yourself using several nested LinearLayout
groups, you may be able to replace them with a single RelativeLayout.
Load views on demand
 Beyond including one layout component within another layout, you might
want to make the included layout visible only when it's needed after the
activity is running. This documentation shows how you can improve your
layout's initialization performance by loading portions of your layout on
demand.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="upper left"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="upper right"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="lower left"/>
</RelativeLayout>
Margins
By default, two Views can be placed next to each other. If we don’t
want them to touch, we can specify an amount of margin along one <LinearLayout
side of one of the Views. In fact, we can ask for a margin along all android:layout_width="match_parent"
four sides of a View. android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFC400"
android:text="The"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:background="#2196F3"
android:text="End"/>
</LinearLayout>
Padding
 A View will shrink wrap itself around its content if we set the View’s width and/or
height to the special value wrap_content. To prevent it from wrapping too tightly, we
can specify an amount of padding on each side.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#C0C0C0"
android:text="CLAUSTROPHOBIA"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="#C0C0C0"
android:text="CLAUSTROPHOBIA"/>
Layout Attributes…..
 Here width and height are the dimension of the layout/view which can be specified in
terms of dp (Density-independent Pixels), sp ( Scale-independent Pixels), pt ( Points which is
1/72 of an inch), px( Pixels), mm ( Millimeters) and finally in (inches).
 You can specify width and height with exact measurements but more often, you will use
one of these constants to set the width or height −
 android:layout_width=wrap_content tells your view to size itself to the dimensions required
by its content.
 android:layout_width=fill_parent tells your view to become as big as its parent view.
 Gravity attribute plays important role in positioning the view object and it can take one or
more (separated by '|') of the following constant values.
View Identification
 A view object may have a unique ID assigned to it which will identify the View
uniquely within the tree. The syntax for an ID, inside an XML tag is −

android:id="@+id/my_button"

Following is a brief description of @ and + signs −

•The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest
of the ID string and identify it as an ID resource.
•The plus-symbol (+) means that this is a new resource name that must be created and added to our resources.
To create an instance of the view object and capture it from the layout, use the following −

Button myButton = (Button) findViewById(R.id.my_button);

Android - UI Controls
 Input controls are the interactive components in your app's user interface. Android
provides a wide variety of controls you can use in your UI, such as buttons, text fields,
seek bars, check box, zoom buttons, toggle buttons, and many more.
 UI Elements
 A View is an object that draws something on the screen that the user can interact with and
a ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout
of the user interface.
 You define your layout in an XML file which offers a human-readable structure for the layout, similar to
HTML. For example, a simple vertical layout with a text view and a button looks like this −
 Android UI Controls
 There are number of UI controls provided by Android that allow you to build the graphical
user interface for your app.
TextView Control
 A TextView displays text to the user and optionally allows them to edit it. A TextView is a
complete text editor, however the basic class is configured to not allow editing.
TextView Attributes
Following are the important attributes related to TextView control. You can check Android official
documentation for complete list of attributes and related methods which you can use to change these
attributes are run time.
android:id android:fontFamily
This is the ID which uniquely identifies the Font family (named by string) for the text.
control.

android:hint android:inputType
Hint text to display when the text is empty. The type of data being placed in a text field. Phone, Date,
Time, Number, Password etc.

android:text android:textSize
Text to display. Size of the text. Recommended dimension type for text is
"sp" for scaled-pixels (example: 15sp).
Code-Text View
- Button Control
 A Button is a Push-button which can be pressed, or clicked, by the
user to perform an action.

Button Attributes
Following are the important attributes related to Button
control. You can check Android official documentation for
complete list of attributes and related methods which you
can use to change these attributes are run time.
Inherited from android.widget.TextView Class −
Button Code
Image-View
 In Android, ImageView class is used to display an image file in application. Image file is easy
to use but hard to master in Android, because of the various screen sizes in Android devices.
An android is enriched with some of the best UI design widgets that allows us to build good
looking and attractive UI based application.
 ImageView comes with different configuration options to support different scale types. Scale
type options are used for scaling the bounds of an image to the bounds of the imageview. Some
of them scaleTypes configuration properties are center, center_crop, fit_xy, fitStart etc.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion" />
Attributes of ImageView
 src: src is an attribute used to set a source file or you can say image
in your imageview to make your layout attractive

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion" /><!--set the source of an image view-->

 In Java:
We can also set the source image at run time programmatically
in java class. For that we use setImageResource() method as shown in below
example code.
ImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView);
simpleImageView.setImageResource(R.drawable.lion);//set the source in java class
Attributes of ImageView
 padding: padding attribute is used to set the padding from left, right, top or bottom of the
Imageview.
 paddingRight: set the padding from the right side of the image view.
 paddingLeft: set the padding from the left side of the image view.
 paddingTop: set the padding from the top side of the image view.
 paddingBottom: set the padding from the bottom side of the image view.
 padding: set the padding from the all side’s of the image view.
<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/lion"
android:padding="30dp"/><!--set 30dp padding
from all the sides-->
Attributes of ImageView

 CENTER – Center the image but doesn’t scale the image

 CENTER_CROP – Scale the image uniformly
 CENTER_INSIDE – Center the image inside the container, rather than
making the edge match exactly
 FIT_CENTER – Scale the image from center
 FIT_END – Scale the image from the end of the container.
 FIT_START – Scale the image from start of the container
 FIT_XY – Fill the image from x and y coordinates of the container
 MATRIX – Scale using the image matrix when drawing
Attributes of ImageView
 scaleType: scaleType is an attribute used to control how the image should be re-sized or
moved to match the size of this image view. The value for scale type attribute can be
fit_xy, center_crop, fitStart etc.
 Below is the example code of scale type in which we set the scale type of image view to
fit_xy.

<ImageView
android:id="@+id/simpleImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/lion"
android:scaleType="fitXY"/><!--set scale type fit xy-->
 CENTER: center is a scale type used in android to
center the image to the ImageView but does not
scale the image.

 CENTER_CROP: center crop scale type is used in

android to Scale the image uniformly. It means to
maintain the image’s aspect ratio as by doing
that both dimensions width and height of the
image will be equal to or larger than the
corresponding dimension of the imageview (minus
padding).
Example