Search code examples
androidauthenticationtwittertwitter-fabrictwitter-digits

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


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 (i.e. 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.


Solution

  • 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.