Android Kotlin 앱바(App Bar)

작성자 임베디드코리아 작성일23-09-04 19:18 조회1,573회 댓글0건

안드로이드에서 앱바(App Bar)라고 하는것은 머티리얼 디자인(Material Design)에서 정의하는 상단의 바(Bar)를 말한다.
머티리얼 디자인(Material Design)에서는 하단 앱바(App Bar)도 나오지만, 그리 익숙한 형태는 아니다
앱바(App Bar)는 머티리얼 디자인(Material Design)의 디자인 명칭이고, 실제 구현되는건 액션바(ActionBar) 또는 툴바(Toolbar) 이다.
안드로이드 3.0(API Level 11)부터, 기본 테마를 사용하는 모든 액티비티에서 액션바(ActionBar)가 앱바(App Bar)로 사용다.
앱바(App Bar)는 액티비티에 기본으로 포함된 요소이기 때문에, 레이아웃 리소스 XML 파일에 ActionBar위젯을 별도로 추가하지 않아도,
간단한 설정만으로 액티비티에서 앱바(AppBar)가 표시되도록 만들 수 있다.

【 1 】 앱바(App Bar) 표시하기

⓵ "/manifests/AndroidManifest.xml" - 앱 프로젝트의 테마 설정.
--------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ppottasoft.actionbarexample">

<application
...
android:theme="android:theme="@style/Theme.이름">
...
</application>
</manifest>
-----------------------------------------------------------------------------------------------------------

⓶ "/res/values/themes.xml" - 앱바(App Bar)가 포함된 테마 지정.
----------------------------------------------------------------------------------------------------------
<resources>

<style name="Base.Theme.OptionMenuKotlin“ parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
</style>
</resources>
----------------------------------------------------------------------------------------------------------

앱바(App Bar)를 사용하지 않게 만들고 싶을 때, 액티비티에 액션바를 지원하지 않는 테마로 "NoActionBar"를 지정한다.
-----------------------------------------------------------------------------------------------------------------------------
<resources>

<style name="Base.Theme.OptionMenuKotlin“ parent="Theme.Material3.DayNight.NoActionBar">
...
</style>
</resources>
-------------------------------------------------------------------------------------------------------

⓷ 앱바(App Bar) 제목 텍스트 변경하기.
"/manifests/AndroidManifest.xml" - 앱바(App Bar)에 표시되는 제목 텍스트.
-------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ppottasoft.actionbarexample">

<application
...
android:label="@string/app_name"
...
</application>
</manifest>
----------------------------------------------------------------------------------------------

"/res/values/strings.xml" - 앱바(App Bar) 제목 텍스트 변경.
----------------------------------------------------------------------------------------------------------------
<resources>
<string name="app_name">OptionMenuKotlin</string>
</resources>
------------------------------------------------------------------------------------------------------
Kotlin 함수를 이용한 제목 변경하기
ActionBar ab = getSupportActionBar()
ab.setTitle("ActionBar Title by setTitle()")

⓸ 앱바(App Bar)의 색상 변경하기.
앱바(App Bar)가 화면에 표시될 때는 액티비티의 테마에 따라 색상이 결정되며, 앱바(App Bar)의 색상을 변경하려면, 테마에 설정된 색상 값을 바꿔주면 된다.
"/res/values/themes.xml" 파일을 열어보면 "AppTheme"에 대한 내용을 확인할 수 있고, 소스의 내용은, "AppTheme"가 "Theme.AppCompat.Light.DarkActionBar"를 상속받았으며, "colorPrimary", "colorPrimaryDark", "colorAccent"를 커스터마이징하고 있다.

----------------------------------------------------------------------------------------------------------------------------
<resources>

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

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
-----------------------------------------------------------------------------------------------------
"AppTheme"의 설정 값을 사용하여 앱바(App Bar)의 색상을 변경할 수 있다.

"/res/values/colors.xml" - 앱 테마 색상 변경.
-----------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#FF9800</color>
<color name="colorPrimaryDark">#E65100</color>
<color name="colorAccent">#FF4081</color>
</resources>
---------------------------------------------------------------------------------------------------------------

예제
-----------------------------------------------------------------------------------------------------

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FCC248</item>
<item name="colorPrimaryDark">#FFBB00</item>
<item name="colorAccent">#CC3D3D</item>


<item name="android:textColorPrimary">@color/white</item>


<item name="android:windowBackground">@color/white</item>


<item name="android:textColor">@color/black</item>


<item name="colorControlNormal">@color/white</item>

<item name="colorControlHighlight">#FF8800</item>
<item name="colorControlNormal">#0099CC</item>
</style>
-------------------------------------------------------