web-dev-qa-db-ja.com

ぼやけたドロップシャドウをボタンに追加する方法は？

ぼけたドロップシャドウをボタンに追加する必要があります。

enter image description here

Layer-list xml drawableで背景を作成しようとしましたが、ぼかしのようには見えません。

<?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="45dp" />
            <padding
                Android:bottom="2dp"
                Android:left="1dp"
                Android:right="1dp"
                Android:top="1dp" />

            <stroke
                Android:width="6dp"
                Android:color="#007879E8" />

        </shape>
    </item>
    //////   10 more items
        <item>
        <shape>
            <corners Android:radius="45dp" />
            <padding
                Android:bottom="2dp"
                Android:left="1dp"
                Android:right="1dp"
                Android:top="1dp" />

            <stroke
                Android:width="6dp"
                Android:color="#177879E8" />


        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <corners Android:radius="45dp" />
            <stroke
                Android:width="2dp"
                Android:color="@color/main_purple_text_color" />
        </shape>
    </item>

</layer-list>

また、pngがぼやけたボタンの後ろに背景要素を使用しようとしましたが、多くのリソースに使用され、ホバーまたはクリックで背景を変更するセレクタを作成できません。

ボタンに単一の背景ファイルが必要で、セレクターを使用してホバー/クリックでぼかしとグラデーションを変更する必要があります。 Android SDK？

更新1

答えてくれたみんなに感謝しますが、私はグラデーションの作り方を尋ねていません。私はすでにこれをしました。ぼけた影を作成する必要があります。

androidgradientblurdropshadow
6
Vlad Morzhanov

私は解決策を見つけました：この generator を介してぼやけた影付きの9.pngを作成し、ボタンの背景グラデーションを含む描画可能なレイヤーリストに渡す必要があります：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:drawable="@drawable/blurred_9_path_png" />
    <item>
        <shape Android:shape="rectangle" Android:padding="10dp">
            <corners Android:radius="45dp" />
            <gradient
                Android:angle="45"
                Android:endColor="@color/facebook_btn_fill_grad2"
                Android:startColor="@color/facebook_btn_fill_grad1"
                Android:type="linear" />
            <padding
                Android:bottom="0dp"
                Android:left="0dp"
                Android:right="0dp"
                Android:top="0dp" />
        </shape>
    </item>

</layer-list>

その後、異なるパス9。

15
Vlad Morzhanov

これを背景のドロアブル（グレーのドロップシャドウ）として追加します。

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#1f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#2f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#3f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid Android:color="@Android:color/white" />
        <corners Android:radius="30dp" />
    </shape>
</item>

影の上に3dp（＃3f000000から＃1f000000までのすべての色に対して1dp + 1dp + 1dp）を含むのに十分な大きさのtextviewの高さ/幅/パディングを保証します。

1
林果皞

Graidentでできる

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
<gradient 
    Android:startColor="#6586F0"
    Android:centerColor="#D6D6D6"
    Android:endColor="#4B6CD6"
    Android:angle="90"/>
<corners 
    Android:radius="0dp"/>
0
Shivam Oberoi

enter image description here

描画可能な「round_corner.xml」を作成します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
    <shape>
        <gradient
            Android:angle="360"
            Android:startColor="#8A88F3"
            Android:endColor="#B96AE8"
            Android:type="linear" />

        <corners Android:bottomLeftRadius="24dp"
            Android:bottomRightRadius="24dp"
            Android:topLeftRadius="24dp" Android:topRightRadius="24dp" />
    </shape>
</item>
</selector>

アクティビティでxmlにボタンを設定します

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/white"
    Android:orientation="vertical">

    <Button
        Android:id="@+id/btn_language_select_save"
        Android:layout_width="wrap_content"
        Android:layout_height="60dp"
        Android:layout_centerInParent="true"
        Android:layout_marginTop="20dp"
        Android:background="@drawable/round_corner_spiner"
        Android:paddingLeft="130dp"
        Android:paddingRight="130dp"
        Android:text="Vlad[enter image description here][1]"
        Android:textColor="@Android:color/white"
        Android:textSize="20sp"
        Android:visibility="visible" />
</RelativeLayout>

役に立つ リンク

これがあなたを助けることを願っています

0
InsaneCat

enter image description here

Drawableshadow.xmlファイルを作成

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

<solid Android:color="#E3D5FC" />
<corners
    Android:radius="20dp"/>
<padding
    Android:bottom="1dp"
    Android:left="1dp"
    Android:right="1dp"
    Android:top="1dp" >
</padding>

別のドロアブルbackground.xmlファイルを作成します

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

<item Android:drawable="@drawable/shadow" />
<item>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:shape="rectangle">
        <gradient
            Android:angle="0"
            Android:centerColor="#9E7CEF"
            Android:endColor="#B070EB"
            Android:startColor="#8989F4" />
        <corners Android:radius="22dp" />
        <size Android:height="40dp"/>
    </shape>
</item>

以下のようにこのファイルをxmlで使用します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical" Android:layout_width="match_parent"
Android:layout_height="match_parent">

<Button
    Android:id="@+id/img_save"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/background"
    Android:gravity="center"
    Android:text="BUTTON"
    Android:textAppearance="?android:attr/textAppearanceMedium"
    Android:textColor="@Android:color/white"
    Android:layout_centerInParent="true"/>
</RelativeLayout>

それが役に立てば幸い。

0
Dharmishtha