본문 바로가기
안드로이드 자바

[Java][Android] 툴바(toolbar) 뒤로가기 버튼 만들기

by teamnova 2021. 3. 1.

툴바란?

애플리케이션 콘텐츠 내에서 사용하기위한 표준 도구 모음 입니다.

 

[참고]

developer.android.com/training/appbar/setting-up?hl=ko#java

developer.android.com/reference/androidx/appcompat/widget/Toolbar?hl=ko


예제

툴바 뒤로가기 버튼으로 화면 이동하는 기능을 만들어보겠습니다.

 

<AndroidManifest.xml>

프로젝트를 처음 생성하면 style 부분이 앱 이름(예: android:theme="@style/Theme.Stickode_v5")으로 되어 있을 텐데 이 값을  android:theme="@style/Theme.AppCompat.DayNight.NoActionBar" 값으로 변경해주셔야 합니다.

만약 변경을 안하고 툴바를 추가할 경우 에러가 발생하면서 앱이 종료가 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.stickode_v5">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".NextActivity" />
    </application>

</manifest>

그 다음 예제에 사용할 화면을 만들어보겠습니다.

 

<activity_main.xml>

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="409dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="메인 액티비티"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

<activity_next.xml>

activity_next.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=".NextActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/next_toolbar"
        android:layout_width="409dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="다른 액티비티"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<MainActivity>

툴바 뒤로가기 버튼을 만드려면, Toolbar 객체를 생성하고, 설정 함수를 만들어 줘야 합니다.

스틱코드를 활용한다면, 클래스에서 'to'까지만 작성 했을 때 버튼 클릭이벤트가 나타납니다.

 

툴바 생성을 클릭하면 코드가 한 번에 작성이 되서 편리합니다.

xml에 만들어둔 toolbar의 아이디 값만 입력하면 되니 빠르게 코딩이 가능합니다.

만들어진 '툴바 뒤로가기 버튼'에 이벤트를 주기 위해 툴바 설정 코드를 추가합니다.

MenuItem 는 간단하게 말하자면,

툴바에 있는 버튼을 눌렀을 때 발생하는 모든 이벤트 정보를 가지고 있는 객체라고 이해하시면 됩니다.

여기서 android.R.id.home 값은 뒤로가기 버튼이 눌러졌음을 판단한다는 것입니다.

todo 밑에는 내가 넣고싶은 기능을 넣으시면 됩니다.

 

다른 액티비티로 이동하기위해 Intent 코드를 추가합니다.

 

<NextActivity>

이 클래스 코드가 MainActivity와 비슷해서 그대로 추가 하시면 됩니다.

다른 점은 액티비티 이동을 하기 위해 Intent를 사용하지 않고 액티비티를 종료해주는 finish() 기능을 사용했습니다.

package com.example.stickode_v5;

import android.os.Bundle;
import android.view.MenuItem;

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

public class NextActivity extends AppCompatActivity {

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

        // 툴바 생성
        Toolbar toolbar = findViewById(R.id.next_toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); // 뒤로가기 버튼, 디폴트로 true만 해도 백버튼이 생김
        getSupportActionBar().setTitle("다른 액티비티"); // 툴바 제목 설정
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:{ //toolbar의 back키 눌렀을 때 동작
                // 액티비티 이동
                finish();
                return true;
            }
        }
        return super.onOptionsItemSelected(item);
    }
}

여기까지 마치면, <- 버튼을 클릭할때마다 다른 화면으로 이동하는 것을 확인할 수 있습니다.

 

활용한 스틱코드

 

툴바 만들기) stickode.com/detail.html?no=1914