Push to Authenticate Confirmation Screens UI Customization

HYPR SDK for Android: Web Authentication

Customize the Authentication Confirmation Screen

When starting an authentication from the web, a prompt is shown on the phone confirming the user wants to perform the authentication.

1080

Customize the screen by customizing the XML or by overriding the class.

XML Override

By creating a layout file with the same name as the one you want to override, the SDK will present that layout file instead.

Create a file called hypr_common_fragment_accept_authentication.xml in <module_name>/srv/main/res/layout using the example file shown here. Once created, you will be able to alter the app's views.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hyprColorWhiteBackground"
    android:orientation="vertical"
    android:weightSum="4">

    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_authentication_account"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/dinot_medium"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_title_text" />

        <TextView
            android:id="@+id/text_authentication_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_subtitle_text" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">

        <TextView
            android:layout_width="@dimen/hypr_common_accept_desc_width"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="@string/hypr_accept_authentication_desc"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_desc_text" />

        <include
            android:id="@+id/button_ok"
            layout="@layout/hypr_common_view_accept_ok"
            android:layout_width="@dimen/hypr_common_accept_button_ok_size"
            android:layout_height="@dimen/hypr_common_accept_button_ok_size"
            android:layout_centerInParent="true" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/button_ok"
            android:gravity="center">

            <com.hypr.hyprandroidcommon.uiadapter.ui.icons.AcceptCancel
                android:id="@+id/button_cancel"
                android:layout_width="@dimen/hypr_common_selection_cancel_button_width"
                android:layout_height="@dimen/hypr_common_selection_cancel_button_height"
                android:layout_centerInParent="true" />

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

Class Override

Outside of UI Customization, you can also add additional functionality to the confirmation fragment. To do this, create a class that extends HyprPushNotificationAcceptAuthenticationFragment; it should look similar to the following example:

public class CustomAcceptAuthenticationFragment extends HyprPushNotificationAcceptAuthenticationFragment {

    @Override
    public int getFragmentLayout() {
        // Optional: If you want to use a different layout file other than the
        // default one, which is: R.layout.hypr_common_fragment_accept_authentication
        return R.layout.layout_that_you_want_to_use;
    }

    @Override
    public void onResume() {
        super.onResume();
        setupButtonConfirm();
        setupButtonCancel();
        displayAccountInfo();
        
        // Any other functionality you want to add
    }

    private void setupButtonConfirm() {
        getView().findViewById(R.id.id_for_confirm_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onOk(getBaseActivity());
            }
        });
    }

    private void setupButtonCancel() {
        getView().findViewById(R.id.id_for_cancel_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onCancel(getBaseActivity());
            }
        });
    }

    private void displayAccountInfo() {
        Activity activity = getBaseActivity();
        try {
            HyprMachineProfileData curMachine = App.getHyprDbAdapter().getCurHyprAppProfileData(activity).getCurHyprUserProfileData().getCurHyprMachineProfileData();
            String machineName = curMachine.getMachineName();
            String machineDisplayName = curMachine.getMachineDisplayName();
            
            // Display account information

        } catch (HyprException e) {
            e.printStackTrace();
        }
    }
}

In the neighboring values directory, create (or append to) overrides.xml; then create a string for hypr_accept_authentication_fragment_class_override that contains the package path to the class:

<resources>
  <string name="hypr_accept_authentication_fragment_class_override">path.to.this.file.CustomAcceptAuthenticationFragment</string>
</resources>

Customize Transaction Confirmation Screen

When starting a step up authentication (transaction) from the web, the following prompt is shown on the phone confirming that the user wants to perform the transaction:

1080

This screen can be customized either by altering the XML or by overriding the class.

XML Override

By creating a layout file with the same name as the one you want to override, the SDK will present that layout file instead.

Create a file called hypr_common_fragment_accept_transaction.xml in <module_name>/src/main/res/layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hyprColorWhiteBackground"
    android:orientation="vertical"
    android:weightSum="4">

    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_transaction_amount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/dinot_medium"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_title_text" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">

        <TextView
            android:id="@+id/text_transaction_question"
            android:layout_width="@dimen/hypr_common_accept_desc_width"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="@string/hypr_accept_transaction_desc"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_desc_text" />

        <include
            android:id="@+id/button_ok"
            layout="@layout/hypr_common_view_accept_ok"
            android:layout_width="@dimen/hypr_common_accept_button_ok_size"
            android:layout_height="@dimen/hypr_common_accept_button_ok_size"
            android:layout_centerInParent="true" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/button_ok"
            android:gravity="center">

            <com.hypr.hyprandroidcommon.uiadapter.ui.icons.AcceptCancel
                android:id="@+id/button_cancel"
                android:layout_width="@dimen/hypr_common_selection_cancel_button_width"
                android:layout_height="@dimen/hypr_common_selection_cancel_button_height"
                android:layout_centerInParent="true" />

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

Class Override

Outside of UI Customization, you can also add additional functionality to the confirmation fragment. To do this, create a class that extends HyprPushNotificationAcceptTransactionFragment. This should look similar to the example file here:

public class CustomAcceptTransactionFragment extends HyprPushNotificationAcceptTransactionFragment {

    @Override
    public int getFragmentLayout() {
        // Optional: If you want to use a different layout file other than the
        // default one, which is: R.layout.hypr_common_fragment_accept_transaction
        return R.layout.layout_that_you_want_to_use;
    }

    @Override
    public void onResume() {
        super.onResume();
        setupButtonConfirm();
        setupButtonCancel();
        displayAccountInfo();
        displayTransactionInfo();
        
        // Any other functionality you want to add
    }

    private void setupButtonConfirm() {
        getView().findViewById(R.id.id_for_confirm_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onOk(getBaseActivity());
            }
        });
    }

    private void setupButtonCancel() {
        getView().findViewById(R.id.id_for_cancel_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onCancel(getBaseActivity());
            }
        });
    }

    private void displayAccountInfo() {
        Activity activity = getBaseActivity();
        try {
            HyprMachineProfileData curMachine = App.getHyprDbAdapter().getCurHyprAppProfileData(activity).getCurHyprUserProfileData().getCurHyprMachineProfileData();
            String machineName = curMachine.getMachineName();
            String machineDisplayName = curMachine.getMachineDisplayName();
            
            // Display account information
            
        } catch (HyprException e) {
            e.printStackTrace();
        }
    }
    
    private void displayTransactionInfo() {
        String transactionType = mFragmentData.getTransactionType();
        String transactionAmount = mFragmentData.getTransactionAmount();
        String transactionText = mFragmentData.getTransactionText();
        
        // Display transaction information
  
    }
}

Inside the neighboring values directory, in overrides.xml, create a string resource for hypr_accept_transaction_fragment_class_override that contains the package path to the class, as in the code sample below:

<resources>
  <string name="hypr_accept_transaction_fragment_class_override">path.to.this.file.CustomAcceptTransactionFragment</string>
</resources>