android - Androidでビューに影を設定する方法は?

Question

Androidの一般的なビューにシャドウレイヤーを追加する方法を知りたいです。たとえば、次のようなものを示すレイアウト xml があるとします。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>  

表示されたら、その周りに影を付けたいと思います。

Answer 1

影を作成する最良の方法9patchは、ビューの背景 (またはビューViewGroupをラップする ) としてイメージを使用することです。

最初のステップは、周りに影のある png 画像を作成することです。このような画像を作成するためにフォトショップを使用しました。とてもシンプルです。

• Photoshop で新しい画像を作成します。
• レイヤーを追加し、4x4 の黒い正方形を作成します。
• レイヤー エクスプローラーでレイヤーを選択し、fx というタイトルのボタンをクリックしてドロップ シャドウを選択し、レイヤーに影を作成します。
• 画像を png としてエクスポートします。

次のステップは、この画像から 9 パッチのドローアブルを作成することです。

• draw9patchから開くandroid-sdk/tools
• で画像を開くdraw9patch
• 以下のように正方形の四辺に黒い線を4本作成し、画像を として保存しますshadow.9.png。

これで、影を追加したいビューの背景としてこの影を追加できます。に追加shadow.9.pngしres/drawablesます。次に、背景として追加します。

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

私は最近、これを詳細に説明し、影の作成に使用する 9patch イメージを含むブログ投稿を書きました。

Answer 2

Assuming u would use a linear layout(i have considered a vertical linear layout)..and have a view just below your linear layout.Now for this view provide a start colour and end colour.. I also wanted to get this thing,its working for me..If you need a even better effect,then just work around the start and end colour.

activity_main

<?xml version="1.0" encoding="utf-8"?>

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

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

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

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

I tried to post an image which i have it after using the above code,but stackoverflow doesnot allow me coz i dont have reputation..Sorry about that.

Answer 3

影を形成する 2 つのビューを使用する簡単なトリックがあります。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

この助けを願っています。

Answer 4

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

LinearLayout のすぐ下で使用

別の方法

/drawable フォルダーに「rounded_corner_bg.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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

このレイアウトを使用するには android:background="@drawable/rounded_corner_bg"