Skip to content

Custom UI Fragment

If you want to implement your own UI with additional components or change the position of buttons or something else, you need to inherit from the FaceUiFragment class. This abstract class contains the following abstract methods:

protected abstract View getSwapCameraButton(@NonNull View view);
protected abstract View getFlashLightButton(@NonNull View view);
protected abstract TextView getNotificationView(@NonNull View view);
protected abstract int getResourceLayoutId();

You must specify your resource layout like this:

@Override
protected int getResourceLayoutId() {
    return R.layout.custom_toolbar_appearance;
}

Info

The Sample Apps page covers a lot of examples and shows the source code for customization ways described in this section.

Don't forget to see the code and check out how it affects the UI!

To use the base functionality, specify the views for the Swap camera button, Flash light button, and the Notification text view. Like this:

private ImageButton mSwapCameraBtn;
private ImageButton mFlashLightBtn;
private ImageButton mCloseBtn;
private NotificationTextView mNotificationTextView;

@Override
protected View getSwapCameraButton(@NonNull View v) {
    mSwapCameraBtn = v.findViewById(R.id.swapCameraButton);
    return mSwapCameraBtn;
}

@Override
protected View getFlashLightButton(@NonNull View v) {
    mFlashLightBtn = v.findViewById(R.id.lightButton);
    return mFlashLightBtn;
}

@Override
protected TextView getNotificationView(@NonNull View v) {
    mNotificationTextView = v.findViewById(R.id.notificationTextView);
    return mNotificationTextView;
}

@Override
protected View getCloseButton(View v) {
    mCloseBtn = v.findViewById(R.id.exitButton);
    return mCloseBtn;
}

Success

If you don't return some buttons, the standard functionality for these buttons won't work.

Back to top