안드로이드 툴바 햄버거 버튼 만들기 ~ Make the Android Toolbar hamburger button

 

안드로이드 툴바 햄버거 버튼 만들기

Make the Android Toolbar hamburger button

 

안드로이드를 사용하면 툴바 왼쪽에 3개의 선이 있는 버튼을 많이 볼 수 있는데 이를 흔히 햄버거 버튼이라고 한다.

이를 누르면 흔하게 사용자의 프로필 및 각종 설정 메뉴 이동등을 볼 수 있는데, 

이는 안드로이드에서 제공해주는 드로우어레이아웃을 이용하면 간단하게 만들 수 있다.

일단 툴바에 햄버거 버튼을 만들어야 한다.

 

With Android, you can see many buttons with three lines on the left side of the toolbar, often referred to as hamburger buttons.

You can often see your profile and various menu moves.

This can be made simply by using the drawerlayout provided by Android.

Once you have to make a hamburger button on the toolbar.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

values -> styles.xml

먼저 기본으로 되어있는 액션바의 형태를 보이지 않게 NoActionBar로 설정을 해준다

 

values -> styles.xml

First, you can set the action bar to NoActionBar without showing the basic action bar.

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:background="@android:color/darker_gray" />

툴바를 넣고 싶은 레이아웃에 툴바를 넣는다.

여기서 툴바의 스타일을 바꿀 수 있다.

 

Place the toolbar in the layout you want to insert.

Here you can change the style of the toolbar.

 

drawable에 햄버거 버튼을 추가시켜주도록 하는데, 아이콘 타입을 Action Bar and Tab icons로 한다.

 

Add the hamburger button to the drawable, and use the icon type Action Bar and Tab icon.

        // 툴바추가 add toolbar
        myToolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(myToolbar);

        // 홈버튼을 활성화
        // Activate Home Button
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // 홈버튼의 이미지를 변경
        // Change the image of the home button
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.menu);

툴바에 직접 메뉴를 추가할 수 있지만, 내가 못하는건지 안드로이드에서 일부러 이렇게 만들어놓은건지

계속 오른쪽에 추가가 된다.

구글링을 통하여 방법은 찾았지만 툴바의 홈버튼은 왼쪽에 자동으로 삽입이 되는데

이 홈버튼을 햄버거아이콘으로 이미지를 변경하는 방법으로 햄버거 버튼을 만들 수 있다.

 

You can add the menu directly to the toolbar, but whether I can't do it or not, it's made on purpose by Android.
It continues to be added to the right.

I've found a way through Google, but the toolbar's home button is automatically inserted on the left

You can make a hamburger button by changing the image of this home button to a hamburger icon.

    // 툴바에 메뉴 생성
    // add menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.menu, menu);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        return true;
    }

    // 툴바 햄버거 버튼 클릭
    // click the menu
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        switch (id) {
            case android.R.id.home:

                drawer.openDrawer(navigationView);
                break;
        }

        return super.onOptionsItemSelected(item);
    }

번외로 툴바에 메뉴 생성은 onCreateOptionMenu 메소드를 통하여 만들 수 있다.

그런데 계속 오른쪽에 추가가 된다..

위에서 만든 햄버거버튼을 눌렀을 때 발생하는 이벤트는

onOptionItemSelected 메소드를 이용하여 이벤트를 만들 수 있다

 

In addition, menu creation on the toolbar can be made through the onCreateOptionMenu method.

But it keeps being added to the right.

The event that happens when you press the hamburger button above is

You can create events using the onOptionItemSelected method.

 

 

새로 바뀐 티스토리 글쓰기 모드..정말 불편하다.

코드도 네이버 블로그로 옮겨야 할까

라고 생각하지만 더이상 네이버 블로그를 지인에게 알리고 싶지 않음