JamieMany Android applications need to display web pages within the app. Developers typically use WebView or direct users to a browser.
However, WebView can be resource-intensive, and launching an external browser can disrupt the user experience.
A better alternative is using Chrome Custom Tabs, which provide a lightweight and seamless way to open web pages within an app.
Steps to Implement Chrome Tabs in Android
We will integrate Chrome Custom Tabs to open a webpage when a button is clicked. Below is a step-by-step guide using Java.
1. Create a New Project
To begin, set up a new project in Android Studio. Select Java as the programming language.
2. Add Dependency
Open build.gradle (Module: app) and insert the following line in the dependencies section:
implementation ‘androidx.browser:browser:1.2.0’
After adding the dependency, sync the project.
3. Modify activity_main.xml
Go to activity_main.xml and update it with the following layout:
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>
<Button
android:id=”@+id/idBtnCustomChromeTab”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerInParent=”true”
android:text=”Open Chrome Tab” />
</RelativeLayout>
4. Implement Chrome Tabs in MainActivity.java
Update MainActivity.java with the following code:
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import androidx.browser.customtabs.CustomTabsIntent;
import androidx.core.content.ContextCompat;
public class MainActivity extends AppCompatActivity {
Button openChromeTabBtn;
String webpageUrl = “https://www.geeksforgeeks.org/”;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
openChromeTabBtn = findViewById(R.id.idBtnCustomChromeTab);
openChromeTabBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
CustomTabsIntent.Builder customIntent = new CustomTabsIntent.Builder();
customIntent.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.purple_200));
launchChromeTab(MainActivity.this, customIntent.build(), Uri.parse(webpageUrl));
}
});
}
public static void launchChromeTab(Activity activity, CustomTabsIntent customTabsIntent, Uri uri) {
String browserPackage = “com.android.chrome”;
if (browserPackage != null) {
customTabsIntent.intent.setPackage(browserPackage);
customTabsIntent.launchUrl(activity, uri);
} else {
activity.startActivity(new Intent(Intent.ACTION_VIEW, uri));
}
}
}
Summary of Implementation
| Step | Description |
| 1 | Create a new project and select Java |
| 2 | Add the required dependency in build.gradle |
| 3 | Design the UI with a button in activity_main.xml |
| 4 | Implement Chrome Tabs in MainActivity.java |
This method ensures a smoother user experience without the overhead of WebView or redirecting users to an external browser.
