tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module

Mini Program Navigation Bar Icons

PDF
Focus Mode
Font Size
Last updated: 2025-07-04 17:33:27

Customize the navigation bar buttons

1. Back button

The default style of the Back button is as follows:

The Mini Program SDK allows you to customize the Back button by overriding the navBarBackRes method in AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. 1 for black title, 0 for white title.
Method return value: The icon resource ID of the Back button.
/**
* Customizes the Back button icon on the navigation bar. The required size is 24 × 43 pixels.
* Calling environment: Subprocess
*
* @param mode - Navigation bar title color. 1 for black title, 0 for white title.
* @return
*/
@DrawableRes
int navBarBackRes(int mode);
Note:
The size of the Back button icon resource is required to be 24 × 43 pixels.
Example:
@Override
public int navBarBackRes(int mode) {
if(mode == 0) {//black
return R.drawable.back_icon;//your black icon res
}else {//white
return R.drawable.white_icon;//your white icon res
}
}

2. Home button

The default style of the Home button is as follows:

The Mini Program SDK allows you to customize the Home button by overriding the homeButtonRes method in AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. 1 for black title, 0 for white title.
Method return value: The icon resource ID of the Home button.
/**
* Customizes the Home button icon on the navigation bar. The required size is 48 × 48 pixels.
* Calling environment: Subprocess
*
* @param mode - Navigation bar title color. 1 for black title, 0 for white title.
* @return
*/
@DrawableRes
int homeButtonRes(int mode);
Note:
The size of the Home icon on the navigation bar is required to be 48 × 48 pixels.
Example:
@Override
public int homeButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.home_black_icon;
}else {
return R.drawable.home_white_icon;
}
}

3. More button

The default style of the More button is as follows:



The Mini Program SDK allows you to customize the More button by overriding the moreButtonRes method in AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. 1 for black title, 0 for white title.
Method return value: The icon resource ID of the More button.
/**
* Customizes the More button icon on the navigation bar.The required size is 80 × 59 pixels.
* Calling environment: Subprocess
*
* @param mode - Navigation bar title color. 1 for black title, 0 for white title.
* @return
*/
@DrawableRes
int moreButtonRes(int mode);
Note:
The size of the More button icon on the navigation bar is required to be 80 × 59 pixels.
Example:
@Override
public int moreButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.more_black_icon;
}else {
return R.drawable.more_white_icon;
}
}

4. Close button

The default style of the Close button is as follows:

The Mini Program SDK allows you to customize the Close button by the following method.
Customize the Close button:
Override the closeButtonRes method in AbsMiniUiProxy.
The API is defined as follows:
API description:
Method parameter mode: The color of the navigation bar title. 1 for black title, 0 for white title.
Method return value: The icon resource ID of the Close button.
/**
* Customizes the Close button icon on the navigation bar. The required size is 80 × 59 pixels.
* Calling environment: Subprocess
*
* @param mode - Navigation bar title color. 1 for black title, 0 for white title.
* @return
*/
@DrawableRes
int closeButtonRes(int mode);
Note:
The size of the Close button icon on the navigation bar is required to be 80 × 59 pixels.
Example:
@Override
public int closeButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.close_black_icon;
}else {
return R.drawable.close_white_icon;
}
}

5. Capsule button divider line

The default style of the capsule button divider line is as follows:



The Mini Program SDK allows you to the capsule button divider line by overriding the lineSplitBackgroundColor method in AbsMiniUiProxy.
The API is defined as follows:
Method return value:The background color of the divider line.
/**
* The background color of the divider line
* Calling environment: Subprocess
*
* @return
*/
@DrawableRes
int lineSplitBackgroundColor();
Example:
@Override
public int lineSplitBackgroundColor() {
return Color.RED;
}





Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback