Android Viewシャドウ


101

あちこち探しましたが、これを行う適切な方法が見つかりませんでした。ビューに次のシャドウエフェクトを設定します。 ここに画像の説明を入力してください

ここに画像の説明を入力してください

正直なところ、この2番目の設定がシャドウエフェクトを適用して行われるかどうかはわかりません。何か案は?


1
あなたはこれを意味しますか?stackoverflow.com/questions/4406524/…(マークされた回答ではなく、最高の投票の回答を確認してください)
Luke Vo

1
@DatVM、ありがとう、これはトリックを行うように見えますが、おそらくAndroid SDKに組み込みツールがあると考えていました。たとえば、次のコード行を追加するだけで、線形レイアウトのドロップシャドウを追加します:P
longwalker

同様の質問- stackoverflow.com/q/52954743/9640177 -ベクトル描画可能に影を追加する
mayank1513

回答:


158

私はこの質問が既に回答されている知っているが、私はあなたが私が見つけたことを知りたいdrawableAndroid Studioそれはあなたが疑問を持っている写真と非常によく似ています。このを見てみましょう:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

次のようになります。

ここに画像の説明を入力してください

お役に立てれば幸いです

編集する

上記のオプションはの古いバージョン用であり、Android Studio見つからない場合があります。新しいバージョンの場合:

android:background="@android:drawable/dialog_holo_light_frame"

また、独自のカスタムシェイプを作成したい場合は、のような描画ソフトウェアを使用して描画することをお勧めしますPhotoshop

ここに画像の説明を入力してください

保存することを忘れてはいけない.9.pngファイル(例:my_background.9.png

ドキュメントを読む:Draw 9-patch

編集2

さらに良い、それほど難しくない解決策は、CardViewとを使用して、app:cardPreventCornerOverlap="false"ビューが境界に重ならないようにすることです。

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

また、最新バージョンがに含まれていることを確認してくださいbuild.gradle。現在は

compile 'com.android.support:cardview-v7:26.0.0'

おかげで、実際には非常によく似ています。Android向けの「googleカードレイアウト」も見つけました。
ロングウォーカー、2014年

6
驚くばかり。今後の視聴者のための参考までに、これはにあり/<sdk-path>/extras/android/supportます。
theblang 2014

2
aの使用についてはどうですかcardView
Alex Chengalan 2015

100

Android Studio 0.8.6を使用していますが、見つかりませんでした。

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

だから私は代わりにこれを見つけました:

android:background="@android:drawable/dialog_holo_light_frame"

そしてそれはこのように見えます:

ここに画像の説明を入力してください


1
しかし、角の半径を追加することはできませんか?!
Fay007

40

の背景を配置する@android:drawable/dialog_holo_light_frameと影が付きますが、背景色や境界線のスタイルを変更することはできないため、レイヤーリストを使用して背景を配置できる一方で、その影を利用することをお勧めします

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

sayの下のドローアブルフォルダに保存してください shadow.xml

ビューに割り当てるには、xmlレイアウトファイルで背景を設定します

android:background="@drawable/shadow"

動作するか確認しましたか?2番目の<item>は何もしません。透明または角丸に変更することはできません。
Zeeshan

2
私が試したすべての中でこれがうまくいく唯一のものです、ありがとう。
Shyam Sunder 2017

1
素晴らしいソリューション
user1974368 2018

34

以下のコードを使用して、res / drawableフォルダーにcard_background.xmlを作成します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

次に、カードレイアウトを設定する要素に次のコードを追加します

android:background="@drawable/card_background"

次の行は、カードの影の色を定義します

<solid android:color="#BDBDBD"/>

10
これは実際には影ではありません-消えないからです。それは、両側の境界線のようなものです。
ban-geoengineering 2017年

その影ではない
ShadeToD

24

CardViewはAndroid 5以降で真の影を提供し、サポートライブラリを備えています。ビューをラップするだけで完了です。

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

次の依存関係が必要です。

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

1
これは唯一の正しい答えCardViewです。互換モードでは、さまざまな標高に対してさまざまなシャドウレベルしかないためです。
Jarett Millard、2016

MaterialCardViewはより明確で、より多くの機能を備えているため、お勧めします。
H.ファリッド

22

標高プロパティを使用して、影の効果を実現します。

<View ...
    android:elevation="2dp"/>

これはv21以降でのみ使用できます。次のリンクを確認してください:http ://developer.android.com/training/material/shadows-clipping.html


12

これは遅いかもしれませんが、まだこれに対する答えを探している人のために、私はgitハブでプロジェクトを見つけました。これが実際に私のニーズに合った唯一のものです。android-materialshadowninepatch

この行をbuild.gradle依存関係に追加するだけです

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

乾杯。クリエーターにとってはいいね!ハッピーコーディング


こんにちは、@ ralphgabb、これはまだあなたのためにうまくいくのですか、それともあなたがプレロリポップデバイスのためのより良い解決策を持っていますか?
Swapnil

@Swapnilは、AndroidXがこれをサポートしているかどうかはわかりませんが、マシュマロ以前のデバイスはサポートしていません。
ラルフガブ

5

これは
バカバカしいことを知っていますが、v21でサポートしたい場合は、ここに私の成果を示します。

長方形_with_10dp_radius_white_bg_and_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

長方形 _with_10dp_radius_white_bg_and_shadow.xml(v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

これが結果です:

v21の下(これはxmlで作成したものです) ここに画像の説明を入力してください

上記のv21(実際の標高レンダリング) ここに画像の説明を入力してください

  • 大きな違いの1つは、ビューの内側のスペースを占めるため、実際のコンテンツ領域がロリポップデバイスよりも小さくなる可能性があることです。

3

シャドウを適切に適用する必要がある場合は、以下を実行する必要があります。

背景のドローアブルで定義されたこのビューを考えてみましょう:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

背景のドローアブルは、角が丸い長方形として定義されます。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

これは、シャドウをアピールするための推奨される方法です。https://developer.android.com/training/material/shadows-clipping.html#Shadowsを確認してください。



2

丸みを帯びた影を表示するには、このような背景ドローアブルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

提供したコードの説明も追加してください。
Mangaldeep Pannu

非常に素晴らしいxmlのみのソリューション
Bruno Bieri

2

この質問は古いかもしれませんが、複雑な影の効果を達成する簡単な方法を必要とする将来の人は、私のライブラリをここでチェックして くださいhttps://github.com/BluRe-CN/ComplexView

ライブラリを使用すると、シャドウの色を変更したり、エッジを微調整したりできます。ここにあなたが求めるものを達成するための例があります。

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

シャドウの色を変更するには、app:shadowColor = "your color code"を使用します。


1

この形状を背景として使用します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.