Android: ¿sombra en el texto?


184

Me pregunto cómo agregar sombras en el texto en Android.

Tengo el siguiente código que se aplica en un mapa de bits y quería ser sombreado ...

paint.setColor(Color.BLACK);
paint.setTextSize(55);
paint.setFakeBoldText(false);
paint.setShadowLayer(1, 0, 0, Color.BLACK); //This only shadows my whole view...

2
Tenga en cuenta que debe tener un ShadowRadius.

2
Debe marcar la respuesta @fhucho left como la respuesta correcta; Estaba tratando de hacer lo mismo y me lo perdí la primera vez que vi esta publicación, ya que ninguna respuesta se marcó como correcta. La respuesta votada muchas veces es engañosa, ya que no se relaciona con agregar la sombra mediante programación.
areyling

Respuestas:


390

Debería poder agregar el estilo, así (tomado del código fuente de Ringdroid):

  <style name="AudioFileInfoOverlayText">
    <item name="android:paddingLeft">4px</item>
    <item name="android:paddingBottom">4px</item>
    <item name="android:textColor">#ffffffff</item>
    <item name="android:textSize">12sp</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
  </style>

Y en su diseño, use el estilo de esta manera:

 <TextView android:id="@+id/info"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       style="@style/AudioFileInfoOverlayText"
       android:gravity="center" />

Editar: el código fuente se puede ver aquí: https://github.com/google/ringdroid

Edit2: para establecer este estilo mediante programación, haría algo como esto (modificado a partir de este ejemplo para que coincida con los recursos de ringdroid de arriba)

TextView infoTextView = (TextView) findViewById(R.id.info);
infoTextView.setTextAppearance(getApplicationContext(),  
       R.style.AudioFileInfoOverlayText);

La firma de setTextAppearancees

public void setTextAppearance (Contexto contextual, int resid)

Desde: API Nivel 1
Establece el color del texto, el tamaño, el estilo, el color de las sugerencias y el color de resaltado del recurso TextAppearance especificado.


1
¡Pero el OP está pidiendo widgets personalizados!
HRJ

Puede ser, pero no hay nada que sugiera que no pudo usar este método en un ImageView. Asumí que estaba pintando directamente porque no podría resolverlo de otra manera.
Jim Schubert

impresionante ... agrega la profundidad necesaria a la fuente estándar y hace que se vea 10 veces mejor en un fondo sólido.
Matt K


2
Realmente ayudado, pulgares arriba hermano
Saad Bilal

72

Puedes hacer ambos en código y XML. Solo se deben configurar 4 elementos básicos.

  1. color de sombra
  2. Shadow Dx: especifica el desplazamiento del eje X de la sombra. Puede dar valores - / +, donde -Dx dibuja una sombra a la izquierda del texto y + Dx a la derecha
  3. shadow Dy: especifica el desplazamiento del eje Y de la sombra. -Dy especifica una sombra sobre el texto y + Dy especifica debajo del texto.
  4. radio de sombra: especifica cuánto se debe desenfocar la sombra en los bordes. Proporcione un valor pequeño si la sombra debe ser prominente. De lo contrario.

p.ej

    android:shadowColor="@color/text_shadow_color"
    android:shadowDx="-2"
    android:shadowDy="2"
    android:shadowRadius="0.01"

Esto dibuja una sombra prominente en el lado inferior izquierdo del texto. En el código, puede agregar algo como esto;

    TextView item = new TextView(getApplicationContext());
    item.setText(R.string.text);
    item.setTextColor(getResources().getColor(R.color.general_text_color));
    item.setShadowLayer(0.01f, -2, 2,   getResources().getColor(R.color.text_shadow_color));

7
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20dp" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:shadowColor="#000"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="50"
        android:text="Text Shadow Example1"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Text Shadow Example2"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

</LinearLayout>

En el código de diseño XML anterior, textview1 se proporciona con efecto de sombra en el diseño. a continuación se muestran los elementos de configuración

android: shadowDx : especifica el desplazamiento del eje X de la sombra. Puede dar valores - / +, donde -Dx dibuja una sombra a la izquierda del texto y + Dx a la derecha

android: shadowDy : especifica el desplazamiento del eje Y de la sombra. -Dy especifica una sombra sobre el texto y + Dy especifica debajo del texto.

android: shadowRadius : especifica cuánto se debe desenfocar la sombra en los bordes. Proporcione un valor pequeño si la sombra debe ser prominente. android: shadowColor: especifica el color de la sombra


Efecto de sombra en Android TextView pragmáticamente

Use el fragmento de código a continuación para obtener el efecto de sombra en el segundo TextView de forma pragmática.

TextView textv = (TextView) findViewById(R.id.textview2);
textv.setShadowLayer(30, 0, 0, Color.RED);        

Salida:

ingrese la descripción de la imagen aquí


3

Si desea lograr una sombra como la que Android hace en el Iniciador, estamos administrando estos valores. Son útiles si desea crear TextViews que aparecerán como un widget, sin fondo.

android:shadowColor="#94000000"
android:shadowDy="2"
android:shadowRadius="4"

2

Dibuje 2 textos: uno gris (será la sombra) y encima dibuje el segundo texto (coordenada y 1 px más que el texto sombreado).


1
Gracias a todos por sus publicaciones. Lo resolví usando dos objetos de pintura y usando setShadaowLayer en uno de los objetos de pintura.
Grendizer

2
Esto puede verse bien si usa alfa, pero no se verá como la sombra agradable, suave y declarativamente establecida.
ShibbyUK

2
 <style name="WhiteTextWithShadow" parent="@android:style/TextAppearance">
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
    <item name="android:shadowColor">@android:color/black</item>
    <item name="android:textColor">@android:color/white</item>
</style>

luego usar como

 <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            tools:text="Today, May 21"
            style="@style/WhiteTextWithShadow"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.