TY Exp 5 Implementation of Button, ImageButton, and ToggleButton in Android

Implementation of Button, ImageButton, and ToggleButton in Android

---

1. Project Overview

Project Name: ButtonDemoApp
Language: Java
Minimum SDK: API 21
Activity: MainActivity
Layout File: activity_main.xml
Emulator: Medium Phone AVD

Objective:
To demonstrate the use of different types of buttons—Button, ImageButton, and ToggleButton—and handle their user interactions.

---

2. XML Layout Design

File: res/layout/activity_main.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"
    android:padding="24dp"
    android:gravity="center">

    <!-- Normal Button -->
    <Button
        android:id="@+id/btnClick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:textSize="18sp"
        android:layout_marginBottom="16dp" />

    <!-- Image Button -->
    <ImageButton
        android:id="@+id/imgButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_menu_camera"
        android:contentDescription="Image Button"
        android:background="@android:color/transparent"
        android:layout_marginBottom="16dp" />

    <!-- Toggle Button -->
    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="ON"
        android:textOff="OFF" />

</LinearLayout>

---

3. Java Source Code

File: java/com/example/buttondemoapp/MainActivity.java

package com.example.buttondemoapp;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ToggleButton;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    Button btnClick;
    ImageButton imgButton;
    ToggleButton toggleButton;

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

        // Linking UI components with Java objects
        btnClick = findViewById(R.id.btnClick);
        imgButton = findViewById(R.id.imgButton);
        toggleButton = findViewById(R.id.toggleButton);

        // Button click event
        btnClick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "Normal Button Clicked",
                        Toast.LENGTH_SHORT).show();
            }
        });

        // ImageButton click event
        imgButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "Image Button Clicked",
                        Toast.LENGTH_SHORT).show();
            }
        });

        // ToggleButton state change event
        toggleButton.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                Toast.makeText(MainActivity.this,
                        "Toggle Button is ON",
                        Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this,
                        "Toggle Button is OFF",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

---

4. Output Behavior (Observation)

UI Component	User Action	Output Displayed
Button	Click	Toast: “Normal Button Clicked”
ImageButton	Tap on image	Toast: “Image Button Clicked”
ToggleButton	Switch ON	Toast: “Toggle Button is ON”
ToggleButton	Switch OFF	Toast: “Toggle Button is OFF”

---

5. Explanation of Button Types

1. Button

• A standard clickable UI element.

• Used to perform a single action when pressed.

• Example: Submitting a form, opening another screen.

2. ImageButton

• A button that displays an image instead of text.

• Commonly used for icons such as camera, settings, or delete.

• Enhances visual interaction.

3. ToggleButton

• Represents a two-state button (ON/OFF).

• Used where switching behavior is required, such as enabling or disabling features.

---

6. Learning Outcome Mapping

✔ LLO 5.1 Achieved

• Different types of buttons are used

• Event handling is implemented correctly

• Application runs successfully on Medium Phone AVD

---

7. Conclusion

This practical demonstrates the correct implementation of Button, ImageButton, and ToggleButton in an Android application using Java. The program follows Android UI standards, uses appropriate listeners, and produces clear user feedback, making it suitable for engineering diploma/degree practical examinations.

Android project file structure for the practical ButtonDemoApp, 

---

Android Project File Structure (Tree Diagram)

ButtonDemoApp/
│
├── app/
│   │
│   ├── src/
│   │   │
│   │   ├── main/
│   │   │   │
│   │   │   ├── java/
│   │   │   │   │
│   │   │   │   └── com/
│   │   │   │       └── example/
│   │   │   │           └── buttondemoapp/
│   │   │   │               │
│   │   │   │               └── MainActivity.java
│   │   │   │
│   │   │   ├── res/
│   │   │   │   │
│   │   │   │   ├── layout/
│   │   │   │   │   └── activity_main.xml
│   │   │   │   │
│   │   │   │   ├── drawable/
│   │   │   │   │   └── (default system icons used)
│   │   │   │   │
│   │   │   │   ├── mipmap-hdpi/
│   │   │   │   ├── mipmap-mdpi/
│   │   │   │   ├── mipmap-xhdpi/
│   │   │   │   ├── mipmap-xxhdpi/
│   │   │   │   └── mipmap-xxxhdpi/
│   │   │   │
│   │   │   ├── values/
│   │   │   │   │
│   │   │   │   ├── colors.xml
│   │   │   │   ├── strings.xml
│   │   │   │   └── themes.xml
│   │   │   │
│   │   │   └── AndroidManifest.xml
│   │   │
│   │   ├── androidTest/
│   │   │   └── java/
│   │   │       └── com/example/buttondemoapp/
│   │   │
│   │   └── test/
│   │       └── java/
│   │           └── com/example/buttondemoapp/
│   │
│   └── build.gradle
│
├── gradle/
│   └── wrapper/
│
├── build.gradle
├── settings.gradle
└── gradle.properties

---

Key Academic Notes (for Viva / Record)

• MainActivity.java
  Contains the Java logic and event handling for Button, ImageButton, and ToggleButton.

• activity_main.xml
  Defines the user interface layout and button components.

• AndroidManifest.xml
  Declares application components and the launcher activity.

• res/
  Holds all non-code resources such as layouts, images, colors, and themes.

---