I was also looking for the answer to do that i wanted to show circular user avatar in toolbar like whatsapp, but i wanted a really elegant and a reusable solution , i didn't want to put a CircularImageview in toolbar in all layouts where i want this , and found a better solution.
authors of toolbars could provide some attribute like logoCornderRadius but they didn't so we will do the heavy lifting by creating a custom toolbar not providing attribute in this answer but it is really easy.
so i looked at sourcecode of toolbar found a solution or hack whatever you say but i think it is nice
Toolbar is a child to Viewgroup so when you add something to it by default it puts it at the right of the title we just need to change that default and put it before title.
and as you may know the placing of views inside a viewgroup is decided by the onLayout() method so we can take advantage of this , we can extend to toolbar override the onLayout() method and re-layout our CircularImageView that we add programatically, but there is a price since for the first time your CirularImageView will go at default position and again you take it a put at a different position but we need to pay that price if we want to call super.layout() for correct positioning of other views, but we are not inflating any childview and not converting something to bitmap(described below) so this trade is acceptable.
We can't touch logo attribute at all because it is private and a square ImageView, although you can convert your imagefile or png etc to a circular bitmap then make it round BitmapDrawble and then you can use setLogo() method as described here (similar for toolbar) but it looks more complex also the logic is not encapsulated you'll probably do it in activity or fragment bloating their code and you have to take care of many cases , like are you getting the logo from network , is if from a file , or png then covert to bitmap accordingly, so here is my solution
FULLY REUSABLE SOLUTION
class AvatarToolbar(context: Context, attributeSet: AttributeSet) : Toolbar(context, attributeSet) {
interface OnAvatarClickListener {
fun onAvatarClick() // give listener to your rounded imageview
}
var avatarClickListener: OnAvatarClickListener? = null
fun addAvatar(resId: Int) { //you can overload this to take string provide and can use glide to load images from the network , also you can give an attribute for that and use binding adapter to load from network if you use databinding
val avatarImageView = RoundedImageView(context)
avatarImageView.layoutParams = Toolbar.LayoutParams(80, 80) // hardcoding but you can provide an attribute that you can use in xml
avatarImageView.cornerRadius = 150f // same for that
avatarImageView.setImageResource(resId)
avatarImageView.setOnClickListener { avatarClickListener?.onAvatarClick() }
addView(avatarImageView, 0)
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
super.onLayout(changed, l, t, r, b)
val titleView = getChildAt(1) // you can setup click listener on title also , nice right?, in that can provide an interface for that too like i provided for avatar click
val avatarView = getChildAt(0) // your circular imageview
avatarView.layout(
titleView.left - avatarView.width, // put it before the title
0, // top of your imagview is top of toolbar
titleView.left - 10, // left is start to title and some space , again you can give xml attribute for that
height // bottom is also the bottom of toolbar
)
}
provide your own attributes for this custom toolbar like avatarCornerRadius , avatarUrl etc , and encapsulate of fetching and setting the image in toolbar only, activities doesn't need to know how toolbar does that , not providing that code here otherwise answer will be really long but you are welcome to ask in the comments
