그래봐야 코딩, 그래도 코딩

0%

android Toolbar 사용하기(menu추가)

작성일 Edited on In

ToolBar란

안드로이드의 Activity의 상단을 보면 ActionBar라는 것이 있었다.
그런데 안드로이드 API21 부터 ActionBar는 deprecated되고 ToolBar라는 것이 추가 되었다.
ToolBar란 기존의 ActionBar를 대체하는 View의 일종이다.
ToolBar란 View이기 때문에 기존의 ActionBar에서는 할수 없던 것, 또는 하기 어려웠던 것들을 쉽게 코드로 제어 할 수 있다. (위치제어 등…)
이제부터는 deprecated된 ActionBar대신 ToolBar를 사용해야 할 것 같다.

ActionBar VS ToolBar

ActionBar : View가 아니다. 따라서 위치나 내부 아이템을 제어하기 힘들다.
ToolBar : View다. 따라서 기타 View처럼 제어하기가 슆다.

ToolBar 적용하기

안드로이드 스튜디오에서 Empty Activity로 진행한 예제다.
예제에서 사용된 아이콘 이미지등은 안드로이드스튜디오에서 재공하는 것들이다.

1.기존의 ActionBar 제거하기

ActionBar

위 빨간 표시의 액션바를 일단 제거해 보자.
안드로이드 프로젝트의 res/values/styles.xml 파일을 연다.
Style태그의 parent속성 값을 Theme.AppCompat.Light.NoActionBar 로 바꾼다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<resources>

    <!-- Base application theme. -->
    <!-- 변경된 소스 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">-->
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

[style.xml]

ActionBar가 제거된 액티비티

액티비티를 다시열어보면 위처럼 액션바가 사라진 것을 볼 수 있다.

2. ToolBar 추가하기

activity_main.xml 파일을 열고 아래 처럼 ToolBar 뷰를 추가 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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.hanumoka.android.test01.MainActivity">

    <!-- 툴바, 추가된 소스 -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</android.support.constraint.ConstraintLayout>

[activity_main.xml]

MainAcitivity.java 파일을 아래처럼 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class MainActivity extends AppCompatActivity {

    // 추가된 소스
    Toolbar myToolbar;

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

        // 추가된 소스, Toolbar를 생성한다.
        myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);
    }

}

[MainAcitivity.java]

그리고 다시 애뮬레이터를 동작시키면 아래처럼 ToolBar가 추가 된 것을 볼 수 있다.
ActionBar와 모습은 똑같지만, 이녀석은 ToolBar이다.

Toobar가 적용된 액티비티

3. ToolBar에 버튼을 추가하기(메뉴추가)

/res 경로에 menu라는 Android resource directory를 만든다. 여기서 이 디렉토리명은 반드시 menu로 지정해야 한다.
새로 생성한 menu 디렉토리 안에 menu.xml 파일을 생성한다.
그리고 아래의 내용물을 채워 넣자.
menu.xml로 ToolBar에 들어갈 항목(메뉴)의 레이아웃을 정의한다.
item태그에 icon은 안드로이드스튜디오에서 제공하는 asset image나 svg를 사용했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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"
    >
    <!-- "Mark Favorite", should appear as action button if possible -->
    <item
        android:id="@+id/action_settings"
        android:title="환경설정"
        android:icon="@drawable/ic_settings_black_24dp"
        app:showAsAction="ifRoom"/>

    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings2"
        android:title="항목1"
        app:showAsAction="never"/>

    <item android:id="@+id/action_settings3"
        android:title="항목2"
        app:showAsAction="never"/>

</menu>

[menu.xml]

MainActivity.java파일로 이동해서 onCreateOptionsMenu, onOptionsItemSelected메소드를 오버라이딩으로 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
public class MainActivity extends AppCompatActivity {


    Toolbar myToolbar;

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

        myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);
    }

    //추가된 소스, ToolBar에 menu.xml을 인플레이트함
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //return super.onCreateOptionsMenu(menu);
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.menu, menu);
        return true;
    }

    //추가된 소스, ToolBar에 추가된 항목의 select 이벤트를 처리하는 함수
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //return super.onOptionsItemSelected(item);
        switch (item.getItemId()) {
            case R.id.action_settings:
                // User chose the "Settings" item, show the app settings UI...
                Toast.makeText(getApplicationContext(), "환경설정 버튼 클릭됨", Toast.LENGTH_LONG).show();
                return true;

            default:
                // If we got here, the user's action was not recognized.
                // Invoke the superclass to handle it.
                Toast.makeText(getApplicationContext(), "나머지 버튼 클릭됨", Toast.LENGTH_LONG).show();
                return super.onOptionsItemSelected(item);

        }
    }
}

[MainAcitivity.java]

다시 에뮬레이터를 동작 시키면 다음과 같이 Toolbar에 아이콘 형태의 item이 추가된 것을 볼 수 있다.

메뉴가 추가된 Toolbar

4.툴바 왼쪽에 버튼 추가하기

이번엔 Toolbar의 왼쪽에 버튼을 추가해 보자.
MainActivity.java파일로 가서 onCreate 함수에 아래처럼 코드를 추가하자.

1
2
3
4
5
6
7
8
9
10
11
12
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);

        //추가된 소스코드, Toolbar의 왼쪽에 버튼을 추가하고 버튼의 아이콘을 바꾼다.
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_dehaze_black_24dp);
    }

[MainAcitivity.java]

다시 애뮬레이터를 시작하면 아래처럼 Toolbar왼쪽에도 버튼이 추가된 것을 볼 수 있다.

왼쪽에 버튼이 추가된 Toolbar

5.툴바의 프로젝트 명 제거하기(변경)

setTitle 라는 메소드로 툴바의 타이틀을 변경 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_dehaze_black_24dp);

        getSupportActionBar().setTitle("");  //해당 액티비티의 툴바에 있는 타이틀을 공백으로 처리
    }

프로젝트명이 제거된 ToolBar