2012-04-02 17 views
7

Zrobiłem tła przycisku z kształtów i wygląda całkiem dobrze dla mojego celu. Potrzebna jest tylko odrobina cienia. Oto kod:Tło przycisku Android jako kształt z Shadow

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

Oto, co chcę osiągnąć

enter image description here

Jak upuść cień? Domyślam się, że muszę stworzyć inny kształt, ale z czarnym/szarym tłem i ustawić jakiś rodzaj lewego marginesu, aby wyglądał jak cień. Ale nie wiem jak to zrobić ... a dokumentacja nie pomogła mi zbytnio.

Później Edytuj: Chcę dodać cień w pliku xml, a nie według kodu. Dzięki.

+0

Tak to robię [http://stackoverflow.com/a/11579459/672773][1] [1]: http://stackoverflow.com/a/11579459/672773 nadzieja może to pomogę ci – Machete

Odpowiedz

11

Jeśli chcesz stos więcej kształtów jedna na siebie a następnie można użyć layer-list. Bellow jest kod do normalnego elementu w selektorze (z paskiem szarym kolorze):

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

Problemem jest to, że nie będzie w stanie osiągnąć prawdziwy cień spojrzenie na własną Button z tego typu drawable. Możesz użyć kodu z innej odpowiedzi lub dziewięciu łatek, które już mają na nim cień.

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

Kod ten jest z Android Romain Guy dostępnego tutaj: http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf

+0

Dziękuję za odpowiedź, zauważyłem to.W tym przypadku zapomniałem wspomnieć, że chcę dodać cień bezpośrednio do pliku xml. – Alin

+0

link jest 404. szkoda –

5

Spróbuj tego ...

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

można spróbować następujący kod również uzyskać gładką granicznego cień do widzenia:

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

2

można spróbować to:

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

1

W tym przypadku używam lib https://github.com/dmytrodanylyk/shadow-layout

Po pierwsze, należy włączyć go w Gradle

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

następnie umieścić przycisk na 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> 

To worsk wielki dla mnie)

Powiązane problemy