Plugin not working with Ionic

[jjimenezlopez]

Hi,

first of all, thanks for the plugin, I've been looking for this for a while :+1:

I'm trying to use it in an Ionic project, but it doesn't work. The strange thing is, that when I run the application the status bar is black, but if I open the Chrome inspect to debug the application, at that moment the status bar gets transparent.

I am using it like so:

            $ionicPlatform.ready(function() {
                if(window.cordova) {
                    if (window.cordova.plugins.Keyboard) {
                        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                    }

                    screen.lockOrientation('portrait');
                }

                if (window.statusbarTransparent) {
                    console.log('****** ionic ready ******');
                    statusbarTransparent.enable();
                }
            });

The code is being run because if I run adb logcat I can see the "ionic ready" message.

I have tried it using Android 5.0.2 in a real device, and using an emulator with 4.4.2, with the same result.

Thanks!

[ihadeed]

I'm having the same issue right now.. Testing on Nexus 5 with Android 6.

Seems like it only becomes transparent when you open debugging tools as you said, or click on any text/number input to pull up the keyboard.

[MT--]

@ihadeed +1, I have the same setup for testing. I am getting the same results.

[aegliv]

Add cordova.getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); before Line 21 in StatusbarTransparent.java

That solved it for me

[ibilalkhilji]

I having the same issue @aegliv I follow your fix but it won't work for me can you please send me complete plugin

[JijeshP]

@ihadeed @aegliv @kbinfo4u its working but its translucent not transparent, checking on android 6.0.1 - Nexus 5

[ibilalkhilji]

Can I have a shot of it?

[JijeshP]

@kbinfo4u This is what i'm getting, but i wanted to make it transparent ( 0% ).

Thanks for your help!

[ibilalkhilji]

But I don't get like this

[JijeshP]

@kbinfo4u are you getting Transparent Statusbar ?

[ibilalkhilji]

@Jijeshp920 can you please send me complete plug in files

[ibilalkhilji]

@Jijeshp920, I am getting it when I open usb debugging using Chrome or when the keyboard is visible until it won't transparent

[ihadeed]

FYI I had this same issue and I just added an extra padding to the navbar to fix it. On May 9, 2016 6:13 AM, "Jijeshp920" notifications@github.com wrote:

[image: screen shot 2016-05-09 at 2 10 21 pm] https://cloud.githubusercontent.com/assets/12369049/15110078/eb060828-15ef-11e6-92d5-4dd93ea5e53a.png

@kbinfo4u https://github.com/kbinfo4u This is what i'm getting, bur i wanted to make it transparent ( 0% ).

Thanks for your help!

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-217826869

[JijeshP]

@ihadeed i can fix that, but my issue is that translucent bar, i want to make it 0% Opacity

[ihadeed]

Oh I see.

AFAIK you can only get that on Android devices since that is default UI. Your other option is to set your app to be full screen but in that case you would get rid of the status bar completely. On May 9, 2016 1:47 PM, "Jijeshp920" notifications@github.com wrote:

@ihadeed https://github.com/ihadeed i can fix that, but my issue is that translucent bar, i want to make it 0% Opacity

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-217936357

[ihadeed]

Update: there is another style that I'm aware of which gives you a little gradient at the top instead of a solid 10% tint. You might have some luck getting that by modifying this plugin. On May 9, 2016 1:51 PM, "Ibrahim Hadeed" ibby93@gmail.com wrote:

Oh I see.

AFAIK you can only get that on Android devices since that is default UI. Your other option is to set your app to be full screen but in that case you would get rid of the status bar completely. On May 9, 2016 1:47 PM, "Jijeshp920" notifications@github.com wrote:

@ihadeed https://github.com/ihadeed i can fix that, but my issue is that translucent bar, i want to make it 0% Opacity

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-217936357

[JijeshP]

@ihadeed can you share me that ?

[ibilalkhilji]

Heyy frnds can please share me your plug-ins

[JijeshP]

@kbinfo4u i'm using the same plugin https://github.com/ekuwang/cordova-plugin-statusbar

[ibilalkhilji]

@Jijeshp920 I not getting results as is should to be so I am two shot with my post This is when keyboard is not visible or no developer tools open

and this when keyboard is visible or developer tools is open I don't why this problem coming to me can please guide me for the same

[JijeshP]

@kbinfo4u

Remove the Plugin and use Custom theme

android:name="MainActivity" android:theme="@style/Custom"

values/custom.xml `<?xml version="1.0" encoding="utf-8"?>

` Hope this will solve your issue.

[ibilalkhilji]

@Jijeshp920 It won't work for me please help me Still it showing like that [ screenshot is old ] but problem is as it same.

[JijeshP]

@kbinfo4u What is your android version ?

[ibilalkhilji]

@Jijeshp920 5.4.1 (cordova-lib@6.1.1)

[JijeshP]

please check on a 6.0 emulator

[ibilalkhilji]

6.0 Emulator means?? I have CM13 OS on my Device based on Android 6.0 Marshmallow

[JijeshP]

I should work on that, can you please send me the manifest and custom style xml

Sent from my Nexus On 10-May-2016 10:43 AM, "kbinfo4u" notifications@github.com wrote:

6.0 Emulator means?? I have CM13 OS on my Device based on Android 6.0 Marshmallow

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-218071983

[ibilalkhilji]

Yeah sure why not please fix the issue platforms/android/AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.khaleejinfotech.jansahyog" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:screenOrientation="portrait" android:theme="@style/Custom" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:exported="true" android:name="com.adobe.phonegap.push.PushHandlerActivity" />
        <receiver android:name="com.adobe.phonegap.push.CordovaGCMBroadcastReceiver" android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
                <category android:name="com.khaleejinfotech.jansahyog" />
            </intent-filter>
        </receiver>
        <service android:name="com.adobe.phonegap.push.GCMIntentService" />
    </application>
    <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
    <permission android:name="com.khaleejinfotech.jansahyog.permission.C2D_MESSAGE" android:protectionLevel="signature" />
    <uses-permission android:name="com.khaleejinfotech.jansahyog.permission.C2D_MESSAGE" />
</manifest>

platforms/android/res/values/custom.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Custom" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

[ibilalkhilji]

@Jijeshp920 I checked my project again and I found that there is a additional statusbar plugin and when I removed it and tried your menifest settings it worked for but when I click on Hardware back key, Unfortunately app stopped error came to me

[ibilalkhilji]

@Jijeshp920 I fixed issue coming to me and also I make changes on your given custom style file now my app working fine with translucent status bar but still there is a problem and that is in screenshot please help to me to fix it thanks

changes made to custom.xml <style name="Custom" parent="@android:style/Theme.DeviceDefault.NoActionBar">

[JijeshP]

android:fitsSystemWindows="true"

Try putting this

Sent from my Nexus On 10-May-2016 12:58 PM, "Ammy Khilji" notifications@github.com wrote:

@Jijeshp920 https://github.com/Jijeshp920 I fixed issue coming to me and also I make changes on your given custom style file now my app working fine with translucent status bar but still there is a problem and that is in screenshot please help to me to fix it thanks [image: screenshot_20160510-141349] https://cloud.githubusercontent.com/assets/14019618/15140978/645cf224-16bb-11e6-83f0-cef0285bd63b.png

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-218098603

[ibilalkhilji]

@Jijeshp920 where to put it??

[JijeshP]

@kbinfo4u in manifest

<activity android:fitsSystemWindows="true" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:screenOrientation="portrait" android:theme="@style/Custom" android:windowSoftInputMode="adjustResize">

[ibilalkhilji]

@Jijeshp920 It's not working

[JijeshP]

@kbinfo4u @ihadeed Yes Finally i cracked it 👍

Changed mainactivity.java to

`package com.ionicframework.htdocs701309;

import android.os.Bundle; import org.apache.cordova.*;

import android.os.Build; import android.util.Log; import android.view.Window; import android.graphics.Color; import android.view.View;

public class MainActivity extends CordovaActivity {

  @Override
public void onCreate(Bundle savedInstanceState)
{

    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    //Status bar color, set to whatever opacity/color you want

    getWindow().setStatusBarColor(Color.TRANSPARENT);
}
    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
}

} `

[ibilalkhilji]

@Jijeshp920 does it fix mine issue also? Resize issue? Please help me for that Thanks

[ibilalkhilji]

@Jijeshp920 I am not getting full transparent by this fix and please guide me for Resize when key board is visible

[JijeshP]

You have to remove the plugin and custom styles first

Sent from my Nexus On 10-May-2016 4:27 PM, "Ammy Khilji" notifications@github.com wrote:

@Jijeshp920 https://github.com/Jijeshp920 I am not getting full transparent by this fix and please guide me for Resize when key board is visible

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ekuwang/cordova-plugin-statusbar/issues/1#issuecomment-218142364

[ibilalkhilji]

I have removed plug-ins but still no luck

[ibilalkhilji]

@Jijeshp920 So you mean to say remove custom.xml? It will also fix fitSystemWindows issue?

[ibilalkhilji]

@Jijeshp920 which framework are you using to build cordova applications?

[JijeshP]

@kbinfo4u Ionic

[ibilalkhilji]

It supports routing? Or it similar to onsen.io currently I'm using it but in this customization is to hard but I like it's page effects it's look like a real Andro app or Activity, so ionic does also supports it? Or can you please provide me an example app with it.?

[matheusdavidson]

@JijeshP , i managed to make the transparent bar work, but im having a problem with the padding, statusbar is over ionic toolbar, how did you solve this?

[realdammy]

Has anyone been able to solve this? Part of my header bar still goes into the status bar

[array-addu]

Thanx this also works for me.But it leaves me with this I want it to total transparent.How to do this?

[Neotrixsx]

@JijeshP It's very helpful if you are able share your project with us or create sample project and share with us to know what we done wrong in our app. Please help.

[JijeshP]

@Neotrixsx happy to help you. Please share your sample project with me.

[Neotrixsx]

@JijeshP Sorry for late reply. I created sample project, Please rectify my project https://github.com/Neotrixsx/TransparentStatusbar-Ionic. I am excited to know that what I am doing wrong. Please help me.

[Neotrixsx]

@JijeshP I try your plugin https://github.com/JijeshP/cordova-plugin-statusbar till now I don't get success. Please help.