이 튜토리얼에서는 Android 앱에서 Snackbar의 레이아웃을 직접 커스터마이징하는 방법을 단계별로 알아봅니다. 기본 Snackbar는 검은 배경에 흰색 텍스트로 표시되지만, 배경색·텍스트 색상·폰트 등을 변경해 앱의 디자인에 어울리게 꾸밀 수 있습니다.
1단계: 새 프로젝트 생성
Android Studio를 열고 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 항목을 입력하여 프로젝트를 만듭니다.
2단계: activity_main.xml 레이아웃 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 중앙에 'Custom Snackbar' 버튼 하나를 배치하는 간단한 구조입니다.
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:gravity="center"
tools:context="com.androidmads.ajts.customsnackbar.MainActivity">
<Button
android:id="@+id/btn4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@color/colorAccent"
android:text="Custom Snackbar"
android:textColor="@android:color/white" />
</LinearLayout>3단계: MainActivity.java 코드 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다. 이 코드가 핵심으로, Snackbar의 내부 뷰(텍스트·액션 버튼)에 접근해 배경색을 흰색으로 바꾸고, 커스텀 폰트(LatoRegular)를 적용하며, 텍스트 색상을 검정으로 변경합니다.
package com.androidmads.ajts.customsnackbar;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Build;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextView;
import static java.security.AccessController.getContext;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btn4).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar mSnackBar = Snackbar.make(v, "Custom Color", Snackbar.LENGTH_LONG);
TextView mainTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_text);
TextView actionTextView = (TextView) (mSnackBar.getView()).findViewById(android.support.design.R.id.snackbar_action);
mSnackBar.getView().setBackgroundColor(Color.WHITE);
Typeface font = Typeface.createFromAsset(getAssets(), "LatoRegular.ttf");
mainTextView.setTypeface(font);
actionTextView.setTypeface(font);
mainTextView.setTextColor(Color.BLACK);
actionTextView.setTextColor(Color.BLACK);
mSnackBar.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Action!", Snackbar.LENGTH_SHORT).show();
}
});
mSnackBar.show();
}
});
}
}코드 핵심 포인트
- mSnackBar.getView()로 Snackbar의 루트 뷰에 접근할 수 있습니다.
- android.support.design.R.id.snackbar_text와 snackbar_action ID를 사용해 내부 TextView를 가져옵니다.
- Typeface.createFromAsset()을 사용하려면 커스텀 폰트 파일(LatoRegular.ttf)을 assets 폴더에 미리 넣어두어야 합니다.
4단계: AndroidManifest.xml 설정
Manifests/AndroidManifest.xml 파일에 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="com.androidmads.ajts.customsnackbar">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 결과가 표시됩니다.
버튼을 누르면 흰색 배경에 검정 텍스트, 그리고 커스텀 폰트가 적용된 Snackbar가 나타나고, 'UNDO' 액션 버튼까지 정상적으로 동작하는 것을 확인할 수 있습니다. 이 방식을 응용하면 Snackbar의 패딩, 모서리 둥글기, 위치 등 더 다양한 속성도 자유롭게 조절할 수 있습니다.