Introduction

In Android Material design, Floating Action Button icon size is controlled separately from the button diameter. Many developers resize the whole button when they only need a larger or smaller icon. The clean fix is to keep standard FAB dimensions and adjust icon rendering through XML attributes or custom drawables.

Understand Button Size Versus Image Size

A regular FAB has predefined dimensions through Material components. Icon size is constrained by image padding and internal limits. If icon appears too small, first verify asset viewport and then set explicit image size.

In XML, use app:maxImageSize on FloatingActionButton:

1<com.google.android.material.floatingactionbutton.FloatingActionButton
2    android:id="@+id/fab"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:src="@drawable/ic_add_custom"
6    app:backgroundTint="@color/teal_700"
7    app:maxImageSize="32dp" />

This keeps the FAB itself standard while allowing a larger icon area.

Use Proper Vector Drawable Viewport

If icon still looks off, the drawable may have a viewport mismatch. A 24 unit viewport with tiny path content can appear undersized even when maxImageSize is larger.

1<vector xmlns:android="http://schemas.android.com/apk/res/android"
2    android:width="24dp"
3    android:height="24dp"
4    android:viewportWidth="24"
5    android:viewportHeight="24">
6    <path
7        android:fillColor="#FFFFFF"
8        android:pathData="M11,5h2v14h-2zM5,11h14v2H5z" />
9</vector>

Keep path geometry proportionate to viewport bounds for consistent sizing.

Programmatic Control in Kotlin

You can set icon size dynamically for responsive layouts or feature flags.

1val fab = findViewById<FloatingActionButton>(R.id.fab)
2
3// Use pixel conversion for runtime sizing
4val sizeDp = 30
5val px = (sizeDp * resources.displayMetrics.density).toInt()
6fab.maxImageSize = px

For icon scale behavior, ensure android:scaleType and drawable intrinsic size are not fighting each other.

Design Consistency Recommendations

Even if larger icons are possible, maintain touch target and visual rhythm across screens. Material guidance favors clear contrast and moderate icon proportions rather than oversized symbols.

When different FAB styles are needed, define style resources instead of hardcoding values repeatedly. This keeps accessibility adjustments and theme changes manageable.

Material Size Variants and Accessibility

Before changing icon size, review whether you should use standard or mini FAB variants. Mini FAB is appropriate for dense layouts, while standard FAB is better for primary screen actions. Icon adjustments should preserve visual contrast and tap target size.

1<com.google.android.material.floatingactionbutton.FloatingActionButton
2    android:id="@+id/fabMini"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    app:fabSize="mini"
6    android:src="@drawable/ic_edit"
7    app:maxImageSize="20dp" />

Keep touch targets at accessible dimensions even if visual icon appears smaller. You can check interaction area using layout inspector tools and accessibility scanner.

Theme Driven Reuse

Define a style for FAB icon sizing when multiple screens use the same scale. This avoids inconsistent values spread across layout files.

1<style name="Widget.App.Fab.Primary" parent="Widget.MaterialComponents.FloatingActionButton">
2    <item name="maxImageSize">28dp</item>
3    <item name="backgroundTint">@color/teal_700</item>
4</style>

Then apply style reference in XML for maintainable design updates.

Common Pitfalls

• Resizing FAB width and height when only icon size needs adjustment.
• Using low quality bitmap assets that blur after scaling.
• Ignoring vector viewport proportions, causing unexpected visual size.
• Applying extreme icon size that reduces internal padding and clarity.
• Setting runtime pixel values without density conversion.

Summary

• FAB diameter and icon size are separate configuration concerns.
• Use app:maxImageSize for direct icon sizing control.
• Validate vector drawable viewport so icon fills expected area.
• Convert dp to pixels when setting size programmatically.
• Keep icon scale consistent with Material design and accessibility goals.
• Prefer style resources for icon sizing to keep visual consistency across feature modules and simplify future design updates.
• Run visual regression checks on multiple densities so icon size decisions remain consistent across low and high resolution devices.