I'm developing an Android-/iOS-App with react-native.
I want to allow my customers to select between options upon clicking the "options menu hardware button" in Android (you know, the button usually at the bottom left of the android devices with 3 lines on top of each other, often triggering a menu in the app providing additional options).
Question: How can I listen to the options menu button click?
To clearify, I mean that button:
I know that the button does not exist under iOS and not under all Android phones and I will have to implement another solution for there, but that does not matter at the moment, as I want the button primarily to provide debugging functionality for my customers/testers (e.g. sending me the state of an erroneous screen).
Strangely, I did not find any resources on google regarding this problem, although I would assume wanting to use hardware buttons in react-native is a common task. Maybe I used the wrong search terms - if someone could link me to better terms describing this problem, I'm thankful as well :D.
Only thing I could find is the BackHandler for handling back-button-clicks.
Related
I was surfing some apps couple of hours ago and I saw something common in all of them. One clear instance for that is when you open YouTube app you see a narrow horizontal tool just above the device's home button which seems to be in charge of controlling what page user want To go I guess.
It has search button, a button which leads to the home page of the app and etc.
Question: Is it just a strip with buttons which is used to switch between activities ( by Intent class)? Or something else?
my bro you should use some library for apply this such as chip navigation
if you interest to learn it recommend you to see this tutorial https://www.youtube.com/watch?v=DQtdOSN21lQ&feature=emb_logo and the library https://github.com/ismaeldivita/chip-navigation-bar
Do you mean the bottom app bar?
If so you'll find the details here: https://material.io/components/app-bars-bottom
And yes you can use it to switch between activities.
I want to make an application that does something in the background, and to control its behavior, I wanted to have a quick-settings tile.
I managed to get the toggle working just fine, but now I want to know if it is possible to have a 'drop down' menu for the user to be able to choose an option out of 3 possible options. (3 different modes for the 'on' state)
Something like the wifi and bluetooth tiles here, that have that little arrow
Is this a feature only for system apps, or is there a way to do it?
It seems from here that unfortunately third party apps cannot use this feature.
Quote:
Note: You’ll notice some of the system tiles have an additional UI that replaces the whole quick settings pane with a custom UI. Unfortunately, this isn’t available to third party tiles.
Original Question (Listen to hardware buttons press)
I am wondering if it is possible to listen to the hardware buttons of a phone using Ionic / Cordova.
The important thing is that this should also work when the user is not currently using the app like somehow through a background service?
Basically I want to take a screenshot when the user presses the volume down and the power button at the same time in a hybrid app using Ionic. The app then offers to edit that screenshot or save it directly.
I have done some research and found the cordova events to listen to those buttons. I also read that the pause event should be fired when the power button is pressed. Anyhow, I don't think listening to those events would work outside of that app?
Original Question Conclusion
After some more research I conclude that this is not really possible using Cordova / Ionic. Even the native implementations of this problem seem to be more of a hack than a clean solution. The reason for this is, that the app currently on top should have the control of handling the various button events. You could interfere with another app and you always need to run a background service. Anyhow, all the solutions I saw seem too dirty for me.
Updated Question / Reevaluation of the problem
Basically I want to take a screenshot when the user presses the volume down and the power button at the same time in a hybrid app
using Ionic.
If I can't solve the current problem I have to rethink it. So:
Actually, I just want the user to have the ability to take a screenshot in a way that offers a good usability experience.
There are various ways I can do that as an alternative to pressing two hardware buttons simultaneously.
Option 1: User presses a button "Take screenshot" -> the app goes in the background, a screenshot is taken from the underlying app, the app comes back to the foreground.
AFAIK this wouldn't even work in iOS, only Android offers a "draw on top of other applications", so in iOS the screenshot would simply be taken from the home screen in all cases...?
Option 2: User presses a button "Take screenshot" -> the app goes in the background and a notification is pushed.
This notification could say "Tap to take a screenshot". The notification panel (which is always drawn on top of other applications) disappears, the screenshot is taken and the app pops up. This could be done using Local Notifications and listening to the on clear, cancel etc. events.
The notification could even have custom buttons using OneSignal (see Action Buttons). One button could say "Add screenshot", another one could say "Done", so the user could even take multiple screenshots at once.
Option 3: A button could be added to the shortcuts that triggers the take a screenshot action. I don't know if that is even possible and if that works on all devices.
I would say the best solution would be to go with Option 2: Custom Action Buttons on a Notification. Notifications should be a must have on all devices and should always be drawn on top of the current app. So the user just swipes down the notifications and presses a button to take a screenshot.
I don't really have any prior knowledge to this topic so I would be glad if somebody could confirm or improve my thinking process.
Edit:
I have done a bit of research into this, mainly just to satisfy my own curiosity. I came across this plugin
https://github.com/katzer/cordova-plugin-background-mode/blob/master/README.md
It allows you to carry out task in the background.
Please note this from the readme file.
Store Compliance
Infinite background tasks are not official supported on most mobile operation systems and thus not compliant with public store vendors. A successful submssion isn't garanteed.
Use the plugin by your own risk!
This probably isn't a big deal on Android but there is an open issue with regards to Apple app store submissions being rejected. Read through the issue to see how others over one this.
https://github.com/katzer/cordova-plugin-background-mode/issues/122
Original Answer:
If you want to take a screenshot there is this plugin:
https://github.com/gitawego/cordova-screenshot/blob/master/README.md
Maybe you could listen for some other events whilst using the pause listener. If they are activated then using the screenshot plugin referenced above call:
navigator.screenshot.save(function(error,res){
if(error){
console.error(error);
}else{
console.log('ok',res.filePath);
}
});
I'd like to add a "hidden" or "developer only" menu option to my Android app for debugging purposes — basically I just want a menu option which, when selected, copies the apps database out to a file somewhere on the users disk.
Is there an easy way to achieve this? I'd prefer something that's hidden normally but can be enabled "out in the field", but something that requires a quick and easy compilation flag would be OK too.
In my knowledge there is no developer only option to do exclusive things in Android. You can derive your own i.e. - 10 time click on specific View, specific gesture on any activity. Its up to you!
Desktop apps have top level menus (File, Edit, Search, ..., Help).
Web apps have very similar thing, menu tabs (Logo, Questions, Tags, Users, Badges, ...).
However I cannot find equivalent of top level menu in Android framework. Assume that my app has 5 main activities. According to menu design guidelines options menu should contain actions related to current activity. So how an app should allow users to easily switch to one of five main activities.
It seems that different apps solve the problem in different ways. Some have a tab list at the top of the screen, some at the bottom. Even Google applications aren't consisted in that field. Google Listen has an options menu item called 'Listen Home', however Listen main activity has no that options menu item. Others have two icons in app luncher which start two different activities from one app.
I realize that due to small phone screens Android apps have to be designed in a slightly different way than web or desktop apps. But I have a feeling that the app top level menu topic was omitted in Android framework. And developers are on their own here. Or am I missing something?
Update: this is Google blueprint for a great app
Update2: this an example app of these patterns
Update3: GreenDroid library helps a lot implementing these patters in your apps. It seems that dashboard and action bar patterns are becoming quite popular.
You should take a look at this Google I/O session: http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
They talk about the design patterns they used for the Twitter application and basically the type of concept you are asking about. Basically, your activity should have a top bar that gives the user specific tasks to do in the view or allows them to switch into another activity.
Google has not implemented anything like this into the actual SDK yet so you're sort of on your own in terms of implementing it but the main concept is given in the presentation. This is the direction that Google would like to see Android shift into though.
Hopefully this helps you out somewhat.
The file/edit menus of desktop apps have a very different purpose than the questions/tags etc. tabs at the top of this webpage.
The contents of the file/edit menu should be implemented as in the options menu that appears when you press the menu button. This is, as you noted, to save space on the smaller screens.
App navigation like the questions/tags etc could be implemented using a Tab Layout. You are right that apps vary in whether or not the tabs are on the top or bottom, but I don't think thats a huge deal. In my unscientific look through apps on my phone, the bottom seems to be more common. However, I think it might depend on your specific implementation which you decide.
A lot of apps don't require any sort of navigation like that, and can get away with just having a path forward or back via the back button. I think this is preferable for a lot of applications, but won't work in all cases.
I'm not sure what more you would want built into the framework.. It seems like you can accomplish any kind of navigation desired with the above options.
You can look at the source of the Google IO app
ioshed