Mobile Application Development-Components and Layouts

Components and Layouts
Chapter - 3
C. P. Divate

The Development Process of Android Application

Creating a New Android Project
 Open Android Studio.
 select “Create a new project”. If Android Studio is already running select File  New  New Project
from the top menu as shown below:

 Let us name the app as “Lighthead app”
as shown in Figure 5.2, but you can give
any name you‟d like to
 Then, select the app to be compatible with phones and
tablets having Android 4.0.3 (Ice Cream Sandwich) or
later:

 We‟ll have a simple screen therefore
“Empty Activity” does the job in the next
dialog:
 Finally, leave the name of the activity as
“MainActivity” and then click “Finish” to create the
project files:

 After the project is successfully created, the default view of the Android Studio will appear in which the
middle pane will show the “MainActivity.java” file as shown below:

Developing the User Interface
 Let‟s open the user interface layout file activity_main.xml where we will place the button on the screen.
 As we can see from the figure above, the left pane shows the folders and files of our project.
 Make sure that the view type is Android and select the folders res -> layout and then double-click on the
file activity_main.xml there as shown in Figure 5.7.

Android App / Project Folder Structure
 using android studio and if we create a sample application using android studio, our project folder structure
will be like as shown below..

Java Folder:
 This folder will contain all the java source code (.java) files which we’ll create during the application
development, including JUnit test code.
 Whenever we create any new project/application, by default the class file MainActivity.java will create
automatically under the package name “com.tutlane.helloworld” like as shown below.

res (Resources) Folder:
 It’s an important folder that will contain all non-code resources, such as bitmap images, UI strings, XML
layouts like as shown below.

 Drawable Folder (res/drawable)
 It will contain the different types of images as per the requirement of application.
 It’s a best practice to add all the images in a drawable folder other than app / launcher
icons for the application development.
 Layout Folder (res/layout)
 This folder will contain all XML layout files which we used to define the user interface of
our application.
 Following is the structure of the layout folder in the android application.

 Mipmap Folder (res/mipmap)
 This folder will contain app / launcher icons that are used to show on the home screen.
 It will contain different density type of icons such as hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi, to
use different icons based on the size of the device.

Manifests Folder:
 This folder will contain a manifest file (AndroidManifest.xml) for our android application.
 This manifest file will contain information about our application such as android version, access
permissions, metadata, etc. of our application and its components.
 The manifest file will act as an intermediate between android OS and our application.

Gradle Scripts:
 In android, Gradle means automated build system and by using this we can define a build
configuration that applies to all modules in our application.
 In Gradle build.gradle (Project), and build.gradle (Module) files are useful to build configurations
that apply to all our app modules or specific to one app module.
 Following is the structure of Gradle Scripts in the android application..

Android Layout File (activity_main.xml):
 The UI of our application will be designed in this file and it will contain Design and Text modes.
 It will exists in the layouts folder and the structure of activity_main.xml file in Design mode like as
shown below.

Android Layout File (activity_main.xml):
 We can make required design modifications in activity_main.xml file either using Design or Text
modes. If we switch to Text mode activity_main.xml file will contain a code like as shown below.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://s
chemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tutlane.helloworld.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Android Main Activity File (MainActivity.java):
 The main activity file in the android application is MainActivity.java and it will exist in the java
folder.
 The MainActivity.java file will contain the java code to handle all the activities related to our app.
 Following is the default code of MainActivity.java file which is generated by our HelloWorld
application.
package com.tutlane.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Android Manifest File (AndroidManifest.xml):
 Generally, our application will contain multiple activities and we need to define all those activities
in the AndroidManifest.xml file.
 In our manifest file, we need to mention the main activity for our app using the MAIN action and
LAUNCHER category attributes in intent filters (<intent-filter>).
 In case if we didn’t mention MAIN action or LAUNCHER category for the main activity, our app
icon will not appear in the home screen’s list of apps.
 Following is the default code of AndroidManifest.xml file which is generated by our HelloWorld
application.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tutlane.helloworld" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme" >

Android Manifest File (AndroidManifest.xml):
package="com.tutlane.helloworld" >
<application
android:theme="@style/AppTheme" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

These are the main folders and files required to implement an application in android studio.

Android Application Components
 In android, application components are the basic building blocks of an application and
these components will act as an entry point to allow system or user to access our app.
 The following are the basic core application components that can be used in Android
application.
 Activities
 Intents
 Content Providers
 Broadcast Receivers
 Services

 Android Activities
 In android, Activity represents a single screen with a user interface (UI) and it will acts an entry point
for the user’s to interact with app.
 Generally, the android apps will contain multiple screens and each screen of our application will be an
extension of Activity class.
 By using activities, we can place all our android application UI components in a single screen.
 From the multiple activities in android app, one activity can be marked as a main activity and that is
the first screen to appear when we launch the application.
 In android app each activity can start another activity to perform different actions based on our
requirements.
 For example, a contacts app that is having multiple activities like showing a list of contacts, add a new
contact, and another activity to search for the contacts.
 All these activities in the contact app are independent of each other but will work together to provide a
better user experience.

 Android Activities
 Generally, in android there is a minimal dependency
between the activities in an app.
 To use activities in application we need to register those
activities information in our app’s manifest file
(AndroidMainfest.xml) and need to manage activity
life cycle properly.
<manifest …..>
<application …..>
<activity android:name=".MainActivity" >
…….
…….
</activity>
…….
</application>
</manifest>
 The activity attribute android:name will represent the name of class and
we can also add multiple attributes like icon, label, theme, permissions,
etc. to an activity element based on our requirements.
 In android application, activities can be
implemented in java file as a subclass
of Activity class like as shown below.
public class MainActivity extends Activity
{
}
 This is how we can activities in android
application based on our requirements.

 Android Activities: Android Activity Lifecycle
 Generally, the activities in our android application
will go through a different stages in their life cycle.
 In android, Activity class have 7 callback methods
like onCreate(), onStart(), onPause(), onRestart(),
onResume(), onStop() and onDestroy() to describe
how the activity will behave at different stages.
 In android, an activity goes through a series of states
during its lifetime. By using callback methods we
can get the activity transitions between the states.

 Android Activities: Android Activity Lifecycle Callback Methods
onCreate()
 This is the first callback method and it fires when the system creates an activity for the first time.
 During the activity creation, activity entered into a Created state.
 If we have an application start-up logic that needs to perform only once during the life cycle of an activity,
then we can write that logic in onCreate() method.
 Following is the example of defining a onCreate() method in android activity.
@Override
}
 Once onCreate() method execution is finished, the activity will enter into Started state and the system calls
the onStart() method.

onStart()
 The onStart() callback method will invoke when an activity entered into Started State by completing
onCreate() method.
 The onStart() method will make an activity visible to the user and this method execution will finish very
quickly.
 After completion of onStart() method execution, the activity enters into Resumed state and system invoke the
onResume() method.
@Override
protected void onStart()
{
super.onStart()
}

onResume()
 In this state activity start interacting with the user that means user can see the functionality and designing
part of an application on the single screen.
 Mostly the core functionality of an app is implemented in onResume() method.
 The app will stay in this Resumed state until an another activity happens to take focus away from the app
like getting a phone call or screen turned off, etc.
 In case if any interruption events happen in Resumed state, the activity will enter into Paused state and
the system will invoke onPause() method.
 After an activity returned from Paused state to Resumed state, the system again will call onResume()
method due to this we need to implement onResume() method to initialize the components that we
release during onPause() method
 Following is the example of defining a onResume() method in android activity.

onResume()
 Following is the example of defining a onResume() method in android activity.
@Override
public void onResume() {
super.onResume();
if (mCamera == null)
{
initializeCamera();
}
}
 If any interruption happens in Resumed state, the activity will enter into Paused state and the system
will invoke onPause() method.

onPause()
 Whenever the user leaves an activity or the current activity is being Paused then the system invokes
onPause() method.
 The onPause() method is used to pause operations like stop playing the music when the activity is in a
paused state or pass an activity while switching from one app to another app because every time only one
app can be focused.
 Following is the example of defining a onPause() method in android activity..
@Override
public void onPause() {
super.onPause();
if (mCamera != null) {
mCamera.release();
mCamera = null;
}
}
 After completion of onPause() method execution, the next method is either onStop() or onResume()
depending on what happens after an activity entered into a Paused state.

onStop()
 The system will invoke onStop() callback method when an activity no longer visible to the user, the
activity will enter into Stopped state.
 This happens due to current activity entered into Resumed state or newly launched activity covers
complete screen or it’s been destroyed.
 The onStop() method is useful to release all the app resources which are no longer needed to the user.
 Following is the example of defining a onStop() method in android activity.
@Override
protected void onStop()
{
super.onStop();
}

onDestroy()
 The system will invoke onDestroy() method before an activity is destroyed and this is the final callback
method received by the android activity.
 The system will invoke this onDestory() callback method either the activity is finishing or system
destroying the activity to save space.
 Following is the example of defining a onDestroy() method in android activity.
onRestart()
 The system will invoke onRestart() method when an activity restarting itself after stopping it. The
onRestart() method will restore the state of activity from the time that is being stopped.
 The onRestart() callback method in android activity will always be followed by onStart() method.
@Override
public void onDestroy()
{
super.onDestroy();
}

 Android Activities: Android Activity Lifecycle Example
MainActivity.java File Code
package com.tutlane.helloworld;
import android.util.Log;
@Override
Log.d("Activity Lifecycle","onCreate invoked");
}
@Override
protected void onStart() {
super.onStart();
Log.d("Activity Lifecycle","onStart invoked");
}
@Override
protected void onResume() {
super.onResume();
Log.d("Activity Lifecycle","onResume invoked");
}
@Override
protected void onPause() {
super.onPause();
Log.d("Activity Lifecycle","onPause invoked");
}
@Override
protected void onStop() {
super.onStop();
Log.d("Activity Lifecycle","onStop invoked");
}

 Android Activities: Android Activity Lifecycle Example
MainActivity.java File Code
@Override
protected void onRestart() {
super.onRestart();
Log.d("Activity Lifecycle","onRestart invoked");
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d("Activity Lifecycle","onDestroy invoked");
}
}

 Android Intents
 In android, Intent is a messaging object which is used to request an action from another
component.
 In android, intents are mainly used to perform the following things.
 Starting an Activity
 Starting a Service
 Delivering a Broadcast
 There are two types of intents available in android, those are
 Implicit Intents
 Explicit Intents.

 Android Content Providers
 In android, Content Providers are useful to exchange the data between the apps
based on the requests.
 The Content Providers can share the app data that stores in the file system, SQLite
database, on the web or any other storage location that our app can access.
 By using Content Providers, other apps can query or modify the data of our app
based on the permissions provided by content provider.
 For example, android provides a Content Provider (ContactsContract.Data) to
manage contacts information, by using proper permissions any app can query the
content provider to perform read and write operations on contacts information.

 Android Services
 In android, Service is a component that keeps an app running in the background to
perform long-running operations based on our requirements.
 For Service, we don’t have any user interface and it will run the apps in background
like play music in background when the user in different app.
 We have two types of services available in android, those are
 Local Services
 Remote Services

 Android Broadcast Receivers
 In android, Broadcast Receiver is a component that will allow a system to deliver
events to the app like sending a low battery message to the app.
 The apps can also initiate broadcasts to let other apps know that required data
available in a device to use it.
 Generally, we use Intents to deliver broadcast events to other apps and Broadcast
Receivers use status bar notifications to let the user know that broadcast event
occurs.

 Additional Components
Component Description
Fragments
These are used to represent the portion of user interface in an
activity
Layouts
These are used to define the user interface (UI) for an activity or
app
Views
These are used to build a user interface for an app using UI
elements like buttons, lists, etc.
Resources
To build an android app we required external elements like
images, audio files, etc. other than coding
Manifest File
It’s a configuration file (AndroidManifest.xml) for the
application and it will contain the information
about Activities, Intents, Content Providers, Services, Broadcast
Receivers, permissions, etc.

Android View and ViewGroup with Examples
 In android, Layout is used to define the user interface for an app or activity and it will hold the UI elements
that will appear to the user.
 The user interface in an android app is made with a collection of View and ViewGroup objects.
 Generally, the android apps will contain one or more activities and each activity is a one screen of app.
 The activities will contain a multiple UI components and those UI components are the instances of View and
ViewGroup subclasses.

Android View
 The View is a base 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 subclass
of View.
 Following are the some of common View subclasses that will be used in android applications.
 TextView
 EditText
 Button
 CheckBox
 RadioButton
 ImageButton
 Progress Bar
 Spinner
 Like these we have many View subclasses available in android.

Android ViewGroup
 The ViewGroup is a subclass of View and it will act as a base class for layouts and layouts parameters.
 The ViewGroup will provide an invisible containers to hold other Views or ViewGroups and to define the
layout properties.
 For example, Linear Layout is the ViewGroup that contains a UI controls like button, textview, etc. and other
layouts also.
 Following are the commonly used ViewGroup subclasses in android applications.
 Linear Layout
 Relative Layout
 Table Layout
 Frame Layout
 Web View
 List View
 Grid View
 Both View and ViewGroup subclasses together will play a key role to create a layouts in android applications.

Android UI Layouts
 In android, Layout is used to define the user interface for an app or activity and it will hold the UI elements that
will appear to the user.
 The user interface in the android app is made with a collection of View and ViewGroup objects.
 Generally, the android apps will contain one or more activities and each activity is one screen of the app.
 The activities will contain multiple UI components and those UI components are the instances of View and
ViewGroup subclasses.
 In android, we can define a layouts in two steps, those are
 Declare UI elements in XML
 Instantiate layout elements at runtime
 The android framework will allow us to use either or both of these methods to define our application’s UI..

Android UI Layouts
1) Declare UI Elements in XML
 In android, we can create layouts same like
web pages in HTML by using default Views
and ViewGroups in the XML file.
 The layout file must contain only one root
element, which must be a View or ViewGroup
object.
 Once we define the root element, then we can
add additional layout objects or widgets as
child elements to build the View hierarchy
that defines our layout.
 Following is the example of defining a layout
in an XML file (activity_main.xml) using
LinearLayout to hold a TextView, EditText,
and Button.
 We need to create a layout files in /res/layout
project directory, then only the layout files
will compile properly.
<LinearLayout xmlns:android="http://schemas.andro
id.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:text="Enter Name"
/>
<EditText
android:id="@+id/name"
android:ems="10">
</EditText>
<Button
android:id="@+id/getName"
android:text="Get Name" />
</LinearLayout>

Android UI Layouts
2) Load XML Layout File from an Activity
 Once we are done with the creation of layout, we need to load the XML layout resource from our
activity onCreate() callback method like as shown below
 If you observe above code we are calling our layout using setContentView method in the form of
R.layout.layout_file_name. Here our xml file name is activity_main.xml so we used file name
activity_main.
 Generally, during the launch of our activity, onCreate() callback method will be called by android
framework to get the required layout for an activity..
}

Android UI Layouts
2) Instantiate Layout Elements at Runtime
 If we want to instantiate layout elements at runtime, we need to create own custom View and ViewGroup
objects programmatically with required layouts.
 Following is the example of creating a layout using LinearLayout to hold a TextView, EditText and Button
in an activity using custom View and ViewGroup objects programmatically.
@Override
TextView textView1 = new TextView(this);
textView1.setText("Name:");
EditText editText1 = new EditText(this);
editText1.setText("Enter Name");
Button button1 = new Button(this);
button1.setText("Add Name");
LinearLayout linearLayout = new LinearLayout(this);
linearLayout.addView(textView1);
linearLayout.addView(editText1);
linearLayout.addView(button1);
setContentView(linearLayout);
}
}

Android UI Layouts
1) Declare UI Elements in XML
 Width and Height.
• When we define a layout using XML file we need to set width and height for every View and ViewGroup element
using layout_width and layout_height attributes.
• Following is the example of setting width and height for View and ViewGroup elements in XML layout file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:text="Enter Name" />
</LinearLayout>
match_parent: If we set value
match_parent, then the View or
ViewGroup will try to match with parent
width or height.
wrap_content: If we set value
wrap_content, then the View or
ViewGroup will try to adjust its width or
height based on the content.

Android UI Layouts
1) Declare UI Elements in XML Android Layout Attributes
Attribute Description
android:id It is used to uniquely identify the view and ViewGroups
android:layout_width It is used to define the width for View and ViewGroup elements in a layout
android:layout_height It is used to define the height for View and ViewGroup elements in a layout
android:layout_marginLeft It is used to define the extra space in the left side for View and ViewGroup elements in a
layout
android:layout_marginRight It is used to define the extra space in right side for View and ViewGroup elements in layout
android:layout_marginTop It is used to define the extra space on top for View and ViewGroup elements in layout
android:layout_marginBottom It is used to define the extra space in the bottom side for View and ViewGroup elements in a
layout
android:paddingLeft It is used to define the left side padding for View and ViewGroup elements in layout files
android:paddingRight It is used to define the right side padding for View and ViewGroup elements in layout files
android:paddingTop It is used to define padding for View and ViewGroup elements in layout files on top side
android:paddingBottom It is used to define the bottom side padding for View and ViewGroup elements in layout files
android:layout_gravity It is used to define how child Views are positioned

Android Layout Types
 Following are the commonly used layouts in android applications to
implement required designs.
1) Linear Layout
2) Relative Layout
3) Frame Layout
4) Table Layout
5) Web View
6) List View
7) Grid View

1) Android Linear Layout
 In android, LinearLayout is a ViewGroup subclass which is used to render all child View instances one
by one either in a horizontal direction or vertical direction based on the orientation property.
 In android, we can specify the linear layout orientation using android:orientation attribute.
 Following is the pictorial representation of linear layout in android applications.
 In LinearLayout, the child View instances arranged one by one, so the horizontal list will have only
one row of multiple columns and vertical list will have one column of multiple rows.

1) Android Linear Layout
 Following is the way we need to define the LinearLayout in android applications.
 here we defined orientation as vertical, so this aligns all its child layout / views vertically..
android:orientation="vertical" >

</LinearLayout>

1) Android Linear Layout Example
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:orientation="vertical" >
<EditText
android:id="@+id/txtTo"
android:hint="To"/>
<EditText
android:id="@+id/txtSub"
android:hint="Subject"/>
<EditText
android:id="@+id/txtMsg"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="Message"/>
<Button
android:layout_width="100dp"
android:layout_gravity="right"
android:text="Send"/>
</LinearLayout>
package com.tutlane.linearlayout;
import android.support.v7.app.AppCompatActi
vity;
public
class MainActivity extends AppCompatActivit
y {
@Override
protected void onCreate(Bundle
savedInstanceState) {
setContentView(R.layout.activity_ma
in);
}
}

2) Android Relative Layout
 In android, RelativeLayout is a ViewGroup which is used to specify the position of child View
instances relative to each other (Child A to the left of Child B) or relative to the parent (Aligned to the
top of parent).
 Following is the pictorial representation of relative layout in android applications..
 In android, RelativeLayout is very useful to design user interface because by using relative layout we can
eliminate the nested view groups and keep our layout hierarchy flat, which improves the performance of
application.

2) Android Relative Layout: Android Positioning Views in Relative Layout
 As we discussed, in RelativeLayout we need to specify the position of child views relative to each other or
relative to the parent.
 In case if we didn’t specify the position of child views, by default all child views are positioned to top-left of the
layout.
 Following are the some of most useful layout properties available to views in RelativeLayout.
Attribute Description
layout_alignParentTop If it specified “true”, the top edge of view will match the top edge of the parent.
layout_alignParentBottom If it specified “true”, the bottom edge of view will match the bottom edge of parent.
layout_alignParentLeft If it specified “true”, the left edge of view will match the left edge of parent.
layout_alignParentRight If it specified “true”, the right edge of view will match the right edge of the parent.
layout_centerInParent If it specified “true”, the view will be aligned to the centre of parent.
layout_centerHorizontal If it specified “true”, the view will be horizontally centre aligned within its parent.
layout_centerVertical If it specified “true”, the view will be vertically centre aligned within its parent.
layout_above It accepts another sibling view id and places the view above the specified view id.
layout_below It accepts another sibling view id and places the view below the specified view id.
layout_toLeftOf It accepts another sibling view id and places the view left of the specified view id.
layout_toRightOf It accepts another sibling view id and places the view right of the specified view id.
layout_toStartOf It accepts another sibling view id and places the view to start of the specified view id.
layout_toEndOf It accepts another sibling view id and places the view to the end of the specified view id.

2) Android Relative Layout Example
<RelativeLayout xmlns:android="http://schemas.androi
d.com/apk/res/android"
android:paddingRight="10dp">
<Button
android:id="@+id/btn1"
android:layout_alignParentLeft="true"
android:text="Button1" />
<Button
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
<Button
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
<Button
android:layout_alignParentBottom="true"
<Button
android:layout_alignBottom="@+id/btn2"
android:layout_centerHorizontal="true"
<Button
android:layout_above="@+id/btn4"
android:layout_centerHorizontal="true"
<Button
android:layout_toEndOf="@+id/btn1"
android:layout_toRightOf="@+id/btn1"
android:layout_alignParentRight="true"
</RelativeLayout>

2) Android Relative Layout Example
@Override
}
}

3) Android Frame Layout
 In android, Framelayout is a ViewGroup subclass that is used to specify the position of View instances it
contains on the top of each other to display only single View inside the FrameLayout.
 In simple manner, we can say FrameLayout is designed to block out an area on the screen to display a
single item.
 Following is the pictorial representation of frame layout in android applications.
 In android, FrameLayout will act as a placeholder on the screen and it is used to hold a single child view.
 In FrameLayout, the child views are added in a stack and the most recently added child will show on the top.
We can add multiple children views to FrameLayout and control their position by using gravity attributes in
FrameLayout.

3) Android FrameLayout Example
<FrameLayout xmlns:android="http://schemas.androi
android:orientation="vertical">
<ImageView
android:id="@+id/imgvw1"
android:scaleType="centerCrop"
android:src="@drawable/flimg" />
<TextView
android:id="@+id/txtvw1"
android:layout_marginTop="40dp"
android:background="#4C374A"
android:padding="10dp"
android:text="Grand Palace, Bangkok"
android:textColor="#FFFFFF"
android:textSize="20sp" />
<TextView
android:id="@+id/txtvw2"
android:layout_gravity="right|bottom"
android:background="#AA000000"
android:padding="10dp"
android:text="21/Aug/2017"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</FrameLayout>
@Override
}
}

3) Android Frame Layout Example

4) Android Table Layout
 In android, TableLayout is a ViewGroup subclass that is used to display the child View elements in rows
and columns.
 Following is the pictorial representation of table layout in android applications..
 In android, TableLayout will position its children elements into rows and columns and it won’t display any
border lines for rows, columns or cells.
 The TableLayout in android will work same as the HTML table and the table will have as many columns as
the row with the most cells. The TableLayout can be explained as <table> and TableRow is like <tr> element..

4) Android TableLayout Example
<TableLayout xmlns:android="http://schemas.androi
android:layout_marginTop="100dp"
android:paddingRight="10dp" >
<TableRow android:background="#0079D6" androi
d:padding="5dp">
<TextView
android:text="UserId" />
<TextView
android:text="User Name" />
<TextView
android:text="Location" />
</TableRow>
<TableRow android:background="#DAE8FC" android:pa
dding="5dp">
<TextView
android:text="1" />
<TextView
android:text="Suresh Dasari" />
<TextView
android:text="Hyderabad" />
</TableRow>

@Override
}
}

5) Android Web View
 In android, WebView is an extension of View class and it is used to show the static HTML web pages
content or remote web pages content with URL in android applications as a part of our activity layout.
 Generally, in android, WebView will act as an embedded browser to include the web pages content in our
activity layout and it won’t contain any features of normal browsers, such as address bar, navigation
controls, etc.
 Following is the pictorial representation of WebView in android applications..
 Generally, in android WebView is useful to include and show the content of other web pages or application
content in our required pages, such as an end-user agreements, etc..

5) Android WebView Example
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
package com.tutlane.webview;
import android.webkit.WebView;
@Override
WebView wv = (WebView) findViewById(R.id.webview);
String customHtml = "<html><body><h1>Welcome to Tutlane</h1>" +
"<h2>Welcome to Tutlane</h2><h3>Welcome to Tutlane</h3>" +
"<p>It's a Static Web HTML Content.</p>" +
"</body></html>";
wv.loadData(customHtml, "text/html", "UTF-8");
}
}

5) Android Show Web URL Content in WebView Example
package com.tutlane.webview;
import android.webkit.WebView;
@Override
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://tutlane.com");
}
}

5) Android Show Web URL Content in WebView Example
package="com.tutlane.webview">
<application
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>

6) Android List View
 In android, ListView is a ViewGroup that is used to display the list of scrollable of items in multiple rows
and the list items are automatically inserted to the list using an adapter.
 Generally, the adapter pulls data from sources such as an array or database and converts each item into a
result view and that’s placed into the list.
 Following is the pictorial representation of listview in android applications...

6) Android List View
 Android Adapter
 In android, Adapter will act as an intermediate between the data sources and adapter views such as
ListView, Gridview to fill the data into adapter views.
 The adapter will hold the data and iterates through an items in data set and generate the views for each
item in the list.
 Generally, in android we have a different types of adapters available to fetch the data from different data
sources to fill the data into adapter views, those are
Adapter Description
ArrayAdapter It will expects an Array or List as input.
CurosrAdapter It will accepts an instance of cursor as an input.
SimpleAdapter It will accepts a static data defined in the resources.
BaseAdapter It is a generic implementation for all three adapter types and it can be
used for ListView, Gridview or Spinners based on our requirements

6) Android ListView Example
android:orientation="vertical">
<ListView
android:id="@+id/userlist"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

package com.tutlane.listview;
import android.widget.ArrayAdapter;
import android.widget.ListView;
private ListView mListView;
private ArrayAdapter aAdapter;
private String[] users = { "Suresh Dasari", "Rohini Alavala", "Trishika Dasari",
"Praveen Alavala", "Madav Sai", "Hamsika Yemineni"};
@Override
mListView = (ListView) findViewById(R.id.userlist);
aAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, users);
mListView.setAdapter(aAdapter);
}
}

7) Android GridView
 In android, Grid View is a ViewGroup that is used to display items in a two dimensional, scrollable grid and grid
items are automatically inserted to the gridview layout using a list adapter.
 Generally, the adapter pulls data from sources such as an array or database and converts each item into a result view
and that’s placed into the list.
 Following is the pictorial representation of GridView in android applications.

7) Android GridView
 Android Adapter
 In android, Adapter will act as an intermediate between the data sources and adapter views such as
ListView, Gridview to fill the data into adapter views.
 The adapter will hold the data and iterates through an items in data set and generate the views for each
item in the list.
 Generally, in android we have a different types of adapters available to fetch the data from different data
sources to fill the data into adapter views, those are
Adapter Description
ArrayAdapter It will expects an Array or List as input.
CurosrAdapter It will accepts an instance of cursor as an input.
SimpleAdapter It will accepts a static data defined in the resources.
BaseAdapter It is a generic implementation for all three adapter types and it can be
used for ListView, Gridview or Spinners based on our requirements

6) Android GridView Example
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />

package com.tutlane.gridview;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return thumbImages.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
imageView.setImageResource(thumbImages[position]);
return imageView;
}
// Add all our images to arraylist
public Integer[] thumbImages = {
R.drawable.img1, R.drawable.img2,
R.drawable.img5
};
}

8) Android Absolute Layout
 An Absolute Layout allows you to specify the exact location .i.e., X and Y coordinates of its children with
respect to the origin at the top left corner of the layout.
 The absolute layout is less flexible and harder to maintain for varying sizes of screens that’s why it is not
recommended. Although Absolute Layout is deprecated now..
Some of the important Absolute Layout attributes are the following:
 android:id: It uniquely specifies the absolute layout
 android:layout_x: It specifies X-Coordinate of the Views
(Possible values of this is in density-pixel or pixel)
 android:layout_y: It specifies Y-Coordinate of the Views
(Possible values of this is in dp or px)

8) AndroidAbsoluteLayout Example
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity">

<TextView
android:layout_x="100px"
android:layout_y="300px" />
<TextView
android:layout_x="120px"
android:layout_y="350px" />
</AbsoluteLayout>
package com.tutlane.absolutelayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity
{
TextView heading, subHeading;
@Override
// Referencing the TextViews
heading = (TextView)
findViewById(R.id.heading);
subHeading = (TextView)
findViewById(R.id.subHeading);
// Setting text dynamically
heading.setText("Computer Science Portal");
subHeading.setText("GeeksForGeeks");
}
}

Mobile Application Development-Components and Layouts

Recommended

Recommended

More Related Content

Similar to Mobile Application Development-Components and Layouts

Similar to Mobile Application Development-Components and Layouts (20)

More from ChandrakantDivate1

More from ChandrakantDivate1 (20)

Mobile Application Development-Components and Layouts