Inside Beagle’s library, there is a DesignSystem
class that can be used to personalize the components used on your application.
This class also can map application’s local resources so we can refer to BFF when you build a Server-Driven screen.
Beside the images, Beagle’s Design System can customize:
For Beagle to be able to apply customized styles to components, when they are declared in the application, their parents must refer to each corresponding family. So, to customize the components:
Text
, your style should extend from Widget.AppCompat.TextView
TextInput
, your style should extend from Widget.AppCompat.EditText
Button
, your style should extend from Widget.AppCompat.Button
Toolbar
, your style should extend from Widget.AppCompat.Toolbar
TabView
, your style should extend from Widget.Design.TabLayout
The text components for Beagle Android are totally customizable. To make this change, follow the example below:
<!-- Custom style for textual components. -->
<style name="CustomText" parent="Widget.AppCompat.TextView">
<item name="android:textColor">#000000</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
The input components in Beagle Android are also fully customizable. To make any changes, follow the example below:
<!-- Custom style for textual components. -->
<style name="CustomInput" parent="Widget.AppCompat.EditText">
<item name="android:textColor">@color/colorBlack</item>
<item name="android:background">@drawable/text_input_background</item>
</style>
Like the texts and inputs, the buttons on Beagle Android are fully customizable. To make any changes, follow the example below:
<!-- Custom style for Button components. -->
<style name="CustomButton" parent="Widget.AppCompat.Button">
<item name="android:textColor">#000000</item>
<item name="android:textSize">18sp</item>
<item name="android:textAllCaps">false</item>
<item name="android:background">?attr/selectableItemBackground</item>
</style>
Inside Beagle’s library for Android, the tool bar is part of NavigationBar’s class. To make it properly work on BeagleActivity, you need to inform Beagle which bar will be used on your application.
The bar customization can be done in the moment that it passes through Beagle. Besides these attributes, Toolbar has other four exclusive ones:
drawable
and attributes it to a navigation bar icon on the tool bar.<!-- Custom style for Toolbar components. -->
<style name="CustomToolbar" parent="Widget.AppCompat.Toolbar">
<item name="backgroundColor">@color/colorPrimaryDark</item>
<item name="navigationIcon">?attr/homeAsUpIndicator</item>
<item name="titleTextAppearance">@style/CustomTitleToolbar</item>
<item name="centerTitle">true</item>
</style>
<style name="CustomTitleToolbar" parent="TextAppearance.AppCompat">
<item name="android:textColor">@color/colorPrimary</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
Beagle’s TabView component represents the Android’s TabLayout
and all its visual structure tha can be stylized with the following attributes:
drawable
and attributes it to TabView’s background.drawable
to define icons' colors, being selected or not.<!-- Custom style for TabLayout components. -->
<style name="CustomTab" parent="Widget.Design.TabLayout">
<item name="tabSelectedTextColor">@color/colorWhite</item>
<item name="tabTextColor">@color/colorBlack</item>
<item name="tabBackground">@color/colorPrimaryDark</item>
<item name="tabIndicatorColor">@color/colorWhite</item>
<item name="tabIconTint">@color/selector_icon_color</item>
</style>
To manage all the selected tabs, we recommend you to use a selector for the tabIconTint
attribute, as in the example below:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_selected="true" />
<item android:color="@android:color/black" />
</selector>
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.