Programatically change background of Drawable, maintaining the corner radius

Question

interview_timeline_row.xml

<LinearLayout
    android:id="@+id/interviewTimelineIconLayout"
    android:layout_width="52dp"
    android:layout_height="52dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/timeline_row_icon_layout_bg"
    android:gravity="center"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/interviewTimelineRowIcon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:adjustViewBounds="false"
        android:cropToPadding="false"
        android:padding="6dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>

timeline_row_icon_layout_bg.xml

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

    <corners android:radius="@dimen/_50sdp" />

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

    <solid android:color="@color/ic_rescheduled"/> //need to add this programatically

</shape>

InterviewTimeline.java

iconBg = row.findViewById(R.id.interviewTimelineIconLayout);

iconBg.setBackgroundColor(getResources().getColor(R.color.ic_rescheduled)); //this is the wrong way to go about it

I want to use the timeline_row_icon_layout_bg.xml in various places in my app, and it should have a different background color each time. If I use the iconBg.setBackgroundColor() method, then it ignores the radius and I have a square background color.

You can't add something to the resource file programmatically. You can wrap your `ImageView` inside a `CardView` and give a radius and color to that. — OhhhThatVarun, Apr 10 '20 at 16:50

Gabriele Mariotti · Accepted Answer · 2020-04-13T17:50:30.547

Since you are just using the shape to create a layout with rounded corners and a border, the first option is to wrap your LinearLayout inside a CardView and then apply to the card the corner radius, the stroke and the background color.

Otherwise you could use the MaterialShapeDrawable included in the Material Components Library to draw custom shapes.

Just remove from the LinearLayout the android:background:

<LinearLayout
    android:id="@+id/interviewTimelineIconLayout"
    android:layout_width=".."
    android:layout_height="..
    ..>

    <!-- ..... -->

</LinearLayout>

Then in your code you can apply a ShapeAppearanceModel. Something like:

        float radius = getResources().getDimension(R.dimen.corner_radius);

        LinearLayout linearLayout= findViewById(R.id.interviewTimelineIconLayout);
        ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
            .toBuilder()
            .setAllCorners(CornerFamily.ROUNDED,radius)
            .build();

        MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
        //Fill the LinearLayout with your color
        shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.yourColor));
        //Stroke color and width
        shapeDrawable.setStrokeWidth(2.0f);
        shapeDrawable.setStrokeColor(...);

        ViewCompat.setBackground(linearLayout,shapeDrawable);

In this way you easily change and set the color background and the stroke.

score 1 · Answer 2 · answered Apr 10 '20 at 17:48

1

Copy your "timeline_row_icon_layout_bg.xml" file and rename it "timeline_row_icon_layout_bg_new.xml"


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

    <corners android:radius="@dimen/_50sdp" />

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

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

</shape>

And you can set background to layout:

iconBg.setBackgroundResource(R.drawable.timeline_row_icon_layout_bg_new);

answered Apr 10 '20 at 17:48

Dilshod

147
4
12

Appreciate the response but there should be an easier way than this or else I will need to create multiple files in order to give each image a different color background. – Abd Maj Apr 10 '20 at 19:20
First, You set background, which is uses shape resources with radius corners. Then, you are replacing the background to new new layer (color). It will lost rounded corner. You have another choice, use CardView. Put your layout into CardView, and simply add: ``` app:cardBackgroundColor="your_color" app:cardCornerRadius="20dp" ``` – Dilshod Apr 11 '20 at 14:01

Nataraj KR · Answer 3 · 2020-04-11T03:39:54.860

0

set the background of LinearLayout programmatically.

val bgDrawable = resources.getDrawable(R.drawable.timeline_row_icon_layout_bg, null).apply{
    colorFilter = PorterDuffColorFilter(
            ResourcesCompat.getColor(resources, R.color.ic_rescheduled, null),
            PorterDuff.Mode.SRC_IN
        )

}

iconBg.background = bgDrawable

move the shape drawable timeline_row_icon_layout_bg to the drawable resource folder.

edited Apr 11 '20 at 03:39

answered Apr 10 '20 at 16:52

Nataraj KR

1,001
10
22

What is R.drawable.no_data_image? timeline_row_icon_layout_bg.xml is a drawable resource file but above you are calling a color resource file. – Abd Maj Apr 10 '20 at 19:29

Programatically change background of Drawable, maintaining the corner radius

3 Answers3

Linked