CODEWITHSUNDEEP
android
tw-S
tw-S

Reputation: 1217

Draw colored circle around PNG

I am using this PNG in my project (within my resources):

enter image description here

Programmically, I want to achieve this:

  1. Change color to white.
  2. Add a solid-colored circle around the icon.

The result should look to something like this:

enter image description here

The red color has to be changeable dynamically at runtime. How do I achieve this?

Upvotes: 0

Views: 57

Answers (3)

Zee
Zee

Reputation: 1697

  1. Define a drawable that you can use as your background, for example:

    <!--  res/drawable/the_drawable_above.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:padding="10dp">
    <stroke android:width="1dp"
        android:color="@color/colorLightGrey"/>
    <solid
       android:color="@color/colorAccent"/>
</shape>

  2. For your image view:

<ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        app:srcCompat="@drawable/your_image"
        scale_type="fit_center"
        android:tint="@android:color/white"
        android:background="@drawable/the_drawable_above"/>

Upvotes: 0

Saurabh Thorat
Saurabh Thorat

Reputation: 20644

Add this to your XML file:

<ImageView
    android:id="@+id/image_view"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:background="@drawable/circle"
    android:padding="8dp"
    android:src="@drawable/bull_image"
    app:tint="@android:color/white" />

This is circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@android:color/white"/>
</shape>

And to change the background color dynamically:

imageView.backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.your_color))

Upvotes: 2

Simon
Simon

Reputation: 1737

Something like this shoud do the trick (adjust the cardCornerRadius to your liking):

<androidx.cardview.widget.CardView
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/red"
        app:cardCornerRadius="10dp"
        android:layout_width="wrap_content"
        app:cardElevation="0dp">
    
        <ImageView
            android:src="your_image"
            android:tint="@color/white" /> 
</androidx.cardview.widget.CardView>

Upvotes: 0

Related Questions