hide and show home button indicator in Capacitor app

Android

To be able to hide the home indicator on Android, you need to update your MainActivity.java file to add the following code:

// ...

import android.os.Build;
import android.os.Bundle;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {


    void fixSafeArea() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            getWindow().setDecorFitsSystemWindows(false);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        fixSafeArea();
    }
    // on resume
    @Override
    public void onResume() {
        super.onResume();
        fixSafeArea();
    }

    // on pause
    @Override
    public void onPause() {
        super.onPause();
        fixSafeArea();
    }
}

And the update styles.xml to add the following code:

        <item name="android:statusBarColor">
            @android:color/transparent
        </item>

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/home-indicator/

Compatibility

Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.

Install

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Then use the following prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-home-indicator` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

bun add @capgo/capacitor-home-indicator
bunx cap sync

API

hide() => Promise<void>

show() => Promise<void>

isHidden() => Promise<{ hidden: boolean; }>

getPluginVersion() => Promise<{ version: string; }>

CSS Variables

You can use --safe-area-inset-bottom to make sure your content is not hidden by the home indicator This variable is injected by the plugin for android. It's useful if you set real fullscreen mode on android. with :

getWindow().setDecorFitsSystemWindows(false);

Credits

This plugin was created originally for Kick.com by Capgo