Skip to main content

Floating action button

A floating action button represents the primary action in an application.

Table of contents

Default

(Google Pixel emulator)
(Google Pixel emulator - dark mode)

Implementation

Floating Action Button

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Floating Action Button component can be used in both XML and Kotlin/Java

Example of a Floating Action Button in XML

<net.skyscanner.backpack.fab.BpkFab
  android:layout_width="56dp"
  android:layout_height="56dp"
  android:contentDescription="@string/search"
  android:src="@drawable/bpk_search" />

Example of a Floating Action Button in Kotlin

import net.skyscanner.backpack.fab.BpkFab

BpkFab(context).apply {
  setImageResource(R.drawable.bpk_search)
  setContentDescription(resources.getString(R.string.search))
}

Theme Props

  • fabBackgroundColor
  • fabIconColor

Styles can be changed globally through bpkFabStyle. Check theming for more information.