web-dev-qa-db-ja.com

Android影を表示

私は周りを検索しましたが、これを行う適切な方法を見つけることができませんでした。ビューに次のシャドウ効果を追加したい: enter image description here

enter image description here

正直に言うと、この2つ目がシャドウ効果を適用して行われたかどうかはわかりません。何か案は?

85
longwalker

私はこの質問にすでに答えていることを知っていますが、あなたが質問にある写真と非常に似ているAndroid Studiodrawableを見つけたことを知ってほしい:これを見てください:

Android:background="@drawable/abc_menu_dropdown_panel_holo_light"

次のようになります。

enter image description here

お役に立てば幸いです

編集

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

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

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

enter image description here

.9.pngファイルとして保存することを忘れないでください(例:my_background.9.png

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

Edit 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'
150
Rick

Android St​​udio 0.8.6を使用していますが、見つかりませんでした:

Android:background="@drawable/abc_menu_dropdown_panel_holo_light"

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

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

次のようになります。

enter image description here

96
Repo

次のコードを使用して、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"/>
30
Vivek Varma

@Android:drawable/dialog_holo_light_frameの背景を置くと影が付きますが、背景色や境界線スタイルを変更することはできません。そのため、layer-listを介して背景を置くことができる一方で、その影の恩恵を受ける方が良いです。

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

たとえばshadow.xmlの下にあるドロアブルフォルダーに保存します

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

Android:background="@drawable/shadow"
29
Mohamed Selim

CardView はAndroid 5+のtrueシャドウを提供し、サポートライブラリを備えています。ビューでそれをラップするだけで完了です。

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

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

dependencies {
    ...
    compile 'com.Android.support:cardview-v7:21.0.+'
}
23
Ilya Gazman

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

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

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

19
mossman252

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

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

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

乾杯。作成者に感謝します!ハッピーコーディング

12
ralphgabb

影を適切に適用する必要がある場合は、次を実行する必要があります。

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

<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

3
Shangeeth Sivan

これはばかげていることを知っていますが、
しかし、v21の下でサポートしたい場合は、ここに私の成果があります。

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

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

ここに結果があります:

Under v21(これはxmlで作成したものです) enter image description here

Avove v21(実際の高度レンダリング) enter image description here

  • 1つの重要な違いは、ビューの内部スペースを占有するため、実際のコンテンツ領域は> = Lollipopデバイスよりも小さくできることです。
2
wonsuc

影効果のためにエレベーションプロパティを使用します。

<YourView
    ...
    Android:elevation="3dp"/>
2
Ofek Ashery

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

<?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>
0
gaurav iqlance

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

<?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>
0
Mr.Hosseini

この質問は古いかもしれませんが、将来、複雑な影の効果を簡単に実現したい方は、こちらのライブラリをご覧ください 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"を使用します。

0
BluRe.CN

ここからドローアブルを作成できます:

チェックしてください

0
Aris_choice