2011-03-04 24 views
94

¿Es posible agregar una sombra paralela a una forma personalizada en Android? Después de revisar la documentación, solo veo una forma de aplicar una sombra de texto.Agregar sombra a la forma personalizada en Android

He intentado esto sin suerte:

<?xml version="1.0" encoding="UTF-8"?> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#90ffffff"/> 
     <corners android:radius="12dp" /> 
    <item name="android:shadowColor">#000000</item> 
    <item name="android:shadowRadius">5</item> 
    <item name="android:shadowDy">3</item> 
    </shape> 

Respuesta

7

Si no te importa hacer un poco de dibujo con la API de lona de encargo, echa un vistazo a esta respuesta acerca drop shadows. Aquí hay una pregunta follow-up que soluciona un problema en el original.

23

Lo siguiente funcionó para mí: simplemente guarde como custom_shape.xml.

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

    <!-- "shadow" --> 
    <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="#000000"/> 
      <corners android:radius="12dp" /> 
     </shape> 
    </item> 


    <item android:bottom="3px"> 
     <shape android:shape="rectangle"> 
      <solid android:color="#90ffffff"/> 
      <corners android:radius="12dp" /> 
     </shape> 
    </item> 

</layer-list> 
2

creo que este valor de caída de sombra es bueno para la mayoría de los casos:

<solid android:color="#20000000" /> 
70

Esto es cómo lo hago: Berrea

Android Native Button with Shadows

de código para un botón ESTADO:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <!-- "background shadow" --> 
    <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="#000000" /> 

      <corners android:radius="15dp" /> 
     </shape> 
    </item> 
    <!-- background color --> 
    <item 
     android:bottom="3px" 
     android:left="3px" 
     android:right="3px" 
     android:top="3px"> 
     <shape android:shape="rectangle" > 
      <solid android:color="#cc2b2b" /> 


      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <!-- over left shadow --> 
    <item> 
     <shape android:shape="rectangle" > 
      <gradient 
       android:angle="180" 
       android:centerColor="#00FF0000" 
       android:centerX="0.9" 
       android:endColor="#99000000" 
       android:startColor="#00FF0000" /> 

      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <!-- over right shadow --> 
    <item> 
     <shape android:shape="rectangle" > 
      <gradient 
       android:angle="360" 
       android:centerColor="#00FF0000" 
       android:centerX="0.9" 
       android:endColor="#99000000" 
       android:startColor="#00FF0000" /> 

      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <!-- over top shadow --> 
    <item> 
     <shape android:shape="rectangle" > 
      <gradient 
       android:angle="-90" 
       android:centerColor="#00FF0000" 
       android:centerY="0.9" 
       android:endColor="#00FF0000" 
       android:startColor="#99000000" 
       android:type="linear" /> 

      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <!-- over bottom shadow --> 
    <item> 
     <shape android:shape="rectangle" > 
      <gradient 
       android:angle="90" 
       android:centerColor="#00FF0000" 
       android:centerY="0.9" 
       android:endColor="#00FF0000" 
       android:startColor="#99000000" 
       android:type="linear" /> 

      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
</layer-list> 

entonces usted debe tener un selector con diferentes versiones del botón, algo así como:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:drawable="@drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed --> 
    <item android:drawable="@drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused --> 
    <item android:drawable="@drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected --> 
    <item android:drawable="@drawable/ic_button_red_default"/> <!-- default --> 

</selector> 

esperanza que esto puede ayudar suerte you..good

+0

genial !! .. Sí – MastAvalons

+0

muy agradable jmachete. Con solo un pequeño ajuste, solo quería lo que quería. +1 –

+0

Gracias por el buen ejemplo. Me ha ayudado mucho. – Kailas

19

Creo que este método produce muy buenos resultados:

<!-- Drop Shadow Stack --> 
<item> 
    <shape> 
     <padding 
       android:top="1dp" 
       android:right="1dp" 
       android:bottom="1dp" 
       android:left="1dp"/> 
     <solid android:color="#00CCCCCC"/> 
    </shape> 
</item> 
<item> 
    <shape> 
     <padding 
       android:top="1dp" 
       android:right="1dp" 
       android:bottom="1dp" 
       android:left="1dp"/> 
     <solid android:color="#10CCCCCC"/> 
    </shape> 
</item> 
<item> 
    <shape> 
     <padding 
       android:top="1dp" 
       android:right="1dp" 
       android:bottom="1dp" 
       android:left="1dp"/> 
     <solid android:color="#20CCCCCC"/> 
    </shape> 
</item> 
<item> 
    <shape> 
     <padding 
       android:top="1dp" 
       android:right="1dp" 
       android:bottom="1dp" 
       android:left="1dp"/> 
     <solid android:color="#30CCCCCC"/> 
    </shape> 
</item> 
<item> 
    <shape> 
     <padding 
       android:top="1dp" 
       android:right="1dp" 
       android:bottom="1dp" 
       android:left="1dp"/> 
     <solid android:color="#50CCCCCC"/> 
    </shape> 
</item> 

<item> 

    <shape android:shape="rectangle"> 
     <stroke android:color="#CCC" android:width="1dp"/> 
     <solid android:color="#FFF" /> 
     <corners android:radius="2dp" /> 

    </shape> 

</item> 

he encontrado esto en: http://www.uifuel.com/android-creating-a-drop-shadow-in-xml-layout/

+0

Gracias, Joakim. Encontré que esto es muy útil. – BruceHill

130

después de mucha búsqueda, finalmente conseguí este

enter image description here

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

<!-- Bottom 2dp Shadow --> 
<item> 
    <shape android:shape="rectangle"> 

     <solid android:color="#d8d8d8" /> 
     <corners android:radius="7dp" /> 

    </shape> 
</item> 

<!-- White Top color --> 
<item android:bottom="3px"> 

    <shape android:shape="rectangle"> 

    <solid android:color="#FFFFFF" /> 
    <corners android:radius="7dp" /> 


    </shape> 

</item> 


</layer-list> 
+1

genial ... buen trabajo –

+1

Realmente lo necesito, ¡muchas gracias! – Eddy

+0

Eso es exactamente lo que estaba buscando. Perfecto. – daVe

35

Esta es mi versión de una gota de sombra. Iba a buscar una sombra nebulosa alrededor de la forma y utilicé this answer como Joakim Lundborg como mi punto de partida. Lo que he cambiado es agregar esquinas a todos los elementos sombreados y aumentar el radio de la esquina para cada elemento sombreado subsiguiente. Así que aquí es la xml:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- Drop Shadow Stack --> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#02000000" /> 
      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#05000000" /> 
      <corners android:radius="7dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#10000000" /> 
      <corners android:radius="6dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#15000000" /> 
      <corners android:radius="5dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#20000000" /> 
      <corners android:radius="4dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#25000000" /> 
      <corners android:radius="3dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape> 
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" /> 
      <solid android:color="#30000000" /> 
      <corners android:radius="3dp" /> 
     </shape> 
    </item> 

    <!-- Background --> 
    <item> 
    <shape> 
      <solid android:color="#0099CC" /> 
     <corners android:radius="3dp" /> 
    </shape> 
    </item> 
</layer-list> 
+0

Gracias. Esta es la mejor respuesta. da una bonita sombra borrosa. –

+0

Casi de acuerdo, esta solución da un buen resultado – Sergey

2

enter image description here

<?xml version="1.0" encoding="utf-8"?> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" > 

     <solid android:color="@android:color/white" > 
     </solid> 

     <stroke 
      android:width="1dp" 
      android:color="@color/LightGrey" > 
     </stroke> 

     <padding 
      android:bottom="5dp" 
      android:left="2dp" 
      android:right="2dp" 
      android:top="5dp" > 
     </padding> 

     <corners 
      android:bottomLeftRadius="20dp" 
      android:bottomRightRadius="20dp" 
      android:radius="12dp" 
      android:topLeftRadius="20dp" 
      android:topRightRadius="20dp" /> 

     <gradient 
      android:angle="90" 
      android:centerColor="@android:color/white" 
      android:centerY="0.2" 
      android:endColor="#99e0e0e0" 
      android:startColor="@android:color/white" 
      android:type="linear" /> 

    </shape> 
3

vieja pregunta, pero Elevación, disponible con el diseño de materiales proporciona ahora una sombra a cualquier punto de vista.

<TextView 
android:id="@+id/myview" 
... 
android:elevation="2dp" 
android:background="@drawable/myrect" /> 

Consulte los documentos en https://developer.android.com/training/material/shadows-clipping.html

+0

Gracias hombre, tanto útil y fácil. Eso es lo que estoy buscando. – aul

+0

¡HEh/esta respuesta necesita estar en la cima, hombre! Las personas todavía son dumm y usan el método antiguo para resolver esta sombra personalizada – Sergey

Cuestiones relacionadas