Alon Shlider
Alon Shlider

Reputation: 1298

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

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

Upvotes: 0

Views: 409

Answers (0)

Related Questions