Text

The text component enables you to use Backpack defined text styles.

Text

Maven Central Class reference Source code

Body

Day Night
Body Text component Body Text component - dark mode

Heading

Day Night
Heading Text component Heading Text component - dark mode

Hero

Day Night
Hero Text component Hero Text component - dark mode

Installation

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

Usage

The Text component can be used in both XML and Kotlin

Example of a text view with heading 4 style in XML


                                                
                                                <net.skyscanner.backpack.text.BpkText
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  android:text="Flights to Edinburgh"
                                                  app:textStyle="heading4" />

Example of a text view with large and emphasized font in Kotlin


                                                
                                                import net.skyscanner.backpack.text.BpkText
                                                
                                                BpkText(context).apply {
                                                   text = 'Flights to Edinburgh'
                                                   textStyle = BpkText.TextStyle.Heading4
                                                }

Theme Props

  • bpkFontFamilyBase
  • bpkFontFamilyEmphasized
  • bpkFontFamilyHeavy

Example


                                                
                                                  <style name="BlueTheme" parent="AppTheme">
                                                    <item name="bpkFontFamilyBase">@font/shadows_into_light</item>
                                                    <item name="bpkFontFamilyEmphasized">@font/shadows_into_dark</item>
                                                    <item name="bpkFontFamilyHeavy">@font/shadows_into_light_heavy</item>
                                                  </style>