[Android][Java] 툴바 버튼에 뱃지 추가하기

안녕하세요 이전 포스팅에서 BadgeDrawable을 활용하여 바텀 네비게이션 바에 뱃지를 추가하는 방법을 알아보았는데요.

이번 시간에는 다음 이미지와 같이 툴바 버튼에 뱃지를 추가해보겠습니다.

 

우선 툴바를 사용하므로 기존에 있는 액션바를 제거하기 위해 themes.xml 하단에 다음과 같은 코드를 추가합니다.

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

 

그 후 레이아웃 화면에 다음과 같이 툴바를 추가해줍니다. (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/purple_200"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

다음으로 알림 아이콘과 알림 상단에 붙어 있는 뱃지를 직접 커스텀 해야 하므로 notification_badge.xml이라는 레이아웃을 새로 생성합니다.(notification_badge.xml) 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="?attr/actionBarSize"
    android:layout_height="?attr/actionBarSize"
    >

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src = "@drawable/notification"
        android:layout_gravity="center"
        android:layout_marginEnd="5dp"/>

    <TextView
        android:id="@+id/badge_counter"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:background="@drawable/badge"
        android:text=""
        android:layout_marginEnd="5dp"
        android:textSize="12sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:layout_gravity="center"
        android:gravity="center"
        android:textAlignment="center"
        android:layout_marginStart="6dp"
        android:layout_marginBottom="6dp"/>

</FrameLayout>

 

이 때 알림 이미지와 뱃지 이미지의 경우에도 직접 추가해주어야 합니다. 여기서는 drawable 파일 안에 각각 다음과 같이 추가하였습니다.

 

(notification.xml)

<vector android:height="24dp" android:tint="#000000"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
</vector>

(badge.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/red"/>

</shape>

 

이 후 툴바에 알림 버튼을 추가하기 위해 menu 파일을 하나 생성 후 그 안에 알림 이미지를 넣었습니다.

(noti_button.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id = "@+id/noti"
        android:enabled="true"
        android:icon="@drawable/notification"
        app:showAsAction="always"
        android:title = "알림"/>

</menu>

 

마지막으로 지금까지 작성한 모든 파일들을 활용하여 자바 코드로 툴바 버튼에 뱃지가 보이도록 구현하였습니다.

(MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    MenuItem menuItem;
    TextView badgecounter;
    FrameLayout layout;
    Toolbar toolbar;


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

        // 레이아웃, 툴바 초기화
        layout = (FrameLayout) LayoutInflater.from(this).inflate(R.layout.notification_badge, null);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("");
    }

    // 알림 버튼 생성
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.noti_button, menu);

        menuItem = menu.findItem(R.id.noti);

        menuItem.setActionView(layout);
        View view = menuItem.getActionView();
        badgecounter = view.findViewById(R.id.badge_counter);

        // 알림 뱃지에 임의의 숫자 추가
        badgecounter.setText("3");

        return true;
    }
}

 

알림 뱃지에 표시되는 숫자의 경우 클릭 이벤트에 따라 증가, 감소하거나 DB에서 불러온 값을 넣는 등 다양하게 응용할 수 있습니다.