Android how to add a ronuded border ImageView on AppWidget?

Issue

I am here not for looking how add border to imageView I know 10000 methods.

I am here for how add rounded border ImageView specific on HOME WIDGET.

Since currently I found no way to do this. I have tried:

1. Using xml shape as ImageView background, it works for TextView, but not ImageView;
2. I tried using Glide programatically add rounded border, but that things need a bounch of thing, and I can not make it work.

Here is current code that doesn't work：

import android.appwidget.AppWidgetManager
import android.content.Context
import android.content.SharedPreferences
import android.net.Uri
import android.widget.RemoteViews
import cn.manaai.daybreak.R

import es.antonborri.home_widget.HomeWidgetBackgroundIntent
import es.antonborri.home_widget.HomeWidgetLaunchIntent
import es.antonborri.home_widget.HomeWidgetProvider

import com.bumptech.glide.Glide
import com.bumptech.glide.request.RequestOptions
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation
import com.bumptech.glide.load.resource.bitmap.TransformationUtils
import com.bumptech.glide.load.resource.bitmap.RoundedCorners

class HomeWidgetGlanceProvider : HomeWidgetProvider(), AppCompatActivity {
    // this load a todo widget, showing todos here
    // so the layout here is different.

    override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray, widgetData: SharedPreferences) {
        appWidgetIds.forEach { widgetId ->
            val views = RemoteViews(context.packageName, R.layout.glance_app_widget).apply {
                // Open App on Widget Click
                val pendingIntent = HomeWidgetLaunchIntent.getActivity(
                        context,
                        MainActivity::class.java)
                setOnClickPendingIntent(R.id.widget_container, pendingIntent)

                // Swap Title Text by calling Dart Code in the Background
                setTextViewText(R.id.nickname, widgetData.getString("title", null)
                        ?: "No Title Set")
                val backgroundIntent = HomeWidgetBackgroundIntent.getBroadcast(
                        context,
                        Uri.parse("homeWidgetExample://titleClicked2")
                )
                setOnClickPendingIntent(R.id.nickname, backgroundIntent)

                val message = widgetData.getString("message", null)
                setTextViewText(R.id.todonum, message
                        ?: "12")
                // Detect App opened via Click inside Flutter
                val pendingIntentWithData = HomeWidgetLaunchIntent.getActivity(
                        context,
                        MainActivity::class.java,
                        Uri.parse("homeWidgetExample://message?message=$message"))
                setOnClickPendingIntent(R.id.todonum, pendingIntentWithData)

                var avatar = findViewById(R.id.avatar) as ImageView;
                // avatar
                Glide.with(this).load("http://p15.qhimg.com/bdm/720_444_0/t01b12dfd7f42342197.jpg")
                        .apply(RequestOptions.bitmapTransform(RoundedCorners(20)))
//                        .circleCrop()
                        .into(avatar)

            }

            appWidgetManager.updateAppWidget(widgetId, views)
        }
    }
}

I simplfy want my avatar to be rounded, any idea??

PS: DO NOT SEND ME ANY JAVA CODE. I am using kotlin only.

Solution

You need to make a bitmap from the URL. And pass that bitmap to the function that I made.

    fun createRoundedImage(bitmap: Bitmap): Bitmap {
    val imageRounded =
        Bitmap.createBitmap(bitmap.width, bitmap.height, bitmap.config)
    val canvas = Canvas(imageRounded)
    val paint = Paint()
    paint.isAntiAlias = true
    paint.shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
    canvas.drawRoundRect(
        RectF(0f, 0f, bitmap.width.toFloat(), bitmap.height.toFloat()),
        (bitmap.width / 2).toFloat(),
        (bitmap.height / 2).toFloat(),
        paint
    )
    return imageRounded
}

Now just set the round bitmap returned by the function to your image view.

Answered By - Meet Prajapati