Stay organized with collections Save and categorize content based on your preferences.
By default, Custom Tabs launch as a full-window activity. Starting in Chrome 107, you can use partial Custom Tabs to specify a different launch height in portrait mode such that users can multitask by interacting with your app while viewing web content. Users can expand the Custom Tab to full-screen by dragging the toolbar handle up and restore the initial launch height by dragging the handle down.
Partial Custom Tab in a bottom sheet.For large screens or devices in landscape mode, starting with Chrome 120, you can specify, a maximum launch width to show a partial Custom Tab in a side sheet. By setting a break point, you can decide when to launch a partial Custom Tab in a bottom or a side sheet.
Partial Custom Tab in a side sheet. Key point:CustomTabColorScheme.navigationBarColor
and CustomTabColorScheme.navigationBarDividerColor
properties don't work when building an intent for a partial Custom Tab. This is because they inherit the host app's color scheme for the user interface properties above. You will be responsible for ensuring visual consistency for these properties before launching a Custom Tab.To be able to use partial Custom Tabs you needs to:
start a new browser session using a CustomTabsServiceConnection
and pass it to the Custom Tabs intent or
start the Custom Tab activity using startActivityForResult()
.
Combine both approaches if you want a fast startup in case the service connection has not been established yet.
Configuring the bottom sheetTo turn a Custom Tab into a partial Custom Tab, define the initial launch height in pixels by calling the CustomTabBuilder
class’s setInitialActivityHeightPx()
method. By default, the partial Custom Tab is resizable, but you can pass ACTIVITY\_HEIGHT\_FIXED
to disable this behavior:
new CustomTabsBuilder().setInitialActivityHeightPx(
400,
ACTIVITY_HEIGHT_FIXED
);
Key point: The minimum partial custom tab height is 50% of the screen height. If the screen height is set to a value less than 50% of the screen height, Chrome automatically adjusts the Custom Tab to 50% of the screen height. Configuring the side sheet
To configure the side sheet behavior, define the initial launch width in pixels by calling the CustomTabBuilder
class’s setInitialActivityWidthPx()
method.
By default, the partial Custom Tab is resizable, but you can pass ACTIVITY\_HEIGHT\_FIXED
to disable this behavior:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
.setInitialActivityHeightPx(400)
.setInitialActivityWidthPx(400);
.setActivitySideSheetBreakpointDp(800);
The Custom Tab will behave as a side sheet if the screen's width is bigger than the breakpoint value set by setActivitySideSheetBreakpointDp(). If the screen's width is higher than x
, the Custom Tab will behave as a side sheet, otherwise it will behave as a bottom sheet. If no breakpoint is specified, set the browser implementation should set as default value 840dp
. If x
is set to <600dp
the browser implementation should default it to 600dp
.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setInitialActivityWidthPx(400);
.setActivitySideSheetBreakpointDp(800);
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
Launch a partial Custom Tab via startActivityForResult
private ActivityResultLauncher<String> mCustomTabLauncher = registerForActivityResult(new ActivityResultContract<String, Integer>() {
@Override
public Integer parseResult(int statusCode, @Nullable Intent intent) {
return statusCode;
}
@NonNull
@Override
public Intent createIntent(@NonNull Context context, String url) {
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setInitialActivityWidthPx(400);
.setActivitySideSheetBreakpointDp(800);
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
.setToolbarCornerRadiusDp(10);
Intent customTabsIntent = builder.build().intent;
customTabsIntent.setData(Uri.parse(url));
return customTabsIntent;
}
}, new ActivityResultCallback<Integer>() {
@Override
public void onActivityResult(Integer statusCode) {
// ...
}
});
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
Button selectButton = findViewById(R.id.select_button);
selectButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mCustomTabLauncher.launch(customTabsIntent.intent);
}
});
}
Next up: learn how to measure user engagement in your Custom Tabs.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2023-04-21 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-04-21 UTC."],[],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4