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.
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:
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>
Updated 5 months ago