Circle Imageview On Toolbar

How can I put a circular image inside a toolbar? I can just the native way toolbar = (Toolbar)findViewById(R.id.toolbarConversa); toolbar.setLogo(imageDrawable); toolba

Solution 1:

You can use a specific library within your xml for this function.

Your Class

toolbar = (Toolbar)findViewById(R.id.toolbarConversa);
//do not need this//toolbar.setLogo(imageDrawable);
toolbar.setTitle(title);
setSupportActionBar(toolbar);

//Get the image from toolbar XMLViewhView=  toolbar.getRootView();
ImageViewimageCicle= hView.findViewById(R.id.myImageontoolbar);
imageUsuarioLateral.setImageDrawable(imageCicle);

Your XML

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/toolbarPrincipal"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/colorPrimary"app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/myImageontoolbar"
    android:padding="5dp"
    android:layout_width="10mm"
    android:layout_height="10mm"
    android:layout_gravity="left"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

Your Gradle

compile'de.hdodenhof:circleimageview:2.1.0'

Solution 2:

You can set circle image view simply using Picasso library:

CircleImageView imageView = (CircleImageView) findViewById(R.id.image);

Picasso.with(getApplicationContext()).load(imageUrl).into(imageView);

dont forget to put dependency in build.gradle:

compile'com.squareup.picasso:picasso:2.4.0'

Solution 3:

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

classAvatarToolbar(context: Context, attributeSet: AttributeSet) : Toolbar(context, attributeSet) {

interfaceOnAvatarClickListener{
    funonAvatarClick()// give listener to your rounded imageview 
}

var avatarClickListener: OnAvatarClickListener? = nullfunaddAvatar(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 databindingval 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)

}

overridefunonLayout(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 clickval 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