Lab 01: Setting up Android Development

Environment

Upon successful completion of this lab the students will be able to:
 Install Android Studio Bundle.
 Get familiar with Android Studio User Interface.

1.1 Tools
 Android Studio (Version: 2.3 or higher)

1.2 Background
1.2.1 Android
Android is an open source and Linux-based operating system developed by Google for
devices such as: Smartphones, Tablets, Android TV, Android Wear Devices, and Android
Auto.

1.2.2 Android Studio

Android Studio is the official Integrated Development Environment (IDE) for Android app
development, based on IntelliJ IDEA.

Android Studio offers features as: Powerful code editor, Developer tools, Gradle-based build
system, Fast and rich android emulator, Unified environment to develop apps for all android
devices, Extensive testing tools and frameworks, C++ and NDK support and many more.

1.2.3 Android Studio User Interface

Android Studio User Interface comprises of multiple screen elements:

1.2.3.1 Welcome Screen

It is displayed whenever no any project is currently opened.

1.2.3.2 Main Window

When a new project is created or existing one is opened, the Main Window appears. The
Main Window is made up of several logical areas as:
1. Title bar: Displays the title of android project currently opened and the resource file
currently you are editing.
2. Menu bar: Horizontal bar at the top, containing most of the essential actions of
android studio. It organizes the actions in the form of drop-down lists.
3. Toolbar: Contains shortcut to frequently performed actions.
4. Navigation bar: Helps you navigate through your project and open files for editing.
 5. Editor window: It is where you create and modify code. Depending on the current file
type, the editor can change. For example, when viewing a layout file, the editor
displays the Layout Editor.
6. Tool window bar: Runs around the outside of the IDE window and contains the
buttons that allow you to expand or collapse individual tool windows.
7. Tool windows: Instead of using preset perspectives, Android Studio follows your
context and automatically brings up relevant tool windows as you work.
8. Status bar: Displays the status of your project and the IDE itself, as well as any
warnings or messages.
9. Design editor: Displays your layout in a combination of the Design and Blueprint
views. The editor can preview your layout in different Android devices and versions.
You can dynamically resize the layout to be sure it works well on different screen sizes.
10. Palette: Provides a list of widgets and layouts that you can drag into your layout in
the editor.
11. Component tree: Shows the view hierarchy for your layout.
12. Properties: Provides property controls for the currently selected view.

1.2.4 Android Virtual Device (AVD)

Android Virtual Device also called Android Emulator
simulates a device and displays it on your development
computer. It lets you prototype, develop, and test Android
apps without using a hardware device. The emulator
supports Android phone, tablet, Android Wear, and
Android TV devices. It comes with predefined device types
so you can get started quickly, and you can create your own
device definitions and emulator skins.

The Android Emulator is fast, powerful, and feature-rich. It

can transfer information faster than using a connected
hardware device, speeding up the development process.

1.2.5 Android Software Development Kit (SDK)

Developing Apps for different Android platforms require a Software Development Kit (SDK)
which contains Application Programming Interface (API). Following table shows the API level
used for specific Android platforms.

Android Version Code Name API Level

1.0 No code name 1
1.1 Petit Four 2
1.5 Cupcake 3
 1.6 Donut 4
2.0-2.1 Eclair 5-7
2.2-2.2.3 Froyo 8
2.3-2.3.7 Gingerbread 9-10
3.0-3.2.6 Honeycomb 11-13
4.0-4.0.4 IceCreamSandwich 14-15
4.1 Jelly Beans 16-18
4.4–4.4.4, 4.4W–4.4W.2 KitKat 19-20
5.0-5.1.1 Lollipop 21-22
6.0 Marshmallow 23
7.0-7.1.1 Nougat 24-25

1.3 Procedure
1.3.1 Downloading Android Studio Bundle

Android Studio Bundle contains all the required components for developing Android Apps.
Download the Android Studio Bundle from the following link:

https://developer.android.com/studio

1.3.2 Installing Android Studio Bundle

Step 01: Execute the downloaded Android Studio Bundle file.

Step 02: Press Next in Android Studio Setup Wizard.

Step 03: Choose installation location for Android Studio and Android SDK.

Step 04: Wait for components to be installed.

Step 05: Run Android Studio.

Step 06: Wait for the setup to download and install missing components.

Step 07: Click Next on Welcome screen.

Step 08: Write the Application name for new Android Studio Project.

Step 09: Choose Target Android Device (say, Phone and Tablet).

Step 10: Choose Minimum SDK (say, IceCreamSandwich) and press Next.

Step 11: Select Empty Activity and press Next.

Step 12: Set the activity name and press Finish.

1.3.3 Creating Android Virtual Device (AVD)

Step 01: Run AVD Manager:

Method 01: Click AVD Manager icon from toolbar.

Method 02: Go in to Menu Tools>Android>AVD

Manager Step 02: Press “Create Virtual Device”.

Step 03: Choose hardware by selecting device category and device definition (say,
Nexus5X from Phone).

Step 04: Select a System Image (say, Nougat)

Step 05: Set name for AVD and click Finish.

EXERCISE
Exercise 1.1: Download and install Android Studio 2.3 on your system.

Exercise 1.2: Setup Android Smartphone Emulator using AVD manager with following
configurations:
Device Definition: Nexus 4
System image: Nougat AVD Name: My
Nexus 4

Exercise 1.3: Setup Android Tablet Emulator using AVD manager with following

configurations:
 Device Definition: Pixel C
 System image: Nougat
 AVD Name: My Tablet
 Creating basic Android Applications in
Android Studio

Upon successful completion of this lab the students will be able to:
 Run Android Studio and develop simple android applications.

2.1 Tools
 Android Studio (Version: 2.3 or higher)

2.2 Background
2.2.1 Android Project
A project in Android Studio contains everything that defines your workspace for an app, from
source code and assets, to test code and build configurations.

When you start a new project, Android Studio creates the necessary structure for all your files
and makes them visible in the Project window on the left side of the IDE.

2.2.2 Modules

A module is a collection of source files and build settings that allow you to divide your project
into discrete units of functionality. Your project can have one or many modules and one
module may use another module as a dependency. Each module can be independently built,
tested, and debugged.

You can add a new module to your project by clicking File > New > New Module. Android
Studio offers a few distinct types of module:

 Android app module: Provides a container for your app's source code, resource files, and
app level settings such as the module-level build file and Android Manifest file. When you
create a new project, the default module name is "app".
 Library module: Provides a container for your reusable code, which you can use as a
dependency in other app modules or import into other projects. Structurally, a library
module is the same as an app module, but when built, it creates a code archive file
instead of an APK, so it can't be installed on a device.
 Google Cloud module: Provides a container for your Google Cloud backend code. This
module adds the required code and dependencies for a Java App Engine backend that
uses simple HTTP, Cloud Endpoints, and Cloud Messaging to connect to your app.

2.2.3 Project Files

Android project contains following group of files in app module:

manifests: Contains the AndroidManifest.xml file.

java: Contains the Java source code files, separated by package names, including JUnit test
code.

res: Contains all non-code resources, such as XML layouts, UI strings, and bitmap images,
divided into corresponding sub-directories.

2.2.4 Android Project View

To see the actual file structure of the project including all

files hidden from the Android view, select Project from the
dropdown at the top of the Project window.

When you select Project view, you can see a lot more files
and directories. The most important of which are the
following:

 build: Contains build outputs.

 libs: Contains private libraries.
 src: Contains all code and resource files for the
module in the following subdirectories:
o androidTest: Contains code for
instrumentation tests that run on an
Android device.
o main: Contains the "main" sourceset files:
the Android code and resources shared by
all build variants.
 AndroidManifest.xml: Describes the nature of the application and each
of its components.
  java: Contains Java code sources.
 jni: Contains native code using the Java Native Interface (JNI).
 gen: Contains the Java files generated by Android Studio, such as your
R.java file and interfaces created from AIDL files.
 res: Contains application resources, such as drawable files, layout files, and
UI string.
 assets: Contains file that should be compiled into an .apk file as-is.
o test: Contains code for local tests that run on your host JVM.
 build.gradle (module): This defines the module-specific build configurations.

2.2.5 Android Application Development

Android provides a rich application framework that allows you to build innovative apps and
games for mobile devices in a Java language environment. Android apps are written in the
Java programming language. The Android SDK tools compile your code—along with any data
and resource files—into an APK: an Android package, which is an archive file with an .apk
extension.

One APK file contains all the contents of an Android app and is the file that Android-powered
devices use to install the app.

2.2.6 App Components

App components are the essential building blocks of an Android app. Each component is a
different point through which the system can enter your app. There are number of different
types of app components. Each type serves a distinct purpose:

 Activities
 Fragments
 Services
 Content Providers
 Broadcast receivers
 Intents
 Manifest File
 Resources

2.2.7 Activity
An activity is an application component that provides a screen
with which user can interact to do something, such as dial a
phone, compose email, take a phone or edit a contact.

An application usually consists of multiple activities that are

loosely bound to each other. An activity is implemented as
subclass of Activity class.
In android studio an activity is composed of two files:

 XML Layout File: Defines layout of the activity using XML language.
 JAVA Source File: Defines behavior of the activity.
XML layout file is placed in app>res>layout>activity_main.xml. JAVA source file is placed in
app>java>com.example.ali.demo>MainActivity.Java.

2.2.8 Views and View Groups

The user interface for each component of your app is defined using a hierarchy of View and
ViewGroup objects. Each view group is an invisible container that organizes child views, while
the child views may be input controls or other widgets that draw some part of the UI.

 TextView  ToggleButton  SeekBar

 EditText  RadioButton  TimePicker
 Button  RadioGroup  Date Picker
 ImageButton  Spinner
 Checkbox  ProgressBar

2.3 Procedure
Example: Create an App containing one activity to count a number up and down.
Step 01: Launch Android Studio.

Step 02: To create a new project, click File > New > New Project.

Step 03: Enter the name of the project then click Next.

Step 04: Select form factor “Phone and Tablet”.

Step 05: Add an Empty Activity.

Step 06: Enter the activity name, the layout name, and the activity title. Then click Finish.

Step 07: Write the following code in activity_main.xml file:

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

<LinearLayout 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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context="com.example.ali.counter.MainActivity">

<TextView
android:id="@+id/tvNum"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="0"
android:textAlignment="center"
android:textSize="120sp" />
 <Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:onClick="onCountUp"
android:padding="20dp"
android:text="Count Up"
android:textSize="24sp" />

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:onClick="onCountDown"
android:padding="20dp"
android:text="COunt Down"
android:textSize="24sp" />

</LinearLayout>

Step 08: Write the following code in MainAcivity.java file:

package com.example.ali.counter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

int num = 0;
TextView tvNum;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tvNum = (TextView)findViewById(R.id.tvNum);
}

public void onCountUp(View v){

num++;
tvNum.setText(Integer.toString(num));
}

public void onCountDown(View v){

num--;
tvNum.setText(Integer.toString(num));
}
}

Step 09: Click Run button from toolbar and select emulator or hardware device to test
your application
 EXERCISE

Exercise 2.1: Develop an Android App with one activity as shown below. It should contain 2
buttons to count up and down. As the number goes larger than 10 it should change its
color to Red and if the number goes below 0 it should turn its color to Blue. The default color
id Black. Also display the name of color in a TextView.
 activity_main.xml

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

<androidx.appcompat.widget.LinearLayoutCompat
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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/black"
app:title="Exercise 2.1"
app:titleCentered="true"
app:titleTextColor="@color/white" />

</com.google.android.material.appbar.AppBarLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="100dp"
android:paddingRight="100dp">

<TextView
android:id="@+id/tvCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/counter_value"
android:textColor="@color/black"
android:textSize="100sp" />

<TextView
android:id="@+id/tvCountTextColor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="@string/blackColor"
android:textColor="@color/grey"
android:textSize="30sp"
android:textStyle="bold" />

<Button
android:id="@+id/btnCountUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/count_up" />

<Space
android:layout_width="wrap_content"
android:layout_height="10dp"
android:scaleY="10" />
 <Button
android:id="@+id/btnCountDown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/count_down" />

</LinearLayout>

</androidx.appcompat.widget.LinearLayoutCompat>

MainActivity.java
package com.lab1.task1;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

Button btnCountUp, btnCountDown;

TextView tvCount, tvCountTextColor;
int count = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

btnCountUp = (Button) findViewById(R.id.btnCountUp);

btnCountDown = (Button) findViewById(R.id.btnCountDown);
tvCount = (TextView) findViewById(R.id.tvCount);
tvCountTextColor = (TextView)
findViewById(R.id.tvCountTextColor);

btnCountUp.setOnClickListener(this::countUp);
btnCountDown.setOnClickListener(this::countDown);

private void checkCountCondition(int count) {

if (count > 10) {

tvCount.setTextColor(getResources().getColor(R.color.red));
tvCountTextColor.setText(R.string.redColor);

} else if (count < 0){

tvCount.setTextColor(getResources().getColor(R.color.blue));
tvCountTextColor.setText(R.string.blueColor);
} else {
tvCount.setTextColor(getResources().getColor(R.color.black));
tvCountTextColor.setText(R.string.blackColor);
}
tvCount.setText(String.valueOf(count));
}
 private void countUp(View view) {
count++;
checkCountCondition(count);
tvCount.setText(String.valueOf(count));
}

private void countDown(View view) {

count--;
checkCountCondition(count);
tvCount.setText(String.valueOf(count));
}

Exercise 2.2:
Develop an Android App with one activity as shown below. It should contain a textview
displaying MUET and a seek bar. As you move the seek bar the text size of the text in text
view should increase and decrease.
 activity_main.xml

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

<androidx.appcompat.widget.LinearLayoutCompat
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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/black"
app:title="Exercise 2.2"
app:titleCentered="true"
app:titleTextColor="@color/white" />

</com.google.android.material.appbar.AppBarLayout>
 <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

<TextView
android:id="@+id/tvTextDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/displayText" />

<TextView
android:id="@+id/tvSeekBarLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:paddingTop="20dp"
android:paddingRight="50dp"
android:paddingBottom="20dp"
android:text="@string/seekbarLabel"
android:textColor="@color/grey"
android:textSize="20sp" />

<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="20"
android:thumbTint="@color/amber" />

</LinearLayout>

</androidx.appcompat.widget.LinearLayoutCompat>

mainActivity.java

package com.lab1.task2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

SeekBar seekBar;
int progress = 0;
TextView tvTextDisplay;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

seekBar = (SeekBar) findViewById(R.id.seekBar);

tvTextDisplay = (TextView) findViewById(R.id.tvTextDisplay);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener()
{
@Override
public void onProgressChanged(SeekBar seekBar, int
progressValue, boolean fromUser) {
progress = progressValue;
tvTextDisplay.setTextSize(progress + 12);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}
Lab 03 : Creating Layouts using different layouts
supported by Android Studio

Upon successful completion of this lab the students will be able to:
 Design Activity layouts using Linear Layouts, Constraint Layouts, Grid Layouts, Relative
Layouts in Android Studio.

3.1 Tools
 Android Studio (Version: 2.3 or higher)

3.2 Background
3.2.1 Layout
A layout defines the visual structure for a user interface, such as the UI for an activity or app
widget. You can declare a layout in two ways:

 Declare UI elements in XML: Defining each view component using XML language.
 Instantiate layout elements at runtime: Create layout programmatically using JAVA language.

Some of common layouts supported by Android Studio are:

 Linear Layout  Absolute Layout  Constraint Layout

 Relative Layout  Frame Layout
 Grid Layout  Table Layout

3.2.2 Linear Layout

Positions child views in a single row or column depending on the orientation selected. A
weight value can be set on each child to specify how much of the layout space that child
should occupy relative to other children. Linear Layout can have two orientations: horizontal
or vertical.

3.2.3 Linear Layout Properties

Property Value Description

android:orientation
android:layout_weight
android:weightSum
 horizontal  Aligns all children horizontally
 vertical  Aligns all children vertically
 Integer number  This attribute assigns an
 Default weight is zero "importance" value to a view in
terms of how much space
 Integer number  Defines the maximum weight
 Floating point number sum. If unspecified, the sum is
computed by adding the
layout_weight of all of the
children.
3.2.4 Procedure
Example: Design the following Activity in Android Studio using Linear Layouts.

Step 01: Create new android project.

Step 02: Write the Application name “LinearLayoutExample” for new Android Studio Project.

Step 03: Choose Target Android Device “Phone and Tablet”.

Step 04: Choose Minimum SDK “IceCreamSandwich” and press Next.

Step 05: Select Empty Activity and press Next.

Step 06: Set the activity name “LinearLayoutActivity” and press Finish.

Step 07: Open acivity_linear_layout.xml file and remove all the child views.

Step 08: Change the root tag from ConstraintLayout to LinearLayout:

From To
<android.support.constraint.ConstraintLayout> <LinearLayout>
</android.support.constraint.ConstraintLayout> </LinearLayout>

Step 09: Drag the following Views and ViewGroups with following properties in to the Activity
using deign view:
View/View Group Property Value
id LinearLayout_Root
layout_width match_parent
LinearLayout layout_height match_parent
(Root) orientation vertical
padding 15dp
weightSum 3
id LinearLayout_Inner_1
layout_width match_parent
LinearLayout
layout_height 0dp
(Inner 1)
orientation vertical
layout_weight 2
id tvFullName
layout_width match_parent
TextView
layout_height wrap_content
(Full Name)
text Full Name
textSize 25sp
id LinearLayout_Inner_3
layout_width match_parent
LinearLayout
layout_height wrap_content
(Inner 3)
orientation horizontal
layout_marginTop 10dp
id etFirstName
layout_width 0dp
layout_height wrap_content
EditText
layout_weight 1
(First Name)
hint First Name
inputType textPersonName
textSize 24sp
id etLastName
EditText
layout_width 0dp
(Last Name)
layout_height wrap_content
 layout_weight 1
hint Last Name
inputType textPersonName
textSize 24sp
id tvPhone
layout_width match_parent
TextView layout_height wrap_content
(Phone) text Phone
textSize 25sp
marginTop 20dp
id LinearLayout_Inner_4
layout_width match_parent
LinearLayout layout_height wrap_content
(Inner 4) orientation horizontal
layout_marginTop 10dp
weightSum 10
id etCode
layout_width 0dp
layout_height wrap_content
EditText
layout_weight 2
(Code)
hint Code
inputType number
textSize 24sp
id etNumber
layout_width 0dp
layout_height wrap_content
EditText
layout_weight 8
(Number)
hint Number
inputType number
textSize 24sp
id btnViewData
layout_width wrap_content
layout_height wrap_content
layout_gravity center_horizontal
Button inputType number
(View Data) text View Data
textSize 25sp
layout_marginTop 20dp
onClick onViewDataClick
textAllCaps false
id LinearLayout_Inner_2
layout_width match_parent
LinearLayout
layout_height 0dp
(Inner 2)
orientation vertical
layout_weight 1
id tvData
TextView layout_width match_parent
(Data) layout_height match_parent
textSize 25sp
Step 10: Write the following code in LinearLayoutActivity.java file:

package com.example.ali.linearlayoutexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class LinearLayoutActivity extends AppCompatActivity {

EditText etFirstName;
EditText etLastName;
EditText etCode;
EditText etNumber;
TextView tvData;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_linear_layout);

etFirstName = (EditText)findViewById(R.id.etFirstName);
etLastName = (EditText)findViewById(R.id.etLastName);
etCode = (EditText)findViewById(R.id.etCode);
etNumber = (EditText)findViewById(R.id.etNumber);
tvData = (TextView)findViewById(R.id.tvData);
}

public void onViewDataClick(View v)

{
String data = "";

data += "Name: " + etFirstName.getText().toString() + " " +

etLastName.getText().toString() + "\n";
data += "Phone: " + etCode.getText().toString() + "-" +
etNumber.getText().toString();

tvData.setText(data);
}
}

Step 11: Click Run button from toolbar and select emulator or hardware device to test your
application.

3.2.5 Relative Layout

Relative Layout is a view group that displays child views in relative positions. The position
of each view can be specified as relative to sibling views (such as to the left-of or below
another view) or in positions relative to the parent i.e. Relative Layout area (such as
aligned to the bottom, left or center).

3.2.6 Relative Layout Properties

Property Value Description

android:layout_above ID of Positions the bottom edge of this
another view above the given anchor view ID.
view
android:layout_alignBaseline ID of Positions the baseline of this view on
another the baseline of the given anchor view
view ID.
android:layout_alignBottom ID of Makes the bottom edge of this view
another match the bottom edge of the given
view anchor view ID.
android:layout_alignEnd ID of Makes the end edge of this view
another match the end edge of the given
view anchor view ID.
android:layout_alignLeft ID of Makes the left edge of this view
another match the left edge of the given
view anchor view ID.
android:layout_alignParentBottom If true, makes the bottom edge of this
True or
view match the bottom edge of the
False
parent.
android:layout_alignParentEnd If true, makes the end edge of this
True or
view match the end edge of the
False
parent.
android:layout_alignParentLeft True or If true, makes the left edge of this
False view match the left edge of the
android:layout_alignParentRight If true, makes the right edge of this
True or
view match the right edge of the
False
parent.
android:layout_alignParentStart If true, makes the start edge of this
True or
view match the start edge of the
False
parent.
android:layout_alignParentTop If true, makes the top edge of this
True or
view match the top edge of the
False
parent.
android:layout_alignRight ID of Makes the right edge of this view
another match the right edge of the given
view anchor view ID.
android:layout_alignStart ID of Makes the start edge of this view
another match the start edge of the given
view anchor view ID.
android:layout_alignTop ID of Makes the top edge of this view
another match the top edge of the given
view anchor view ID.
android:layout_alignWithParentIfMissing If set to true, the parent will be used
True or as the anchor when the anchor
False cannot be found for layout_toLeftOf,
layout_toRightOf, etc.
android:layout_below ID of Positions the top edge of this view
another below the given anchor view ID.
view
android:layout_centerHorizontal True or If true, centers this child horizontally
False within its parent.
android:layout_centerInParent True or If true, centers this child horizontally
False and vertically within its parent.
android:layout_centerVertical True or If true, centers this child vertically
False within its parent.
android:layout_toEndOf ID of Positions the start edge of this view
another to the end of the given anchor view
view ID.
android:layout_toLeftOf ID of Positions the right edge of this view
another to the left of the given anchor view
view ID.
android:layout_toRightOf ID of Positions the left edge of this view to
another the right of the given anchor view ID.
view
android:layout_toStartOf ID of Positions the end edge of this view to
another the start of the given anchor view ID.
view
3.2.7 Procedure

Example: Design the following Activity in Android Studio using Relative Layouts.
3.2.8 Grid Layout
A layout that places its children in a rectangular grid. A Grid Layout is divided by invisible
lines that form a grid containing rows and columns of cells. Child views are then placed in
cells and may be configured to cover multiple cells both horizontally and vertically.

Gaps between components in a Grid Layout may be implemented by placing a special type
of view called a Space view into adjacent cells, or by setting margin parameters. The
grid is composed of a set of infinitely thin lines that separate the viewing area into cells.

A grid with N columns has N + 1 grid indices that run from 0 through N inclusive.

3.2.9 Grid Layout Properties

Property Description
android:columnCount The maximum number of columns to create
when automatically positioning children.
android:rowCount The maximum number of rows to create when
automatically positioning children.
android:layout_row The row number in which the view is to be
placed. Row numbers start at 0.
android:layout_column The column number in which the view is to be
placed. Column numbers start at 0.
android:layout_rowSpan Number of rows to span vertically.

android:layout_columnSpan Number of columns to span horizontally.

android:layout_rowWeight The relative proportion of vertical space that

android:layout_columnWeight
android:layout_gravity
should be allocated to this view during excess
space distribution.
The relative proportion of horizontal space that
should be allocated to this view during excess
space distribution.
Gravity specifies how a component should be
placed in its group of cells.

3.2.10 Table Layout

A layout that arranges its children into rows and columns. A Table Layout consists of a
number of TableRow objects, each defining a row. Table Layout containers do not display
border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can
hold one View object.

The table has as many columns as the row with the most cells. A table can leave cells
empty. Cells can span columns.
 3.2.11 Table Layout Properties

Property Description
android:collapseColumns This specifies the zero-based index of the
columns to collapse. The column indices must
be separated by a comma: 1, 2, 5.
android:shrinkColumns The zero-based index of the columns to shrink.
The column indices must be separated by a
comma: 1, 2, 5.
android:stretchColumns The zero-based index of the columns to stretch.
The column indices must be separated by a
comma: 1, 2, 5.

3.2.12 Procedure

Example: Design the following Activity in Android Studio using Grid Layout.

Step 01: Create a new android project.

Step 02: Write the Application name “GridLayoutExample” for

new Android Studio Project.

Step 03: Choose Target Android Device “Phone and Tablet”.

Step 04: Choose Minimum SDK “IceCreamSandwich” and press

Next.

Step 05: Select Empty Activity and press Next.

Step 06: Set the activity name “GridLayoutActivity” and press

Finish.

Step 07: Open acivity_linear_layout.xml file and remove all the

child views.

Step 08: Change the root tag from ConstraintLayout to GridLayout:

From To
<android.support.constraint.ConstraintLayout> <GridLayout>
</android.support.constraint.ConstraintLayout> </GridLayout>

Step 09: Drag the following Views and ViewGroups into the Activity using deign view:

Step 10: Write the following code in xml layout file:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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="match_parent"
android:layout_height="match_parent"
android:rowCount="5"
android:columnCount="3"
tools:context="com.example.ali.project4_8.MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:padding="20dp"
android:text="1"
android:textSize="30sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="2"
android:layout_rowWeight="1"
android:layout_columnSpan="2"
android:layout_rowSpan="2"
android:layout_gravity="fill"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_columnSpan="2"
android:layout_gravity="fill"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_rowSpan="2"
android:layout_gravity="fill"/>
 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:textSize="30sp"
android:padding="20dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"/>
</GridLayout>

Step 11: Click Run button from toolbar and select emulator or hardware device to test your
application.

Table Layout Example

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ali.project.MainActivity"
android:padding="20dp"
android:stretchColumns="2,3">

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp"
android:layout_column="1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_column="2"
android:layout_span="2"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email"
android:textSize="30sp"
android:layout_column="1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_column="2"
android:layout_span="2"/>
</TableRow>

<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
android:textSize="30sp"
android:layout_column="2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Del"
android:textSize="30sp"
android:layout_column="3"/>
</TableRow>

<TableRow android:layout_marginTop="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="End"
android:textSize="30sp"
android:layout_column="3"/>
</TableRow>

</TableLayout>
3.2.13 Absolute Layout
A layout that 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.

Absolute Layout is deprecated in newer versions of Android Studio 2.3.

3.2.14 Absolute Layout Properties

Property Description
android:layout_x This specifies the x-coordinate of the view.

android:layout_y This specifies the y-coordinate of the view.

3.2.15 Frame Layout

Frame Layout is designed to block out an area on the screen to display a single item.
Generally, Frame Layout 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. In Frame Layout, all the child views added are placed like
stack.

The most recent added are shown on top. This means that developers must pay attention to
the order of widgets, while adding them to layout.
3.2.16 Frame Layout Properties

Property
android:foregroundGravity
android:measureAllChildren
Description
Defines the gravity to apply to the foreground
drawable.
Determines whether to measure all children or
just those in the VISIBLE or INVISIBLE state when
measuring.

3.2.17
Procedure
Example: Design the following Activity in Android Studio using Absolute Layout.

Step 01: Create new android project.

Step 02: Write the Application name

“AbsoluteLayoutExample” for new Android Studio Project.

Step 03: Choose Target Android Device “Phone and Tablet”.

Step 04: Choose Minimum SDK “IceCreamSandwich” and

press Next.

Step 05: Select Empty Activity and press Next.

Step 06: Set the activity name “AbsoluteLayoutActivity” and

press Finish.

Step 07: Open acivity_linear_layout.xml file and remove all

the child views.

Step 08: Change the root tag from Constraint Layout to Absolute

Layout:

From To
<android.support.constraint.ConstraintLayout> <AbsoluteLayout>
</android.support.constraint.ConstraintLayout> </AbsoluteLayout>

Step 09: Drag the following Views and ViewGroups in to the Activity using deign view:

Step 10: Write the following code in xml layout file:

 <?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ali.project.MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="First"
android:textSize="30sp"
android:layout_x="50dp"
android:layout_y="50dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Second"
android:textSize="30sp"
android:layout_x="170dp"
android:layout_y="150dp" />
</AbsoluteLayout>

Step 11: Click Run button from toolbar and select emulator or hardware device to test your
application.

Frame Layout Example

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ImageView01"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="@drawable/lake"
android:scaleType="matrix"></ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000"
android:textSize="40dp"
android:text="@string/top_text" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/bottom_text"
android:layout_gravity="bottom"
android:gravity="right"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
 EXERCISE

Exercise 3.1: Design the following layouts using Linear Layout in XML.
 layout_1.xml

<?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="horizontal">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/first"
android:gravity="center"
android:textStyle="bold"
android:textSize="30sp"
android:text="1" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/second"
android:gravity="center"
android:textSize="30sp"
android:textStyle="bold"
android:layout_weight="1.5"
android:text="2" />

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/third"
android:gravity="center"
android:textSize="30sp"
android:textStyle="bold"
android:layout_weight="1.5"
android:text="3" />

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/fourth"
android:gravity="center"
android:textSize="30sp"
android:textStyle="bold"
android:layout_weight="1"
android:text="4" />
</LinearLayout>
</LinearLayout>

layout_2.xml

<?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">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/second"
android:gravity="center"
android:text="1"
android:textSize="30dp"
android:textStyle="bold" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"

android:layout_weight="1"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/third"
android:gravity="center"
android:text="2"
android:textSize="30dp"
android:textStyle="bold" />

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/fourth"
android:gravity="center"
android:text="3"
android:textSize="30dp"
android:textStyle="bold" />

</LinearLayout>
 </LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/first"
android:gravity="center"
android:text="4"
android:textColor="@color/white"
android:textSize="30dp"
android:textStyle="bold" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/fifth"
android:gravity="center"
android:text="5"
android:textSize="30dp"
android:textStyle="bold" />

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/sixth"
android:gravity="center"
android:text="6"
android:textSize="30dp"
android:textStyle="bold" />

</LinearLayout>

</LinearLayout>

add_student.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
android:text="@string/add_student"
android:textSize="25sp"
android:textStyle="bold" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField"
style="?attr/textInputFilledStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/name">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:singleLine="false" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/rollNumberField"
style="?attr/textInputFilledStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="@string/roll_number">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />

</com.google.android.material.textfield.TextInputLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:gravity="center"
android:orientation="horizontal">

<Button
android:id="@+id/addStudentButton"
style="@style/Widget.Material3.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="@string/cancel"
app:cornerRadius="10dp" />

<Button
android:id="@+id/cancelButton"
style="@style/Widget.Material3.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="@string/add"
app:cornerRadius="10dp" />

</LinearLayout>
</LinearLayout>

prize.xml

<?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:layout_gravity="center_vertical"
android:gravity="center"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/you_won_cash"
android:textSize="35sp"
android:textColor="@color/first"
android:textStyle="bold" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:orientation="horizontal">

<TextView
android:id="@+id/wholePartTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/_99"
android:textColor="@color/second"
android:textSize="40sp"
android:textStyle="bold" />

<TextView
android:id="@+id/decimalPartTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/_75"
android:textColor="@color/second"
android:textSize="30sp"
android:textStyle="bold" />

</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/congratulations"
android:textSize="50sp"
android:textColor="@color/fourth"
android:textStyle="bold" />

</LinearLayout>
Exercise 3.2: Create a Weather App containing one activity. Whenever the Random
temperature button is pressed it generates random temperature between -5°C
to 45ºC. The temperature label changes, and small box changes color
according to the following rules:

Temperature Color Temperature Label

-5°C to 15°C Blue COLD
16°C to 32°C Green NORMAL
33°C to 45°C Red WARM

temperature.xml

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

<LinearLayout
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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="16dp">

<TextView
android:id="@+id/temperatureLevel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="WARM"
android:textStyle="bold"
android:textSize="20sp" />

<View
android:id="@+id/coloredBox"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:background="#C63D3D" />
</LinearLayout>

<TextView
android:id="@+id/temperatureValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="40°C"
android:textSize="60sp"
android:gravity="center"
android:textStyle="bold"
android:paddingTop="50dp" />
 <Button
android:id="@+id/randomTemperatureButton"
style="@style/Widget.Material3.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="Random Temperature"
app:cornerRadius="10dp" />
</LinearLayout>
Exercise 3.3: Create Math App containing one activity that allows you to perform
calculations by entering two numbers and selecting operation. The app
displays the result as a Toast message.

calculate.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">

<com.google.android.material.textfield.TextInputLayout
style="?attr/textInputFilledStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/first_number"
android:layout_marginBottom="16dp">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/firstNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
style="?attr/textInputFilledStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/second_number"
android:layout_marginBottom="16dp">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/secondNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal" />

</com.google.android.material.textfield.TextInputLayout>

<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="16dp">

<RadioButton
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/addition" />
 <RadioButton
android:id="@+id/subtract"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/subtraction" />

<RadioButton
android:id="@+id/multiply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/multiplication" />

<RadioButton
android:id="@+id/divide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/division" />

</RadioGroup>

<Button
android:id="@+id/calculate"
style="@style/Widget.Material3.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/calculate"
android:textColor="@android:color/white"
app:cornerRadius="10dp" />

</LinearLayout>

calculate.java

package com.lab3.task3;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.textfield.TextInputEditText;

public class MainActivity extends AppCompatActivity {

TextInputEditText firstNumber, secondNumber;

RadioButton add, subtract, multiply, divide;
Button calculate;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

firstNumber = findViewById(R.id.firstNumber);
secondNumber = findViewById(R.id.secondNumber);
add = findViewById(R.id.add);
subtract = findViewById(R.id.subtract);
multiply = findViewById(R.id.multiply);
divide = findViewById(R.id.divide);
calculate = findViewById(R.id.calculate);
 calculate.setOnClickListener(v -> {
float num1 =
Float.parseFloat(firstNumber.getText().toString());
float num2 =
Float.parseFloat(secondNumber.getText().toString());
String operation = "";

if (add.isChecked()) {
operation = "add";
} else if (subtract.isChecked()) {
operation = "subtract";
} else if (multiply.isChecked()) {
operation = "multiply";
} else if (divide.isChecked()) {
operation = "divide";
}

float result = calculateResult(num1, num2, operation);

String resultMessage = "Result: " + result;

Toast.makeText(MainActivity.this, resultMessage,
Toast.LENGTH_SHORT).show();
});
}

private float calculateResult(float firstNumber, float secondNumber,

String operation) {
float result = 0;

switch (operation) {
case "add":
result = firstNumber + secondNumber;
break;
case "subtract":
result = firstNumber - secondNumber;
break;
case "multiply":
result = firstNumber * secondNumber;
break;
case "divide":
result = firstNumber / secondNumber;
break;
}

return result;
}
}
Exercise 3.4: Using Relative Layout design the following layout in Android Studio:

relative_layout.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toStartOf="@id/textview2"
android:background="#FFC107"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="-" />

<TextView
android:id="@+id/textview2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#4CAF50"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="0" />
<TextView
android:id="@+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toEndOf="@id/textview2"
android:background="#2196F3"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="+" />
<TextView
android:id="@+id/textview4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textview1"
android:layout_alignParentLeft="true"
android:layout_toStartOf="@id/textview5"
android:background="#FF5722"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="-5" />

<TextView
android:id="@+id/textview5"
android:layout_width="297dp"
android:layout_height="wrap_content"
android:layout_below="@id/textview3"
android:layout_alignParentRight="true"
android:background="#4FC3F7"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="0"/>

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textview4"
android:layout_alignParentLeft="true"
android:layout_toStartOf="@id/textView7"
android:background="#5D4037"
android:paddingTop="50dp"
android:paddingBottom="50dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="0" />

<TextView
android:id="@+id/textView7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@id/textview4"
 android:layout_alignParentRight="true"
android:background="#3F51B5"
android:paddingTop="50dp"
android:paddingBottom="50dp"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:text="+5" />

<TextView
android:id="@+id/textview8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/textView7"
android:layout_alignParentBottom="true"
android:background="#B71C1C"
android:gravity="center"
android:textStyle="bold"
android:textSize="20sp"
android:text="CLEAR ALL" />
</RelativeLayout>
Exercise 3.5: Design the following layout using Grid Layout in Android Studio:

grid_layout.xml

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

<GridLayout 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:layout_gravity="center"
android:columnCount="3"
android:rowCount="3"
tools:context=".MainActivity">

<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="1"
android:background="#4CAF50"
android:gravity="center"
android:text="1"
android:textSize="30sp" />

<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="0"
android:layout_column="1"
 android:layout_columnWeight="1"
android:background="#FFC107"
android:gravity="center"
android:text="2"
android:textSize="30sp" />

<TextView
android:id="@+id/textview3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="0"
android:layout_column="2"
android:layout_columnWeight="1"
android:background="#CDDC39"
android:gravity="center"
android:text="3"
android:textSize="30sp" />

<TextView
android:id="@+id/textview4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:background="#D32F2F"
android:gravity="center"
android:text="4"
android:textSize="30sp" />

<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:background="#FF5722"
android:gravity="center"
android:text="5"
android:textSize="30sp" />

<TextView
android:id="@+id/textview6"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="2"
android:layout_columnWeight="1"

android:background="#607D8B"
android:gravity="center"
android:text="6"
android:textSize="30sp" />

<TextView
android:id="@+id/textview7"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="0"
android:layout_columnWeight="1"
android:background="#4CAF50"
android:gravity="center"
android:text="7"
 android:textSize="30sp" />

<TextView
android:id="@+id/textview8"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="1"
android:layout_columnWeight="1"
android:background="#ACACAC"
android:gravity="center"
android:text="8"
android:textSize="30sp" />

<TextView
android:id="@+id/textview9"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="2"
android:layout_columnWeight="1"
android:background="#A1887F"
android:gravity="center"
android:text="9"
android:textSize="30sp" />

</GridLayout>
Exercise 3.6: Design the following login form using Table Layout in Android Studio:

table_layout.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:stretchColumns="1">

<TableRow android:padding="5dp">

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_span="2"
android:gravity="center_horizontal"
android:text="@string/loginForm"
android:textColor="@color/second"
android:textSize="25sp"
android:textStyle="bold" />
</TableRow>

<TableRow>

<TextView
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="10dp"
android:text="@string/userName"
android:textSize="16sp" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/usernameField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
 android:padding="10dp">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp" />

</com.google.android.material.textfield.TextInputLayout>
</TableRow>

<TableRow>

<TextView
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="10dp"
android:text="@string/password"
android:textSize="16sp" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/passwordField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp" />

</com.google.android.material.textfield.TextInputLayout>
</TableRow>

<TableRow android:layout_marginTop="20dp">

<Button
android:id="@+id/loginButton"
style="@style/Widget.Material3.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_span="2"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:text="@string/login"
android:textColor="@color/white"
android:textSize="18sp"
app:cornerRadius="10dp" />
</TableRow>
</TableLayout>
Exercise 3.7: Design the following login form using Table Layout in Android Studio:
 table_layout.xml

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="match_parent">

<TableRow
android:layout_width="match_parent"
android:background="@color/first"
android:padding="3dp">

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="Version"
android:textStyle="bold" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="Version Name"
android:textStyle="bold" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="API Level"
android:textStyle="bold" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:padding="2dp">

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="5.0" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="Android Lolipop" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="21" />
</TableRow>
 <TableRow
android:layout_width="match_parent"
android:padding="2dp">

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="4.4" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="Android Kitkat" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="19" />

</TableRow>

<TableRow
android:layout_width="match_parent"
android:padding="2dp">

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="4.3" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="Android Jelly Bean" />

<TextView
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_weight="1"
android:gravity="center"
android:text="18" />
</TableRow>

</TableLayout>
Exercise 3.9: Design the following layout using Absolute Layout in Android Studio:

absolute_layout.xml

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

<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100dp"
android:layout_y="50dp"
android:text="Absolute Layout Example"
android:textSize="20sp"
android:textStyle="bold" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="120dp"
android:layout_y="100dp"
android:text="Button Absolute Layout" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="0dp"
android:layout_y="170dp"
android:text="Absolute Layout Example"
android:textSize="18sp" />
 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="250dp"
android:text="Button 1" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="250dp"
android:layout_y="250dp"
android:text="Button 2" />
</AbsoluteLayout>
Exercise 3.10: Design the following login form using Absolute Layout in Android Studio:

absolute_layout.xml

<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:ignore="Deprecated">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="70dp"
android:text="@string/user_name" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/usernameField"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_x="150dp"
android:layout_y="45dp"
android:padding="10dp">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp" />

</com.google.android.material.textfield.TextInputLayout>
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="170dp"
android:text="@string/password" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/passwordField"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_x="150dp"
android:layout_y="145dp"
android:padding="10dp">

<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="50dp" />

</com.google.android.material.textfield.TextInputLayout>

<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_x="120dp"
android:layout_y="250dp"
android:text="@string/log_in" />
</AbsoluteLayout>
Exercise 3.11: Design the following login form using Frame Layout in Android Studio:

frame_layout.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#264653" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:padding="10dp"
android:text="Android"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold" />

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:padding="50dp"
android:src="@drawable/art" />
</FrameLayout>
Exercise 3.12: Design the following login form using Frame Layout in Android Studio:
 frame_layout_2.xml

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/white"
android:layout_height="match_parent">

<View
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="top"
android:layout_marginTop="10dp"
android:background="@color/black" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Mobile Application Development, \nMUET-CSE"
android:textColor="@color/white"
android:textSize="25sp" />

<TextView
android:layout_gravity="bottom|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/gray"
android:padding="10dp"
android:text="11/Aug/2023"
android:textColor="@color/white"
android:textSize="18sp" />

</FrameLayout>