[Android] Toolbar(상단 바) 설정하기

Toolbar 란?

 ▶ 밑의 그림과 같이 상단에 앱 제목과 핵심 기능들을 모아놓은 바 형태입니다.

 

Toolbar vs ActionBar

▶ 안드로이드 스튜디오에서 프로젝트를 처음 만들면 ActionBar를 앱 바로 설정합니다. 하지만 새로운 버전의 Android를 출시할때마다 ActionBar의 기능을 추가하였고, 기기가 어떤 버전의 Android 시스템을 사용하는지에 따라 ActionBar가 다르게 동작할 수 있습니다. Toolbar를 이용하면 모든 기기에서 최근의 기능들까지 사용할 수 있고, 수 많은 종류의 기기에서 동일하게 작동할 수 있기 때문에 Toolbar를 이용하는것을 권장합니다.

 

---

Toolbar 설정하는 방법

 

1. ※중요※  res - values - themes 에서 parent 부분을 바꿔줍니다. (기존 ActionBar 제거)

꼭 저 테마를 쓸 필요는 없습니다. NoActionBar 단어가 들어가는 테마면 괜찮습니다.

 

2. Toolbar를 추가 할 layout에 Toolbar를 추가합니다.

<?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="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:title="제목"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

3. layout과 연결된 Activity에서 onCreate() 메소드 안에 추가합니다.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

 

4. 결과

Toolbar와 제목

 

---

Toolbar에 기능 연결

 

1. menu Directory 만들기

 1-1 res -> New -> Android Resource Directory

 

 1-2 Resource type -> menu -> OK

 

2. menu 폴더에 파일 추가

 2-1 menu -> New -> Menu Resource File

 

 2-2 임의의 File name을 입력 -> OK

 

 2-3 파일에 내용 추가

<?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/search"
        android:title="더보기"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item android:id="@+id/menu"
        android:title="더보기"
        android:icon="@drawable/ic_menu"
        app:showAsAction="always"/>
</menu>

 

▶ icon은 본인이 준비 한 이미지를 drawable 폴더에 넣으면 됩니다.

▶ item의 개수에 따라 표시되는 양이 달라집니다.

 

3. Activity에 내용 추가

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_top, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.search:
                // 여기에 입력
                return true;
            case R.id.menu:
                // 여기에 입력
                return true;
        }
        return false;
    }

▶ onCreateOptionMenu : 옵션메뉴들을 생성해주는 메소드입니다.

▶ onOptionsItemSelected : MenuItem item을 매개변수로 받아 해당하는 case의 코드를 실행합니다.

 

4. 결과

우측 상단에 아이콘이 표시됩니다.

 

---

참고 사이트 : https://developer.android.com/?hl=ko 

Android 개발자  |  Android Developers