How to make an “image only” floating action button

Question

I have an image as below.

When I use it to make a floating action button, the button looks like this.

I don't want the pink margin. I only want my image to be shown. What should I do?

I also want the size of my image to be the outer circle not the inner one.

Here is my code:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_refresh" />

Answer 1

Have you considered to use only an ImageView ?

<ImageView
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:clickable="true"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_refresh" />

Than in your ActivityMain.java

ImageView v = (ImageView) findViewById(R.id.fab);
v.setOnClickListener(new OnClickListener() {
  public void onClick(View v) {
     // Your code here
  }
});

Or more specifically an ImageButton ?

<ImageButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_refresh" />

Than:

ImageButton v = (ImageButton) findViewById(R.id.fab);
v.setOnClickListener(new OnClickListener() {
  public void onClick(View v) {
     // Your code here
  }
});

Answer 2

Im not sure that this solution as acceptable, but it works;

You can override image size dimension for nested image in FAB. Just add to your dimens file:

<dimen tools:override="true" name="design_fab_image_size">56dp</dimen> (I used 56dp cause fab size in guidelines is 56dp)

tools:override="true" - this is the thing why I suppose that this solution is not good, cause "design_fab_image_size" - is final, and you should insist on overriding :)

Answer 3

Create your own class extends FloatingActionButton and add this lines in the constructor

super(context, attrs);
Method method = getClass().getSuperclass().getDeclaredMethod("getSizeDimension");
method.setAccessible(true);
Object r = method.invoke(this);
Field f = super.getClass().getSuperclass().getDeclaredField("mMaxImageSize");
f.setAccessible(true);
f.set(this, r);

Answer 4

You can simply set the dimension of the icon to 56px in Illustrator/Photoshop. Then make sure you add android:backgroundTint="@android:color/transparent" this to make the fab color transparent.