Implementing Various TitleBar Styles for Hybrid Native+H5 Pages in Android Apps

In hybrid Native+H5 Android development, H5 pages are commonly used to display content, and a standard H5 page consists of a header TitleBar and a WebView content area. The article first outlines the default style (white TitleBar with WebView) and then introduces four specialized TitleBar scenarios.

1. Colored TitleBar : By adding a bgColor parameter to the H5 URL, the client sets the TitleBar background color, adjusts the status bar, and changes the title text and icons to white. The implementation steps are:

Step1: Apply immersive style with transparent status bar and white text.

Step2: Align TitleBar at the bottom and set its height to status bar height plus title height.

Step3: Set the TitleBar background color and update icon/text colors.

Relevant code snippets:

https://nowm.home.ke.com/jinggong/bj/designer_channel?bgColor=C09978

if (!TextUtils.isEmpty(bgColor)) {
    initStatusBar();
    try {
        if (!bgColor.startsWith("#")) {
            bgColor = "#" + bgColor;
        }
        if (mTopView != null) {
            RelativeLayout.LayoutParams topViewParams = (RelativeLayout.LayoutParams) mTopView.getLayoutParams();
            topViewParams.height = topHeight;
            mTopView.setLayoutParams(topViewParams);
            mTitleBar.setLayoutParams(topViewParams);
        }
        mTitleBar.setBackgroundColor(Color.parseColor(bgColor));
        mBtnBack.setImageResource(R.drawable.lib_webview_back_white);
        mTvTitle.setTextColor(Color.WHITE);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

2. Immersive TitleBar : When the H5 URL contains immersive=true, the page adopts a transparent status bar and dynamically changes the TitleBar appearance based on scroll offset. Steps include setting immersive layout, adjusting heights, and listening to WebView scroll events via JsBridge.

https://nowm.home.ke.com/jinggong/bj/product/brand/package_overall?immersive=true&packageId=101584454034

if (TextUtils.equals(targetUrl, URL_GETSCROLLOFFSET)) {
    try {
        int offsetY = Integer.parseInt(targetParams.get("offsetY"));
        H5CallBackManager.getInstance().onGetScrollOffset(offsetY);
        return true;
    } catch (Exception e) {
        CustomErrorManager.upload(CustomErrorManager.EXCEPTION, "jinggong/" + TAG,
                "H5沉浸式传递offsetY类型异常", JsonUtil.toJsonStr(e.toString()));
        e.printStackTrace();
        return false;
    }
}

@Override
public void onGetScrollOffset(int scrollHeight) {
    if (null != getActivity() && !((JsBridgeWebViewActivity) getActivity()).isFront()) {
        return;
    }
    float percent = (float) (scrollHeight) / MAX_HEIGHT_VALUE;
    if (percent > 1) {
        percent = 1;
    }
    if (percent > 0.6) {
        updateTitleStyle(STYLE_WHITE, percent);
        if (!isStatusBarTransparent) {
            isStatusBarTransparent = true;
            StatusBarTintManager statusBarTintManager = new StatusBarTintManager(mActivity);
            statusBarTintManager.setStatusBarWhite();
        }
    } else {
        updateTitleStyle(STYLE_TRANSPARENT, 1 - percent);
        if (isStatusBarTransparent) {
            isStatusBarTransparent = false;
            initStatusBar();
        }
    }
    if (null != titleBg) {
        titleBg.setAlpha(percent);
    }
}

3. Immersive TitleBar + IconTextBtn : Extends the immersive style by adding a combined icon‑text button (e.g., like, collect) on the right side of the TitleBar. The H5 page sends a JSON array describing each button, and the native side creates RightIconTextButton views accordingly.

public class BaseRightButtonBean {
    public String name;
    public String clickUrl;
    public String imageUrl; // non‑immersive icon
    public String immersiveImageUrl; // immersive icon
    public String textHexColor; // non‑immersive text color
    public String immersiveTextColor; // immersive text color
    ...
}

@NonNull
private View createRightIconTextButton(@NonNull final BaseRightButtonBean bean) {
    String scheme = getCurrentUrl();
    String immersive = "false";
    if (!TextUtils.isEmpty(scheme)) {
        final Map<String, String> targetParams = UrlUtil.parseParams(scheme);
        immersive = targetParams != null ? TextUtils.isEmpty(targetParams.get("immersive")) ? "false"
                : targetParams.get("immersive") : "false";
    }
    RightIconTextButton buttonView = new RightIconTextButton(mActivity);
    buttonView.bindData(bean, mImageLoader, immersive);
    return buttonView;
}

The JSON data sent from H5 looks like:

[
  {
    "name":"1",
    "clickUrl":"beikejinggong://postnotification?callback=praiseClicked",
    "imageUrl":"https://image1.ljcdn.com/utopia-file/b7629f177b481c551123bc37cc5b9cdf.png",
    "textHexColor":"#222222",
    "immersiveImageUrl":"https://image1.ljcdn.com/utopia-file/6c66f6eb06b1cad108c85fc8a90b1e.png",
    "immersiveTextColor":"#ffffff"
  },
  {
    "name":"0",
    "clickUrl":"beikejinggong://postnotification?callback=collectionClicked",
    "imageUrl":"https://image1.ljcdn.com/utopia-file/d4a5343b4873759f2bee6f85e99efa58.png",
    "textHexColor":"#222222",
    "immersiveImageUrl":"https://image1.ljcdn.com/utopia-file/2813ade842a5445802143d9db78d2584.png",
    "immersiveTextColor":"#ffffff"
  }
]

Finally, the article notes that after multiple iterations, this WebView container has been encapsulated into a common engine layer and is now used across several Beike apps (home decoration, design, transport, etc.) with stable performance.