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:

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


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;

protected View getSwapCameraButton(@NonNull View v) {
    mSwapCameraBtn = v.findViewById(;
    return mSwapCameraBtn;

protected View getFlashLightButton(@NonNull View v) {
    mFlashLightBtn = v.findViewById(;
    return mFlashLightBtn;

protected TextView getNotificationView(@NonNull View v) {
    mNotificationTextView = v.findViewById(;
    return mNotificationTextView;

protected View getCloseButton(View v) {
    mCloseBtn = v.findViewById(;
    return mCloseBtn;


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