Android
Dibujables
Buscar..
Tintar un dibujo
Un dibujo puede ser teñido de un color determinado. Esto es útil para admitir diferentes temas dentro de su aplicación y para reducir la cantidad de archivos de recursos dibujables.
Usando APIs de framework en SDK 21+:
Drawable d = context.getDrawable(R.drawable.ic_launcher);
d.setTint(Color.WHITE);
Usando la biblioteca android.support.v4 en SDK 4+:
//Load the untinted resource
final Drawable drawableRes = ContextCompat.getDrawable(context, R.drawable.ic_launcher);
//Wrap it with the compatibility library so it can be altered
Drawable tintedDrawable = DrawableCompat.wrap(drawableRes);
//Apply a coloured tint
DrawableCompat.setTint(tintedDrawable, Color.WHITE);
//At this point you may use the tintedDrawable just as you usually would
//(and drawableRes can be discarded)
//NOTE: If your original drawableRes was in use somewhere (i.e. it was the result of
//a call to a `getBackground()` method then at this point you still need to replace
//the background. setTint does *not* alter the instance that drawableRes points to,
//but instead creates a new drawable instance
Tenga en cuenta que int color
no se refiere a un recurso de color, sin embargo, no está limitado a los colores definidos en la clase 'Color'. Cuando tenga un color definido en su XML que desee utilizar, primero debe obtener su valor.
Puede reemplazar los usos de Color.WHITE
utilizando los métodos a continuación
Al apuntar a las API más antiguas:
getResources().getColor(R.color.your_color);
O en nuevos objetivos:
ContextCompat.getColor(context, R.color.your_color);
Hacer ver con esquinas redondeadas
Crear el archivo llamado estirable con custom_rectangle.xml en la carpeta dibujable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@android:color/white" />
<corners android:radius="10dip" />
<stroke
android:width="1dp"
android:color="@android:color/white" />
</shape>
Ahora aplique el fondo del rectángulo en la vista :
mView.setBackGround(R.drawlable.custom_rectangle);
Captura de pantalla de referencia:
Vista circular
Para una Vista circular (en este caso, TextView
) cree un round_view.xml drawble en la carpeta drawble :
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FAA23C" />
<stroke android:color="#FFF" android:width="2dp" />
</shape>
Asigna el dibujo a la vista:
<TextView
android:id="@+id/game_score"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/round_score"
android:padding="6dp"
android:text="100"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center" />
Ahora debería verse como el círculo naranja:
Dibujo personalizable
Amplíe su clase con Drawable y anule estos métodos
public class IconDrawable extends Drawable {
/**
* Paint for drawing the shape
*/
private Paint paint;
/**
* Icon drawable to be drawn to the center of the shape
*/
private Drawable icon;
/**
* Desired width and height of icon
*/
private int desiredIconHeight, desiredIconWidth;
/**
* Public constructor for the Icon drawable
*
* @param icon pass the drawable of the icon to be drawn at the center
* @param backgroundColor background color of the shape
*/
public IconDrawable(Drawable icon, int backgroundColor) {
this.icon = icon;
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(backgroundColor);
desiredIconWidth = 50;
desiredIconHeight = 50;
}
@Override
public void draw(Canvas canvas) {
//if we are setting this drawable to a 80dpX80dp imageview
//getBounds will return that measurements,we can draw according to that width.
Rect bounds = getBounds();
//drawing the circle with center as origin and center distance as radius
canvas.drawCircle(bounds.centerX(), bounds.centerY(), bounds.centerX(), paint);
//set the icon drawable's bounds to the center of the shape
icon.setBounds(bounds.centerX() - (desiredIconWidth / 2), bounds.centerY() - (desiredIconHeight / 2), (bounds.centerX() - (desiredIconWidth / 2)) + desiredIconWidth, (bounds.centerY() - (desiredIconHeight / 2)) + desiredIconHeight);
//draw the icon to the bounds
icon.draw(canvas);
}
@Override
public void setAlpha(int alpha) {
//sets alpha to your whole shape
paint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
//sets color filter to your whole shape
paint.setColorFilter(colorFilter);
}
@Override
public int getOpacity() {
//give the desired opacity of the shape
return PixelFormat.TRANSLUCENT;
}
}
Declara un ImageView en tu diseño
<ImageView
android:layout_width="80dp"
android:id="@+id/imageView"
android:layout_height="80dp" />
Establezca su dibujo personalizable para el ImageView
IconDrawable iconDrawable=new IconDrawable(ContextCompat.getDrawable(this,android.R.drawable.ic_media_play),ContextCompat.getColor(this,R.color.pink_300));
imageView.setImageDrawable(iconDrawable);
Captura de pantalla