FloatingActionButton - how to make button have a rounded image and no background?

390 Views Asked by At

I have the following ViewHolder layout -

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/transparent">


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/row_product_page_ghost_floating_action_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginTop="10dp"
        android:alpha="0.5"
        android:background="@color/grey_text_cart"
        android:backgroundTint="@color/grey_text_cart"
        android:elevation="1dp"
        android:scaleType="center"
        android:src="@drawable/user_icon"
        app:backgroundTint="@color/white"
        app:fabCustomSize="50dp"
        app:fabSize="auto"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:maxImageSize="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
override fun onBindViewHolder(holder: ProductPageGhostHolder, position: Int) {
        holder.floatingGhostButton.setOnClickListener {
            listener.onClick(position)
        }

        val jid = models[position].JID
        val roster = VerteDatabaseManager.ROSTER.getRoster(jid)
        if (roster != null && roster.vcard != null) {
            Picasso.get().load(roster.vcard.image).into(holder.floatingGhostButton)
        }
    }

so I want each FloatingActionButton to have it's own image which is rounded to 50px and without any other background. Here is the current result I have in my UI -

As you can see in the second floating bar (which is the one that comes from the RV) the image is not circle like it's background and it's circle background has another background itself also.

How can I fix it?

enter image description here

0

There are 0 best solutions below