안드로이드 스튜디오,java]커스텀 액션 바 제작하기

기본 메뉴 만들기

https://itstudy-mary.tistory.com/184

안드로이드 스튜디오,java] 기초 액션바 만들기

 

그러나 우리가 아는 일반 앱들은 이런식으로 메뉴가 생기지 않았다. 그런데 안드로이드가 기본적으로 제공하는 액션 바는 이 상태에서 벗어날 수 없으므로, 우리는 이제 메뉴를 커스터마이징 한다.

 

먼저 안드로이드 기본 액션바를 invisble 하자.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        
--하략--        

 

다음, include할 툴바 xml을 만들자. 

툴바를 만들기 위한 툴바 레이아웃을 이용해 만든다.

 

-toolbar_main.xml 예시

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:contentInsetStart="0dp"
    android:background="@android:color/holo_blue_dark">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv_menu"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            app:srcCompat="@drawable/ic_menu" />

        <TextView
            android:id="@+id/tv_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="15dp"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:text="Android" />

    </RelativeLayout>
</androidx.appcompat.widget.Toolbar>

이 때, 한 가지 설정해야할 게 있다.

툴바 레이아웃의 고질적인 문제로,

이렇게 작은 공간이 생긴다.

이렇게 강제로 비워둔 공간을 inset 공간이라고 하는데, 이 inset 공간 내부를 줄이는 옵션을 설정해줘야 툴바의 빈 공간이 사라진다.

    app:contentInsetStart="0dp"

아까와 같은 빈 공간이 사라진걸 확인할 수 있다.

 

이제 메인에서 include 속성을 이용해 툴바를 붙이면 된다.

    <include  layout="@layout/toolbar_main"/>

이제 이것에 액션을 추가한다.

먼저, 내비게이션 바를 추가한다.

 

- activity_main.java

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawer"
    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">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start|left"
        app:menu="@menu/menu_main" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <include  layout="@layout/toolbar_main"/>
    </LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>

이 때, 구글의 내비게이션 바는 반드시 드로어 레이아웃에 들어가야해서. 드로어 레이아웃 내에 넣는다.

 

이 상태로 가상기계에서 실행하면, 마우스로 왼쪽을 드래그하면 마우스를 따라 내비게이션 바가 나온다.

 

이제 햄버거 버튼을 클릭해도 나오도록 해보자.

 

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "Main_Activity";

    private ImageView ivMenu;
    private DrawerLayout drawerLayout;
    private Toolbar toolbar;

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

        ivMenu=findViewById(R.id.iv_menu);
        drawerLayout=findViewById(R.id.drawer);
        toolbar=findViewById(R.id.toolbar);

        //액션바 변경하기(들어갈 수 있는 타입 : Toolbar type
        setSupportActionBar(toolbar);

        ivMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "onClick: 클릭됨");
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });
    }

 

결과 : 

 

 

이렇게 내비게이션 바 안에 타이틀을 두고 싶을 경우, 내비게이션 안에 헤더 레이아웃 속성을 부여한다.

        app:headerLayout="@layout/header"

이제, 이걸 적용하기 위해 레이아웃 리소스 폴더에 헤더 xml 파일을 만들면 된다.

 

 

-header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@android:color/holo_blue_dark"
    android:layout_width="match_parent"
    android:layout_height="130dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="My Title"
        android:textSize="60dp"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:gravity="center"/>

</LinearLayout>