SlideShare a Scribd company logo
Components and Layouts
Chapter - 3
C. P. Divate
The Development Process of Android Application
The Development Process of Android Application
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:
Creating a New Android Project
 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:
Creating a New Android Project
 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:
Creating a New Android Project
 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..
Android App / Project Folder Structure
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.
Android App / Project Folder Structure
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.
Android App / Project Folder Structure
res (Resources) Folder:
 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.
Android App / Project Folder Structure
res (Resources) Folder:
 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.
Android App / Project Folder Structure
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.
Android App / Project Folder Structure
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 App / Project Folder Structure
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 App / Project Folder Structure
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 App / Project Folder Structure
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 App / Project Folder Structure
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.
<?xml version="1.0" encoding="utf-8"?>
<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 App / Project Folder Structure
Android Manifest File (AndroidManifest.xml):
<?xml version="1.0" encoding="utf-8"?>
<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" >
<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>
Android App / Project Folder Structure
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 Application Components
 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 Application Components
 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.
<?xml version="1.0" encoding="utf-8"?>
<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 Application Components
 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 Application Components
 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
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
 Once onCreate() method execution is finished, the activity will enter into Started state and the system calls
the onStart() method.
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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()
}
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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.
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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.
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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.
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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();
}
Android Application Components
 Android Activities: Android Activity Lifecycle Callback Methods
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 Application Components
 Android Activities: Android Activity Lifecycle Example
MainActivity.java File Code
package com.tutlane.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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 Application Components
 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 Application Components
 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 Application Components
 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 Application Components
 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 Application Components
 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.
Android Application Components
 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.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.andro
id.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Name"
/>
<EditText
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10">
</EditText>
<Button
android:id="@+id/getName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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..
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
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.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
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.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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
Android Layout Types
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.
Android Layout Types
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..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Add Child Views Here -->
</LinearLayout>
1) Android Linear Layout Example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:orientation="vertical" >
<EditText
android:id="@+id/txtTo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="To"/>
<EditText
android:id="@+id/txtSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject"/>
<EditText
android:id="@+id/txtMsg"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="Message"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Send"/>
</LinearLayout>
package com.tutlane.linearlayout;
import android.support.v7.app.AppCompatActi
vity;
import android.os.Bundle;
public
class MainActivity extends AppCompatActivit
y {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ma
in);
}
}
Android Layout Types
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.
Android Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.androi
d.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button2" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button3" />
<Button
android:id="@+id/btn4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button4" />
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn2"
android:layout_centerHorizontal="true"
android:text="Button5" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btn4"
android:layout_centerHorizontal="true"
android:text="Button6" />
<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/btn1"
android:layout_toRightOf="@+id/btn1"
android:layout_alignParentRight="true"
android:text="Button7" />
</RelativeLayout>
2) Android Relative Layout Example
package com.tutlane.linearlayout;
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 Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.androi
d.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imgvw1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/flimg" />
<TextView
android:id="@+id/txtvw1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:background="#AA000000"
android:padding="10dp"
android:text="21/Aug/2017"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</FrameLayout>
package com.tutlane.linearlayout;
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);
}
}
3) Android Frame Layout Example
Android Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.androi
d.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<TableRow android:background="#0079D6" androi
d:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="UserId" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="User Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Location" />
</TableRow>
<TableRow android:background="#DAE8FC" android:pa
dding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suresh Dasari" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hyderabad" />
</TableRow>
4) Android TableLayout Example
<TableRow android:background="#DAE8FC" android:p
adding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Rohini Alavala" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Guntur" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padd
ing="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Trishika Dasari" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Guntur" />
</TableRow>
</TableLayout>
4) Android TableLayout Example
package com.tutlane.linearlayout;
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 Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<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.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tutlane.webview">
<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">
<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>
Android Layout Types
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...
Android Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/userlist"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
6) Android ListView Example
package com.tutlane.listview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends AppCompatActivity {
private ListView mListView;
private ArrayAdapter aAdapter;
private String[] users = { "Suresh Dasari", "Rohini Alavala", "Trishika Dasari",
"Praveen Alavala", "Madav Sai", "Hamsika Yemineni"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.userlist);
aAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, users);
mListView.setAdapter(aAdapter);
}
}
6) Android ListView Example
Android Layout Types
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.
Android Layout Types
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
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
6) Android ListView Example
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;
}
6) Android ListView Example
// 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.img3, R.drawable.img4,
R.drawable.img5, R.drawable.img6,
R.drawable.img7, R.drawable.img8,
R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4,
R.drawable.img5, R.drawable.img6,
R.drawable.img7, R.drawable.img8,
R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4,
R.drawable.img5
};
}
Android Layout Types
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity">
<!--Setting up TextViews-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100px"
android:layout_y="300px" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="120px"
android:layout_y="350px" />
</AbsoluteLayout>
package com.tutlane.absolutelayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity
{
TextView heading, subHeading;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 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");
}
}

More Related Content

Similar to Mobile Application Development-Components and Layouts

Android Basic- CMC
Android Basic- CMCAndroid Basic- CMC
Android Basic- CMC
Pragati Singh
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
Aly Abdelkareem
 
Kotlin for Android App Development Presentation
Kotlin for Android App Development PresentationKotlin for Android App Development Presentation
Kotlin for Android App Development Presentation
Knoldus Inc.
 
Android Application Development - Level 1
Android Application Development - Level 1Android Application Development - Level 1
Android Application Development - Level 1
Isham Rashik
 
Google Android
Google AndroidGoogle Android
Google Android
Michael Angelo Rivera
 
Android beginners David
Android beginners DavidAndroid beginners David
Android beginners David
Arun David Johnson R
 
Hello android example.
Hello android example.Hello android example.
Hello android example.
Rahul Rana
 
Android Development project
Android Development projectAndroid Development project
Android Development project
Minhaj Kazi
 
Android development session
Android development sessionAndroid development session
Android development session
Esraa Ibrahim
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & Examples
Chandrakant Divate
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-
TejamFandat
 
Unit2
Unit2Unit2
Android terminologies
Android terminologiesAndroid terminologies
Android terminologies
jerry vasoya
 
Industrial Training in Android Application
Industrial Training in Android ApplicationIndustrial Training in Android Application
Industrial Training in Android Application
Arcadian Learning
 
Android app fundamentals
Android app fundamentalsAndroid app fundamentals
Android app fundamentals
Amr Salman
 
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_androidAndroid Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_android
Denis Minja
 
Android Tutorial For Beginners Part-1
Android Tutorial For Beginners Part-1Android Tutorial For Beginners Part-1
Android Tutorial For Beginners Part-1
Amit Saxena
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
CITSimon
 
Android apps development
Android apps developmentAndroid apps development
Android apps development
Monir Zzaman
 
Activity
ActivityActivity
Activity
NikithaNag
 

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

Android Basic- CMC
Android Basic- CMCAndroid Basic- CMC
Android Basic- CMC
 
Introduction to Android Development
Introduction to Android DevelopmentIntroduction to Android Development
Introduction to Android Development
 
Kotlin for Android App Development Presentation
Kotlin for Android App Development PresentationKotlin for Android App Development Presentation
Kotlin for Android App Development Presentation
 
Android Application Development - Level 1
Android Application Development - Level 1Android Application Development - Level 1
Android Application Development - Level 1
 
Google Android
Google AndroidGoogle Android
Google Android
 
Android beginners David
Android beginners DavidAndroid beginners David
Android beginners David
 
Hello android example.
Hello android example.Hello android example.
Hello android example.
 
Android Development project
Android Development projectAndroid Development project
Android Development project
 
Android development session
Android development sessionAndroid development session
Android development session
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & Examples
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-
 
Unit2
Unit2Unit2
Unit2
 
Android terminologies
Android terminologiesAndroid terminologies
Android terminologies
 
Industrial Training in Android Application
Industrial Training in Android ApplicationIndustrial Training in Android Application
Industrial Training in Android Application
 
Android app fundamentals
Android app fundamentalsAndroid app fundamentals
Android app fundamentals
 
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_androidAndroid Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_android
 
Android Tutorial For Beginners Part-1
Android Tutorial For Beginners Part-1Android Tutorial For Beginners Part-1
Android Tutorial For Beginners Part-1
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Android apps development
Android apps developmentAndroid apps development
Android apps development
 
Activity
ActivityActivity
Activity
 

More from Chandrakant Divate

Web Technology LAB MANUAL for Undergraduate Programs
Web Technology  LAB MANUAL for Undergraduate ProgramsWeb Technology  LAB MANUAL for Undergraduate Programs
Web Technology LAB MANUAL for Undergraduate Programs
Chandrakant Divate
 
UNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the NatureUNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the Nature
Chandrakant Divate
 
Study of Computer Hardware System using Block Diagram
Study of Computer Hardware System using Block DiagramStudy of Computer Hardware System using Block Diagram
Study of Computer Hardware System using Block Diagram
Chandrakant Divate
 
Computer System Output Devices Peripherals
Computer System Output  Devices PeripheralsComputer System Output  Devices Peripherals
Computer System Output Devices Peripherals
Chandrakant Divate
 
Computer system Input Devices Peripherals
Computer system Input  Devices PeripheralsComputer system Input  Devices Peripherals
Computer system Input Devices Peripherals
Chandrakant Divate
 
Computer system Input and Output Devices
Computer system Input and Output DevicesComputer system Input and Output Devices
Computer system Input and Output Devices
Chandrakant Divate
 
Introduction to COMPUTER’S MEMORY RAM and ROM
Introduction to COMPUTER’S MEMORY RAM and ROMIntroduction to COMPUTER’S MEMORY RAM and ROM
Introduction to COMPUTER’S MEMORY RAM and ROM
Chandrakant Divate
 
Introduction to Computer Hardware Systems
Introduction to Computer Hardware SystemsIntroduction to Computer Hardware Systems
Introduction to Computer Hardware Systems
Chandrakant Divate
 
Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2
Chandrakant Divate
 
Fundamentals of Internet of Things (IoT)
Fundamentals of Internet of Things (IoT)Fundamentals of Internet of Things (IoT)
Fundamentals of Internet of Things (IoT)
Chandrakant Divate
 
Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)
Chandrakant Divate
 
Fundamentals of functions in C program.pptx
Fundamentals of functions in C program.pptxFundamentals of functions in C program.pptx
Fundamentals of functions in C program.pptx
Chandrakant Divate
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C Programming
Chandrakant Divate
 
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN CINPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
Chandrakant Divate
 
Programming in C - Fundamental Study of Strings
Programming in C - Fundamental Study of  StringsProgramming in C - Fundamental Study of  Strings
Programming in C - Fundamental Study of Strings
Chandrakant Divate
 
Basics of Control Statement in C Languages
Basics of Control Statement in C LanguagesBasics of Control Statement in C Languages
Basics of Control Statement in C Languages
Chandrakant Divate
 
Features and Fundamentals of C Language for Beginners
Features and Fundamentals of C Language for BeginnersFeatures and Fundamentals of C Language for Beginners
Features and Fundamentals of C Language for Beginners
Chandrakant Divate
 
Basics of Programming Algorithms and Flowchart
Basics of Programming Algorithms and FlowchartBasics of Programming Algorithms and Flowchart
Basics of Programming Algorithms and Flowchart
Chandrakant Divate
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To Curves
Chandrakant Divate
 
Computer Graphics Three-Dimensional Geometric Transformations
Computer Graphics Three-Dimensional Geometric TransformationsComputer Graphics Three-Dimensional Geometric Transformations
Computer Graphics Three-Dimensional Geometric Transformations
Chandrakant Divate
 

More from Chandrakant Divate (20)

Web Technology LAB MANUAL for Undergraduate Programs
Web Technology  LAB MANUAL for Undergraduate ProgramsWeb Technology  LAB MANUAL for Undergraduate Programs
Web Technology LAB MANUAL for Undergraduate Programs
 
UNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the NatureUNIVERSAL HUMAN VALUES- Harmony in the Nature
UNIVERSAL HUMAN VALUES- Harmony in the Nature
 
Study of Computer Hardware System using Block Diagram
Study of Computer Hardware System using Block DiagramStudy of Computer Hardware System using Block Diagram
Study of Computer Hardware System using Block Diagram
 
Computer System Output Devices Peripherals
Computer System Output  Devices PeripheralsComputer System Output  Devices Peripherals
Computer System Output Devices Peripherals
 
Computer system Input Devices Peripherals
Computer system Input  Devices PeripheralsComputer system Input  Devices Peripherals
Computer system Input Devices Peripherals
 
Computer system Input and Output Devices
Computer system Input and Output DevicesComputer system Input and Output Devices
Computer system Input and Output Devices
 
Introduction to COMPUTER’S MEMORY RAM and ROM
Introduction to COMPUTER’S MEMORY RAM and ROMIntroduction to COMPUTER’S MEMORY RAM and ROM
Introduction to COMPUTER’S MEMORY RAM and ROM
 
Introduction to Computer Hardware Systems
Introduction to Computer Hardware SystemsIntroduction to Computer Hardware Systems
Introduction to Computer Hardware Systems
 
Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2
 
Fundamentals of Internet of Things (IoT)
Fundamentals of Internet of Things (IoT)Fundamentals of Internet of Things (IoT)
Fundamentals of Internet of Things (IoT)
 
Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)
 
Fundamentals of functions in C program.pptx
Fundamentals of functions in C program.pptxFundamentals of functions in C program.pptx
Fundamentals of functions in C program.pptx
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C Programming
 
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN CINPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
INPUT AND OUTPUT STATEMENTS IN PROGRAMMING IN C
 
Programming in C - Fundamental Study of Strings
Programming in C - Fundamental Study of  StringsProgramming in C - Fundamental Study of  Strings
Programming in C - Fundamental Study of Strings
 
Basics of Control Statement in C Languages
Basics of Control Statement in C LanguagesBasics of Control Statement in C Languages
Basics of Control Statement in C Languages
 
Features and Fundamentals of C Language for Beginners
Features and Fundamentals of C Language for BeginnersFeatures and Fundamentals of C Language for Beginners
Features and Fundamentals of C Language for Beginners
 
Basics of Programming Algorithms and Flowchart
Basics of Programming Algorithms and FlowchartBasics of Programming Algorithms and Flowchart
Basics of Programming Algorithms and Flowchart
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To Curves
 
Computer Graphics Three-Dimensional Geometric Transformations
Computer Graphics Three-Dimensional Geometric TransformationsComputer Graphics Three-Dimensional Geometric Transformations
Computer Graphics Three-Dimensional Geometric Transformations
 

Mobile Application Development-Components and Layouts

  • 2. The Development Process of Android Application
  • 3. The Development Process of Android Application
  • 4. The Development Process of Android Application
  • 5. 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:
  • 6. Creating a New Android Project  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:
  • 7. Creating a New Android Project  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:
  • 8. Creating a New Android Project  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:
  • 9. 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.
  • 10. 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..
  • 11. Android App / Project Folder Structure 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.
  • 12. Android App / Project Folder Structure 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.
  • 13. Android App / Project Folder Structure res (Resources) Folder:  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.
  • 14. Android App / Project Folder Structure res (Resources) Folder:  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.
  • 15. Android App / Project Folder Structure 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.
  • 16. Android App / Project Folder Structure 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..
  • 17. Android App / Project Folder Structure 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.
  • 18. Android App / Project Folder Structure 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>
  • 19. Android App / Project Folder Structure 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); } }
  • 20. Android App / Project Folder Structure 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. <?xml version="1.0" encoding="utf-8"?> <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" >
  • 21. Android App / Project Folder Structure Android Manifest File (AndroidManifest.xml): <?xml version="1.0" encoding="utf-8"?> <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" > <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>
  • 22. Android App / Project Folder Structure These are the main folders and files required to implement an application in android studio.
  • 23. 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
  • 24. Android Application Components  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.
  • 25. Android Application Components  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. <?xml version="1.0" encoding="utf-8"?> <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.
  • 26. Android Application Components  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.
  • 27. Android Application Components  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 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }  Once onCreate() method execution is finished, the activity will enter into Started state and the system calls the onStart() method.
  • 28. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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() }
  • 29. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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.
  • 30. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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.
  • 31. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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.
  • 32. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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(); }
  • 33. Android Application Components  Android Activities: Android Activity Lifecycle Callback Methods 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(); }
  • 34. Android Application Components  Android Activities: Android Activity Lifecycle Example MainActivity.java File Code package com.tutlane.helloworld; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 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"); }
  • 35. Android Application Components  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"); } }
  • 36. Android Application Components  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.
  • 37. Android Application Components  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.
  • 38. Android Application Components  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
  • 39. Android Application Components  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.
  • 40. Android Application Components  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.
  • 41. 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.
  • 42. 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.
  • 43. 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.
  • 44.
  • 45. 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..
  • 46. 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. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andro id.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/fstTxt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Enter Name" /> <EditText android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10"> </EditText> <Button android:id="@+id/getName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Get Name" /> </LinearLayout>
  • 47. 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.. protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }
  • 48. 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. public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); 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); } }
  • 49. 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. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/fstTxt" android:layout_width="wrap_content" android:layout_height="wrap_content" 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.
  • 50. 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
  • 51. 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
  • 52. Android Layout Types 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.
  • 53. Android Layout Types 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.. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- Add Child Views Here --> </LinearLayout>
  • 54. 1) Android Linear Layout Example <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="20dp" android:paddingRight="20dp" android:orientation="vertical" > <EditText android:id="@+id/txtTo" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="To"/> <EditText android:id="@+id/txtSub" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Subject"/> <EditText android:id="@+id/txtMsg" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top" android:hint="Message"/> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:text="Send"/> </LinearLayout> package com.tutlane.linearlayout; import android.support.v7.app.AppCompatActi vity; import android.os.Bundle; public class MainActivity extends AppCompatActivit y { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_ma in); } }
  • 55. Android Layout Types 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.
  • 56. Android Layout Types 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.
  • 57. 2) Android Relative Layout Example <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.androi d.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="10dp" android:paddingRight="10dp"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:text="Button1" /> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:text="Button2" /> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:text="Button3" /> <Button android:id="@+id/btn4" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="Button4" /> <Button android:id="@+id/btn5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/btn2" android:layout_centerHorizontal="true" android:text="Button5" /> <Button android:id="@+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/btn4" android:layout_centerHorizontal="true" android:text="Button6" /> <Button android:id="@+id/btn7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toEndOf="@+id/btn1" android:layout_toRightOf="@+id/btn1" android:layout_alignParentRight="true" android:text="Button7" /> </RelativeLayout>
  • 58. 2) Android Relative Layout Example package com.tutlane.linearlayout; 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); } }
  • 59. Android Layout Types 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.
  • 60. 3) Android FrameLayout Example <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.androi d.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imgvw1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/flimg" /> <TextView android:id="@+id/txtvw1" android:layout_width="match_parent" android:layout_height="wrap_content" 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_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:background="#AA000000" android:padding="10dp" android:text="21/Aug/2017" android:textColor="#FFFFFF" android:textSize="18sp" /> </FrameLayout> package com.tutlane.linearlayout; 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); } }
  • 61. 3) Android Frame Layout Example
  • 62. Android Layout Types 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..
  • 63. 4) Android TableLayout Example <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.androi d.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="100dp" android:paddingLeft="10dp" android:paddingRight="10dp" > <TableRow android:background="#0079D6" androi d:padding="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="UserId" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="User Name" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Location" /> </TableRow> <TableRow android:background="#DAE8FC" android:pa dding="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Suresh Dasari" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Hyderabad" /> </TableRow>
  • 64. 4) Android TableLayout Example <TableRow android:background="#DAE8FC" android:p adding="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Rohini Alavala" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Guntur" /> </TableRow> <TableRow android:background="#DAE8FC" android:padd ing="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Trishika Dasari" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Guntur" /> </TableRow> </TableLayout>
  • 65. 4) Android TableLayout Example package com.tutlane.linearlayout; 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); } }
  • 66. Android Layout Types 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..
  • 67. 5) Android WebView Example <?xml version="1.0" encoding="utf-8"?> <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.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 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"); } }
  • 68. 5) Android Show Web URL Content in WebView Example package com.tutlane.webview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = (WebView) findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://tutlane.com"); } }
  • 69. 5) Android Show Web URL Content in WebView Example <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.tutlane.webview"> <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"> <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>
  • 70. Android Layout Types 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...
  • 71. Android Layout Types 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
  • 72. 6) Android ListView Example <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ListView android:id="@+id/userlist" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>
  • 73. 6) Android ListView Example package com.tutlane.listview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ListView; public class MainActivity extends AppCompatActivity { private ListView mListView; private ArrayAdapter aAdapter; private String[] users = { "Suresh Dasari", "Rohini Alavala", "Trishika Dasari", "Praveen Alavala", "Madav Sai", "Hamsika Yemineni"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mListView = (ListView) findViewById(R.id.userlist); aAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, users); mListView.setAdapter(aAdapter); } }
  • 75. Android Layout Types 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.
  • 76. Android Layout Types 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
  • 77. 6) Android GridView Example <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="match_parent" android:layout_height="match_parent" android:columnWidth="110dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" />
  • 78. 6) Android ListView Example 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; }
  • 79. 6) Android ListView Example // 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.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7, R.drawable.img8, R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7, R.drawable.img8, R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5 }; }
  • 80. Android Layout Types 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)
  • 81. 8) AndroidAbsoluteLayout Example <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".MainActivity"> <!--Setting up TextViews--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="100px" android:layout_y="300px" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="120px" android:layout_y="350px" /> </AbsoluteLayout> package com.tutlane.absolutelayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.TextView; public class MainActivity extends AppCompatActivity { TextView heading, subHeading; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 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"); } }