Customisation

Change colors, fonts, buttons

The BAGTAG EBT Framework can be customised to match the airline’s app. See below for a simple example.

The BAGTAG EBT Framework can be customised by creating a Theme object. The Theme object contains design elements like fonts, colors, TextStyles and ButtonStyles. The Theme object contains all your personalized styling. Including the font, custom TextStyles and ButtonStyles.
let theme = Theme()

theme.mainTextColor = #colorLiteral(red: 0.1607843137, green: 0.2196078431, blue: 0.3098039216, alpha: 1)
theme.mainBackgroundColor = #colorLiteral(red: 0, green: 0.631372549, blue: 0.8705882353, alpha: 1)
theme.tintColor = #colorLiteral(red: 0.02352941176, green: 0.4, blue: 0.5529411765, alpha: 1)
theme.mainColor = .white

theme.carrierIcon = UIImage(named: "bagtag_logo")!

let klmNoaLight = "KLMNoa-Light"
let sfRegular = "SFUIText-Regular"
let sfSemibold = "SFUIText-Semibold"

theme.textStyles = [
    .infoTextBody : TextStyle(alignment: .left, uppercase: false, fontName: sfRegular, fontSize: 14, color: #colorLiteral(red: 0, green: 0.1921568627, blue: 0.2705882353, alpha: 1)),
    .infoTextTitle : TextStyle(alignment: .left, uppercase: false, fontName: klmNoaLight, fontSize: 25, color: #colorLiteral(red: 0.1137254902, green: 0.2588235294, blue: 0.4196078431, alpha: 1)),
    .primaryBody : TextStyle(alignment: .center, uppercase: false, fontName: sfRegular, fontSize: 16, color: #colorLiteral(red: 0.9999960065, green: 1, blue: 1, alpha: 1)),
    .primaryHeader : TextStyle(alignment: .center, uppercase: false, fontName: klmNoaLight, fontSize: 24, color: #colorLiteral(red: 0.9999960065, green: 1, blue: 1, alpha: 1)),
    .input : TextStyle(alignment: .left, uppercase: false, fontName: sfRegular, fontSize: 14, color: #colorLiteral(red: 0, green: 0.1921568627, blue: 0.2705882353, alpha: 1)),
    .inputText : TextStyle(alignment: .left, uppercase: false, fontName: sfRegular, fontSize: 16, color: #colorLiteral(red: 0, green: 0.1921568627, blue: 0.2705882353, alpha: 1)),
    .navigationButton : TextStyle(alignment: .left, uppercase: false, fontName: sfRegular, fontSize: 16, color: .white),
]


let buttonTextStyle = TextStyle(alignment: .center, uppercase: false, fontName: sfSemibold, fontSize: 16, color: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1))

let mainButtonStyle = ButtonStyle(backgroundColor: #colorLiteral(red: 0.02352941176, green: 0.4, blue: 0.5529411765, alpha: 1), textStyle: buttonTextStyle)
let secondaryButtonStyle = ButtonStyle(backgroundColor: #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0),
                                       textStyle: TextStyle(fontSize: 16, fontName: sfSemibold, color: #colorLiteral(red: 0, green: 0.631372549, blue: 0.8705882353, alpha: 1)),
                                       borderColor: #colorLiteral(red: 0, green: 0.63, blue: 0.87, alpha: 1),
                                       borderWidth: 1)
theme.buttonStyles[.primary] = mainButtonStyle
theme.buttonStyles[.secondary] = secondaryButtonStyle

BAGTAGAirlineFramework.shared.theme = theme

Color configuration

The file app/src/main/res/values/colors.xml is used to configure the colors for the interface.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<resources>
    <color name="bagtag_background_secondary">@android:color/white</color>
    <color name="bagtag_button_outline">@color/bagtag_background</color>
    <color name="bagtag_button_outline_ripple">#F2F2F2</color>
    <color name="bagtag_button_primary">#E37222</color>
    <color name="bagtag_progress">@android:color/white</color>
    <color name="bagtag_text_default">@android:color/white</color>
    <color name="bagtag_text_description">#0D3850</color>
    <color name="bagtag_text_error">#E00034</color>
    <color name="bagtag_text_hint_color">#003145</color>
    <color name="bagtag_text_title">#3AABE5</color>

    <color name="bagtag_background">#00A1DE</color>
    <color name="bagtag_color_icontint">@android:color/white</color>
</resources>


Styles

The file app/src/main/res/values/styles.xml is used to configure the style of the elements of the interface.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<resources>

	<style name="Button" parent="Widget.AppCompat.Button">
		<item name="android:textAllCaps">false</item>
		<item name="android:textSize">@dimen/text_size_medium</item>
		<item name="android:fontFamily">@font/font_button</item>
		<item name="android:padding">@dimen/button_padding</item>
	</style>
	<style name="Button.bagtag_button_primary" parent="Button">
		<item name="android:textAllCaps">true</item>
		<item name="android:textColor">@color/bagtag_text_default</item>
		<item name="android:background">@drawable/button_background_primary</item>
	</style>
	<style name="Button.bagtag_button_secondary" parent="Button">
		<item name="android:textColor">@color/bagtag_button_outline</item>
		<item name="android:background">@drawable/button_background_outline</item>
	</style>

	<style name="bagtag_textstyle_h1" parent="Widget.AppCompat.TextView">
		<item name="android:fontFamily">@font/font_header</item>
		<item name="android:lineSpacingExtra">@dimen/line_spacing_large</item>
		<item name="android:lineSpacingMultiplier">0</item>
		<item name="android:textColor">@color/bagtag_text_default</item>
		<item name="android:textSize">@dimen/text_size_large</item>
	</style>
	<style name="bagtag_textstyle_body_infotext" parent="Widget.AppCompat.TextView">
		<item name="android:fontFamily">@font/font_secondary</item>
		<item name="android:lineSpacingExtra">@dimen/line_spacing_medium</item>
		<item name="android:lineSpacingMultiplier">0</item>
		<item name="android:textColor">@color/bagtag_text_description</item>
		<item name="android:textSize">@dimen/text_size_small</item>
	</style>
	<style name="bagtag_textstyle_h1_infotext" parent="Widget.AppCompat.TextView">
		<item name="android:fontFamily">@font/font_header</item>
		<item name="android:textColor">@color/bagtag_text_title</item>
		<item name="android:textSize">@dimen/text_size_extra_large</item>
	</style>
	<style name="bagtag_textstyle_input" parent="Widget.Design.TextInputLayout">
		<item name="errorEnabled">true</item>
		<item name="hintEnabled">true</item>
		<item name="android:textColor">@color/bagtag_text_hint_color</item>
		<item name="android:textColorHint">@color/bagtag_text_hint_color</item>
		<item name="hintTextAppearance">@style/TextInput.Hint</item>
		<item name="android:fontFamily">@font/font_secondary</item>
		<item name="errorTextAppearance">@style/TextInput.Error</item>
	</style>

</resources>

Looks great! What's next?

The BAGTAG EBT Framework supports localisation, and allows you to set the right tone-voice to your passengers.



Any questions about integration? Reach out to integration@bagtag.com

We're here to help

Please fill in your details and we will contact you.