hide and show home button indicator in Capacitor app
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 android.os.Handler;
import android.view.WindowInsets;
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>npm install @capgo/home-indicator
npx cap synchide() => Promise<void>Hide the home indicator.
Since: 0.0.1
show() => Promise<void>Show the home indicator.
Since: 0.0.1
isHidden()
isHidden() => Promise<{ hidden: boolean; }>Get the home indicator status.
Returns: Promise<{ hidden: boolean; }>
Since: 0.0.1
getPluginVersion() => Promise<{ version: string; }>Get the native Capacitor plugin version
Returns: Promise<{ version: string; }>
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);