Setting MenuItem icon from URL - Android

Question

I want to set a MenuItem in my ActionBar which leads to the user profile page in my app. I would like the icon for that to be his profile picture for which I have the URL and can create a BitMap out of.

The image isn't stored in my project folder or anywhere locally so I can't pick it up from R.drawable.

Can somebody help me with setting a bitmap created with the URL as the MenuItem icon? Thanks for the help!

Answer 1

You could do something like this to set the icon from a bitmap:

myMenuItem.setIcon(new BitmapDrawable(getResources(), myBitmap));

In your code this would looks a bit like this:

public boolean onCreateOptionsMenu( Menu menu ) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate( R.menu.actionbar, menu );
    userItem = menu.findItem(R.id.userItem);

    Bitmap myBitmap = //get your bitmap
    userItem.setIcon(new BitmapDrawable(getResources(), myBitmap));

    return menu;
}

You'll need to get the file from the URL and turn it into a Bitmap first. Note that this will be slow, since if you are doing this when your app is started, the user will have to wait until the file is downloaded before the app will be shown. If your icon changes infrequently, I'd recommend caching it on the device and reusing the locally stored copy.

Also check the "Changing the menus at runtime" section here.

Answer 2

I was searching for this as well and recently I found it from another stackoverflow answer which I'm giving reference link This one is for JAVA and I'm adding Kotlin code below.

Here is the code for kotlin code: imageUser is Url of image in string format. You should add it your own image url.

Glide.with(this).asBitmap().load(imageUser)
                    .into(object : SimpleTarget<Bitmap?>(150, 100) {
                        override fun onResourceReady(
                            resource: Bitmap,
                            transition: Transition<in Bitmap?>?
                        ) {
                            yourItemIcon.setIcon(BitmapDrawable(resources, resource))
                        }
                    })

Set your item as below inside the. onCreateOptionsMenu

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    val yourItemIcon  = menu!!.findItem(R.id.ic_topic_info)     
  return true

}

For new users: You should also add these lines of code to dependencies the build.gradle in app level for adding Glide library in your app.

implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

Answer 3

Kotlin - Picasso Solution

extension function

fun com.squareup.picasso.Target.picassoLoad(url: String, resources: Resources): com.squareup.picasso.Target {
    Picasso.get().load(url)
            .resize(resources.getDimension(R.dimen.menuIconSize).toInt(),
                    resources.getDimension(R.dimen.menuIconSize).toInt())
            .into(this)
    return this
}

in your activity (note that you need to keep a strong reference on target to work)

private var target : com.squareup.picasso.Target? = null

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.basemenu, menu)

    menu.findItem(R.id.menu_you_want)?.let { menuItem ->

        target = object : com.squareup.picasso.Target {
            override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                menuItem.setIcon(R.drawable.fallback_image)
            }

            override fun onBitmapFailed(e: java.lang.Exception?, errorDrawable: Drawable?) {
                menuItem.setIcon(R.drawable.fallback_image)
            }

            override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
                menuItem.icon = BitmapDrawable(resources, CircleTransform.getCroppedBitmap(bitmap!!))
            }

        }.picassoLoad(url, resources)
    }

    return super.onCreateOptionsMenu(menu)
}

and circletransform class

class CircleTransform : Transformation {
    private var x: Int = 0
    private var y: Int = 0

    override fun transform(source: Bitmap): Bitmap {
        val size = Math.min(source.width, source.height)

        x = (source.width - size) / 2
        y = (source.height - size) / 2

        val squaredBitmap = Bitmap.createBitmap(source, x, y, size, size)
        if (squaredBitmap !== source) source.recycle()
        val bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)

        val canvas = Canvas(bitmap)
        val paint = Paint()
        val shader = BitmapShader(squaredBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        paint.shader = shader
        paint.isAntiAlias = true

        val r = size / 2f
        canvas.drawCircle(r, r, r, paint)

        squaredBitmap.recycle()
        return bitmap
    }


    override fun key() = "circle(x=$x,y=$y)"

    companion object {
        fun getCroppedBitmap(bitmap: Bitmap): Bitmap {
            val output = Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888)
            val canvas = Canvas(output)

            val color = -0xbdbdbe
            val paint = Paint()
            val rect = Rect(0, 0, bitmap.width, bitmap.height)

            paint.isAntiAlias = true
            canvas.drawARGB(0, 0, 0, 0)
            paint.color = color
            canvas.drawCircle(bitmap.width / 2f, bitmap.height / 2f,
                    bitmap.width / 2f, paint)
            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
            canvas.drawBitmap(bitmap, rect, rect, paint)
            return output
        }
    }
}