Programing

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

lottogame 2020. 8. 15. 09:42
반응형

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


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있습니까?


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 이상) 의 현재 프로젝트 템플릿에서 찾을 수 있습니다.


편집 : 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 요소에 전역 적으로 적용됩니다.


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

It's a combination of factors.

Firstly, don't try to get the toolbars to play nice through just themes. It seems to be impossible.

So apply themes explicitly to your Toolbars like in oRRs answer

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

However this is the magic sauce. In order to actually get the background colors I was hoping for you have to override the background attribute in your Toolbar themes

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>

then just include your toolbar layout in your other layouts

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

and you're good to go.

Hope this helps someone else so you don't have to spend as much time on this as I have.

(if anyone can figure out how to make this work using just themes, ie not having to apply the themes explicitly in the layout files I'll gladly support their answer instead)

EDIT:

So apparently posting a more complete answer was a downvote magnet so I'll just accept the imcomplete answer above but leave this answer here in case someone actually needs it. Feel free to keep downvoting if it makes you happy though.


The cleanest way I found to do this is create a child of 'ThemeOverlay.AppCompat.Dark.ActionBar'. In the example, I set the Toolbar's background color to RED and text's color to BLUE.

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

You can then apply your theme to the toolbar:

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

To customize tool bar style, first create tool bar custom style inheriting Widget.AppCompat.Toolbar, override properties and then add it to custom app theme as shown below, see http://www.zoftino.com/android-toolbar-tutorial for more information tool bar and styles.

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

Yout can try this below.

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

And the detail elements you can find them in https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Here are some more:TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Hope this can help you.


Similar to Arnav Rao's, but with a different parent:

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

With this approach, the appearance of the Toolbar is entirely defined in the app styles, so you don't need to place any styling on each toolbar.

참고URL : https://stackoverflow.com/questions/26503149/how-do-i-style-appcompat-v7-toolbar-like-theme-appcompat-light-darkactionbar

반응형