web-dev-qa-db-ja.com

ツールバーにデフォルトで影なし？

サポートライブラリv21の新しいツールバーでアプリをアップデートしています。私の問題は、「elevation」属性を設定していないと、ツールバーが影を落とさないことです。それは通常の動作ですか、それとも私は何か問題がありますか。

私のコードは：

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:layout_width="fill_parent"
   Android:layout_height="fill_parent"
   Android:orientation="vertical">

   <Android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.Android.com/apk/res-auto"
       Android:id="@+id/my_awesome_toolbar"
       Android:layout_width="match_parent"
       Android:layout_height="wrap_content"
       Android:background="?attr/colorPrimary"
       Android:elevation="4dp"
       Android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       Android:id="@+id/FrameLayout1"
       Android:layout_width="match_parent"
       Android:layout_height="match_parent">
       .
       .
       .

そして私のアクティビティで - OnCreateメソッド：

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
androidandroid-5.0-lollipopmaterial-designandroid-toolbar
152
MrBrightside

ツールバーにドロップシャドウを設定することになりました。

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              xmlns:app="http://schemas.Android.com/apk/res-auto"
              Android:layout_width="wrap_content"
              Android:layout_height="wrap_content"
              Android:layout_gravity="top"
              Android:orientation="vertical">

    <Android.support.v7.widget.Toolbar Android:id="@+id/toolbar"
                                       Android:layout_width="match_parent"
                                       Android:layout_height="wrap_content"
                                       Android:background="@color/color_alizarin"
                                       Android:titleTextAppearance="@color/White"
                                       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <FrameLayout Android:layout_width="match_parent"
                 Android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

        <View Android:layout_width="match_parent"
              Android:layout_height="5dp"
              Android:background="@drawable/toolbar_dropshadow"/>

    </FrameLayout>

</LinearLayout>

@ drawable/toolbar_dropshadow：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
       Android:shape="rectangle">

    <gradient Android:startColor="@Android:color/transparent"
              Android:endColor="#88333333"
              Android:angle="90"/>

</shape>

@ color/color_alizarin

<color name="color_alizarin">#e74c3c</color>

enter image description here

239
I'm a frog dragon

Googleは数週間前にデザインサポートライブラリをリリースしましたが、このライブラリにはこの問題に対する優れた解決策があります。

build.gradleに依存関係としてデザインサポートライブラリを追加します。

compile 'com.Android.support:design:22.2.0'

ドロップシャドウを生成するために、ライブラリによって提供されるAppBarLayoutをToolbarレイアウトのラッパーとして追加します。

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">
       <Android.support.v7.widget.Toolbar
           .../>
    </Android.support.design.widget.AppBarLayout>

これが結果です。

enter image description here

デザインサポートライブラリには他にもたくさんのトリックがあります。

  1. http://inthecheesefactory.com/blog/Android-design-support-library-codelab/en
  2. http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html
187
Binoy Babu

API 21（Android Lollipop）の前にelevation属性を使用することはできません。ただし、ツールバーの下に配置したカスタムビューなどを使用して、プログラムで影を追加することもできます。

@レイアウト/ツールバー

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

<View
    Android:id="@+id/toolbar_shadow"
    Android:layout_width="match_parent"
    Android:layout_height="3dp"
    Android:background="@drawable/toolbar_dropshadow" />

@ drawable/toolbar_dropshadow

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <gradient
        Android:startColor="@Android:color/transparent"
        Android:endColor="#88333333"
        Android:angle="90"/> </shape>

あなたの活動レイアウトの中で<include layout="@layout/toolbar" />

enter image description here

23
Muhammad Aamir Ali

OSのバージョンに基づいて正しいシャドウスタイルを適用するには、/ valuesフォルダを使用します。

5.0以下のデバイスでは、/ values/styles.xmlを使ってwindowContentOverlayあなたの活動の本体に：

<style name="MyViewArea">
    <item name="Android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="Android:background">?attr/colorPrimary</item>
</style>

次に、テーマを変更して独自のカスタムシャドウを追加します。

<item name="Android:windowContentOverlay">@drawable/bottom_shadow</item>

GoogleのIOアプリシャドウリソースはこちらから入手できます。 https://github.com/google/iosched/blob/master/Android/src/main/res/drawable-xxxhdpi/bottom_shadow。 9.png

5.0以降のデバイスでは、/ values-v21/styles.xmlを使ってを追加します。カスタムヘッダースタイルを使用してツールバーの標高を設定します。

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="Android:background">?attr/colorPrimary</item>
    <item name="Android:elevation">4dp</item>
</style>

2番目のケースでは、windowContentOverlayも表示されないように、空のMyViewAreaスタイルを作成する必要がありました。

[更新：リソース名を変更し、Google shadowを追加した。]

17
radley

これは私にとってとてもうまくいった：

<Android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/primary"
        Android:minHeight="?attr/actionBarSize" />

</Android.support.v7.widget.CardView>
17
Islam A. Hassan

ToolBarをActionBarとして設定している場合は、以下を呼び出してください。

getSupportActionBar().setElevation(YOUR_ELEVATION);

注：これはsetSupportActionBar(toolbar);の後に呼び出さなければなりません

12
Roberto B.

私の問題は、「elevation」属性を設定していないと、ツールバーが影を落とさないことです。それは通常の動作ですか、それとも私は何か問題がありますか。

それが通常の動作です。 この記事 の最後のFAQも見てください。

7
cygery

何時間もこれでいじっていた、これは私のために働いたものです。

elevationウィジェットとappBarLayoutウィジェットから（すべてのスタイルを適用する場合はstyles.xmlを含む）、すべてのToolbar属性を削除します。

アクティビティ内で、elvationにactionBarを適用します。

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

これでうまくいくはずです。

7
Irshu

追加した

<Android.support.v7.widget.Toolbar
...
Android:translationZ="5dp"/>

ツールバーの説明でそれは私のために働く。 5.0+を使う

5
Alex Mazur

RelativeLayoutでも動作させることができます。これにより、レイアウトのネスティングが少し減少します。

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

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

    <FrameLayout
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@id/toolbar" />

    <View
        Android:layout_width="match_parent"
        Android:layout_height="5dp"
        Android:layout_below="@id/toolbar"
        Android:background="@drawable/toolbar_shadow" />
</RelativeLayout>
4
iluu

必要なのはAndroid:margin_bottom値に等しいAndroid:elevationだけです。 AppBarLayout、clipToPaddingなどは必要ありません。

例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:layout_marginBottom="4dp"
    Android:background="@Android:color/white"
    Android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <!--Inner layout goes here-->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
1
Rohan Taneja

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>

name = "displayOptions"> useLogo | showHome | showTitle | showCustom

basethemeに追加する

<style name="BaseTheme" parent="Theme.AppCompat.Light">
   <item name="Android:homeAsUpIndicator">@drawable/home_back</item>
   <item name="actionBarStyle">@style/Theme.ActionBar</item>
</style>
1
Samet öztoprak

ほとんどの解決策はここでうまくいきます。別の似たような方法を見せたいです。

グラドル：

implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.Android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

以下のように、レイアウトにツールバービューとその影を付けることができます（もちろん修正が必要です）。

<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="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>

    <include
        layout="@layout/toolbar_action_bar_shadow"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>

</LinearLayout>

res/drawable-v21/toolbar_action_bar_shadow.xml

<androidx.appcompat.widget.AppCompatImageView
    xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:layout_width="match_parent"
    Android:layout_height="wrap_content" Android:src="@drawable/msl__action_bar_shadow"/>

res/drawable/toolbar_action_bar_shadow.xml

<FrameLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android" xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent" Android:layout_height="wrap_content"
    Android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>

res/drawable/msl__action_bar_shadow.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape
            Android:dither="true"
            Android:shape="rectangle" >
            <gradient
                Android:angle="270"
                Android:endColor="#00000000"
                Android:startColor="#33000000" />

            <size Android:height="10dp" />
        </shape>
    </item>

</layer-list>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar as Toolbar)
    }
}

フルサンプル ここ 、IDEにはforeground属性がここでは使用するには新しすぎると言うバグがあります。

1
android developer

私は影についても同様の問題を抱えていました。私の場合、影はAppBarLayoutの直接の親によって描画されます。親の高さがAppBarLayoutの高さと同じ場合、影は描画できません。そのため、親レイアウトのサイズをチェックし、レイアウトを変更することで問題を解決できます。 https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

0
Radiofisik

正しい答えは追加することになります
Android：backgroundTint = "＃ff00ff"ツールバーにAndroid：background = "@ Android：color/white"

背景に白以外の色を使用すると、影が消えます。グーグル1グーグル！

0
user3193413

5.0以降の場合：AppBarLayoutをツールバーと一緒に使用できます。 AppBarLayoutには「標高」属性があります。

 <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:elevation="4dp"
        Android:layout_height="wrap_content"
        Android:orientation="vertical">
        <include layout="@layout/toolbar" />
    </Android.support.design.widget.AppBarLayout>
0
Eugene Lezov