All Products
Search
Document Center

Custom navigation bar

Last Updated: Mar 11, 2021

The mini program supports navigation bar customization, you can customize the style of the navigation bar, such as the position of the title, the style of the return button, etc. This article guides you to implement navigation bar customization in mini programs based on the 10.1.68 baseline.

This procedure falls into the following three steps:

  1. Set the navigation bar of the mini program
  2. Set the OptionMenu of the mini program
  3. Run the mini program to view the navigation bar and OptionMenu after setting

Procedure

Set the navigation bar of the mini program

  1. Open Android Studio, find the custom_config.json file under assets > config folder, and add the following code to disable the native navigation bar of the mini program.
    1. {
    2. "value": "NO",
    3. "key": "mp_ta_use_orginal_mini_nagivationbar"
    4. }
  2. In res > drawable folder, add the image resource as shown in the following figure. Click here to download the image resource.
    1
  3. Right click the res > layout folder, select New > XML > Layout XML File, and press Enter key.
    1
  4. Enter the layout file name in Layout File Name, click Finish.
    2
  5. Add the following code in h5_new_title_layout.xml folder to set the layout of the navigation bar.

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <com.alipay.mobile.nebula.view.H5TitleBarFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:id="@+id/titlebar"
    4. android:layout_width="match_parent"
    5. android:layout_height="match_parent">
    6. <LinearLayout
    7. android:id="@+id/il_layout"
    8. android:layout_width="match_parent"
    9. android:layout_height="52dp"
    10. android:layout_gravity="center_vertical">
    11. <ImageView
    12. android:id="@+id/back"
    13. android:layout_width="26dp"
    14. android:layout_height="26dp"
    15. android:layout_gravity="center_vertical"
    16. android:layout_marginLeft="12dp"
    17. android:scaleType="centerInside"
    18. android:src="@drawable/icon_arrow_back" />
    19. <ImageView
    20. android:id="@+id/home"
    21. android:layout_width="26dp"
    22. android:layout_height="26dp"
    23. android:layout_gravity="center_vertical"
    24. android:layout_marginLeft="12dp"
    25. android:scaleType="centerInside"
    26. android:src="@drawable/icon_miniprogram_home"
    27. android:visibility="gone" />
    28. <LinearLayout
    29. android:layout_width="0dp"
    30. android:layout_height="match_parent"
    31. android:layout_weight="1"
    32. android:gravity="center_horizontal"
    33. android:orientation="vertical">
    34. <TextView
    35. android:id="@+id/mainTitle"
    36. android:layout_width="wrap_content"
    37. android:layout_height="match_parent"
    38. android:gravity="center"
    39. android:textColor="@android:color/white"
    40. android:textSize="20sp" />
    41. <TextView
    42. android:id="@+id/subTitle"
    43. android:layout_width="wrap_content"
    44. android:layout_height="match_parent"
    45. android:visibility="visible" />
    46. </LinearLayout>
    47. <FrameLayout
    48. android:id="@+id/options1"
    49. android:layout_width="wrap_content"
    50. android:layout_height="match_parent"
    51. android:visibility="gone">
    52. <ImageView
    53. android:id="@+id/o1image"
    54. android:layout_width="26dp"
    55. android:layout_height="26dp"
    56. android:layout_gravity="center_vertical" />
    57. </FrameLayout>
    58. <LinearLayout
    59. android:id="@+id/options"
    60. android:layout_width="wrap_content"
    61. android:layout_height="match_parent"
    62. android:layout_gravity="center_vertical"
    63. android:layout_marginRight="12dp"
    64. android:orientation="horizontal"
    65. android:visibility="gone" />
    66. </LinearLayout>
    67. </com.alipay.mobile.nebula.view.H5TitleBarFrameLayout>
  6. Create TinyNavigationBar class.
    4
  7. Add the following code in TinyNavigationBar class to customize Title Bar.

    1. public class TinyNavigationBar extends AbsTitleView {
    2. private H5TitleBarFrameLayout content;
    3. private TextView mainTitleView;
    4. private TextView subTitleView;
    5. private View btnBack;
    6. private View optionContainer;
    7. private View options1;
    8. private View btHome;
    9. private Context context;
    10. public TinyNavigationBar(Context context) {
    11. ViewGroup parent = null;
    12. this.context = context;
    13. if (context instanceof Activity) {
    14. parent = (ViewGroup) ((Activity) context).findViewById(android.R.id.content);
    15. }
    16. content = (H5TitleBarFrameLayout) LayoutInflater.from(context).inflate(R.layout.h5_new_title_layout, parent, false);
    17. content.getContentBgView().setColor(context.getResources().getColor(R.color.colorPrimary));
    18. mainTitleView = (TextView) content.findViewById(R.id.mainTitle);
    19. subTitleView = (TextView) content.findViewById(R.id.subTitle);
    20. btnBack = content.findViewById(R.id.back);
    21. btnBack.setOnClickListener(new View.OnClickListener() {
    22. @Override
    23. public void onClick(View v) {
    24. invokePageBackEvent();
    25. }
    26. });
    27. optionContainer = content.findViewById(R.id.options);
    28. btHome = content.findViewById(R.id.home);
    29. int statusBarHeight = H5StatusBarUtils.getStatusBarHeight(context);
    30. content.setPadding(0, statusBarHeight, 0, 0);
    31. btHome.setOnClickListener(new View.OnClickListener() {
    32. @Override
    33. public void onClick(View v) {
    34. invokeHomeClickEvent();
    35. }
    36. });
    37. options1 = content.findViewById(R.id.options1);
    38. options1.setOnClickListener(new View.OnClickListener() {
    39. @Override
    40. public void onClick(View v) {
    41. invokeOptionClickEvent(1, false);
    42. }
    43. });
    44. }
    45. @Override
    46. public int getBackgroundColor() {
    47. return content.getContentBgView().getColor();
    48. }
    49. @Override
    50. public void setBackgroundAlphaValue(int i) {
    51. content.getContentBgView().setAlpha(i);
    52. }
    53. @Override
    54. public void setBackgroundColor(int i) {
    55. if ((i & 0xffffff) == 0xffffff) {
    56. mainTitleView.setTextColor(Color.BLACK);
    57. } else {
    58. mainTitleView.setTextColor(Color.WHITE);
    59. }
    60. content.getContentBgView().setColor(i);
    61. notifyTitleBarChanged();
    62. }
    63. @Override
    64. public String getTitle() {
    65. return mainTitleView.getText().toString();
    66. }
    67. @Override
    68. public void setTitle(String s) {
    69. mainTitleView.setText(s);
    70. }
    71. @Override
    72. public void setSubTitle(String s) {
    73. subTitleView.setText(s);
    74. }
    75. @Override
    76. public void setTitleImage(Bitmap bitmap) {
    77. }
    78. @Override
    79. public TextView getMainTitleView() {
    80. return mainTitleView;
    81. }
    82. @Override
    83. public TextView getSubTitleView() {
    84. return subTitleView;
    85. }
    86. @Override
    87. public void resetTitle() {
    88. content.getContentBgView().setColor(context.getResources().getColor(R.color.colorPrimary));
    89. }
    90. @Override
    91. public void showCloseButton(boolean b) {
    92. }
    93. @Override
    94. public View getContentView() {
    95. return content;
    96. }
    97. @Override
    98. public void showBackButton(boolean b) {
    99. btnBack.setVisibility(b ? View.VISIBLE : View.GONE);
    100. }
    101. @Override
    102. public void showBackHome(boolean b) {
    103. btHome.setVisibility(b ? View.VISIBLE : View.GONE);
    104. }
    105. @Override
    106. public void showOptionMenu(boolean b) {
    107. optionContainer.setVisibility(b ? View.VISIBLE : View.GONE);
    108. options1.setVisibility(b ? View.VISIBLE : View.GONE);
    109. }
    110. @Override
    111. public View getOptionMenuContainer(int i) {
    112. if (i == 1) {
    113. return options1;
    114. }
    115. return optionContainer;
    116. }
    117. @Override
    118. public void setOptionMenu(boolean reset, boolean override, boolean isTinyApp, List<MenuData> menus) {
    119. for (int i = 0; i < 2 && i < menus.size(); i++) {
    120. MenuData menuData = menus.get(i);
    121. if (isTinyApp) {
    122. String iconUrl = menuData.getIcon();
    123. if (!TextUtils.isEmpty(iconUrl)) {
    124. H5ImageUtil.loadImage(iconUrl, new H5ImageListener() {
    125. @Override
    126. public void onImage(Bitmap bitmap) {
    127. ((ImageView)options1.findViewById(R.id.o1image)).setImageBitmap(bitmap);
    128. }
    129. });
    130. }
    131. }
    132. }
    133. }
    134. @Override
    135. public void showTitleLoading(boolean b) {
    136. }
    137. @Override
    138. public View getPopAnchor() {
    139. return optionContainer;
    140. }
    141. }

Set the OptionMenu of the mini program

  1. Right click res > layout folder, select New > XML > Layout XML File, and press Enter key.
    1
  2. Enter Layout File Name, and click Finish.
    6
  3. Add the following code in layout_tiny_right.xml folder to set the layout of OptionMenu area.
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:layout_width="wrap_content"
    4. android:layout_height="match_parent"
    5. android:layout_gravity="center_vertical">
    6. <LinearLayout
    7. android:id="@+id/option_bg"
    8. android:background="#9fffffff"
    9. android:layout_width="wrap_content"
    10. android:layout_height="42dp"
    11. android:layout_gravity="center_vertical"
    12. android:gravity="center_vertical">
    13. <ImageView
    14. android:id="@+id/more"
    15. android:layout_width="26dp"
    16. android:layout_height="26dp"
    17. android:src="@drawable/icon_more"/>
    18. <ImageView
    19. android:id="@+id/close"
    20. android:layout_width="26dp"
    21. android:layout_height="26dp"
    22. android:layout_marginLeft="12dp"
    23. android:src="@drawable/icon_miniprogram_close"/>
    24. </LinearLayout>
    25. </FrameLayout>
  4. Create TinyOptionMenuView class.
    7
  5. Add the following code in TinyOptionMenuView class to customize OptionMenu area.

    1. public class TinyOptionMenuView extends AbsTinyOptionMenuView {
    2. private View container;
    3. private ImageView ivMore;
    4. private View ivClose;
    5. private Context context;
    6. private View bgView;
    7. public TinyOptionMenuView(Context context) {
    8. this.context = context;
    9. ViewGroup parent = null;
    10. if (context instanceof Activity) {
    11. parent = (ViewGroup) ((Activity) context).findViewById(android.R.id.content);
    12. }
    13. container = LayoutInflater.from(context).inflate(R.layout.layout_tiny_right, parent, false);
    14. ivClose = container.findViewById(R.id.close);
    15. ivMore = (ImageView) container.findViewById(R.id.more);
    16. bgView = container.findViewById(R.id.option_bg);
    17. }
    18. @Override
    19. public View getView() {
    20. return container;
    21. }
    22. @Override
    23. public void setOptionMenuOnClickListener(View.OnClickListener onClickListener) {
    24. ivMore.setOnClickListener(onClickListener);
    25. }
    26. @Override
    27. public void setCloseButtonOnClickListener(View.OnClickListener onClickListener) {
    28. ivClose.setOnClickListener(onClickListener);
    29. }
    30. @Override
    31. public void setCloseButtonOnLongClickListener(View.OnLongClickListener onLongClickListener) {
    32. ivClose.setOnLongClickListener(onLongClickListener);
    33. }
    34. @Override
    35. public void onStateChanged(TinyAppActionState state) {
    36. if (state == null) {
    37. ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_more));
    38. } else if (state.getAction().equals(TinyAppActionState.ACTION_LOCATION)) {
    39. ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_miniprogram_location));
    40. }
    41. }
    42. @Override
    43. protected void onTitleChange(final H5TitleView title) {
    44. super.onTitleChange(title);
    45. int color = title.getBackgroundColor();
    46. if ((color & 0xffffff) == 0xffffff) {
    47. bgView.setBackgroundColor(Color.RED);
    48. } else {
    49. bgView.setBackgroundColor(Color.GREEN);
    50. }
    51. }
    52. @Override
    53. public void setH5Page(H5Page h5Page) {
    54. super.setH5Page(h5Page);
    55. // title becomes available from here.
    56. if (getTitleBar().getBackgroundColor() == -1) {
    57. bgView.setBackgroundColor(Color.RED);
    58. }
    59. }
    60. @Override
    61. public void hideOptionMenu() {
    62. }
    63. }
  6. Add the following code in IInitCallback initialization callback of MyApplication class to customize title bar and upper-right configuration bar.

    1. // Customize title bar
    2. MPNebula.setCustomViewProvider(new H5ViewProvider() {
    3. @Override
    4. public H5TitleView createTitleView(Context context) {
    5. // Return custom title
    6. return new TinyNavigationBar(context);
    7. }
    8. @Override
    9. public H5NavMenuView createNavMenu() {
    10. return null;
    11. }
    12. @Override
    13. public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
    14. return null;
    15. }
    16. @Override
    17. public H5WebContentView createWebContentView(Context context) {
    18. return null;
    19. }
    20. });
    21. // Custom upper-right configuration bar
    22. H5Utils.setProvider(TinyOptionMenuViewProvider.class.getName(), new TinyOptionMenuViewProvider() {
    23. @Override
    24. public AbsTinyOptionMenuView createView(Context context) {
    25. return new TinyOptionMenuView(context);
    26. }
    27. });

    8

Run the mini program to view the navigation bar and OptionMenu after setting

  1. Tap Run to run the application on real device.
  2. Tap Hello World! to start up the mini program. The loading page is shown as follows, you can see the customized configuration bar in the upper-right.
  3. Tap the Icon under Basic component, then you can see the the layout of the custom navigation bar in Icon page.