반응형

안녕하세요.

오늘은 앱바(App Bar)에 제목을 변경하거나 버튼을 추가하는 법에 대해 알아보도록 하겠습니다.

앱바는 앱의 아래 부분을 말합니다.
앱바는 액션바(Action Bar)라고도 합니다.


최근 버전이 올라가면서 다양한 기능을 맞춤 설정을 할 수 있기 때문에 툴바를 사용합니다. 

일단 다음과 같은 순서로 앱바 기능에 대해 알아보도록 하겠습니다.

1. 앱바 제목 변경

2. 앱바 색상 변경하기

3. 버튼 추가

4. 버튼에 따른 이벤트 추가

5. 앱바에 아이콘추가

6. 앱바 보이기/안보이기

기본설정은 "Empty Activity"상태로 하겠습니다.

 

 

1. 앱바 제목 변경

manifests/AndroidManifest.xml파일에서 label값을 변경해주면 됩니다.

그냥 값을 변경해줘도 적용이 되지만 위에 이미지와 같이 "@string/app_name" 경로로 표기하여 경로에 있는 스트링을 변경해줘도 됩니다.

res/values/strings.xml값을 변경하면 제목을 변경할 수 있습니다.

하지만 이렇게 하면 앱이 실행 전에만 바꿀 수 있습니다.

앱이 실행중일 때 제목을 바꾸려면 코드상에서 수정해야 합니다.

다음 코드를 사용합니다.

getSupportActionBar().setTitle("Change Title");

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.testcompany.appbar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // 실행 중 제목을 변경할 수 있습니다.
        getSupportActionBar().setTitle("Change Title");
    }
}
cs

 

2. 앱바 색상 변경하기

/res/values/themes.xml을 열어보면 다음과 같이 되어있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Appbar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>
</resources>
cs

다음 부분을 수정하면 됩니다.

<item name="colorPrimary">@color/purple_500</item>

<item name="colorPrimaryVariant">@color/purple_700</item>

"@color/purple_500", "@color/purple_700" 는 "/res/value/colors.xml" 파일을 확인해보면 됩니다.

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>
cs

 

colorPrimary, colorPrimaryVariant는 각각 다음 위치를 가리킵니다.

3. 버튼 추가

3-1. 메뉴 XML 파일 추가

버튼을 추가하기 위해서는 일단 메뉴(Meunu) XML 파일을 먼저 추가해야 합니다.

다음과 같이 합니다.

res폴더를 선택합니다.

File - New - Android Resource File을 선택합니다.

그리고 다음 나오는 창에서 "Resource type"항목의 리스트 박스에서 Menu를 선택합니다.

다음 파일 이름을 입력한 후 OK 버튼을 누릅니다.

res/menu/main_menu.xml이 추가되었습니다.

3-2 메뉴 XML 파일 코드 수정

main_menu.xml에 코드를 추가하여 버튼을 추가할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
<?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_action"
      android:icon="@android:drawable/ic_menu_search"
      android:title="Search"
      app:showAsAction="always"/>
 
</menu>
cs

"<item ..... />" 부분을 추가해서 버튼을 더 추가할 수 있습니다.

item구문에서 showAsAction항목에 따라 어떻게 보이게 할 건지 설정할 수 있습니다.

설정한 값에 따라 다음과 같이 표시됩니다.

always - 항상 표시해야 한다면 사용합니다. 

ifRoom - 표시할 공간이 있는 경우에만 표시되고 아니면 더보기 메뉴에 표기되게 됩니다.

withText - 아이콘과 텍스트(android:tilte로 지정한 텍스트)가 같이 표기됩니다. 파이프로 다른 설정과 포함할 수 있습니다. (설명은 이렇게 적혀있는데, 제가 해봤을 때 넣으면 never와 같이 더보기 메뉴에만 추가됩니다. )

never - 앱바에 배치하지 않고, 더보기 메뉴에 표기합니다.

3-3 앱바에 표기하기

막상 위에까지 하고 실행시켜보면 앱바에 표기가 안됩니다.

아직 코드에서 연결을 안 했기 때문입니다.

mainActivity.java파일에서 다음 코드를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.testcompany.appbar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.Menu;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu)    {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }
}
cs

 

R.menu.main_menu는 main_menu.xml을 의미합니다.

실행해보면 버튼이 추가되어있는 것을 확인할 수 있습니다.

4. 버튼에 따른 이벤트 추가

이제 버튼에 따른 이벤트를 추가해야합니다.
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
package com.testcompany.appbar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu)    {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId())
        {
            case R.id.search_action:
                Toast.makeText(getApplicationContext(), "Search Action", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}
cs

 

5. 앱바에 아이콘 추가

onCreate에 다음 구문을 추가하면 됩니다.

    getSupportActionBar().setIcon(R.drawable.ic_baseline_4k_24);
    getSupportActionBar().setDisplayUseLogoEnabled(true);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

R.drawable.ic_baseline_4k_24 는 아이콘으로 설정할 리소스입니다.

6. 앱바 보이기/안보이기

코드에서 다음 구문을 사용할 수 있습니다.

getSupportActionBar().show();     // 보이도록 합니다.
getSupportActionBar().hide();      // 안 보이도록 합니다.

반응형

+ Recent posts