Button

Standard

Day	Night

Large

Day	Night

Link

Day	Night

Installation

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

Usage

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

Example of a primary button in XML

                                                
                                                <net.skyscanner.backpack.button.BpkButton
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  android:text="Button"
                                                  app:buttonIconPosition="end"
                                                  app:buttonIcon="@drawable/bpk_long_arrow_right"
                                                  app:buttonType="primary"
                                                  app:buttonLoading="false" />

Example of a primary button in Kotlin

                                                
                                                import net.skyscanner.backpack.button.BpkButton
                                                
                                                BpkButton(context,BpkButton.Type.Primary).apply {
                                                   icon = AppCompatResources.getDrawable(context, R.drawable.bpk_weather)
                                                   iconPosition = BpkButton.END
                                                   text = "Button"
                                                   loading = false
                                                }

Large

Example of a large secondary button in XML

                                                
                                                <net.skyscanner.backpack.button.BpkButton
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  android:text="Button"
                                                  app:buttonIconPosition="end"
                                                  app:buttonIcon="@drawable/bpk_long_arrow_right"
                                                  app:buttonType="primary"
                                                  app:bpkButtonSize="large"
                                                  app:buttonLoading="false" />

Example of a large secondary button in Kotlin

                                                
                                                import net.skyscanner.backpack.button.BpkButton
                                                
                                                BpkButton(context, BpkButton.Type.Secondary, size = BpkButton.Size.Large).apply {
                                                   icon = AppCompatResources.getDrawable(context, R.drawable.bpk_weather)
                                                   iconPosition = BpkButton.END
                                                   text = "Button"
                                                   loading = false
                                                }

Icon

The icon prop only supports VectorDrawables or BitmapDrawables. If you provide a different drawable make sure its size is 16dp.

Theme Props

• buttonBackground
• buttonTextColor

BpkButton accepts the above themeable attributes for the following styles

• bpkButtonPrimary
• bpkButtonSecondary
• bpkButtonDestructive
• bpkButtonPrimaryOnDark
• bpkButtonPrimaryOnLight
• bpkButtonFeatured

Example

                                                
                                                  <style name="BlueTheme" parent="AppTheme">
                                                    <item name="bpkButtonPrimary">@style/BlueButton</item>
                                                  </style>
                                                
                                                  <style name="BlueButton">
                                                    <item name="buttonBackground">@color/bpkSkyBlueShade03</item>
                                                    <item name="buttonTextColor">@color/bpkSkyGrayTint05</item>
                                                  </style>

Check theming for more information.