How to apply rounded corner to a view based on its width in Android Kotlin

Question

I am working on a custom Progress bar as photos below:

Basically, I created a drawable xml background file:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/jungleGreen"/>
    <corners
        android:bottomLeftRadius="40dp"
        android:topLeftRadius="40dp"/>
</shape>

Then I applied it to the view that I am using:

<View
            android:id="@+id/progress_bar_placeholder_view"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginEnd="45dp"
            android:background="@drawable/background_filled_patronage_progressbar"
            app:layout_constraintTop_toTopOf="parent"/>

It is totally fine and I can achieve scenario 1 and 2, but when the bar is getting closer to the end, how can I programmatically set the rounded corner for the top right and the bottom right part of the view until it looks like in photo 3?

Thanks.

I'm not entirely sure how to do it in raw XML, but you can always draw all 4 rounded corners and apply a clip (rectangle) to remove unwanted part of the drawable. — Pawel, Sep 19 '19 at 21:39
@Pawel can you be more specific? I know there is a way to draw the view's background but unsure how to change corners based on its width? — Long Dao, Sep 19 '19 at 22:02
test something like this view.width - ((view.width)/(n)) change (n) to whatever u want — Elias Fazel, Sep 19 '19 at 22:28

score 4 · Accepted Answer · answered Sep 20 '19 at 05:02

4

try this

    public static void customView(View v, int backgroundColor, int borderColor)
 {
            GradientDrawable shape = new GradientDrawable();
            shape.setShape(GradientDrawable.RECTANGLE);
            shape.setCornerRadii(new float[] { 8, 8, 8, 8, 0, 0, 0, 0 });
            shape.setColor(backgroundColor);
            shape.setStroke(3, borderColor);
            v.setBackground(shape);
        }

Source : How to create android shape background programmatically?

answered Sep 20 '19 at 05:02

Madhav

317
2
12

okay I think I understand how to do it now :) Thanks mate I will give it a try. – Long Dao Sep 20 '19 at 05:27
and if you need kotlin version i can help you with it. – Madhav Sep 20 '19 at 05:29
Tried it and it works fine for me, I converted it to Kotlin and posted it below. Thanks for your help. – Long Dao Sep 21 '19 at 23:37

score 0 · Answer 2 · answered Sep 21 '19 at 23:41

Madhav's solution works for me, so basically I will need to pass in the width of the view, then calculate the corner radius number and put it into gradientDrawable as below:

    private fun setupGraphBackground(view: View, graphWidth: Int) {
            val gradientDrawable = GradientDrawable()
            gradientDrawable.shape = GradientDrawable.RECTANGLE
            gradientDrawable.setColor(resources.getColor(R.color.jungleGreen))
            gradientDrawable.setStroke(0, null)
            gradientDrawable.cornerRadii = floatArrayOf(45f, 45f, 
                graphWidth * calculationRules, graphWidth * calculationRules, 
                graphWidth * calculationRules, graphWidth * calculationRules, 
                45f, 45f)
            view.background = gradientDrawable
        }

Where as calculationRules is the rule I want so that I can get the right radius of the topRight and bottomRight corner.

How to apply rounded corner to a view based on its width in Android Kotlin

2 Answers2