CHAPTER 4
CUSTOMIZING
OUR
FIRST APP
Customizing The App
Now , in this session , we will try to change the default text
of our app from “Hello User” to “I am learning Android”.
But before doing that we must understand the project
structure of an Android app so that we can easily
customize it.
Understanding The Project
Structure
When we create a project in Android Studio , it generates
several default files for us.
Some of them are java files while others are XML files.
Understanding The Project
Structure
Take a look at the panel on the left – this displays the
directory structure of our project.
There are two main branches, app and Gradle Scripts.
Expand the app branch.
Understanding The Project
Structure
Understanding The Project
Structure
There are three main sections here, manifests, java,
and res (which is short for resources).
The manifest file declares many of our app's broader
properties, such as the permissions required from the user.
Understanding The Project
Structure
Android projects keep the UI part and java code separate.
The java code is where we perform two actions:
alldynamic initialization and
event handling
The java code is written in .java file which is found in the
java option according to a package hierarchy, which is
in.scabhopal.myfirstapplication.MainActivity in this
example.
Understanding The Project
Structure
The UI part is called layout and it contains the layout information for the our
app.
By layout we mean the location , size and initial text of our app
In Android , layouting is done using an XML file called activity_main.xml
It is found in the reslayout folder.
Understanding The Project
Structure
Apart from the layout folder , the res folder also has 3 more
subfolders which are:
drawable: an initially empty location in which to store an app's
artwork
mipmap: a location containing various ic_launcher.png files that
store launcher screen icons of different resolutions
values: a location containing colors.xml, dimens.xml, strings.xml,
and styles.xml
What Is Gradle ?
Gradle is a build system.
The build system automatically takes all the source files
(.java or .xml), then converts them to dex files, and groups
all of them into one compressed file, i.e. APK.
It also allows us to add third party libraries to our project.
Android Studio Gradle Files
Every Android Studio project contains two kinds of Gradle
build files:
Top-Level Build File: This is where we’ll find the configuration
options that are common to all the modules that make up our
project.
Module-Level Build File: Each module has its own Gradle
build file that contains module-specific build settings. We'll
spend most of our time editing module-level build file(s) rather
Understanding
activity_main.xml File
As mentioned previously , all the layouting(setting up of
UI) in Android is done using an XML file which is called
activity_main.xml.
It is very important to understand the contents of this file so
that we can modify it as per our requirement.
But before that let’s understand little bit of XML
What Is XML ?
XML stands for EXtensible Markup Language.
It is a markup language much like HTML.
A markup language is a language which encloses data
between tags ( < >)
Why Android Uses XML ?
XML is used in android apps to design the UI layout.
The same thing could be done in Java too at run
time, however, describing a layout in XML during design time
saves us from writing a lot of code and also allows us to get a
preview of our layout in the designer.
In simple words we can say that when we have
Layout and Source Code separated the management of the
app becomes easier.
Rules Of XML
XML tags are case sensitive
Entire XML document must be enclosed within a root tag .
In android this root tag is a layout tag for ex:
RelativeLayout.
Every XML tag should have proper closing tag
Every XML file follows an XSD(XML Schema Definition)
which contains rules of XML which the file has to follow.
The activity_main.xml File
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="16dp"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="in.scabhopal.myfirstapplication.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“Hello World!"
android:id="@+id/textView" />
</RelativeLayout>
Understanding
activity_main.xml File
The first tag is <RelativeLayout>
It is called ViewGroup and it allows us to set locations of the
UI elements w.r.t each other.
That is while placing the next component on screen we can tell
android to set it’s position with respect to other available
components on screen
Understanding
activity_main.xml File
The next line is xmlns:android with some URL
This is XSD and as mentioned previously it contains the
XML rules that the file activity_main has to follow
Understanding
activity_main.xml File
The next three attributes are.
android:id This allows us to provide some id to the layout so that
we can refer to it in the java code
android:layout_widthAllows us to decide how much width on the
screen this layout will cover. By setting it to match_parent we are
telling android to cover the entire width of the screen
android:layout_height Allows us to decide how much height on
the screen this layout will cover. By setting it to match_parent we
are telling android to cover the entire height of the screen
Understanding
activity_main.xml File
Other possible values for width and height are
wrap_content, some value in pixels or some value in dp.
The value wrap_content means we want to set the
width/height as per the content inside the component
Understanding
activity_main.xml File
The unit dp stands for device/density independent pixel.
As we know android runs on variety of devices , each having a different
density( pixel ratio).
So if we mention the size of a component in pixels , it becomes of fixed size
and might look weird on other devices.
So android provides us a virtual unit called dp , and at run time android
calculates the actual size with respect to screen density.
So using dp will make our Android applications compatible with multiple
screen densities and resolutions.
Understanding
activity_main.xml File
The next four attributes are mainly for padding .
Padding means the distance we want to set from devices inner
boundary
android:paddingLeft This is the distance at which a component will
appear from left boundary . By default it is 16dp
android:paddingRight This is the distance at which a component will
appear from right boundary . By default it is 16dp
android:paddingTop This is the distance at which a component will
appear from top boundary . By default it is 16dp
android:paddingBottom This is the distance at which a component will
appear from bottom boundary . By default it is 16dp
Understanding
activity_main.xml File
The last tag is a <TextView> tag.
A TextView in android is just as good as a Label of java,
i.e. We use it for displaying textual data on the screen.
Then we have set it’s 3 properties width, height and text.
The text property holds the actual text we want to display
which in our case is “Hello World”
Changing The Default
Message
To change the message , we simply have to change the
contents of text attribute of TextView component.
This can be done in three ways:
By either selecting the component in design tab and then in
properties window we can change the content of text property
By going to text tab and writing the following code: android:text=“I
am learning Android!”
By using strings.xml (discussed later)
Changing The Default Message
Understanding The Java Code
The Java source code of an application is placed in
the java directory of the project structure in a file, often
named MainActivity.java
This Java file represents an application activity and is important
because it controls the behaviour of the application when it is first
launched.
It is a Java file that is auto-generated when the project is first built.
Let’s understand this auto-generated code
Understanding The Java Code
package in.scabhopal.myfirstapplication;
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);
}
}
Understanding The Java Code
The first line is called the package declaration, and it
contains the package name that we chose when we
created the project.
Every Java file will have a package declaration at the top
of the code.
Understanding The Java Code
The next two lines of code import the two classes which
we have to use in our app called AppCompatActivity and
Bundle .
These two classes are very much essential for the proper
functioning of our app and more important amongst them
is the AppCompatActivity class which itself extends from
another class called Activity .
So first , let’s discuss what is an Activity
What Is An Activity ?
An Activity is a window that contains the user interface of
our application.
An Android application can have one or more activities.
Activity works very much similar to that of Main-class or
Driver-class of a java application i.e. an Activity is the
entry point of execution of any android app.
What Is onCreate
onCreate(( )?
Now , just as we have main( ) method in java , which is the first
method called in a java program , similarly we have the
onCreate( ) in Android.
It’s the method from where the execution starts.
So , whenever we design an android app we have to design
the onCreate( ) method as our starting point.
But since onCreate( ) is a method of Activity class so we have
to extend this class so that we can override this method and
write our code in it.
What Is onCreate
onCreate(( )?
This approach can be compared with the way we design
an Applet in java.
Recall that while creating an applet in java we have to
extend the Applet class and override it’s lifecycle methods
like init() , paint() etc.
Same is the case here, i.e. We extend the Activity class
and override it’s onCreate( ) method.
Activity LifeCycle Methods
Moreover , just like an Applet has 5 lifecycle methods , similarly an
Activity has 7 lifecycle methods called:
onCreate( )
onStart( )
onResume( )
onPause( )
onStop( )
onRestart( )
onDestroy( )
Initially we override only the first method , but in later sessions we
will learn all of them in detail
Overriding onCreate
onCreate(( )
Here’s the code auto-generated for us as an overridden version of
onCreate( ) method:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
The first line simply calls the super classes' version of the method
onCreate( ) .
This is required because each lifecycle method in
superclass Activity contains code that must execute in addition to the
code you define in your overridden lifecycle methods, otherwise,
an exception will occur
What Is Bundle ?
Bundle is the data holder , which holds the data which is passed
between two activities.
In case of forceful closing of an Activity , android will save all it’s
data so that it can be used to restore Activity's state later.
This saved data is passed by android inside the Bundle object as
argument to onCreate( ) whenever android recreates the Activity.
For example: in case of low memory or phone getting rotated.
However on first run the Bundle object is empty
Why we call setContentView
setContentView(( )?
The last line of the method body is the call to the method
setContentView( ).
When an activity is created, it needs a user interface to
manage. To get the activity it’s user interface, we call the
method setContentView( ).
This method belongs to Activity class and accepts id of layout
file as argument and inflates a layout and puts it on screen.
When a layout is inflated, each widget in the layout file is
instantiated as defined by its attributes
The AppCompatActivity class
A big challenge developers face when using new Android
features is backward compatibility with earlier Android
platforms.
To overcome this problem , Google has introduced a
special library that enable us to use newer Android
features in apps targeting current and past Android
platforms.
The AppCompatActivity class
This library is called AppCompat library and the class
AppCompatActivity is a subclass of Activity that supports
this AppCompat library.
So whenever we want our app to be backward
compatible we always extend AppCompatActivity
instead of Activity
End Of Lecture
Call us @ : 0755-4271659, 7879165533
Agenda for Next Lecture:
1. Using strings.xml
2. Understanding The Concept Of android:id
3. Introduction To R.java
4. Accessing Views In Java Code
