You are on page 1of 4

Unit 6: Android User Interface Elements:

Layouts:
• An Android layout is a class that is responsible for arranging the way its children appear on the
screen.
• Anything that is a View or which is inherit from view can be a child of a layout. All of the layouts in
android are inherited from ViewGroup (which inherits from View)
• Android allows you to create view layouts using simple XML file (user can also create a layout using
java code).
Linear Layout :
• It is the simplest layout used in android for layout designing.
• In the Linear layoutdisplays all the elements in linear fashion means all the childs/elements of a
linear layout are displayed according to its orientation.
• The value for orientation property can be either horizontal or vertical.
Linear Layout Attributes: Following are some of the XML attributes associated with Linear Layout
Sr.No Name Description
The orientation attribute used to set the childs/views
1 android:orientation horizontally or vertically. In Linear layout default orientation is
vertical.
The gravity attribute is an optional attribute which is used to
2 android:gravity control the alignment of the layout like left, right, center, top,
bottom etc.
The layout weight attribute specify each child control‘s relative
3 android:layout_weight importance within the parent linear layout.

weightSum is the sum up of all the child attributes weight. This


4 android:weightSum attribute is required if we define weight property of the childs.
Absolute Layout:
 An Absolute Layout is a layout used to design the custom layouts.
 In this layout the exact location of its children by using x and y coordinates can be specifying.
 Absolute layout is harder to preserve for different mobile screen sizes than other types of layouts because
we set the exact location of a child view or called component. The positioning is based on x(top) and
y(left) coordinates and that positioning is not as useful in world of various screen resolutions(sizes) and
aspect ratios.
 Absolute layout is depreciated in Android because of the same reason as discussed in above note.
Absolute Layout Attributes: Following are some of the XML attributes associated with absolute Layout
Sr.No Name Description
In Absolute Layout layout_x attribute is used to
specify the x- coordinate of the view(TextView or
1 android:layout_x:
any other view). The possible value for this is in dp
or px.
In AbsoluteLayout layout_y attribute is used to
specify the y- coordinate of the view(TextView or
2 android:layout_y
any other view). The possible value for this is in dp
or px.
Frame Layout:
• Frame Layout is a layout is designed to block out an area on the screen to display a single item.
• The frame layout is often used as a container layout, as it generally only has a single child view (often
another layout, used to organize more than one view).
• Multiple children to a FrameLayout can be added and control their position by assigning gravity to each
child, using the android:layout_gravity attribute.
Relative Layout:
• RelativeLayout is layout which let you position your component base on the nearby (relative or
sibling) component ‘s position.
• It’s the most flexible layout, that allow you to position your component to display in anywhere you
want (if you know how to ―relative‖ it).
• In Relative Layout, one can use ―above, below, left and right‖ to arrange the component‘s position
in relation to other component.
Table Layout
• Table Layout is a layout which is used to arrange the group of views into rows and columns.
• The containers of table layout do not display a border line for their columns, rows or cells.
• A Table will have many columns and the row with the most cells.
• A table can also leave the cells empty but cells can ‘t span the columns as they can in HTML
(Hypertext markup language).
Creation of Layout Programmatically:
• In some cases, you have to create and style a LinearLayout,RelativeLayout or any other layout
programmatically.
• Attributes that you can programmatically apply to the layout can be background color, layout width,
height, margins, orientation, layout gravity, paddings, and so son.
You need to use Linear Layout class To create a LinearLayout, You pass the current activity object to
its constructor.
LinearLayout layout = new LinearLayout(MainActivity.this);
For setting background color of a layout, setBackGroundColor(int color) method is used. Here integer
color value represents a color to the method. parseColor(String color) method of Color class is used to
convert a string hex color to its integer equivalence.
layout.setBackgroundColor(Color.parseColor("#135517"));
To set width and height of the layout, you have to create a LayoutParams object and set it to the layout
using setLayoutParams(LayoutParam params) method. With the LayoutParams object, you also can set
the left, top, right, and bottom margins of the layout.
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams
(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(15, 5, 5, 5); layout.setLayoutParams(params);
The orientation, layout gravity, paddings of the layout can be set using the setOrientation(int
orientation) and setHorizontalGravity(int horizontalGravity) or
setVerticalGravity(int verticalGravity), and setPaddings(int left, int top, int right, int bottom)
methods.
layout.setOrientation(LinearLayout.HORIZONTAL);
layout.setHorizontalGravity(Gravity.CENTER_HORIZONTAL); layout.setPadding(10,
10, 5, 5);
View:
• The View is a base class (Super Class) for all UI components in android.
• For example, the EditText class is used to accept the input from users in android apps,
which is a sub class of View.
Following is the some of common View subclasses which will be used in android applications.
 TextView ImageButton
 EditText Progress Bar
 Button Spinner
 CheckBox ImageButton
 ListView GridView
 RecyclerView ScrollView
 WebView
Like this there are so many View subclasses available in android
ListView
• Android ListView is a view which contains the group of items and displays in a scrollable list. 
ListView is implemented by importing android.widget.ListView class. It uses Adapter classes which
add the content from data source (such as string array, array, database etc) to ListView.
• Adapter links data between an AdapterViews and other Views (ListView, ScrollView etc).
GridView
• GridView is a view group that display items in two-dimensional scrolling grid (rows and columns),
the grid items are automatically inserted to the layout using a ListAdapter.
• Users select any grid item by clicking on it. This view is by default scrollable so we don ‘t needs to
use ScrollView or anything else with GridView.
• GridView is widely used in android applications. An example of GridView is your default Gallery,
where you have number of images displayed using grid.
• Adapter Is Used to Fill Data in Gridview: To fill the data in a GridView, adapter can be used and
grid items are automatically inserted to a GridView using an Adapter which pulls the content from a
source such as an arraylist, array or database.

Grid View UI

RecyclerView;
• It is advanced and flexible version of ListView and GridView.
• It is a container used for displaying large amount of data sets that can be scrolled very efficiently
by maintaining a limited number of views.
• RecyclerView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop).
Using the RecyclerView:
Using a RecyclerView has the following key steps:
1. Add RecyclerView support library to the gradle build file
2. To use as the data source, Define a model class
3. To display the items, Add a RecyclerView to your activity
4. To visualize the item, Create a custom row layout XML file
5. To render the item, Create a RecyclerView.Adapter and ViewHolder
To populate the RecyclerView Bind the adapter to the data source.
ScrollView:
• ScrollView is used When an app has layout content that might be longer than the height of the
device and that content should be vertically scrollable.
• You can specify layout_width and layout_height to adjust width and height of screen. One can
specify height and width in dp(density pixel) or px(pixel). Then after enclosing them in a standard
layout, enclose the whole layout in ScrollViewwhich will make all the element or views scrollable.
• It is present inside Containers
Horizontal ScrollView:
• In android, one can scroll the elements or views in both vertical and horizontal directions.
• To scroll in Vertical, we simply use ScrollView as we shown in the above diagram and to scroll in
horizontal direction, we need to use HorizontalScrollview.
WebView:
• Android WebView is used to display online content in android activity  It displays
the HTML Pages in Android App.
• Android WebView component is a full-fledged browser implemented as a View
subclass to embed it into our android application.

You might also like