Theme.AppCompat.Light.DarkActionBar와 같은 appcompat-v7 툴바의 스타일을 어떻게 지정합니까?


105

Theme.AppCompat.Light.DarkActionBar새로운 지원 라이브러리 툴바로 모양을 재현하려고합니다 .

선택하면 Theme.AppCompat.Light툴바가 밝아지고 선택 Theme.AppCompat하면 어두워집니다. (기술적으로 .NoActionBar버전 을 사용해야 하지만 내가 말할 수있는 한 유일한 차이점은

<style name="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

이제는 Theme.AppCompat.Light.DarkActionBar없지만 순진하게 내 자신을 만들기에 충분하다고 생각했습니다.

<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

그러나 이것으로 내 도구 모음은 여전히 Light테마입니다. 지금까지 어두운 (기본) 테마와 밝은 테마를 혼합하는 다양한 조합을 시도하는 데 몇 시간을 보냈지 만 도구 모음을 제외한 모든 항목에 밝은 배경을 적용 할 수있는 조합을 찾을 수 없습니다.

AppCompat.Light.DarkActionBar가져 오기로 모양 을 얻는 방법이 있습니까?android.support.v7.widget.Toolbar 있습니까?

답변:


216

Light.DarkActionBar클론에 대한 툴바의 스타일을 지정하는 권장 방법 Theme.AppCompat.Light.DarkActionbar은 부모 / 앱 테마 로 사용 하고 스타일에 다음 속성을 추가하여 기본 ActionBar를 숨기는 것입니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

그런 다음 다음을 툴바로 사용하세요.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

추가 수정의 경우, 확장 스타일을 만들 것입니다 ThemeOverlay.AppCompat.Dark.ActionBarThemeOverlay.AppCompat.Light내 사람을 교체 AppBarLayout->android:theme하고 Toolbar->app:popupTheme. 또한 ?attr/colorPrimary메인 스타일로 설정하면 다른 배경색을 얻을 수 있습니다.

이에 대한 좋은 예 Empty Activity는 Android Studio (1.4 이상) 의 현재 프로젝트 템플릿에서 찾을 수 있습니다.


1
네, 할 수 있습니다. "자신이 정의한 스타일에서 상속하려면 상위 속성을 사용할 필요가 없습니다. 대신 상속하려는 스타일의 이름을 마침표로 구분하여 새 스타일의 이름 앞에 접두사로 지정하면됩니다. . " developer.android.com/guide/topics/ui/themes.html#Inheritance
경계 적

1
또한 게시 한 xml을 사용하여 흰색 텍스트가있는 흰색 도구 모음을 얻거나 테마를 ThemeOverlay.AppCompat.ActionBar검은 색 텍스트가있는 흰색 도구 모음으로 변경하면 제대로 작동하지 않는 것 같습니다. 시스템 <item name="android:colorBackground">@color/background_material_dark</item>Base.ThemeOverlay.AppCompat.Dark. 하지만 계속 파고들 게요. (그리고 나는 그 페이지를 읽었습니다. 그것이 나의 출발점 중 하나였습니다. 여전히 작동하지 않는 것 같습니다.)
Liminal

1
미안합니다. 편의를 위해 툴바의 배경색은 제외하고 결과를 테스트하지 않았습니다. 그에 따라 답변을 수정했습니다. 그래도 스타일을 사용하여 이것을 수행하는 방법을 찾지 못했습니다. 내 앱은 색 구성표가 다르기 android:background="?attr/colorPrimary"때문에 툴바와 <item name="colorPrimary">@color/background_material_dark</item>내 스타일에서 사용하므로 기본 앱 색상이 자동으로 조정됩니다.
oRRs

1
이것은 앱 compat 23에서 더 이상 작동하지 않으며 제목이 검은 색이고 흰색이 아닙니다 : /
Rashad.Z

21
이 테마와 스타일의 정글을 파악할 수있는 방법이 있습니까?
axd

72

편집 : appcompat-v7 : 22.1.1로 업데이트하고 내 styles.xml AppCompatActivity대신 사용하면 ActionBarActivity다음과 같습니다.

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

참고 : 이것은 내가 Toolbar 프레임 워크 제공 합니다 (XML 파일에 포함되지 않음).

이것은 나를 위해 일했습니다 :
styles.xml 파일 :

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

업데이트 : Gabriele Mariotti의 블로그 에서 인용 .

새로운 툴바로 스타일과 테마를 적용 할 수 있습니다. 그들은 다르다! 스타일은 도구 모음보기에 로컬입니다 (예 : 배경색). 대신 app : theme는 제목 및 아이콘의 색상과 같이 툴바에 확장 된 모든 UI 요소에 전역 적으로 적용됩니다.


"오류 : 주어진 이름과 일치하는 리소스가 없습니다 : attr 'colorPrimary'." 여기서 appcompat_v7 사용에 대해 이야기하고 있습니다.
Yar

나에게 이것은 Lollipop 장치에서만 작동합니다. 사전 롤리팝에서는 액션 바뿐만 아니라 모든 활동에서 내가 원했던 것이 아닌 어두운 테마를 사용합니다. 나는 찬성했지만 마지막에는 단일 도구 모음보기의 스타일을 지정하는 oRRs 답변을 사용했습니다.
lorenzo-s

@ lorenzo-s 최신 버전의 appcompat에 대한 답변을 업데이트했습니다. 또한 Android 4.3을 사용하여 Galaxy Nexus에서 테스트했으며 작동 중입니다.
LordRaydenMK

31

Ok이 문제에 많은 시간을 가한 후 이것이 내가 원하는 모습을 얻을 수 있었던 방법입니다. 모든 것을 한곳에서 얻을 수 있도록 별도의 답변으로 만들고 있습니다.

요인의 조합입니다.

첫째, 테마만으로 도구 모음을 멋지게 재생하려고하지 마십시오. 불가능 해 보인다.

따라서 oRRs 답변 과 같이 툴바에 테마를 명시 적으로 적용하십시오.

layout / toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/Dark.Overlay"
    app:popupTheme="@style/Dark.Overlay.LightPopup" />

그러나 이것은 마술 소스입니다. 실제로 배경색을 얻으 background려면 툴바 테마 의 속성 을 재정의해야 합니다.

values ​​/ styles.xml :

<!-- 
    I expected android:colorBackground to be what I was looking for but
    it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:background">@color/material_grey_200</item>
</style>

그런 다음 다른 레이아웃에 도구 모음 레이아웃을 포함하십시오.

<include android:id="@+id/mytoolbar" layout="@layout/toolbar" />

그리고 당신은 갈 수 있습니다.

이것이 다른 사람에게 도움이되기를 바랍니다. 그래서 당신은 이것에 저만큼 많은 시간을 할애 할 필요가 없습니다.

(누군가 테마 만 사용하여이 작업을 수행하는 방법을 알아낼 수 있다면, 즉 레이아웃 파일에 테마를 명시 적으로 적용 할 필요가없는 경우 대신 답을 기꺼이 지원할 것입니다)

편집하다:

따라서 더 완전한 답변을 게시하는 것은 반대 투표 자석 이었으므로 위의 불완전한 답변을 수락하지만 누군가가 실제로 필요할 경우를 대비하여 여기에이 답변을 남겨 둡니다. 그래도 기분이 좋으면 계속 반대 투표하십시오.


2
내 AppTheme에서 방금 넣은 <item name="colorPrimary">@color/colorPrimary</item> 다음 android:background="?attr/colorPrimary"툴바 위젯에서 속성을 자유롭게 사용할 수 있습니다 .
레 뮤엘

"@ color / material_grey_200"의 정의를 어떻게 알 수 있습니까?
Cheok Yan Cheng

정확히 어디에 있는지 기억이 나지 않지만 누군가 google.com/design/spec/style/color.html#color-color-palette를 기반으로 colors.xml 파일을 만들었지 만 지금은 찾을 수 없습니다
Liminal

1
@Liminal 사용 @android:color/transparent하면 메뉴 항목을 길게 누르거나 클릭 할 때 문제를 피할 수 있으며 텍스트 주위에 상자가 있습니다. 이것은 또한 미래에 밝은 배경색이 변경되면 미래를 증명합니다.
Ryan R

CollapsingToolbarLayout을 사용할 때는 작동하지 않습니다.
arekolek 2017-10-12

17

내가 찾은 가장 깨끗한 방법은 ' ThemeOverlay.AppCompat.Dark.ActionBar ' 의 자식을 만드는 것입니다 . 이 예에서는 툴바의 배경색을 빨간색으로, 텍스트의 색상을 파란색으로 설정했습니다.

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

그런 다음 도구 모음에 테마를 적용 할 수 있습니다.

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:theme="@style/MyToolbar"
    android:minHeight="?attr/actionBarSize"/>

6
맙소사! textColorPrimary! 왜 그렇게 어느 곳 찾기 어려운 빌어 먹을되었다
도련님

12

도구 모음 스타일을 사용자 정의하려면 먼저 참조 Widget.AppCompat.Toolbar을 상속 도구 모음 사용자 정의 스타일, 재정의 속성을 만든 다음 아래 그림과 같이 사용자 정의 응용 프로그램 테마에 추가 http://www.zoftino.com/android-toolbar-tutorial을 위한 더 많은 정보 도구 모음 및 스타일.

   <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#80deea</item>
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">35dp</item>
        <item name="android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">30dp</item>
        <item name="android:textColor">#1976d2</item>
    </style>

7

아래에서 시도 할 수 없습니다.

<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- your code here -->
</style>

세부 요소는 https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar 에서 찾을 수 있습니다.

여기에 몇 가지 더있다 : TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

이것이 당신을 도울 수 있기를 바랍니다.


1
예. 그것들을 사용하여 배경색을 올바르게 얻을 수 있으며 마침내 제목 색상을 올바르게 얻는 방법을 알아 냈습니다. 그러나 지금 가장 중요한 것은 오버플로 버튼이 색상을 어디에서 가져 오는지 알 수 없다는 것입니다. 내가 무엇을 변경하더라도 너무 어둡게 유지되어 어두운 액션 바에 표시되지 않습니다. 테마를 어둡게 변경하면 밝아지고 잘 나타납니다.하지만 아무리 많이 살펴봐도 밝은 테마로 시작했을 때 오버플로 아이콘을 밝게 표시하는 방법을 알 수 없습니다
Liminal

0

Arnav Rao와 비슷하지만 부모가 다릅니다.

    <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>

    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#ff0000</item>
</style>

이 접근 방식을 사용하면 도구 모음의 모양이 앱 스타일에 완전히 정의되므로 각 도구 모음에 스타일을 지정할 필요가 없습니다.


2
실제로 android:toolbarStyle.NET 용 API 21+입니다 android.widget.Toolbar. toolbarStyle에 대한 AppCompat입니다 android.support.v7.widget.Toolbar.
Eugen Pechanec

Android Studio에서 문제가 발생한다고 생각했지만 두 번째 테스트에서는 맞습니다! 좋은 소식입니다. minSDK를 다시 19로 낮출 수 있었고, toolbarStyle이 여전히 잘 작동하는 것 같습니다! 감사합니다!
craigmj

그냥 눈치 챘어요! 여전히 스타일테마에 대한 오해가 있습니다. MyToolbar스타일은 Widget.AppCompat.Toolbar테마가 아닌 확장되어야합니다 .
Eugen Pechanec
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.