DEPARTMENT OF

COMPUTER SCIENCE

Experiment 3.2
Student Name: Trinadh UID: 21BCS6836
Branch: CSE Section/Group: 620-B
Date of Performance: 06/03/2024 Subject Code: 21CSH-355
Subject Name: Mobile Application Development with Lab Semester: 6th

1. Aim: Implement building blocks for Android Application using different layouts such as
linear, relative and absolute.

2. Objective: The objective of implementing building blocks for an Android application using
different layouts such as linear, relative, and absolute is to create a diverse and visually
appealing user interface that accommodates various design requirements. Different layout types
offer flexibility in organizing UI components, and understanding their usage is crucial for
effective Android app development.

3. Input/Apparatus Used:

To create an Android application using Fragments, you'll need a development environment, the
Android SDK, and an integrated development environment (IDE) for Android app development.

4. Procedure:
Absolute Layout:
1. android:id: It uniquely specifies the absolute layout
2. android:layout_x: It specifies X-Coordinate of the Views (Possible values of this is in
density- pixel or pixel)
3. android:layout_y: It specifies Y-Coordinate of the Views (Possible values of this is in dp or px)

Linear Layout:
a. Create a new Android project: Open Android Studio and create a new project with an
empty activity.
b. Design the layout using a linear layout: Open the activity_main.xml file located in the
res/layout directory. Create a linear layout with a vertical orientation. Inside the linear layout,
add a TextView for the heading, an EditText for entering the message, and a Button for
showing the text.
c. Set up the functionality: In the MainActivity class, retrieve references to the EditText and
Button views using findViewById(). Set an OnClickListener on the Button. Inside the
OnClickListener, get the text entered in the EditText, and show it using a Toast message
when the button is clicked.
d. Run the application: Build and run the application on an emulator or a physical device.
e. Test the functionality: Enter a message in the input field and click the "Show Text"
button. Verify that the entered text is displayed in a toast message. If you click the
button without entering any text, ensure that a message prompting you to enter a
message is displayed.
DEPARTMENT OF
COMPUTER SCIENCE
Relative Layout:
1. Create a new project

2. Select the language as java

3. select the API level of 26(android OREO 8.0)

4. Click on the ok button. Wait until UI displays.

5. Then clean the project. Because gradle may not build.

6. After that, we can see two code files. One is activity_main.xml and MainActivity.java.

7. Go to the activity_main.xml file.

8. In that, we can see two modes. One is design mode and another one is code mode. Then go
to code mode.

9. And Use the below code.

10. We do not need to change the default java code. Because we are not performing any
onClick activities.
DEPARTMENT OF
COMPUTER SCIENCE
5. Source Code:

Absolute Layout:
The Main Activity File:
package com.example.expeight;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity

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

The Layout File:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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"
tools:ignore="Deprecated">

<TextView
android:id="@+id/headingTextView"
android:layout_width="match_parent"
android:layout_height="102dp"
android:layout_x="0dp"
android:layout_y="0dp"
android:background="@android:color/holo_green_dark"
android:gravity="center"
android:padding="10dp"
android:text="ABSOLUTE LAYOUT"
android:textSize="20sp"
DEPARTMENT OF
COMPUTER SCIENCE
android:textStyle="bold" />
DEPARTMENT OF
COMPUTER SCIENCE
<TextView
android:id="@+id/bodyTextView"
android:layout_width="match_parent"
android:layout_height="627dp"
android:layout_x="0dp"
android:layout_y="105dp"
android:padding="16dp"/>

<TextView
android:id="@+id/headingTextView1"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_x="53dp"
android:layout_y="244dp"
android:gravity="center"
android:padding="10dp"
android:text="Absolute layout is a type of layout management system used in graphic
user interfaces (GUIs) and web development. In an absolute layout, elements are
positioned explicitly at specific coordinates on the screen or within a container, regardless
of other elements' positions. This means that the position of each element is defined in
terms of absolute values, such as pixels or percentages, relative to the top-left corner of its
containing element or the screen."
android:textSize="20sp"
android:textStyle="bold" />

/>
</AbsoluteLayout>

Linear Layout:
XML file:
<?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">

<!-- Heading -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Linear Layout"
android:textSize="24sp"
android:layout_marginTop="16dp"
android:layout_gravity="center_horizontal"/>
DEPARTMENT OF
COMPUTER SCIENCE
<!-- Input Field -->
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your message"
android:layout_margin="16dp"/>

<!-- Button to Show Text -->

<Button
android:id="@+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Text"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"/>

</LinearLayout>

Java file:
package com.example.expeight_linear;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity

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

EditText editText = findViewById(R.id.editText);

DEPARTMENT OF
COMPUTER SCIENCE
Button showButton = findViewById(R.id.showButton);

showButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String message = editText.getText().toString();
if (!message.isEmpty()) {
// Show the text in a toast
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
} else {
// Show a message if the input field is empty
Toast.makeText(MainActivity.this, "Please enter a
message",
Toast.LENGTH_SHORT).show();
}
}
});
}
}

Relative Layout:
Xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Button in top-left corner -->

<Button
android:id="@+id/buttonTopLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:text="Top Left" />

<!-- Button in top-right corner -->

<Button
android:id="@+id/buttonTopRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:text="Top Right" />
DEPARTMENT OF
COMPUTER SCIENCE
<!-- Button in bottom-left corner -->
DEPARTMENT OF
COMPUTER SCIENCE
<Button
android:id="@+id/buttonBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:text="Bottom Left" />

<!-- Button in bottom-right corner -->

<Button
android:id="@+id/buttonBottomRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Bottom Right" />

<!-- Button in the center -->

<Button
android:id="@+id/buttonCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Center" />
</RelativeLayout>

MainActivity.java:
package com.example.expeight_relative;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

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

public class MainActivity extends AppCompatActivity

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

// Find buttons by their IDs

Button buttonTopLeft = findViewById(R.id.buttonTopLeft);
Button buttonTopRight = findViewById(R.id.buttonTopRight);
Button buttonBottomLeft =
findViewById(R.id.buttonBottomLeft);
Button buttonBottomRight = findViewById(R.id.buttonBottomRight);
Button buttonCenter = findViewById(R.id.buttonCenter);

// Set onClickListeners for each button

buttonTopLeft.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
showToast("Top Left Button
Clicked");
}
});

buttonTopRight.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast("Top Right Button
Clicked");
}
});

buttonBottomLeft.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast("Bottom Left Button
Clicked");
}
});

buttonBottomRight.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast("Bottom Right Button
Clicked");
}
DEPARTMENT OF
COMPUTER SCIENCE
});

buttonCenter.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast("Center Button
Clicked");
 DEPARTMENT OF
COMPUTER SCIENCE
}
});
}

// Helper method to show a Toast

message private void showToast(String
message) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}
}

6. Output:
Absolute Layout: Linear Layout: Relative Layout:
DEPARTMENT OF
COMPUTER SCIENCE

7. Observations/Outcomes:

1. Learned how to add a button in Android studio.

2. Learned how to create fragments in android studio
3. Learned about layouts .
4. Learned how to handle on click event on button.