To what extent can you customize the flow, look and feel of Fabric's Digits on Android?

Question

I'm investigating how to customize Digits within my app in the following ways:

1. Theming: The documentation show how to change the color theming of the form, but no how to (if possible) change the view layout or add/remove view elements. Can I change the text of the DigitsAuthButton? Another very important example would be to change the functionality of the android os back button.
2. Flow: I'd like to customize the flow of authentication. For example, when a phone number is not valid in my server, the Android user is directed to a new screen (not necessarily a sign up/create account). I would also like to implement custom error handling (ie custom dialogue when the confirmation code is incorrect, etc.)

I'd love feedback from anyone with experience using Digits on if it is the correct tool for what I want to do and, if so, how I would approach these customizations.

Answer 1

You can check out Cannonball Sample project , which is open source. To change the text of the DigitsAuthButton, you can add a customized Digits button by extending the DigitsAuthButton:

public class DigitsRegisterButton extends DigitsAuthButton {
    public DigitsRegisterButton(Context c) {
        super(c);
        init();
    }
    public DigitsRegisterButton(Context c, AttributeSet attrs) {
        super(c, attrs);
        init();
    }

    public DigitsRegisterButton(Context c, AttributeSet attrs, int defStyle) {
        super(c, attrs, defStyle);
        init();
    }

    private void init() {
        if (isInEditMode()) {
            return;
        }

        setBackgroundResource(R.drawable.digits_button_bg);

        // Modifying the text here..
        setText(getResources().getString(R.string.digits_register_text));

        setTextColor(getResources().getColor(R.color.theme_color));
    }
}

And then you can use and customize this inside your layouts as:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.pinchat.pinchat.view.DigitsRegisterButton
        android:id="@+id/signup_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digits_button_bg"
        android:text="@string/digits_register_text"
        android:textColor="@color/theme_color"
        android:textSize="@dimen/digits_register_btn_text"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:drawableStart="@drawable/ic_signin_phone"
        android:drawableLeft="@drawable/ic_signin_phone"/>
</RelativeLayout>

I haven't experimented with the second query of yours. But since the code is open source, you can have a look at it - Digits on GitHub . This repository also has a sample which is worth looking at.

Answer 2

Most easy way to customize the DigitsAuthButtonbutton would be following below:

1. Create a new background image and name it as dgts__digits_btn.png ==> this would replace the bg image of digiAuth button.
2. Change padding around the DigitsAuthButton button by adding tw__login_btn_drawable_padding attribute in dimens.xml
3. Change default DigitsAuthButton button text by adding string entry with name "dgts__login_digits_text" in strings.xml
4. Change text size by adding "tw__login_btn_text_size" in dimens.xml
5. DigitsAuthButton Button padding by adding "tw__login_btn_right_padding" and dimens.xml

Hope this helps.