[안드로이드] ImageButton 만들기 예제(ImageView, Button)

목차

1. 안드로이드 TextView 텍스트 출력 예제 이전 포스팅 참고 학습
2. 안드로이드 Button 클릭 이벤트 처리 예제 이전 포스팅 참고 학습
3. 안드로이드 ImageView 이미지 출력하기 예제 이전 포스팅 참고 학습
4. 안드로이드 레이아웃 XML에 ImageButton 추가 예제
5. 안드로이드 ImageButton에 이미지 추가 및 클릭시 TextView 텍스트 변경 예제

 

 

 

 

 

 

 

 

안드로이드 TextView 텍스트 출력 예제 이전 포스팅 참고 학습

TextView는 안드로이드에서 텍스트를 출력하는 데 사용되는 위젯입니다. XML 레이아웃에서 TextView를 추가하고, android:text 속성을 사용하여 출력할 텍스트를 설정할 수 있습니다. 이전 포스팅에서는 이러한 TextView를 추가하고 Java 코드에서 텍스트를 변경하거나 폰트 크기, 폰트 색상을 바꾸는 예제에 대해 알아보았습니다.

 

해당 내용이 궁금하시다면 아래의 링크를 참고하여 학습해주세요.

 

2023.08.22 - [Android] - [안드로이드] TextView 출력 예제(폰트 크기, 색상 변경)

[안드로이드] TextView 출력 예제(폰트 크기, 색상 변경)

 

 

 

 

 

 

안드로이드 Button 클릭 이벤트 처리 예제 이전 포스팅 참고 학습

이전 포스팅에서는 안드로이드 환경에서 Button을 클릭했을 때 발생하는 이벤트를 어떠헥 처리하는지 알아보았습니다. 오늘 예제는 이미지 버튼에 대한 예제이지만 버튼에 대한 속성은 거의 동일하기 때문에 버튼에 대해서도 잘 알아야합니다.

 

버튼을 눌렀을 때 이벤트를 받아 처리할 수 있는 OnClickListener에 대해서 아직 잘 모르신다면 아래 링크를 참고하여 학습해주세요.

 

2020.06.23 - [Android] - 안드로이드 버튼 클릭 이벤트 처리 예제 - 3

안드로이드 버튼 클릭 이벤트 처리 예제 - 3

 

 

 

 

 

 

안드로이드 ImageView 이미지 출력하기 예제 이전 포스팅 참고 학습

마지막으로 ImageView는 이미지를 출력하는 위젯으로, XML 레이아웃에 추가하여 이미지를 보여줄 수 있습니다. android:src 속성을 사용하여 이미지를 설정하고, layout_width와 layout_height로 이미지의 크기를 조정할 수 있습니다. 이전 포스팅에서는 이러한 ImageView에 이미지를 상황에 따라 다르게 출력하는 방법에 대해 알아보았습니다.

 

이미지 버튼도 이미지를 출력한다는 부분에서 동일하기 때문에 아직 이 부분을 잘 모르신다면 아래 링크를 통해 학습해주세요.

 

2023.08.22 - [Android] - [안드로이드] ImageView 이미지 출력하기 예제(OnClick 이벤트처리)

[안드로이드] ImageView 이미지 출력하기 예제(OnClick 이벤트처리)

 

 

 

 

 

 

안드로이드 레이아웃 XML에 ImageButton 추가 예제

ImageButton은 일반적인 Button과는 달리 이미지를 표시할 수 있는 버튼입니다. 아래는 XML 레이아웃에 ImageButton을 추가하는 예제입니다. android:src 속성을 사용하여 버튼에 이미지를 설정합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_launcher_foreground"
        android:contentDescription="Image Button" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageButton"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Hello, World!"
        android:textSize="18sp" />
</LinearLayout>

 

이미지 버튼과 텍스트 뷰 모습

 

 

 

 

안드로이드 ImageButton에 이미지 추가 및 클릭시 TextView 텍스트 변경 예제

아래는 ImageButton을 클릭했을 때 TextView의 텍스트를 변경하는 예제입니다. 클릭 이벤트를 처리하는 방법과 버튼을 클릭할 때 TextView의 텍스트를 변경하는 코드를 작성합니다.

 

package com.example.blog_test_app;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ImageButton imageButton;
    private TextView textView;

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

        imageButton = findViewById(R.id.imageButton);
        textView = findViewById(R.id.textView);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("Button Clicked!");
            }
        });
    }
}

 

버튼 클릭시 "Button Clicked!" 라는 문구로 텍스트뷰가 수정된다.