web-dev-qa-db-ja.com

Android影付きの形状としてのボタンの背景

私は形からボタンの背景を作りました、そして私の目的のためにかなりよく見えます。必要なのは、少し影を落とすことだけです。コードは次のとおりです。

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

    <item Android:state_pressed="true">
        <shape>
            <solid Android:color="#343434" />

            <stroke Android:width="1dp" Android:color="#171717" />

            <corners Android:radius="3dp" />

            <padding Android:bottom="10dp" Android:left="10dp" Android:right="10dp" Android:top="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient Android:angle="270" Android:endColor="#E2E2E2" Android:startColor="#BABABA" />

            <stroke Android:width="1dp" Android:color="#BABABA" />

            <corners Android:radius="4dp" />

            <padding Android:bottom="10dp" Android:left="10dp" Android:right="10dp" Android:top="10dp" />
        </shape>
   </item>

</selector>

これが私が達成したいことです

enter image description here

どうすれば影を落とすことができますか？私の推測では、別の形状を作成する必要がありますが、背景は黒/灰色で、影のように見えるように、マージンのある種のトップと左のパディングを設定します。しかし、私はそれを行う方法がわかりません...そしてドキュメントは私をあまり助けませんでした。

後で編集：コードではなくxmlファイルにシャドウを追加したい。ありがとう。

androidandroid-layoutbuttonshape
7
Alin

より多くの形状を積み重ねたい場合は、 layer-list を使用できます。以下は、セレクターの通常のアイテムのコードです（灰色のストリップ付き）：

<item>
    <layer-list>
        <item Android:right="5dp" Android:top="5dp">
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#D6D6D6" />
            </shape>
        </item>
        <item Android:bottom="2dp" Android:left="2dp">
            <shape>
                <gradient Android:angle="270" Android:endColor="#E2E2E2" Android:startColor="#BABABA" />
                <stroke Android:width="1dp" Android:color="#BABABA" />
                <corners Android:radius="4dp" />
                <padding Android:bottom="10dp" Android:left="10dp" Android:right="10dp" Android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

問題は、このタイプのドローアブルではButtonで真のシャドウルックを実現できないことです。他の回答のコード、またはすでに影が付いている9つのパッチ画像を使用できます。

11
Luksprog

これを試して...

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape>
            <solid Android:color="#000000" />

            <corners Android:radius="7dp" />
        </shape>
    </item>
    <item
        Android:bottom="5px"
        Android:left="5px">
        <shape>
            <solid Android:color="#FF0000" />

            <corners Android:radius="7dp" />
        </shape>
    </item>
</layer-list>
5
Ripal Barot
Paint mShadow = new Paint(); 
// radius=10, y-offset=2, color=black 
mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 0xFF000000); 
// in onDraw(Canvas) 
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mShadow);

このコードは、AndroidのRomain Guyからのものです： http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf

4
Akhil

あなたはこれを試すことができます：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<!-- Bottom Shadow Darker Line--> 
<item>
    <shape Android:shape="rectangle" >
        <solid Android:color="@color/blue_darker" />
        <corners Android:radius="9dip" />
    </shape>
</item>    


<!-- Main Content Gradient -->
<item Android:bottom="1dip">
    <shape Android:shape="rectangle" Android:dither="false" >
        <gradient
            Android:startColor="@color/blue_dark"
            Android:centerColor="@color/blue_medium"
            Android:endColor="@color/blue_light"
            Android:type="linear"
            Android:angle="90"/>
        <corners Android:radius="9dip" />
    </shape>
</item>

<!-- Upper Shadow Dark Line -->
<item Android:bottom="1dip" Android:left="1dip" Android:right="1dip">
     <shape Android:shape="rectangle" >
        <gradient
            Android:centerX="0.98"
            Android:centerY="0"
            Android:startColor="@Android:color/transparent"
            Android:centerColor="@Android:color/transparent"
            Android:endColor="@color/blue_medium"
            Android:type="linear"
            Android:angle="90"/>            
        <corners Android:radius="9dip" />
    </shape>
</item>
2
Alejandro PC

この場合、私はlibを使用します https://github.com/dmytrodanylyk/shadow-layout

まず、gradleでオンにする必要があります

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.3'
}

次に、ボタンをShadowLayoutに配置します

<com.dd.ShadowLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:sl_shadowRadius="3dp"
        app:sl_shadowColor="@color/your_color">
        <Button
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />
    </com.dd.ShadowLayout>

それは私にとって素晴らしい仕事です）

1
Dmitriy Melekhov

次のコードを試して、ビューの境界線の影を滑らかにすることもできます。

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<item>
    <shape>
        <solid Android:color="#88000000" />

        <corners Android:radius="15dp" />
    </shape>
</item>
<item
    Android:bottom="5px"
    Android:right="5px">
    <shape>
        <solid Android:color="#55B0CF" />

        <stroke
            Android:width="2dp"
            Android:color="#ffffff" />

        <corners Android:radius="7dp" />
    </shape>
</item>
1
Deva