Nền của Nút Android làm hình dạng với Bóng

Question

Tôi đã tạo hình nền nút từ hình dạng và trông khá tốt cho mục đích của tôi. Điều duy nhất cần thiết là thả một chút bóng cho nó. Đây là mã:

<?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> 

Dưới đây là những gì tôi muốn đạt được

Làm thế nào để thả cái bóng? Tôi đoán là tôi cần phải tạo một hình dạng khác nhưng với nền đen/xám và đặt một số loại lề trái trên cùng để làm cho nó trông giống như một cái bóng. Nhưng tôi không biết làm thế nào để làm điều đó ... và tài liệu không giúp tôi quá nhiều.

Chỉnh sửa sau: Tôi muốn thêm bóng vào tệp xml chứ không phải theo mã. Cảm ơn.

Answer 1

Nếu bạn muốn ngăn xếp hình dạng hơn chồng lên nhau sau đó bạn có thể sử dụng một layer-list. Bellow là mã cho mục bình thường trong chọn của bạn (với một dải màu xám):

<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> 

Vấn đề là bạn sẽ không thể đạt được một cái nhìn bóng đúng vào Button của bạn với loại hình này có thể vẽ được. Bạn có thể sử dụng mã từ câu trả lời khác hoặc một hình ảnh vá chín đã có bóng trên đó.

Answer 2

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); 

Mã này là từ Romain Guy Android có sẵn ở đây: http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf

Answer 3

Hãy thử này ...

<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> 

Answer 4

bạn có thể thử đoạn mã sau cũng để có được một cái bóng mịn biên giới để xem:

<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> 

Answer 5

Bạn có thể thử này:

<?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>  

Answer 6

Trong trường hợp này tôi sử dụng lib https://github.com/dmytrodanylyk/shadow-layout

Thứ nhất, bạn nên bật nó trong gradle

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

sau đó đặt nút của bạn vào 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> 

Đó là worsk lớn đối với tôi)