{"id":22645398,"url":"https://github.com/heliomarpm/ionic-transparent_statusbar_demo","last_synced_at":"2026-04-14T15:32:00.394Z","repository":{"id":62969324,"uuid":"484831298","full_name":"heliomarpm/ionic-transparent_statusbar_demo","owner":"heliomarpm","description":"Transparent Status Bar Demo with Ionic 3+","archived":false,"fork":false,"pushed_at":"2023-10-17T23:28:16.000Z","size":3074,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T22:06:50.332Z","etag":null,"topics":["android","android-app","cordova","cordova-plugin","ionic","ionic-demo","ionic-framework","ionic-statusbar","ionic3","ionic4","ionic5","ionic6","overlay","overlay-statusbar","statusbar-ionic","transparent-statusbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heliomarpm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"heliomarpm","ko_fi":"heliomarpm","liberapay":"heliomarpm","custom":["https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=USD","https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=BRL"]}},"created_at":"2022-04-23T18:52:15.000Z","updated_at":"2023-10-06T07:18:47.000Z","dependencies_parsed_at":"2025-06-15T21:45:56.281Z","dependency_job_id":"b8b46a66-89af-42ce-bd29-10aaf2d63c5f","html_url":"https://github.com/heliomarpm/ionic-transparent_statusbar_demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/heliomarpm/ionic-transparent_statusbar_demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fionic-transparent_statusbar_demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fionic-transparent_statusbar_demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fionic-transparent_statusbar_demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fionic-transparent_statusbar_demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heliomarpm","download_url":"https://codeload.github.com/heliomarpm/ionic-transparent_statusbar_demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliomarpm%2Fionic-transparent_statusbar_demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31803221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-app","cordova","cordova-plugin","ionic","ionic-demo","ionic-framework","ionic-statusbar","ionic3","ionic4","ionic5","ionic6","overlay","overlay-statusbar","statusbar-ionic","transparent-statusbar"],"created_at":"2024-12-09T06:05:25.073Z","updated_at":"2026-04-14T15:32:00.379Z","avatar_url":"https://github.com/heliomarpm.png","language":"TypeScript","funding_links":["https://github.com/sponsors/heliomarpm","https://ko-fi.com/heliomarpm","https://liberapay.com/heliomarpm","https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=USD","https://www.paypal.com/donate?business=KBVHLR7Z9V7B2\u0026no_recurring=0\u0026currency_code=BRL"],"categories":[],"sub_categories":[],"readme":"# IONIC 3+ Transparent StatusBar Demo\n\nSmall demo of how to make transparent status bar using ionic 3, 4, 5, 6\n\n![Screenshot](https://github.com/heliomarpm/screenshots/blob/main/screenshot-ionic-demo-statusbar-transparent.png?raw=true)\n\n## Get started\n\n* Clone this repository:  `git@github.com:heliomarpm/ionic-transparent-statusbar-demo.git`\n* Run `npm install` from the project root.\n* Run `ionic cordova run android` in a terminal from the project root.\n\n## Transparent statusBar for android\n\n* Run `ionic cordova platform add android` in a terminal\n* On `MainActivity.java` file on Android platform folder`platforms/android/app/src/main/java/.../MainActivity.java`, paste the following code after `super.onCreate(...)`\n\n```java\n...\n\n// packager for statusbar transparent\nimport android.os.Build;\nimport android.view.View;\n\n    ...\n    // enable transparent statusbar\n    if (Build.VERSION.SDK_INT \u003e= Build.VERSION_CODES.KITKAT) {\n        getWindow().getDecorView().setSystemUiVisibility(\n            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE\n        );\n    }\n\n```\n\n* In the file `app.component.ts` in the project folder `src/app/app.component.ts`. Change the background using `.backgroundColorByHexString()`\n\n```javascript\nthis.platform.ready().then(() =\u003e {\n  // #AARRGGBB where AA is an alpha value\n  this.statusBar.backgroundColorByHexString(\"#33000000\");\n\n});\n```\n\n* In the same way. You can set `StatusBarBackgroundColor` in `config.xml` from the project root.\nBut, When you build an Ionic project for IOS platform. You may need to remove it. Pick one you like.\n\n```xml\n\u003cpreference name=\"StatusBarBackgroundColor\" value=\"#33000000\"/\u003e\n```\n\n* Finally, to maintain proper spacing in the title, open the `app.module.ts` file and add the configuration options to `IonicModule.forRoot( ? )`\n\n_for Ionic v3, use_ `{statusbarPadding: true}`\n\n```javascript\nimports [\n  ...\n  IonicModule.forRoot({_forceStatusbarPadding: true})\n]\n```\n\n`MainActivity.java` full file after changes.\n```java\npackage io.ionic.starter;\n\nimport android.os.Bundle;\nimport org.apache.cordova.*;\n\npublic class MainActivity extends CordovaActivity\n{\n    @Override\n    public void onCreate(Bundle savedInstanceState)\n    {\n        super.onCreate(savedInstanceState);\n\n        // enable Cordova apps to be started in the background\n        Bundle extras = getIntent().getExtras();\n        if (extras != null \u0026\u0026 extras.getBoolean(\"cdvStartInBackground\", false)) {\n            moveTaskToBack(true);\n        }\n\n        // Set by \u003ccontent src=\"index.html\" /\u003e in config.xml\n        loadUrl(launchUrl);\n    }\n}\n```\nCredits for `https://github.com/jeneser/ionic-super-bar.git`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliomarpm%2Fionic-transparent_statusbar_demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheliomarpm%2Fionic-transparent_statusbar_demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliomarpm%2Fionic-transparent_statusbar_demo/lists"}