ImageButton

ImageButton

Imagine a button that shows an image instead of text, like a play icon, camera icon, or search icon.
In Android, this clickable image button is called ImageButton.

Example:

[🔍]  Search
[▶]   Play
[📷]   Camera

These icons act like buttons you can tap.

---

1. Definition

ImageButton is a UI component in Android that displays an image and performs an action when clicked.

Simple meaning:

ImageButton = A clickable button that uses an image instead of text.

---

2. Purpose

ImageButton is used to:

• Provide icon-based actions

• Improve user interface design

• Save space in UI

• Make apps more visual and intuitive

Examples in apps:

App	ImageButton Example
Music app	Play / Pause button
Camera app	Camera capture button
Browser	Back / Forward buttons
Shopping app	Search icon

---

3. Basic Syntax (XML)

Example ImageButton in layout:

<ImageButton
    android:id="@+id/btnSearch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/search_icon"/>

Explanation:

• id → unique identifier

• layout_width → button width

• layout_height → button height

• src → image displayed on the button

Result:

[ 🔍 ]

---

4. Using ImageButton in Kotlin Code

Example in Activity:

import android.os.Bundle
import android.widget.ImageButton
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val imageButton = findViewById<ImageButton>(R.id.btnSearch)

        imageButton.setOnClickListener {
            println("Search Button Clicked")
        }
    }
}

Explanation:

• findViewById() connects XML to Kotlin

• setOnClickListener() detects button clicks

---

5. Important Properties

1. src

Sets the image displayed on the button.

android:src="@drawable/play_icon"

---

2. background

Sets button background.

android:background="@null"

Often used to remove default background.

---

3. contentDescription

Used for accessibility (screen readers).

android:contentDescription="Search Button"

---

4. padding

Adds space inside the button.

android:padding="10dp"

---

5. layout_margin

Adds space outside button.

android:layout_margin="8dp"

---

6. Important Methods (Kotlin)

setOnClickListener()

Handles click events.

imageButton.setOnClickListener {
    println("Image button clicked")
}

---

setImageResource()

Change image programmatically.

imageButton.setImageResource(R.drawable.pause_icon)

---

setVisibility()

Show or hide button.

imageButton.visibility = View.GONE

---

setEnabled()

Enable or disable button.

imageButton.isEnabled = false

---

7. Real-Time Examples

Example 1: Search Icon

XML:

<ImageButton
    android:id="@+id/btnSearch"
    android:src="@drawable/search_icon"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Result:

🔍

Used in search bars.

---

Example 2: Music Player Controls

⏮   ▶   ⏭

These controls use ImageButtons for icons.

---

Example 3: Camera Capture Button

      📷
   Capture

Kotlin code:

val cameraButton = findViewById<ImageButton>(R.id.btnCamera)

cameraButton.setOnClickListener {
    println("Capture photo")
}

---

Example 4: Toggle Play/Pause

imageButton.setOnClickListener {
    imageButton.setImageResource(R.drawable.pause_icon)
}

Result:

▶ → ⏸

---

8. Advantages

✔ Attractive UI using icons
✔ Saves screen space
✔ Easy for users to recognize actions
✔ Common in modern app design

---

9. Disadvantages

❌ Icons may be confusing without proper design or labels.

---

10. One-Line Summary

ImageButton is an Android UI component that displays an image and acts like a clickable button.

---