Theming

Theming enables Digits to adopt the look and feel of your app. By default, Digits will render using the standard Android light theme, but you can customize this by setting your own theme.

Set the Theme

In the activity or fragment that initializes your Digits instance, set the theme.

//Example of setting theme
new Digits.Builder().withTheme(themeId).build();

If the DigitsAuthButton is being used you can set the theme by calling the setAuthTheme method with the desired theme.

//Example of setting theme on DigitsAuthButton
DigitsAuthButton digitsAuthButton = (DigitsAuthButton) findViewById(R.id.auth_button);
digitsAuthButton.setCallback(callback);
digitsAuthButton.setAuthTheme(android.R.style.Theme_Material);

Either method will start the user authentication flow using the Material Dark theme.

../_images/theming-dark1.png

Customize the Theme

The following attributes may be used to theme Digits.

Attribute Effect
android:textColorPrimary Title color
android:textColorSecondary Description text and Term of Services text color
android:windowBackground Background color
android:textColorLink Text link color
android:colorAccent (API 21+) Image color, button color, and widget color
colorAccent (AppCompat v7) Image color, button color, and widget color
dgts__accentColor Image color and button color
dgts__logoDrawable Image to show in the first screen of Auth flow

Examples

Sample Material theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="CustomDigitsTheme" parent="android:Theme.Material.Light">
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorSecondary">@android:color/darker_gray</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:textColorLink">#ff398622</item>
    <item name="android:colorAccent">#ff398622</item>
  </style>
</resources>

If appcompat-v7 is included in your project and the Theme.AppCompat theme is set Digits automatically use activities that extend ActionBarActivity.

Sample AppCompat theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="CustomDigitsTheme" parent="Theme.AppCompat.Light">
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorSecondary">@android:color/darker_gray</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:textColorLink">#ff398622</item>
    <item name="colorAccent">#ff398622</item>
  </style>
</resources>

Note

Image and button color is set by the android:colorAccent or colorAccent attribute in Material or AppCompat themes. This behavior can be overridden using dgts__accentColor attribute.

../_images/theming-custom1.png

Sample Holo theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="CustomDigitsTheme" parent="android:Theme.Holo.Light">
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorSecondary">@android:color/darker_gray</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:textColorLink">#ff398622</item>
    <item name="dgts__accentColor">#ff398622</item>
  </style>
</resources>

Note

EditText can be themed by setting the android:editTextStyle attribute.

../_images/theming-custom2.png