web-dev-qa-db-ja.com

Android：Appcompat 21アクションバーに影を追加する方法

新しいappcompatから新しいマテリアルデザインアクションバーを追加し、新しいツールバーウィジェットを使用します。 xmlのツールバーにカスタム背景を設定しましたが、問題はアクションバーからのドロップシャドウが表示されないことです。これを行う方法を知っていますか？

ツールバーコード

<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/my_awesome_toolbar"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    Android:minHeight="?attr/actionBarSize"
    Android:background="@drawable/ab_background_textured"
    app:theme="@style/MyTheme"
    app:popupTheme="@style/MyTheme.Popup"/>

MyThemeスタイル

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="Android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="Android:textColorSecondary">#ffff8800</item>
</style>

MyTheme.Popupスタイル

<style name="MyTheme.Popup" parent="ThemeOverlay.AppCompat.Dark">
    <item name="Android:textColor">#ffffff</item>
</style>

更新

@Justin PowellがテーマにactionBarStyleを追加するように提案したように、まだドロップシャドウはありません。

MyThemeスタイル（更新済み）

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="Android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="Android:textColorSecondary">#ffff8800</item>
    <item name="Android:actionBarStyle">@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse</item>
</style>
androidandroid-5.0-lollipopandroid-actionbar-compat
20
user3907002

Google IOアプリで解決策が自分で受け入れられることがわかりましたが、ブログやStackoverflowの投稿で完全に説明されているものは見当たりませんでした。 https://github.com/google/iosched/blob/36d88985ff6813fa9035530cd426393720a6f7b4/Android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png そしてアクティビティのレイアウトで：

<RelativeLayout Android:layout_width="match_parent"
                Android:layout_height="match_parent">
    <include Android:id="@+id/toolbar"
             layout="@layout/toolbar"/>

    <FrameLayout Android:layout_width="match_parent"
                 Android:layout_height="match_parent"
                 Android:layout_below="@id/toolbar"
                 Android:foreground="@drawable/header_shadow">
    <!-- YOUR STUFF HERE -->
    </FrameLayout>
</RelativeLayout>

一方、ヘッダーの影は

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="header_shadow" type="drawable">@drawable/bottom_shadow</item>
</resources>

aPIレベル<21の場合。 https://github.com/google/iosched/blob/8c798c58e592b8a25111610e216c7f3ee74c3a42/Android/src/main/res/values/refs.xml および https://github.com /google/iosched/blob/8c798c58e592b8a25111610e216c7f3ee74c3a42/Android/src/main/res/values-v21/refs.xml 。

そして、念入りに、ここに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:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?attr/colorPrimary"
        Android:elevation="4dp"
        app:theme="@style/ToolbarTheme"
        app:popupTheme="@style/AppTheme"/>
34
Fabian Frank

5.0より前のレイアウトでは、foreground="?android:windowContentOverlay"をコンテンツのFrameLayoutに追加することにより、ツールバーの下のコンテンツに影を追加できます。

例えば：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="match_parent"
Android:orientation="vertical"
>

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

<FrameLayout
    Android:id="@+id/fragmentContainer"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:foreground="?android:windowContentOverlay"
    />

</LinearLayout>
30
Billy

これは私が影を表示する方法です：

<!-- API level 21 and above then the elevation attribute is enough. For some reason it can't be set directly on the include so I wrap it in a FrameLayout -->
<FrameLayout
    Android:id="@+id/topwrapper"
    Android:background="@color/theme_primary"
    Android:elevation="4dp"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <include layout="@layout/toolbar_actionbar" />
</FrameLayout>

<FrameLayout
    Android:layout_below="@id/topwrapper"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <WebView
        Android:id="@+id/webview"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />
    <!-- This topshadow is hidden in code for API level 21 and above -->
    <include layout="@layout/topshadow" />
</FrameLayout>

そして、topshadowレイアウトは次のようになります（5dpを調整して、必要なシャドウの高さを取得します）。

<View xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="5dp"
    Android:id="@+id/shadow_prelollipop"
    Android:background="@drawable/background_shadow" />

background_shadow.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <gradient
        Android:startColor="#02444444"
        Android:endColor="#33111111"
        Android:angle="90"></gradient>
</shape>

toolbar_actionbar.xml

<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:myapp="http://schemas.Android.com/apk/res-auto"
    myapp:theme="@style/ActionBarThemeOverlay"
    myapp:popupTheme="@style/ActionBarPopupThemeOverlay"
    Android:id="@+id/toolbar_actionbar"
    Android:background="@color/theme_primary"
    myapp:titleTextAppearance="@style/ActionBar.TitleText"
    myapp:contentInsetStart="?actionBarInsetStart"
    Android:layout_width="match_parent"
    Android:layout_height="?actionBarSize" />
12
Christer Nordvik

actionbar_background.xml

    <item>
        <shape>
            <solid Android:color="@color/black" />
            <corners Android:radius="2dp" />
            <gradient
                Android:startColor="@color/black"
                Android:centerColor="@color/black"
                Android:endColor="@color/white"
                Android:angle="270" />
        </shape>
    </item>

    <item Android:bottom="3dp" >
        <shape>

            <solid Android:color="#ffffff" />
            <corners Android:radius="1dp" />
        </shape>
    </item>
</layer-list>

actionbar_style背景に追加

<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="background">@drawable/actionbar_background</item>
    <item name="Android:elevation">0dp</item>
    <item name="Android:windowContentOverlay">@null</item>
    <item name="Android:layout_marginBottom">5dp</item>
    <item name="logo">@drawable/ab_logo</item>
    <item name="displayOptions">useLogo|showHome|showTitle|showCustom</item>
</style>

basethemeに追加

  <style name="BaseTheme" parent="Theme.AppCompat.Light">
            <item name="Android:homeAsUpIndicator">@drawable/home_back</item>
            <item name="actionBarStyle">@style/TFKBTheme.ActionBar</item>
    </style>
0
Samet ÖZTOPRAK