안드로이드 툴바 기본 사용법. (Android Toolbar)

2019. 1. 26. 13:17


1. 안드로이드 툴바(Toolbar)와 앱바(App Bar)

툴바(Toolbar)는 안드로이드 5.0 (API Level 21)부터 추가된 위젯(Widget)으로, 앱에서 가장 중요한 액션 또는 가장 자주 사용되는 액션들을 제공하는 앱바(AppBar)를 만들 때 사용합니다.

앱바 구현을 위한 툴바 사용


[안드로이드 액션바 기본 사용법]에서 설명했듯이, 예전에는 앱바(App Bar)가 ActionBar 클래스를 사용하여 만들어졌습니다. 그래서 앱바(App Bar)를 액션바(ActionBar)라고 부르기도 하며, 아직까지 많은 곳에서 앱바와 액션바, 이 두 가지 용어를 혼용해서 사용합니다.


그런데 새로운 버전의 안드로이드가 릴리즈됨에 따라, 액션바에도 다양한 기능들이 추가되고 표시 형태 또한 변화되었습니다. 그리고 이런 변화로 인해, 기기에 설치된 안드로이드 버전에 따라 액션바가 다르게 동작하는 결과를 낳게 되었죠. 동일한 액션바를 사용해도 버전에 따라 다른 동작을 수행한다는 것은, 개발자와 사용자 모두에게 불합리함으로 여겨질 수 밖에 없는 큰 단점입니다.


자, 그럼 당연히 구글에서는 이러한 단점을 보완할 수 있는 방법을 마련했겠지요? 버전에 따라 동작이 달라지는 파편화(Fragmentation) 문제를 해결하고 하위 호환성(Backward Compatibility)을 제공하기 위한 방법, 바로 지원 라이브러리(Support Library)를 사용하는 것입니다.


그래서 최근에 추가되는 앱바(App Bar)의 여러 기능들은 v7 AppCompat 지원 라이브러리Toolbar 위젯으로 구현되고 있습니다. 그리고 당연히, 앞서 언급한 하위 호환성(Backward Compatibility)을 확보하기 위해서는 v7 AppCompat 지원 라이브러리의 툴바를 사용하여 앱바(App Bar)를 구현해야 합니다.


결론적으로, v7 AppCompat 지원 라이브러리의 툴바(android.support.v7.widget.Toolbar)를 사용하여 앱바(App Bar)를 만들면, 많은 종류의 기기에서 일관된 앱바(App Bar)의 동작을 확보할 수 있습니다.

1.1 액션바(ActionBar) vs 툴바(Toolbar)

앞선 글, [안드로이드 액션바 기본 사용법]에서 액션바 위젯을 사용하여 앱바(App Bar)를 다루는 방법에 대해 설명하였는데요, 그렇다면 액션바를 사용하는 것과 툴바를 사용하는 것은 어떤 차이가 있을까요?


먼저, 앞서 설명했듯이 안드로이드 버전에 따라 다르게 동작하는 액션바와 다르게, 툴바는 하위 호환성(Backward Compatilibity)을 제공함으로 많은 버전에서 일관되게 동작합니다. 그래서 버전에 따른 기능 동작 여부를 신경써서 구현할 필요가 없죠.


그리고 액션바는 액티비티 내부에 기본적으로 포함된 요소입니다. 그러므로 액티비티의 레이아웃 XML에 액션바 위젯을 추가하지 않아도 액티비티에 지정된 테마가 앱바(App Bar)를 지원하면, 액션바를 액티비티의 앱바(App Bar)로 사용할 수 있습니다.


하지만 툴바는 액티비티의 레이아웃 XML에 작성되는 여느 다른 뷰(View) 위젯들과 다르게 취급되지 않습니다. 그래서 툴바를 사용하려면 액티비티의 레이아웃 XML에 android.support.v7.widget.Toolbar를 추가한 다음, 액티비티에 ".NoActionBar"가 포함된 테마를 지정하여 기본 액션바가 사용되지 않게 만들어야 합니다. 그리고 마지막으로 액티비티의 setSupportActionBar() 메서드를 호출하면 툴바를 액티비티의 앱바(App Bar)로 사용할 수 있습니다.


액티비티에서 툴바가 일반적인 뷰(View) 위젯으로 다루어진다는 것은 액티비티에 포함된 액션바에 비해 몇 가지 장점을 가지는데, 스타일 변경, 위치 조절, 애니메이션, 그리고 표시 형태 제어 등을 좀 더 손 쉽게 수행할 수 있다는 것입니다.


그리고 액티비티의 고정된 위치에 단 하나만 표시할 수 있는 액션바와 달리, 툴바는 각각 분리된 영역에 여러 개를 사용할 수 있습니다.

2. 툴바(Toolbar)를 앱바(App Bar)로 사용하기 위한 절차.

액티비티의 테마 설정만으로 사용 여부를 결정할 수 있는 액션바와 달리, 툴바를 사용하려면 몇 가지 설정 과정이 필요합니다. 일단, 툴바는 액티비티의 입장에서 일반적인 뷰(View)로 취급되니까요.

2.1 Toolbar 위젯에 대한 Dependency 추가.

v7 AppCompat 지원 라이브러리의 툴바를 사용하기 위해서는, 당연히, 프로젝트에 v7 AppCompat 지원 라이브러리에 대한 Dependency가 포함되어야 합니다. 아래 소스의 내용과 같이, "build.gradle (Module:app)" 파일에 "com.android.support:appcompat-v7:xx.x.x"를 추가하면 됩니다.

"build.gradle" - v7 AppCompat 지원 라이브러리 Dependency 추가.
dependencies {
    implementation 'com.android.support:appcompat-v7:27.1.1'
}

2.2 액티비티에 포함된 기본 ActionBar 사용하지 않게 만들기.

다음, 액티비티에서 기본으로 제공되는 ActionBar를 사용하지 않게 만들어야 합니다. 이를 위해서, 액티비티의 테마 설정에 ".NoActionBar"가 포함된 테마를 지정합니다.

"/res/values/styles.xml" - 기본 ActionBar 사용하지 않게 만들기.
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
    </style>
</resources>

DarkActionBar vs NoActionBar


2.3 액티비티의 레이아웃 XML에 Toolbar 위젯 추가.

이제 액티비티의 레이아웃에 Toolbar 위젯을 추가해야 합니다. 일반적인 뷰 위젯을 배치하듯, 액티비티 레이아웃 XML 파일의 앞 부분에 Toolbar 위젯을 추가하면 됩니다.

"/res/layout/activity_main.xml" - Toolbar 위젯 추가.
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:id="@+id/app_toolbar"/>

2.4 Toolbar를 액티비티의 앱바(App Bar)로 지정.

마지막으로, 액티비티의 setSupportActionBar() 메서드를 통해 앞서 추가한 Toolbar를 액티비티의 앱바(App Bar)로 지정합니다.

"MainActivity.java" - Toolbar를 액티비티의 앱바(App Bar)로 지정.
    Toolbar tb = (Toolbar) findViewById(R.id.app_toolbar) ;
    setSupportActionBar(tb) ;

2.5 앱바(App Bar) 제어를 위해 툴바 액세스하기.

툴바를 액티비티의 레이아웃에 추가하고 setSupportActionBar() 메서드를 통해 액티비티의 앱바(App Bar)로 지정하고나면, 앱바(App Bar)의 여러 기능을 사용하기 위해 툴바에 대한 참조를 획득할 수 있습니다. 이 때, [안드로이드 액션바 기본 사용법 - 2.2 앱바(App Bar) 액세스하기]에서 살펴봤던 getSupportActionBar() 메서드를 사용합니다. 참고로, getSupportActionBar()의 리턴 타입이 Toolbar가 아닌, ActionBar인 것에 주의하세요.

"MainActivity.java" - Toolbar에 대한 참조 획득하기.
    ActionBar ab = getSupportActionBar() ;

    // TODO : use ab.

3. 툴바(Toolbar)를 사용하여 앱바(App Bar) 만들기

이제 예제를 통해 툴바를 사용하여 앱바를 만드는 방법에 대해 알아보도록 하겠습니다. 단계별로 코드를 하나씩 추가해가며 툴바 사용법에 대한 예제를 작성할텐데요. 그런데 아래 예제의 설명과 코드가 위에서 설명한 내용에 중복되는 부분이 많아 글을 읽는 것이 조금 지루하게 느껴질 수도 있습니다. 하지만 앱바를 처음 다뤄보는 개발자라면, 툴바 구성 절차의 전체적인 흐름을 파악하는데 좀 더 도움이 될 거라 생각합니다.


참고로, 본문에서 설명하는 내용이 잘 이해되지 않는다면, [안드로이드 액션바 기본 사용법]을 먼저 읽어보시는 게 조금은 더 도움되실거라 생각합니다.

3.1 v7 AppCompat 지원 라이브러리에 대한 설정 추가.

지원 라이브러리의 툴바(Toolbar) 클래스를 사용하여 액티비티의 앱바(App Bar)를 구현하기 위해서는 가장 먼저 툴바(Toolbar)가 포함된 지원 라이브러리를 프로젝트에 추가해야 합니다. 툴바(Toolbar) 클래스는 v7 AppCompat 지원 라이브러리에 포함되어 있으므로, "com.android.support:appcompat-v7:x.x.x"를 build.gradle 파일에 추가하면 됩니다.


그런데 안드로이드 스튜디오에서 프로젝트 생성 중 액티비티 선택 과정에서 "Backward Compatibility"를 체크했다면, v7 AppCompat 지원 라이브러리에 대한 설정이 자동으로 추가되므로, 아래의 설정이 제대로 추가되어 있는지만 확인하면 될 것 같습니다.


[STEP-1] "build.gradle" - v7 AppCompat 지원 라이브러리에 대한 설정 추가.
dependencies {
    ...
    implementation 'com.android.support:appcompat-v7:27.1.1'
    ...
}

3.2 액티비티의 기본 액션바(ActionBar)를 사용하지 않도록 테마 설정 변경.

[안드로이드 액션바 기본 사용법 - 액션바(ActionBar) 사용법]에서 설명했듯이, 안드로이드 3.0(API Level 11)부터, 기본 테마를 사용하는 모든 액티비티에서 ActionBar 클래스가 앱바(App Bar)로 사용됩니다. 하지만 여기서는 액티비티에서 제공되는 액션바(ActionBar)가 아닌, v7 AppCompat 지원 라이브러리의 툴바(Toolbar) 클래스를 사용하여 앱바(App Bar)를 만드는 방법을 설명하므로, 액티비티의 기본 액션바(Action)를 사용하지 않도록 만들어야 합니다.


[2.2 액티비티에 포함된 기본 ActionBar 사용하지 않게 만들기]에서 액션바를 사용하지 않는 방법에 대해 설명했습니다. 바로 이름에 "NoActionBar"가 포함된 테마를 앱의 테마로 지정하는 것입니다.

"AndroidManifest.xml" 파일 내용
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ppottasoft.toolbarexample">

    <application
        ...
        android:theme="@style/AppTheme">
        ...
    </application>
</manifest>
[STEP-2] "/res/values/styles.xml" - 앱 테마에 "NoActionBar" 테마 지정.
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
    </style>
</resources>

3.3 액티비티 레이아웃에 툴바(Toolbar) 추가.

이제 액티비티의 앱바(App Bar)로 사용할 툴바(Toolbar) 클래스를 액티비티의 레이아웃 XML에 추가합니다. 참고로 v7 AppCompat 지원 라이브러리의 툴바(Toolbar) 클래스의 전체 패키지 경로는 "android.support.v7.widget.Toolbar" 입니다. (툴바 아래의 텍스트뷰는 뒤에 나올 액션 메뉴 선택 시 텍스트를 표시하기 위해 추가하였습니다.)

[STEP-3] "activity_main.xml" - 액티비티의 레이아웃에 툴바(Toolbar) 추가.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.ppottasoft.toolbarexample.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:id="@+id/app_toolbar"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="48sp"
        android:gravity="center"
        android:id="@+id/textView"
        android:text="TEXT"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

3.4 툴바(Toolbar)를 액티비티의 앱바(App Bar)로 설정하기.

이제, 액티비티의 레이아웃에 추가한 툴바(Toolbar)를 액티비티의 앱바(App Bar)로 설정하는 코드를 작성해야 합니다. 이를 위해서는 액티비티의 onCreate() 메서드에서 setSupportActionBar() 메서드를 호출하면 됩니다. 아래의 코드에서 Toolbar 클래스를 사용하기 위해, v7 지원 라이브러리(android.support.v7.widget.Toolbar)의 Toolbar 클래스를 import한 것에 주의하세요.

[STEP-4] "MainActivity.java" - 툴바(Toolbar)를 액티비티의 앱바(App Bar)로 설정.
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        
        // 코드 계속 ...

        Toolbar tb = (Toolbar) findViewById(R.id.app_toolbar) ;
        setSupportActionBar(tb) ;
    }
}

여기까지가, 기본 액션바(ActionBar) 대신 툴바(Toolbar)를 사용하여 앱바(App Bar)를 만드는 설정 과정입니다. 앱을 빌드하고 실행하면 아래와 같은 실행화면을 확인할 수 있습니다.

예제 실행 화면 1


3.5 앱바(App Bar)에 액션 및 오버플로우 메뉴 추가하기.

액션 및 오버플로우 메뉴를 추가하는 과정은 [안드로이드 액션바 기본 사용법 - 2.4 앱바(App Bar)에 액션(Action) 추가하기]에서 액션바(ActionBar)를 사용하여 만든 방법과 동일합니다.


먼저 앱바(App Bar)의 액션에 표시될 이미지를 Drawable 리소스에 추가합니다.

[STEP-5.1] "/res/drawable/" - 액션에 아이콘으로 표시할 Drawable 리소스 추가.

액션에 아이콘으로 표시할 Drawable 리소스 추가.


다음, 앱바(App Bar)에 표시될 액션과 오버플로우 메뉴 아이템을 정의하기 위해 메뉴 리소스 XML을 추가해야 합니다. [안드로이드 액션바 기본 사용법 - 앱바(App Bar)에 액션(Action) 추가하기]에서 설명한대로, 메뉴 리소스 XML 파일은 "/res/menu/" 아래에 추가해야 하는데, 프로젝트에 따라 "/res/menu" 디렉토리가 미리 만들어져있지 않을 수도 있습니다. 이런 경우, "/res" 폴더에서 마우스 오른쪽 버튼을 클릭한 다음, New - Directory 메뉴를 선택하면 "/res/menu/" 디렉토리를 추가할 수 있습니다.


하지만 굳이 디렉토리를 별도로 추가하지 않아도, 메뉴 리소스 XML 파일을 추가할 수 있는 방법이 있습니다. 리소스 파일을 추가할 때 "Resource type"을 "Menu"로 지정하면, "/res/menu" 디렉토리를 생성함과 동시에 메뉴 리소스 XML 파일을 추가할 수 있습니다.

[STEP-5.2] "/res/menu/appbar_action.xml" - 메뉴 리소스 XML 파일 추가.

메뉴 리소스 XML 파일 추가


추가한 메뉴 리소스 XML 파일에는 아래와 같은 내용을 작성합니다. 메뉴 리소스 XML 각 아이템에 사용하는 항목, 특히 "showAsAction"에 대한 설명은 [안드로이드 액션바 기본 사용법 - 앱바(App Bar)에 액션(Action) 추가하기]에서 확인할 수 있습니다.

[STEP-5.3] "/res/menu/appbar_action.xml" - 앱바(App Bar) 액션을 위한 메뉴 리소스 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/action_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="Search"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_account"
        android:icon="@drawable/ic_supervisor_account_black_24dp"
        android:title="Account"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

이제, 앞서 작성한 메뉴 리소스 XML 파일이 앱바(App Bar)에 표시되도록 만들어야 합니다. 이를 위해서는, 액티비티의 onCreateOptionsMenu() 메서드에서 메뉴 리소스를 사용하도록 만들어야 합니다. 아래 코드와 같이, onCreateOptionsMenu()의 파라미터로 전달된 menu 변수에 앞서 작성한 메뉴 리소스를 inflate하면, 메뉴 리소스 XML의 내용을 앱바(App Bar)에 반영되도록 만들 수 있습니다.

[STEP-5.4] "MainActivity.java" - onCreateOptionsMenu() 메서드에서 메뉴 inflate.
public class MainActivity extends AppCompatActivity {

    // 코드 계속 ...

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.appbar_action, menu) ;

        return true ;
    }
}

3.6 앱바(App Bar)의 액션 및 오버플로우 메뉴 클릭 이벤트 처리하기.

앱바(App Bar)에 표시된 액션 또는 오버플로우 메뉴가 선택되면, 액티비티의 onOptionsItemSelected() 메서드가 호출됩니다. 그리고 onOptionsItemSelected() 메서드의 파라미터로 전달되는 MenuItem에는 선택된 액션 또는 오버플로우 메뉴의 정보가 들어 있습니다. 특히, MenuItemgetItemId() 메서드를 사용하면 메뉴 리소스 XML에서 작성한 아이템 id를 식별할 수 있습니다.

[STEP-6] "MainActivity.java" - onCreateOptionsMenu() 메서드에서 메뉴 inflate.
public class MainActivity extends AppCompatActivity {

    // 코드 계속 ...

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_search :
                ((TextView)findViewById(R.id.textView)).setText("SEARCH") ;
                return true ;
            case R.id.action_account :
                ((TextView)findViewById(R.id.textView)).setText("ACCOUNT") ;
                return true ;
            case R.id.action_settings :
                ((TextView)findViewById(R.id.textView)).setText("SETTINGS") ;
                return true ;
            default :
                return super.onOptionsItemSelected(item) ;
        }
    }
}

4. 실행 화면.

예제를 빌드하고 실행하면 아래와 같은 화면이 표시됩니다.

예제 실행 화면 2


앱바의 각 액션 메뉴를 선택하면 아래 그림과 같이 화면 중앙의 텍스트뷰 텍스트가 변경되는 것을 확인할 수 있습니다.

예제 실행 화면 3


5. 참고

.END.


ANDROID 프로그래밍/APPBAR , , , , , , , , , , , , ,

  1. Blog Icon

    비밀댓글입니다

  2. Toolbar를 만들고, setSupportActionBar() 메서드를 호출하면, app:title을 따로 지정하지 않아도 앱 타이틀이 표시됩니다.

    "/res/values/strings.xml"의 "app_name"에 있는 문자열이 표시되죠.

    기존 ActionBar를 직접 추가한 Toolbar로 대체하는 것이므로, 타이틀을 지정하기 위해 별도의 작업을 해주지 않아도 됩니다.

    감사합니다.

  3. Blog Icon
    준빈아빠

    안드로이드 앱 초짜인데 앱바와 툴바에 대한 이번 포스트는 상당히 좋았습니다. 이거다 싶은 뭔가가 있는 강의였습니다. 이렇게 잘 정리된 내용으로 책을 내시면 베스트셀러 문제 없으시겠네요. 진심~
    물론 여기에 있는 내용 그대로라면 뭔가 모르게 블로그스럽지 않나 싶긴 한데 딱히 뭐가 문제인지 집어낼 수 없으니 문제라고 보기는 어렵겠네요. ^^
    다름이 아니라 안드로이드 필독서 추천 좀 부탁드릴려구요. 시중에 책은 넘쳐 나는데
    뭘 봐야 할지 모르겠습니다. 뜬금 없이 책 추천 부탁을 드려서 죄송합니다.
    그리고 질물하나 드리겠습니다.
    VIEWPAGER를 너무나 인상깊게 잘 보고나서 안드로이드 스튜디오가 기본적으로 만들어 주는 ViewPager 코드를 분석하다가 이건 왜 이렇게 다르냐 싶어 당황했습니다. 설명해 주신 내용이 뼈대가 되는 것은 감으로 알겠는데 도무지 응용이 잘 안되더라구요. 예를 들어 ViewPager의 PageView 부분에 서로다른 Fragment를 넣으려면 어디를 어떻게 고쳐야 하지? 스와이프하여 서로 다른 PageView로 전환 되게 되면 각 뷰의 life cycle에 의한 상태는 어떻게 관리되야 하는지? 같은 부분이 궁금합니다.
    감사합니다.

  4. 에고, 베스트셀러라뇨..^^;; 너무 과분한 칭찬이네요.
    이런 허접한 글 솜씨로 책을 썼다간 종이만 낭비할 것 같은데요? (나무야.. 미안해.. ㅜㅜ.. .. ... ..그래도 한번 도전? ^^)

    음, 그리고 안드로이드 앱 관련 책을 추천드리고 싶어도.. 추천해드릴 수가 없어요.
    좋은 책이 없다는 의미가 아니고, 제가 안드로이드 관련 책을 가지고 있지도 않고 한번도 제대로 본 적이 없어서요. (흐.. 책을 추천드리기 위해서라도 책을 하나 써야 하나요? ^^;;;)

    참고로 저는, 필요한 내용을 주로 공식 안드로이드 개발 참조 페이지(developer.android.com)나 안드로이드 소스, 그리고 구글링을 통해 찾습니다.

    그리고 마지막으로, 뷰페이저에서 보셨던 소스 내용의 상이함은, 제 블로그 글의 방향성 때문일 것 같아요.

    저는 저의 글을 읽으시는 분들이 조금 더 쉽게 원리를 이해할 수 있도록 최대한 주제에 초점을 두고 글을 쓰려고 노력합니다.

    예를 들어 뷰페이저의 경우, 프래그먼트와 결합하여 조금 더 쉽게 화면을 구성할 수 있다는 것을 알고 또 일반적으로 그렇게 만들지만, 만약 프래그먼트에 익숙하지 않은 개발자가 관련 내용을 보게 되면 뷰페이저에 대한 내용보다 프래그먼트를 이해하는 데 더 많은 시간을 소요하게 될지도 모릅니다.

    그래서 일단 뷰페이저 기본 사용법에서는 프래그먼트에 대한 내용은 걷어내고 최대한 뷰페이저에 집중할 수 있도록 내용을 작성한 것이죠. 물론, 이 때문에 프래그먼트가 결합된 소스와 매치하는데 조금 어려움을 겪으셨겠지만, 조금만 더 원리에 집 중하면 어렵지 않게 이해하실 수 있을거라 생각합니다.

    물론, 나중에 뷰페이저와 프래그먼트를 결합한 예제도 정리할 예정입니다.

    지금 당장 찾으시는 내용이 없어서 아쉬운 점도 있겠으나, 혼자서 취미삼아 정리해야 하는 물리적,시간적 한계도 있으니, 깊은 양해 부탁드립니다.

    감사합니다.

  5. 글 잘 읽었습니다. 하나 물어봐도 될까요?
    toolbar를 다이렉트로 액티비티에안 넣고
    toolbar.xml 을 만들었을 때
    toolbar.xml에서의 toolbar id는 toolbar
    라고 하고
    액티비티에 인클루드 할 때의 아이디는 _include 라고 했을 때

    왜 액티비티 자바 파일에서 그 툴바에 접근할 때 toolbar을 이용하면 앱이 팅기고
    인클루드 할 때의 아이디인 _include 를 이용해 접근할 때만 동작한느 건가요??

  6. 레이아웃에서 <include> 를 사용한다고 해서, toolbar.xml의 내용이 액티비티의 레이아웃 xml 파일에 그대로 치환(복사)되는 건 아닙니다.

    내부적으로 정확히 어떻게 동작하는지는 모르겠지만, 조금 찾아보니 include가 하나의 뷰로 치환된다고 하네요. 즉, toolbar.xml의 루트뷰가 include의 리턴 결과가 되는 것이죠.

    아마 toolbar.xml 파일의 루트뷰가 <Toolbar> 인 것 같은데... 맞나요?

    음, 좀 더 이것 저것 시험해보고 답을 드리면 좋을 것 같은데, 제가 시간 여유가 거의 없네요.

    혹시 이해가 안되시면 다시 답글 남겨주세요.

    감사합니다.

  7. Blog Icon
    세준

    시중에 나와있는 베스트셀러 안드로이드 책으로 공부하는중인데 이 글이 더 알기쉽게 설명되어있는것 같습니다. 감사합니다.

  8. 과분한 칭찬글에 몸둘바를 모르겠네요.
    격려의 글 남겨주셔서 감사드립니다.

  9. 유익한 글 잘 읽었습니다!!!

  10. 방문해 주셔서 감사합니다.

  11. Blog Icon
    정곤

    안녕하세요.
    좋은 글 잘 보았습니다.

    그런데 App 하단에 기본적으로 보이는 바를 네비게이션바라고 부르는 것 같은데요.
    App 이 시작 할때 SYSTEM_UI_FLAG_HIDE_NAVIGATION 를 이용해서 안보이게 했습니다.
    그런데 액션바에 옵션 메뉴를 누르면 네비게이션바가 다시 나타 납니다.
    계속 네비게이션바를 안보이게 할 수 있는 방법이 있을까요?

  12. SYSTEM_UI_FLAG_HIDE_NAVIGATION 옵션과 더불어,

    SYSTEM_UI_FLAG_IMMERSIVE
    SYSTEM_UI_FLAG_FULLSCREEN

    옵션을 같이 사용해보시면 어떨까요?

    원하시는 결과를 얻으실 수 있지 않을까 생각됩니다.

    해보시고, 피드백 남겨주시면 감사하겠습니다.

    감사합니다.

  13. Blog Icon
    정곤

    답변 감사합니다.

    말씀해 주신 플러그는 모두 사용 중입니다.
    모두 사용하고 있음에도 옵션 메뉴를 누르면 하단에 네비게이션바가 나타 납니다.
    해결 방법을 인터넷을 뒤져서 찾고 있으나 잘 되지 않네요.

  14. 네. 모두 적용해보셨군요.

    그렇다면 아래 링크의 내용에 답변으로 달린 내용은 어떨까요?

    https://stackoverflow.com/questions/32758559/maintain-immersive-mode-when-dialogfragment-is-shown

    단편적으로 접근해서, 옵션 메뉴 클릭 이벤트 때, setSystemUiVisibility() 메서드를 한번 더 호출해주는 방법을 시도해볼 수 있을 거 같은데요..

    음.. 역시 제가 직접 해보지 않아서 해답을 드리기가 힘드네요...

    도움을 드리지 못해 죄송합니다.

  15. Blog Icon
    안드슬레이브

    안녕하세요 항상 많이 참고하고 있습니다.
    액티비티마다 툴바를 변경해야해서 이것저것 찾아보고 하다가 질문드립니다.
    1.해당 글에서는 xml 파일에서 툴바를 사용하실때 <Toolbar> 태그만 사용하셨는데,
    제가 본 영상이나 다른곳에서는 <AppBarLayout> 태그 내에(정확히는 CoordinatorLayout 내 AppBarLayout)
    Toolbar 태그를 작성하였던데, 그냥 쓰는것과 AppBarLayout태그내에 작성하는것과 차이점이 무엇인가요?
    (버전은 androidx입니다)

    2.툴바에서 타이틀 좌측에 화살표 버튼(백버튼)을 넣어 기능을 구현하고 싶은데,
    이때 툴바내에 이미지뷰를 넣으니 툴바의 타이틀 좌측으로 정렬이 안됩니다.(위 질문에서 말한
    CoordinatorLayout 내 AppBarlayout내 Toolbar입니다). 이럴 경우 어떻게 해야하나요?
    툴바의 title 속성을 이용하여 타이틀을 작성했는데 이미지를 마우스로 강제로 움직여도
    툴바자체가 움직이지 이미지가 움직이지는 않더군요..
    이런 기능을 구현하려면 title 속성을 사용하지않고 TextView 속성을 사용하여 직접
    타이틀을 구성해서 이미지뷰를 텍스트뷰 좌측으로 구성하도록 해야하나요?

    3.본문 글을 보면 xml에 툴바를 추가하고 따로 액티비티에 setSupport~하고 설정을 해주던데 꼭 해줘야하는건가요?
    저는 해보니 xml에 툴바를 설정하니 상단에 바로 표시가 되어서 무슨 차이점이 있나 잘 모르겠어요..

    4.그리고 글의 첫번째 사진처럼 툴바에 햄버거 메뉴를 추가하고싶은데, 이걸 따로 지원하는 버튼 같은게 있나요 아니면 이미지뷰나 일반버튼으로 그냥 제가 구현을 해야하는건가요?

    항상 감사합니다

  16. 1. AppBarLayout은 머티리얼 디자인 앱바의 기능을 갖추고 있는 레이아웃입니다. 스크롤링 제스쳐 등을 갖추고 있고요. 여러 가지 Behavior를 제공하고 있습니다.

    AppBarLayout 내에 Toolbar를 사용하면 AppBarLayout에서 구현된 Behavior와 연동되어 다양한 액션을 취하도록 만들 수 있습니다.

    그냥 Toolbar를 사용하면 그러한 Behavior를 따로 구현해야겠죠?

    자세한 내용은 아래 링크에서 확인하실 수 있습니다.

    https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout

    2. 혹시 아래 코드가 도움되실지 모르겠네요.

    toolbar.setTextAlignment(View.TEXT_ALIGNMENT_LEFT)

    3. 질문 내용에 대한 답은 본문의 "1.1 액션바(ActionBar) vs 툴바(Toolbar)"에서 확인하실 수 있습니다.

    4. 햄버거 메뉴를 어떤 용도로 사용하실 지 모르겠지만, ActionBarDrawerToggle 관련 내용을 찾아보세요.

    https://developer.android.com/reference/androidx/appcompat/app/ActionBarDrawerToggle?hl=en

    감사합니다.

  17. Blog Icon
    만만

    안녕하세요
    각 fragment마다 다른 toolbar를 사용하고싶을때는 어떻게해야하나요?
    현재 제가 bottomnavigation도 쓰고있는데 총 3개의 메뉴에서 각기 이름을 달리 해야합니다. 그래서 toolbar를 추가할때 fragment.xml에 추가를해야하나요 아니면 listitem.xml 에 toolbar를 추가해야하는가요?ㅠㅠ

  18. listitem.xml이 어떤 컴포넌트의 레이아웃을 나타내는지 잘 모르겠지만, 아마 fragment.xml에 추가하시면 될 것 같습니다.

    하지만 "만만"님께서 만드신 레이아웃 구성을 제가 알지 못하니, 정확한 답변이 되지 않을수도 있습니다.

    어쨌든, 프래그먼트에 표시할 레이아웃에 툴바를 추가하시면 됩니다.

    감사합니다.

  19. Blog Icon
    안드슬레이브

    선생님 기존 Theme을 NoActionBar로 설정해준후
    coordinatorlayout, appbarlayout, toolbar를 사용하여 툴바를 만들었는데..
    이상하게 실행시켜보면 제가 만든 툴바의 색상이 기존 style의 AppTheme..즉 BaseTheme..을 따릅니다..
    혹시나해서 AppTheme의 색상을 변경해보니 xml에 그대로 적용되는데 저는 툴바의 theme을 설정하지 않았는데 왜 이런건가요?
    NoActionbar를 설정해줬으니 NoActionBar는 없어지고 제가 만든 툴바가 설정되고 제가 직접 색상같은것을 설정해야하지않나요? 왜이런건지 잘모르겠습니다..

  20. 기존 ActionBar를 없애고, Toolbar를 새로 넣으셨는데, 기존 ActionBar의 배경 색상이 새로 넣은 Toolbar의 배경색으로 표시된다는 말씀이시죠?

    그렇다면 Toolbar에는 어떤 색상을 어떻게(소스코드) 설정하셨는지요? Toolbar의 색상을 지정한 코드를 추가적으로 올려주세요.

    Theme 지정, Toolbar 추가, AppTheme의 색상 변경 등 관련 코드를 올려주시면 확인하기 좋을 것 같습니다.

    참고로, Android Toolbar는 기본적으로 App의 Primary Color를 배경색으로 사용합니다.

    확인해보시고 글 남겨주세요.

    감사합니다.

  21. Blog Icon
    안드슬레이브

    네 맞습니다 기본테마인 Apptheme style에서 액션바를 제거해주기위해 NoActionBar로 설정해주고
    XML레이아웃에서 coordinatorlayout, appbarlayout, toolbar를 사용하여 툴바를 생성했습니다.
    따로 Theme같은건 아무것도 지정해주지 않았습니다.
    그런데 NoActionBar로 설정한 Apptheme의 색상을 변경하였는데 새로만든 툴바, 거기다가 Theme도 지정하지 않은 툴바의 색상이 이것에 따라 변경됩니다..

    기본 Theme입니다.

    <style name="Theme.WriteWeight" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
    </style>

    activity_main.xml 입니다.
    <androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintTop_toTopOf="parent">
    <com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    app:elevation="0dp">
    <androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:titleMarginStart="30dp" />
    </com.google.android.material.appbar.AppBarLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


    여기서 Theme의 colorPrimary의 색상을 다른 색상으로 변경하면 제가 xml에 만든 툴바의 색상도 같이 변경됩니다..


    +++ 혹시 마지막에 안드로이드 툴바는 기본적으로 App의 Primary Color를 배경색으로 사용한다하셨는데..
    제가 Theme의 colorPrimary색상을 변경했기때문에 변경된건가요?
    그렇다면 NoActionBar의 설정과 제가 툴바를 따로 설정하고는 상관없이 그냥
    <item name="colorPrimary">
    기본적으로 이 색상을 따라 툴바의 색상이 정해지나요?

  22. 저도 테마와 관련된 내용을 깊숙하게 알지 못하기 때문에 좀 더 정확한 내용을 말씀드리긴 어려울 것 같습니다.

    그런데 다시 한번 확인하고픈게... 문제라고 생각하시는 게 무엇인지 다시 한번 여쭤보고 싶어요. 음.. 아주 사소한 것에 큰 의미를 두시는 것 같아서요.

    질문의 내용을 보면,
    1. NoActionBar로 설정.
    2. Toolbar 추가.
    3. AppTheme 설정된 색상대로 Toolbar 색상 변경.

    이게 잘못된 동작이라고 생각하시는 건가요? Toolbar가 AppTheme에 설정된 색상으로 나와서? 그렇다면 Toolbar가 어떤 색상으로 나오길 바라시는 건지...

    안드로이드에서 테마를 통해 앱에서 표현되는 색상을 Customizing하기 위해서는 styles.xml에서 사용하고자 하는 테마를 상속하여 테마 색상 이름(ex, colorPrimary)을 변경하도록 가이드 하고 있습니다.

    관련 내용은 아래 링크를 참고하시면 될 듯 합니다.

    https://developer.android.com/guide/topics/ui/look-and-feel/themes?hl=ko#CustomizeTheme

    Toolbar의 색상은 AppTheme의 colorPrimary 색상에 따라 변경된 것은 확인하신 것 같습니다. 그리고 "NoActionBar의 설정"이라고 하셨는데, NoActionBar로 설정했을 때, Toolbar의 배경색이 어떻게 나와야 한다고 생각하시는지 궁금하네요.

    위의 링크에 있는 내용과 안드로이드 테마 관련 내용을 다시 한번 확인해보시기 바랍니다. 관련 안드로이드 소스를 찾아서 확인해보시는 것도 많은 도움 되실거라 생각합니다.

    감사합니다.

  23. Blog Icon
    안드슬레이브

    선생님 현재 페이지는 NoActionBar로 설정후 앱바를 직접 만드는 것을 설명해주시잖아요?
    궁금한것이 코드상에서 액션바에 툴바를 추가해주시는데 xml에서 Toolbar 위젯을 추가해줬는데도 이 코드를 진행해줘야하나요?

    제가 지금 NoActionBar로 세팅을하고 xml상에서 AppbarLayout과 Toolbar 위젯을 추가해줬는데 이 상태에서
    앱바는 뜨는데 코드상에서 toolbar를 액션바로 설정하는 코드를 작성안해주니 옵션메뉴 코드를 작성해줬음에도 보이지가 않네요. 원래 xml에서 툴바 위젯을 지정헀더라도 코드상에서 추가를 해줘야 하나요? 앱바가 보이길래 된줄알았는데 옵션메뉴가 보이지 않기에 여쭈어봅니다..

    원래 이런건가요?

  24. 본문에도 설명했듯이 레이아웃에 Toolbar를 추가해도 그게 바로 앱의 액션바로 대체되지는 않습니다.

    몇 가지 설정 과정을 거쳐야 합니다.

    관련 내용은 본문의
    "2. 툴바(Toolbar)를 앱바(App Bar)로 사용하기 위한 절차."
    를 참조하시면 됩니다.

    감사합니다.