안드로이드 EditText에 이미지 추가하는 방법 (단계별 가이드)

이 튜토리얼에서는 안드로이드 EditText에 이미지(아이콘)를 추가하는 방법을 단계별로 알아봅니다. 검색창처럼 입력 필드 오른쪽에 아이콘을 배치하고 싶을 때 유용하게 활용할 수 있습니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project를 선택하여 새 프로젝트를 생성합니다. 프로젝트 생성에 필요한 모든 세부 정보를 입력한 뒤 진행하세요.

2단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingStart="5dp"
        android:background="@drawable/rounded_edittext"
        android:drawableRight="@android:drawable/ic_menu_search"
        android:paddingLeft="5dp" />

</LinearLayout>

위 코드에서 핵심은 android:drawableRight 속성입니다. 이 속성을 사용하면 EditText의 오른쪽 끝에 이미지나 아이콘을 간단히 배치할 수 있습니다. 여기서는 안드로이드 기본 제공 리소스인 @android:drawable/ic_menu_search(돋보기 검색 아이콘)를 사용했습니다. 또한 android:background 속성으로 둥근 모서리 배경을 적용했습니다.

3단계: 배경 Drawable 파일 작성

res/drawable/rounded_edittext.xml 파일을 생성하고 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#2f6699" />
    <corners
        android:radius="10dp" />
</shape>

이 shape drawable은 흰색 배경(#FFFFFF)에 파란색 테두리(#2f6699), 그리고 10dp 크기의 둥근 모서리를 정의합니다. 덕분에 EditText가 기본 사각형이 아닌 부드러운 둥근 형태로 표시됩니다.

4단계: 앱 실행 및 결과 확인

실제 안드로이드 기기를 컴퓨터에 연결한 상태에서 Android Studio의 툴바에 있는 Run 버튼을 클릭해 앱을 실행합니다. 실행할 기기를 선택하면 아래와 같이 EditText 오른쪽에 검색 아이콘이 표시되는 화면을 확인할 수 있습니다.

추가 팁

drawableRight 외에도 drawableLeft, drawableTop, drawableBottom 속성을 사용하면 EditText의 네 방향 어느 곳에든 이미지를 배치할 수 있습니다. 또한 drawablePadding 속성을 활용하면 텍스트와 이미지 사이의 간격을 조절할 수 있으니 참고하세요.