あちこち探しましたが、これを行う適切な方法が見つかりませんでした。ビューに次のシャドウエフェクトを設定します。
正直なところ、この2番目の設定がシャドウエフェクトを適用して行われるかどうかはわかりません。何か案は?
あちこち探しましたが、これを行う適切な方法が見つかりませんでした。ビューに次のシャドウエフェクトを設定します。
正直なところ、この2番目の設定がシャドウエフェクトを適用して行われるかどうかはわかりません。何か案は?
回答:
私はこの質問が既に回答されている知っているが、私はあなたが私が見つけたことを知りたいdrawable
のAndroid 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'
/<sdk-path>/extras/android/support
ます。
cardView
の背景を配置する@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"
以下のコードを使用して、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"/>
CardViewはAndroid 5以降で真の影を提供し、サポートライブラリを備えています。ビューをラップするだけで完了です。
<android.support.v7.widget.CardView>
<MyLayout>
</android.support.v7.widget.CardView>
次の依存関係が必要です。
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
}
CardView
です。互換モードでは、さまざまな標高に対してさまざまなシャドウレベルしかないためです。
標高プロパティを使用して、影の効果を実現します。
<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'
乾杯。クリエーターにとってはいいね!ハッピーコーディング
これは
バカバカしいことを知っていますが、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>
これが結果です:
シャドウを適切に適用する必要がある場合は、以下を実行する必要があります。
背景のドローアブルで定義されたこのビューを考えてみましょう:
<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を確認してください。
影の影響に標高プロパティを使用します。
<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>
この質問は古いかもしれませんが、複雑な影の効果を達成する簡単な方法を必要とする将来の人は、私のライブラリをここでチェックして ください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"を使用します。
この形状を背景として使用します。
<?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>