私は周りを検索しましたが、これを行う適切な方法を見つけることができませんでした。ビューに次のシャドウ効果を追加したい:
正直に言うと、この2つ目がシャドウ効果を適用して行われたかどうかはわかりません。何か案は?
私はこの質問にすでに答えていることを知っていますが、あなたが質問にある写真と非常に似ているAndroid Studio
でdrawable
を見つけたことを知ってほしい:これを見てください:
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
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'
Android Studio 0.8.6を使用していますが、見つかりませんでした:
Android:background="@drawable/abc_menu_dropdown_panel_holo_light"
だから私は代わりにこれを見つけました:
Android:background="@Android:drawable/dialog_holo_light_frame"
次のようになります。
次のコードを使用して、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"/>
@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"
CardView はAndroid 5+のtrueシャドウを提供し、サポートライブラリを備えています。ビューでそれをラップするだけで完了です。
<Android.support.v7.widget.CardView>
<MyLayout>
</Android.support.v7.widget.CardView>
次の依存関係が必要です。
dependencies {
...
compile 'com.Android.support:cardview-v7:21.0.+'
}
標高プロパティを使用して、影の影響を実現します。
<View ...
Android:elevation="2dp"/>
これはv21以降でのみ使用されます。次のリンクを確認してください: http://developer.Android.com/training/material/shadows-clipping.html
これは遅いかもしれませんが、まだこれに対する答えを探している人のために、gitハブでプロジェクトを見つけました。これは実際に私のニーズに合った唯一のプロジェクトです。 Android-materialshadowninepatch
Build.gradle依存関係にこの行を追加するだけです
compile 'com.h6ah4i.Android.materialshadowninepatch:materialshadowninepatch:0.6.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
これはばかげていることを知っていますが、
しかし、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>
ここに結果があります:
影効果のためにエレベーションプロパティを使用します。
<YourView
...
Android:elevation="3dp"/>
丸みを帯びた影を表示するには、このようなドローアブルを作成します。
<?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>
この形状を背景として使用します。
<?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>
この質問は古いかもしれませんが、将来、複雑な影の効果を簡単に実現したい方は、こちらのライブラリをご覧ください 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"を使用します。
ここからドローアブルを作成できます: