Creating the First Android

Application
1. Prerequisites
Before creating an Android application, ensure that the following
software is installed:
• Java Development Kit (JDK) – Required for compiling Java code.
• Eclipse IDE – The development environment for writing and
debugging code.
• Android SDK – Contains libraries and tools for Android
development.
• ADT (Android Development Tools) Plugin – An Eclipse plugin that
integrates Android development features.
• AVD (Android Virtual Device) – An emulator for testing Android
applications.
 Creating the First Android Application
Create a New Android Project
1. Open Eclipse.
2. Click on File → New → Android Application Project.
3. Enter the Application Name (e.g., MyFirstApp).
4. Enter the Project Name (same as Application Name).
5. Enter the Package Name (e.g., com.example.myfirstapp).
6. Select the Minimum Required SDK, Target SDK, and Compile With SDK versions.
7. Choose the Theme (Default, Holo, etc.).
8. Click Next.
 Creating the First Android Application
Step 3: Configure Project Settings
• Select Create Activity → Choose a default activity template like Blank
Activity.
• Enter an Activity Name (e.g., MainActivity).
• Set the Layout Name (e.g., activity_main.xml).
• Click Finish.
 Creating the First Android Application
Understanding the Directory Structure:
• When you create an Android project in Eclipse, it generates a structured
directory containing all the necessary files, folders, and configurations
required for development.
• Each directory serves a specific purpose, helping organize code, resources,
and project settings.

1. Project Root Folder

• The root folder contains the name of your project (e.g., MyFirstApp).
Inside this folder, you will find all the necessary files and directories for
your application.
Understanding the Directory Structure
2. src/ (Source Code)
• This folder contains all the Java source code for your application.
• The main activity (e.g., MainActivity.java) and other Java classes are stored
here.
• The code is typically organized into packages following Java's standard
naming conventions (e.g., com.example.myfirstapp).
src/
├── com.example.myfirstapp/
│ ├── MainActivity.java
│ ├── AnotherActivity.java

• Contains Java classes for UI logic, data processing, and background

operations.
• Each screen/activity in the app usually has a corresponding .java file.
Understanding the Directory Structure
3. gen/ (Generated Java Files)
• This folder contains auto-generated files, primarily the R.java file.
• The R.java file is used to reference resources in the project (e.g., layouts, images,
and strings).
• R.java is automatically updated whenever a new resource is added.
• Do not modify R.java manually; it is managed by Eclipse and Android SDK.
4. res/ (Resources)
• This folder contains all the non-code assets for your application, such as XML
layouts, images, and UI elements.
 Understanding the Directory Structure
5. AndroidManifest.xml (Application Configuration)
• This is the most important configuration file for the app.
• Defines the app's main activity.Declares permissions (e.g., Internet, camera access).Ensures
the app follows Android system rules.

• Responsibilities:
– Declares activities, permissions, and services.
– Specifies app version, package name, and SDK requirements.
Understanding the Directory Structure
6. bin/ (Compiled Files)
• This folder contains compiled output files, including the .apk file that gets
installed on devices.
• Not manually modified; managed by Eclipse.
• Stores .dex files (Dalvik Executable).
• Holds the compiled APK for testing.
7. libs/ (External Libraries)
• Contains any third-party libraries that the project depends on.Libraries are
typically .jar files.
• Used for integrating frameworks like Google Play Services, Firebase, Retrofit, etc.
8. assets/ (Raw Files)
• Stores raw files such as fonts, databases, and HTML content.
• Unlike res/, files in assets/ are not automatically processed by Android.
• Accessed via AssetManager in code.Ideal for including custom fonts, JSON files, and configuration
data.
Understanding the Directory Structure
 Writing and Running the Application
• Editing MainActivity.java
• Open MainActivity.java in the src/ folder.
• Modify the onCreate() method to set up the UI.
 Writing and Running the Application
Editing activity_main.xml
• Open res/layout/activity_main.xml.
• Modify the layout to display UI elements.
 Writing and Running the Application
5. Running the Application
• Using an Emulator (AVD)
• Open Eclipse.
• Click Run → Run As → Android Application.
• Select a configured Android Virtual Device (AVD).
• Click OK, and the emulator will launch the app.
 Android User Interface
• Android provides several common UI controls, widgets, and Layout
Managers.
• For most graphical applications, it’s likely that you’ll need to extend and
modify these standard Views to provide your own user experience.
• The basic building block for user interface is a View object which is
created from the View class and occupies a rectangular area on the screen
and is responsible for drawing and event handling.
• View is the base class for widgets, which are used to create interactive UI
components like buttons, text fields, etc.
• The ViewGroup is a subclass of View and provides invisible container that
hold other Views or other ViewGroups and define their layout properties.
• At third level we have different layouts which are subclasses of
ViewGroup class and a typical layout defines the visual structure for an
Android user interface and can be created either at run time using
View/ViewGroup objects
• A layout may contain any type of widgets such as buttons, labels,
textboxes, and so on
• Following is a simple example of XML file having LinearLayout −

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a Button" />
<!-- More GUI components go here --> activity.onCreate()
</LinearLayout>
• Each layout has a set of attributes which define the visual properties of
that layout.
• Here width and height are the dimension of the layout/view which can be specified in terms of dp
(Density-independent Pixels), sp ( Scale-independent Pixels), pt ( Points which is 1/72 of an inch), px(
Pixels), mm ( Millimeters) and finally in (inches).
android:layout_width=wrap_content tells your view to size itself to the dimensions required by its content.
android:layout_width=fill_parent tells your view to become as big as its parent view.
• Input controls are the interactive components in your app's user interface.
• Android provides a wide variety of controls you can use in your UI, such as
buttons, text fields, seek bars, check box, zoom buttons, toggle buttons,
and many more
• There are number of UI controls provided by Android that allow you to
build the graphical user interface for your app.
1. Input Controls: These allow users to enter data or make selections.
• Text Box (Input Field) – A field where users can type text.
• Password Field – Similar to a text box but hides input for security.
• Text Area – A larger text input field for multiline input.
• Dropdown (Select Box) – A menu that expands to show multiple
options.
• Checkbox – A small box that can be checked or unchecked (for
multiple selections).
• Radio Button – A set of options where only one can be selected at
a time.
• Toggle Switch – A button that switches between two states
(on/off).
• Slider – A draggable handle used to select a value from a range.
• Date Picker – Allows users to select a date from a calendar.
2. Navigation Controls:These help users move through an application.
• Navigation Bar (Navbar) – A horizontal or vertical menu for navigating between
pages.
• Breadcrumbs – A trail that shows users their current location in a hierarchy.
• Pagination – Divides content into pages with "Next" and "Previous" controls.
• Tabs – Organizes content into sections users can switch between.
• Side Menu (Drawer) – A collapsible menu, usually on the left or right side.

3. Display ControlsThese provide information to users.

• Label – Displays static text or instructions.
• Tooltip – A small pop-up box with additional information when hovered over.
• Progress Bar – Indicates task completion progress.
• Modal/Dialog Box – A pop-up window requiring user interaction before
proceeding.
• Notification (Toast) – A short message that disappears after a few seconds.
4. Action Controls:These trigger actions within the
system.
• Button – A clickable element that performs an
action.
• Icon Button – A button represented by an icon
instead of text.
• Floating Action Button (FAB) – A circular button for a
primary action.
• Link – A clickable text that navigates to another page
or section.
Text View:
• A TextView displays text to the user and optionally
allows them to edit it.
• A TextView is a complete text editor, however the
basic class is configured to not allow editing.

TextView Attributes
• android:id-This is the ID which uniquely identifies the control.
• android:inputType-The type of data being placed in a text
field. Phone, Date, Time, Number, Password etc.
• android:maxHeight-Makes the TextView be at most this many
pixels tall.
• android:maxWidth-Makes the TextView be at most this many
pixels wide.
• android:minHeight-Makes the TextView be at least this many pixels tall.
• android:minWidth-Makes the TextView be at least this many pixels wide.
• android:password-Whether the characters of the field are displayed as
password dots instead of themselves. Possible value either "true"
• android:phoneNumber-If set, specifies that this TextView has a phone
number input method. Possible value either "true" or "false".
• android:text-Text to display.
• android:textAllCaps-Present the text in ALL CAPS. Possible value either
"true" or "false".
• android:textColor-Text color. May be a color value, in the form of "#rgb",
"#argb", "#rrggbb", or "#aarrggbb".
• android:textSize-Size of the text. Recommended dimension type for text is
"sp" for scaled-pixels (example: 15sp).
 Android Linear Layout
• Android LinearLayout is a view group that
aligns all children in either vertically or
horizontally.
 android:id
This is the ID which uniquely identifies the layout.
1

android:baselineAligned
2 This must be a boolean value, either "true" or "false" and prevents the layout from aligning its children's
baselines.

android:baselineAlignedChildIndex
3 When a linear layout is part of another layout that is baseline aligned, it can specify which of its children to
baseline align.

android:divider
4 This is drawable to use as a vertical divider between buttons. You use a color value, in the form of "#rgb",
"#argb", "#rrggbb", or "#aarrggbb".

android:gravity
5 This specifies how an object should position its content, on both the X and Y axes. Possible values are top,
bottom, left, right, center, center_vertical, center_horizontal etc.

android:orientation
6 This specifies the direction of arrangement and you will use "horizontal" for a row, "vertical" for a column. The
default is horizontal.

android:weightSum
7
Sum up of child weight
• src/com.example.demo/MainActivity.java. This file can include each of
the fundamental lifecycle methods.
• the content of res/layout/activity_main.xml file −
• the content of res/values/strings.xml to
define two new constants −

• OutPut:
 Android Relative Layout
• Android RelativeLayout enables you to specify how child
views are positioned relative to each other. The position of
each view can be specified as relative to sibling elements or
relative to the parent.
Key Features
• Flexible Positioning: Align views relative to each other
(above, below, toLeftOf, toRightOf).
• Parent-based Alignment: Align views relative to the parent
(center, align parent top, bottom, etc.).
• Good for Dynamic Layouts: Avoids nested LinearLayout,
improving performance.
Android Relative Layout
 Android Relative Layout
• Following is the content of the modified main activity file
src/com.example.demo/MainActivity.java.
Following will be the content of
res/layout/activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/r
es/android" <Button
android:layout_width="fill_parent"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:layout_height="wrap_content"
android:paddingRight="16dp" > android:text="New Button"
android:id="@+id/button" />
<EditText
android:id="@+id/name" <Button
android:layout_width="fill_parent" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:hint="@string/reminder" /> android:text="New Button"
android:id="@+id/button2" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent" </LinearLayout>
android:layout_height="fill_parent"
android:layout_alignParentStart="true" </RelativeLayout>
android:layout_below="@+id/name">
 Android Absolute Layout
• An Absolute Layout lets you specify exact locations (x/y
coordinates) of its children. Absolute layouts are less flexible
and harder to maintain than other types of layouts without
absolute positioning.
 Android Absolute Layout
• Following is the content of the modified main activity file
src/com.example.demo/MainActivity.java.
 Android Absolute Layout
• Following will be the content of res/layout/activity_main.xml
file −
 Android Table Layout
• Android TableLayout going to be arranged groups of views
into rows and columns.
• You will use the <TableRow> element to build a row in the
table.
• Each row has zero or more cells; each cell can hold one View
object.
 Android Table Layout
• Following is the content of the modified main activity file
src/com.example.demo/MainActivity.java.
• Following will be the content of res/layout/activity_main.xml file −
 Android Frame Layout
• Frame Layout is designed to block out an area on the screen
to display a single item.
• Generally, FrameLayout should be used to hold a single child
view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the
children overlapping each other.
• You can, however, add multiple children to a FrameLayout
and control their position within the FrameLayout by
assigning gravity to each child, using the
android:layout_gravity attribute.
 Android Frame Layout
• FrameLayout Attributes
 Android Frame Layout
• Following is the content of the modified main activity file
src/com.example.demo/MainActivity.java.
 Android Frame Layout
• Following will be the content of res/layout/activity_main.xml
file −
 SCROLL VIEW
• A ScrollView is a special type of FrameLayout
in that it enables users to scroll through a list
of views that occupy more space than the
physical display.
• The ScrollView can contain only one child view
or ViewGroup, which normally is a
LinearLayout.
ADAPTING TO DISPLAY ORIENTATION
• One of the key features of modern smartphones is their ability to switch
screen orientation, and Android is no exception.
• Android supports two screen orientations: portrait and landscape.
• By default, when you change the display orientation of your Android
device, the current activity that is displayed will automatically redraw its
content in the new orientation.
• In general, you can employ two techniques to handle
changes in screen orientation:
➤➤ Anchoring — The easiest way is to “anchor” your
views to the four edges of the screen. When the screen
orientation changes, the views can anchor neatly to the
edges.

➤➤ Resizing and repositioning — Where as anchoring

and centralizing are simple techniques to ensure that
views can handle changes in screen orientation, the
ultimate technique is resizing each and every view
according to the current screen orientation.
 Anchoring Views
• Anchoring could be easily achieved by using RelativeLayout. Consider the
following main.xml containing five Button views embedded within the
<RelativeLayout> element: