Styling

Add colours and styles to reflect your brand

You can apply a new look by changing the colour of certain parts of the UI to highlight your brand colours.

Specify a new theme in your styles.xml file, you can now edit the style of the elements you will like to style e.g Dropdown button, ensure you extend the parent style before editing

<style name="CustomBrandTheme" parent="DataBeaverTheme.NoActionBar">
        <item name="colorPrimary">@android:color/holo_green_light</item>
        <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
        <item name="colorAccent">@android:color/black</item>
        <item name="UnselectedColor">#25689F38</item> 
</style>

Ensure you specify the UnselectedColor, this will be used in surfaces such as dropDown button background colour, multiple and single selection background etc..

The default styles of other elements are good enough but to add your own custom style extend the style you want to change then add the changes you want

<style name="CustomDropDownStyle" parent="DataBeaverTheme.DropDownButton">
    <item name="backgroundTint">#7B1FA2</item>
</style>

The code block above changes the backgroundTint of the default dropDownButton by extending the parent dropdown style, before changing the backgroundTint view attribute, the next step is to add this style as part of the parent custom theme

<style name="CustomBrandTheme" parent="DataBeaverTheme.NoActionBar">
        <item name="colorPrimary">@android:color/holo_green_light</item>
        <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
        <item name="colorAccent">@android:color/black</item>
        <item name="UnselectedColor">#25689F38</item> 
        <item name="DropDownStyle">@style/CustomDropDownStyle</item>
</style>

Other elements you can extend and write custom styles for are

<style name="CustomBrandTheme" parent="DataBeaverTheme.NoActionBar">
    <item name="colorPrimary">@android:color/holo_green_light</item>
    <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
    <item name="colorAccent">@android:color/black</item>
    <item name="DropDownStyle">@style/CustomDropDownStyle</item>
    
    <!-- Custom style -->
    <item name="UnselectedColor">#25689F38</item>
    <item name="DropDownStyle">@style/CustomDropDownStyle</item>

    <!--Other styles attibutes you can change and their default values -->
    <item name="CardBackgroundStyle">@style/CardBackgroundStyle</item>
    <item name="DataBeaverText">@style/dataBeaverText</item>
    <item name="DataBeaverSubTitleText">@style/dataBeaverText.SubTitle</item>
    <item name="DataBeaverFormsIcon">@style/dataBeaverFormsIcon</item>
    <item name="DataBeaverCardView">@style/dataBeaverCardView</item>
    <item name="DataBeaverTitleText">@style/dataBeaverText.Title</item>
</style>

Adding the style to the SDK

You can add a custom theme to the SDK by calling withTheme method in the DataBeaverSdkSettings object

val sdk = DataBeaverSDK(this)
    .configure(DataBeaverSdkSettings().apply {
        
        //FormData -> json string
        setFormData(formData)//(Mandatory)
        
        //Title to be displayed on the appbar/toolbar
        setTitle("Form Title")//(Optional)
        
        //Adding a custom theme
        withTheme(R.style.CustomBrandTheme)//(Optional)
        
    })