web-dev-qa-db-ja.com

ボタンに影を付ける方法

enter image description here

画像でわかるように、Buttonの背後に影が必要です。角の丸いButtonを作成しました。しかし、問題はButtonの背後に影を生成できないことです。どうすればこれを達成できますか？

androidmaterial-designshadow
74
Chintan Rathod

このアプローチを使用して、希望の外観を実現します。
button_selector.xml：

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<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>

</selector>

そして、XMLレイアウトで：

<Button
   Android:background="@drawable/button_selector"
   ...
   ..
/>
120
Festus Tamakloe

Androidバージョン5.0以降

他のビューでは Elevation を試してください。

Android:elevation="10dp"

ボタンの場合、

Android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml- https://Android.googlesource.com/platform/frameworks/base/+/master/core/res/ res/anim/button_state_list_anim_material.xml

5.0バージョン未満、

すべてのビューについて、

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

私の出力：

enter image description here

43
Ranjith Kumar

ここに影付きのボタンがありますcw_button_shadow.xmlinsidedrawablefolder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid Android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners Android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              Android:right="5px" to make it round-->
            <item
                Android:bottom="5px"
                >
                <shape>
                    <padding Android:bottom="5dp"/>
                    <gradient
                        Android:startColor="#1c4985"
                        Android:endColor="#163969"
                        Android:angle="270" />
                    <corners
                        Android:radius="19dp"/>
                    <padding
                        Android:left="10dp"
                        Android:top="10dp"
                        Android:right="5dp"
                        Android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item Android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid Android:color="#102746"/>
                    <corners Android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item Android:bottom="5px">
                <shape>
                    <padding Android:bottom="5dp"/>
                    <gradient
                        Android:startColor="#1c4985"
                        Android:endColor="#163969"
                        Android:angle="270" />
                    <corners
                        Android:radius="19dp"/>
                    <padding
                        Android:left="10dp"
                        Android:top="10dp"
                        Android:right="5dp"
                        Android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

使用方法。 Button xmlでは、身長と体重を変更できます

<Button
                Android:text="+ add friends"
                Android:layout_width="120dp"
                Android:layout_height="40dp"
               Android:background="@drawable/cw_button_shadow" />

enter image description here

13
Sam

Lollipop以前のデバイスをターゲットにしている場合、 Shadow-Layout を使用できます。これは簡単であり、さまざまな種類のレイアウトで使用できるためです。


Gradleファイルにシャドウレイアウトを追加します：

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


ボタンがあるXMLレイアウトの上部で、上部に追加します：

xmlns:app="http://schemas.Android.com/apk/res-auto"

カスタム属性を利用可能にします。


次に、ボタンの周りにシャドウレイアウトを配置しますButton：

<com.dd.ShadowLayout
        Android:layout_marginTop="16dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

次に、app:設定を微調整して、必要なシャドウに一致させることができます。

それが役に立てば幸い。

11
torrao

上記のコードを試し、達成しようとしているものに少し近い独自のシャドウを作成しました。他の人にも役立つかもしれません。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <layer-list>
            <item Android:left="5dp" Android:top="5dp">
                <shape>
                    <corners Android:radius="3dp" />
                    <gradient
                        Android:angle="315"
                        Android:endColor="@Android:color/transparent"
                        Android:startColor="@Android:color/black"
                        Android:type="radial"
                        Android:centerX="0.55"
                        Android:centerY="0"
                        Android:gradientRadius="300"/>
                    <padding Android:bottom="1dp" Android:left="0dp" Android:right="3dp" Android:top="0dp" />
                </shape>
            </item>
            <item Android:bottom="2dp" Android:left="3dp">
                <shape>
                    <corners Android:radius="1dp" />
                    <solid Android:color="@color/colorPrimary" />


                </shape>
            </item>
        </layer-list>
    </item>

</selector>
10
RexSplode

これがあなたのために働くなら、これを試してください

enter image description here

Android:background="@drawable/drop_shadow"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingLeft="3dp"
        Android:paddingTop="3dp"
        Android:paddingRight="4dp"
        Android:paddingBottom="5dp"
2
DjHacktorReborn

これを試すことができます：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_pressed="true">
<layer-list>
        <item Android:left="1dp" Android:top="3dp">
            <shape>
                <solid Android:color="#a5040d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item Android:left="0dp" Android:top="0dp">
            <shape>
                    <solid Android:color="#99080d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
        <item Android:bottom="3dp" Android:right="2dp">
            <shape>
                <solid Android:color="#a5040d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>
1
Mohammad Julfikar

サンプルシャドウ付き9パッチイメージ

たくさんの研究の後、私は簡単な方法を見つけました。

9パッチイメージを作成し、ボタンまたは他のビューの背景として適用します。

この website を使用して、シャドウ付きの9パッチイメージを作成できます。

9個のパッチイメージを描画可能ディレクトリに配置し、ボタンの背景として適用します。

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
0
shijo