안드로이드에서 커스텀 토스트 메시지를 만드는 방법 완벽 가이드

토스트(Toast)란 무엇인가?

커스텀 토스트에 대해 알아보기 전에, 먼저 토스트가 무엇인지 이해할 필요가 있습니다. 토스트(Toast)는 현재 화면 위에 잠깐 메시지를 표시한 후 일정 시간이 지나면 자동으로 사라지는 작은 팝업 UI 요소입니다. 안드로이드 앱에서 간단한 알림을 사용자에게 전달할 때 매우 유용하게 활용됩니다.

이번 예제에서는 기본 토스트가 아닌, 이미지와 스타일을 입힌 커스텀 토스트 메시지를 직접 만들어 화면에 띄우는 방법을 단계별로 살펴보겠습니다.

커스텀 토스트 구현 단계

1단계 — 새 프로젝트 생성

Android Studio를 열고 File ⇒ New Project 메뉴로 이동하여 새 프로젝트를 생성합니다. 프로젝트 생성에 필요한 모든 세부 정보를 입력해 주세요.

2단계 — activity_main.xml 레이아웃 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 중앙에 'Show Toast' 버튼 하나를 배치하는 간단한 구조입니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
   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">
   <LinearLayout
      android:layout_width = "match_parent"
      android:layout_height = "match_parent"
      android:background = "#797979"
      android:gravity = "center"
      android:orientation = "vertical">
      <Button
         android:id = "@+id/showToast"
         android:text = "Show Toast"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content" />
   </LinearLayout>
</android.support.constraint.ConstraintLayout>

3단계 — MainActivity.java 코드 작성

src/MainActivity.java 파일에 다음 코드를 추가합니다. 버튼 클릭 시 LayoutInflater로 커스텀 레이아웃을 불러와 토스트에 적용하는 핵심 로직이 포함되어 있습니다.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Button button = findViewById(R.id.showToast);
      button.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            LayoutInflater li = getLayoutInflater();
            View layout = li.inflate(R.layout.custom_toast, (ViewGroup)       findViewById(R.id.custom_toast_layout_id));
            Toast toast = new Toast(getApplicationContext());
            toast.setDuration(Toast.LENGTH_SHORT);
            toast.setView(layout);// 커스텀 토스트 레이아웃 설정
            toast.show();
         }
      });
   }
}

4단계 — 커스텀 토스트 레이아웃(custom_toast.xml) 작성

res/layout/custom_toast.xml 파일을 새로 생성하고 아래 코드를 추가합니다. 이 레이아웃은 로고 이미지와 텍스트를 가로로 나열한 구조로, 실제 토스트에 표시될 내용을 정의합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   android:id = "@+id/custom_toast_layout_id"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:gravity = "center">
   <LinearLayout
      android:layout_width = "wrap_content"
      android:layout_height = "62dp"
      android:gravity = "center"
      android:background = "@drawable/buttonshape"
      android:orientation = "horizontal">
      <ImageView
         android:id = "@+id/imageView"
         android:layout_width = "100dp"
         android:layout_height = "50dp"
         android:scaleType = "fitStart"
         android:src = "@drawable/logo" />
      <TextView
         android:id = "@id/text"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:layout_marginLeft = "10dp"
         android:layout_marginRight = "20dp"
         android:text = "This is custom toast"
         android:textColor = "#FFF"
         android:textSize = "15sp"
         android:textStyle = "bold" />
   </LinearLayout>
</LinearLayout>

5단계 — 배경 드로어블(buttonshape.xml) 작성

위 코드에서 레이아웃 배경으로 @drawable/buttonshape를 지정했으므로, drawable 폴더에 buttonshape.xml 파일을 생성하고 아래 코드를 추가합니다. 그라데이션과 라운드 코너, 외곽선이 적용된 배경을 만들 수 있습니다.

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android" android:shape = "rectangle" >
   <corners
      android:radius = "14dp"
   />
   <gradient
      android:angle = "45"
      android:centerX = "%"
      android:centerColor = "#47A891"
      android:startColor = "#E8E8E8"
      android:endColor = "#000000"
      android:type = "linear"/>
   <padding
      android:left = "0dp"
      android:top = "0dp"
      android:right = "0dp"
      android:bottom = "0dp"/>
   <size
      android:width = "270dp"
      android:height = "60dp"/>
   <stroke
      android:width = "3dp"
      android:color = "#878787"/>
   </shape>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정하고 진행합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 상단 툴바의 Run(실행) 아이콘을 클릭하세요. 목록에서 본인의 모바일 기기를 선택하면, 기기에 앱의 기본 화면이 표시됩니다.

화면에서 'Show Toast' 버튼을 누르면 아래 이미지와 같이 커스텀 토스트가 나타나는 것을 확인할 수 있습니다.