Android
Drawables

Tint een tekenbaar

Een tekenbaar kan een bepaalde kleur worden gekleurd. Dit is handig voor het ondersteunen van verschillende thema's in uw toepassing en het verminderen van het aantal tekenbare bronbestanden.

Framework-API's gebruiken op SDK 21+:

Drawable d = context.getDrawable(R.drawable.ic_launcher);
d.setTint(Color.WHITE);

Bibliotheek android.support.v4 gebruiken op 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

Houd er rekening mee dat de int color niet verwijst naar een kleurbron, maar u bent niet beperkt tot de kleuren die zijn gedefinieerd in de klasse 'Kleur'. Als u een kleur in uw XML hebt gedefinieerd die u wilt gebruiken, moet u eerst de waarde ervan ophalen.

U kunt het gebruik van Color.WHITE vervangen met behulp van de onderstaande methoden

Bij het targeten van oudere API's:

getResources().getColor(R.color.your_color);

Of op nieuwere doelen:

ContextCompat.getColor(context, R.color.your_color);

Maak weergave met afgeronde hoeken

Maak betekenbare bestand met de naam met custom_rectangle.xml in getekende map:

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

Pas nu de rechthoekachtergrond toe op Weergave :

mView.setBackGround(R.drawlable.custom_rectangle);

Referentie screenshot:

Circulaire weergave

Voor een circulaire weergave (in dit geval TextView ) maakt u een drawble round_view.xml in de map 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>

Wijs het tekenbare aan de weergave toe:

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

Nu zou het eruit moeten zien als de oranje cirkel:

Op maat te tekenen

Breid je klas uit met Drawable en overschrijf deze methoden

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

Verklaar een ImageView in uw lay-out

<ImageView
   android:layout_width="80dp"
   android:id="@+id/imageView"
   android:layout_height="80dp" />

Stel uw eigen tekenbare in op de ImageView

 IconDrawable iconDrawable=new IconDrawable(ContextCompat.getDrawable(this,android.R.drawable.ic_media_play),ContextCompat.getColor(this,R.color.pink_300));
 imageView.setImageDrawable(iconDrawable);

screenshot