이 튜토리얼에서는 안드로이드 EditText 내부에 이미지(아이콘)를 설정하는 방법을 단계별로 살펴봅니다. 검색창처럼 입력 필드 왼쪽에 아이콘이 함께 표시되는 UI를 만들 때 유용하게 활용할 수 있습니다.
1단계 — 새 프로젝트 생성
Android Studio에서 File → New Project를 선택하고, 새 프로젝트 생성에 필요한 정보를 모두 입력하여 프로젝트를 만듭니다.
2단계 — activity_main.xml 코드 작성
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:drawableStart="@android:drawable/ic_menu_search"
android:paddingLeft="5dp" />
</LinearLayout>
위 코드에서는 EditText를 하나 배치하고, drawableStart 속성을 사용해 입력 필드의 시작 부분(왼쪽)에 시스템 기본 검색 아이콘(ic_menu_search)을 추가했습니다. 또한 background 속성으로 둥근 모서리 배경 drawable을 적용했습니다.
3단계 — drawable/rounded_edittext.xml 작성
레이아웃에서 참조하는 이름과 일치하도록 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) 리소스는 흰색 배경(#FFFFFF), 1dp 두께의 청록색 테두리(#2f6699), 그리고 10dp 크기의 둥근 모서리를 정의합니다. 덕분에 EditText가 부드러운 라운드 스타일의 검색창처럼 보이게 됩니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 결과를 확인해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 결과가 표시됩니다.
입력 필드 왼쪽에 검색 아이콘이 나타나고, 둥근 테두리가 적용된 EditText를 확인할 수 있습니다. 이 방법은 로그인 폼, 검색창 등 다양한 입력 UI에서 응용할 수 있으며, drawableEnd 속성을 사용하면 오른쪽에도 아이콘을 배치할 수 있습니다.