How to add icon (image, logo..) to the status bar - android

I have noticed that there is no props for the StatusBar component (React Native) to include an icon or logo of any kind as in this documentation:
https://facebook.github.io/react-native/docs/statusbar.html#statusbar
I would like for an icon (or even just a small widthxheight square) to appear next to the networks bar continuously while the app is running in the background. I tried combining the View component with the status bar to create a small red rectangle like this:
<View style={styles.container}>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: 20,
height: 20,
backgroundColor: 'red'
}
})
However the red square just appeared below the status bar. Any ideas?
Edit:
What I want is to have my app logo on the status bar even when the app is in the background. (apps that provide VPN and location services do this sometimes).

For iOS it's not possible to add any custom icons in the status bar, apple doesn't allow it.
For Android you should use Notification and Notification Manager. Just write a native module in java who do this when your app is launching.
React Native allow you to call Native Module written in Java, take a look here https://facebook.github.io/react-native/docs/native-modules-android.html
You should also read this for Notification How to show an icon in the status bar when application is running, including in the background?

There are 2 kinds of icons in Android status bar.
One kind is system icons that come from framework-res.apk and extracted to the /system/framework , you can't change those without having some elevated privileges on the device and mounting the system image read/write.
The other kind is the notification icons as mentioned here before.
For iOS you can't really change much.
Your screenshot shows both kinds and you want to put your icon next to the Network bars icon but those are system icons (on Android)
Here is a plugin that deals with notifications (and notification icons) both platforms and wraps everything, easy to use with react
You can find a sample native code for iOS notification here and Android here:

You can't change the status bar. Apple only allows you to change the appearance of the status bar. For the ios app maybe changing the appearance globally works for you.
Open the .xcproj file generated by ReactNative and:
In your Info.plist you need to set "View controller-based status bar appearance" to a boolean value.
set it to NO set the style in AppDelegate adding this code on the didFinishLaunchingWithOptions function: UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)

Related

How to set different icons for app and for its notifications?

I'm using a picture with black background and white sign as an icon for my app. The problem is when I'm getting a notification a icon at the top of the display is completely white (I don't know why to be honest, when screen is locked it looks as originally).
I want to solve this problem by setting different icon for notifications, I can use this site, when I'm using a text icon generated by this site it works just fine.
I'm wondering how to set different icons for my app and its notifications, I know it's possible, but I only have folders that are used for both app and notification icon (drawable-[hdpi/mdpi/xhdpi/xxhdpi/xxxhdpi]).
The problem is when I'm getting a notification a icon at the top of the display is completely white (I don't know why to be honest, when screen is locked it looks as originally).
You set the SetSmallIcon() in the Notification.Builder.
To understand the Android documentation which is as follows – “Update or remove assets that involve color. The system ignores all non-alpha channels in action icons and in the main notification icon. You should assume that these icons will be alpha-only. The system draws notification icons in white and action icons in dark gray.”
you can convert your notification icon to an Android friendly one with a few clicks.
In Notification icon generator, open up your icon file. Convert all parts of the image that you don’t want to show to transparent pixels. All colors and non transparent pixels are displayed in white.
Problem solved, I added below to AndroidManifest.xml (application section)
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/new_notification_icon" />

React Native Modal is not drawn below the StatusBar on Android

In React Native (With EXPO), I'm showing a Modal.
The Modal gets drawn behind the StatusBar in iOS but it's not happening on Android.
Do you know why? I could not find any solution for this.
The StatusBar has already set the translucent={true} prop. That's why you are able to see the Map behind the StatusBar on Android. But I can not draw the Modal component behind it (as I can do on iOS).
Here I add a couple of screenshots and an online viewer to check this behavior: https://snack.expo.io/BJR4oF4A7
Another weird behavior that I'm seeing is that it doesn't matter which translucent value I set, it always works in the same way (it's always translucent, even when I set it to false).
In case that this is impossible, how can I set the background to #FFF and the font-color to #000 on the StatusBar on Android?
I want to know:
Why there are different behaviors in iOS and Android.
Why changing the props of StatusBar still not changing its behavior (can be seen in the online viewer, changing translucent, or backgroundColor values)
If it's impossible to get the modal drawn behind the StatusBar, so, how can I change the background and the font-color of it when a Modal is opened? (in Android) (with no hiding it)
Android
iOS
I believe you need to try the app as a standalone application, not using the Expo client. It somehow sometimes has hard time dealing with StatusBar (I've already experienced it too).
You may use the hidden property that is working on both platforms, based on your current state: <StatusBar hidden={!!this.state.isModalShown} />
This will simply hide the status bar whenever your modal is opened.
Set the barStyle to be the contrasting backgroundColor.
Black writing on white background, so have dark-content on white status bar.
<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />

Customize overview bar color in Android app developed with Cordova

I've developed an app using Cordova/Phonegap and web technologies, and want to personalize it a little bit, but I'm having trouble finding how.
In android, when users press the Overview button (the squared one), they can see an overview with cards for each of the open apps, these cards have a top bar with an icon and the name of the app. As shown in this screenshot:
By default the bar color is gray, but I would want it to be a different color that matches better the colors in my app. This is something that can be seen in other apps, that have different colors for that bar (e.g.: Chrome bar is blue, Email bar is orange, etc):
I tried using the theme-color meta value, but that didn't do anything. I also tried the status-bar plugin, this one changed the status bar when the app is open, but still shows the default gray bar in the overview card mode.
Is it possible to customize this overview bar color with Cordova/Phonegap? How would it be done?
Install:
cordova plugin add cordova-plugin-headercolor
Usage:
-.cs
window.plugins.headerColor.tint("#becb29");
OR
-config.xml
<preference name="HeaderColor" value="#becb29" />
Here is doc.
This answer pretty much sums it up:
https://stackoverflow.com/a/29291928/6709110
The method you are looking for is
setTaskDescription(new ActivityManager.TaskDescription(label, icon, color));
Here is the link to the documentation:
https://developer.android.com/reference/android/app/Activity.html#setTaskDescription(android.app.ActivityManager.TaskDescription)

Hide icons and other in status bar Android

I should prefer to totaly hide the bottom status bar in android tablet (Androide 3.x and 4.x), but it seems to be impossible, because the new android version removed the physical keybutton from devices. Therefore I would at least remove from the bottom status bar, the clock, battery icon, and others. I only want the "Back", "Home" and "Options" buttons. It's possible?
http://developer.android.com/design/patterns/actionbar.html#considerations-split-action-bars In tablet devices, when set Full screen mode, the BottomBar and notification bar (including clock and other) are merged. I practically want hide the notification bar side.
Therefore I would at least remove from the bottom status bar, the clock, battery icon, and others. I only want the "Back", "Home" and "Options" buttons. It's possible?
If you make your own ROM mod with your own modified build of Android, yes. An SDK application cannot remove items from the system bar.

Is it possible to change the color of the notification bar?

The iPhone gives the app the ability to change the notification bar's color so you can have it match your app's design without having to hide it completely.
Is there a way to change the notification bar color in Android?
I'm looking to have it force black with white text to be less visually present while using the app, but still there.
I don't want to hide it.
No, there is no way to change the look of the notification bar from your app. Your only option would be to make your app full screen, but there are several reasons not to do this.

Categories

Resources