Show only icon in floating action button

user_11011605 0
Viewed 1108

I want to show only my drawable icon in FloatingActionButton (for min 14 API level and higher). I tried with src, background, changed background tint, borderWidth, all kinds of things but nothing helped. Even changing size of my drawable doesn't change its size in display. It is small and surrounded by button background. I want it to be bigger and without background.

PS. don't want to do it with ImageView and lose all functionalities that FloatingActionButton offer.

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:src="@drawable/ic_add_circle"
        app:borderWidth="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
material-components material-components-android floating-action-button android
2 Answers

Try this : 

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/faBtn"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="20dp"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"


    android:src="@drawable/ic_add_circle"

    app:fabCustomSize="@dimen/fabSize"
    app:fabSize="normal"
    app:maxImageSize="@dimen/fabImageSize"

    android:background="@null"
    android:backgroundTint="@null"

    app:backgroundTint="@null"
    app:elevation="0dp"
    android:elevation="0dp"
/>

For the fab to not cast a shadow you need to have an elevation of 0; didn't find any other way.

Have a nice day.

user_90085430

Just use something like:

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab_test"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"

      app:srcCompat="@drawable/baseline_search_24"
      app:tint="@color/selector_button"
      app:backgroundTint="@android:color/transparent"
      app:elevation="0dp"
      app:maxImageSize="@dimen/design_fab_size_mini"
      app:pressedTranslationZ="0dp"
      ../>
  • app:srcCompat to add the icon (instead of android:src)
  • app:backgroundTint define a transparent color for your background
  • app:elevation="0dp" remove the elavation
  • app:pressedTranslationZ="0dp" remove the TranslationZ for the FAB when pressed
  • app:maxImageSize define the max size of the icon. You can use a custom value or standard values as design_fab_size_mini = 40dp or design_fab_size_normal= 56dp
  • app:tint: define the color of your icon. You can use a selector to handle the pressed state.

Something like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/mycolor" android:state_enabled="true" android:state_pressed="true"/>
  <item android:color="@color/myPrimaryColor" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

Normal and pressed state result:

enter image description here enter image description here

user_20165620
Related