web-dev-qa-db-ja.com

androidでドロアブルに影効果を追加する方法

enter image description here私は見栄えの良いドロアブルでチャットバブルを作成しましたが、3D効果を作るためにドロアブルの下にシャドウ効果を追加したいのですが、9ピッチのイメージを使用したくありません。このドロウアブルにシャドウ効果を追加する方法を知りたいだけです。私のコードは

---- right_bubble_chat_drawable

 <?xml version="1.0" encoding="utf-8"?>
 <shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <corners Android:radius="15dp" />

        <solid Android:color="@color/chatrightbubbleColor" />

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

        <size
            Android:height="@dimen/normal_button_height"
            Android:width="@dimen/normal_button_width" />

---コーナーポインター「chat_laftarraow」

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item >
     <rotate
        Android:fromDegrees="90"
        Android:toDegrees="-90"
        Android:pivotX="50%"
        Android:pivotY="50%" >
    <rotate
        Android:fromDegrees="45"
        Android:toDegrees="45"
        Android:pivotX="-40%"
        Android:pivotY="86%" >
        <shape
            Android:shape="rectangle"  >
            <stroke Android:color="#00aaef" Android:width="1dp"/>
            <solid
                Android:color="#00aaef"  />

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

-------私はそれらを次のように使用しています

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" >
   <View
    Android:id="@+id/left_chatArror"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="6dp"
    Android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>
  </RelativeLayout>

下の画像のように、バブルの下にシャドウ効果を追加する方法を教えてください

enter image description here

androidandroid-drawablexml-drawableshapedrawable
19
maddy d

LinearLayoutの背景として機能するレイヤーリストを実装して、この中にviewを追加してみてください。

この質問に対する回答からの引用 ：

Background_with_shadow.xmlファイルをres/drawableに追加します。含む：

<?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="@Android:color/darker_gray" />
        <corners Android:radius="5dp"/>
        </shape>
    </item>
    <item Android:right="1dp" Android:left="1dp" Android:bottom="2dp">
        <shape 
            Android:shape="rectangle">
        <solid Android:color="@Android:color/white"/>
        <corners Android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

次に、LinearLayoutで背景としてレイヤーリストを追加します。

<LinearLayout
  Android:layout_width="wrap_content"
  Android:layout_height="wrap_content"
  Android:background="@drawable/background_with_shadow"/>

[〜＃〜] edit [〜＃〜]

Thsisのようなグレー画像を作成するために、別のxmlを作成できます。

---- right_bubble_shdw_chat_drawable

 <?xml version="1.0" encoding="utf-8"?>
 <shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <corners Android:radius="15dp" />

        <solid Android:color="@Android:color/darker_gray" />

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

        <size
            Android:height="@dimen/normal_button_height"
            Android:width="@dimen/normal_button_width" />

---コーナーポインター「chat_laftarraow_shdw」

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item >
     <rotate
        Android:fromDegrees="90"
        Android:toDegrees="-90"
        Android:pivotX="50%"
        Android:pivotY="50%" >
    <rotate
        Android:fromDegrees="45"
        Android:toDegrees="45"
        Android:pivotX="-40%"
        Android:pivotY="86%" >
        <shape
            Android:shape="rectangle"  >
            <stroke Android:color="@Android:color/darker_gray" Android:width="1dp"/>
            <solid
                Android:color="@Android:color/darker_gray"  />

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

-------私はそれらを次のように使用しています

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" >
   <View
    Android:id="@+id/left_chatArror"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="6dp"
    Android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>


   <View
    Android:id="@+id/left_chatArrorShdw"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="15dp"
    Android:background="@drawable/chat_laftarraow_shdw"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_shdw_chat_drawable">
  </RelativeLayout>
27
Himanshu Agarwal

このdrawable/shadow.xmlファイルを使用しています

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#00CCCCCC" />

        <corners Android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#10CCCCCC" />

        <corners Android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#20CCCCCC" />

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

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

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

注：-ルートレイアウトはレイヤリストである必要があります。その中にアイテムを追加します。

1
Nidhi Savaliya