I am building a desktop app using electron (formerly known as node atom, using html javascript and css).
I want to use (or create if there is no choice) a sliding notification bar, like the one on android OS.
I failed to find existing components for this purpose and not sure how to develop this component myself.
I would like to know if such component or something similiar exists or how I could write one for my own use.
Thanks alot in advance for the help
Update 1
I was requested, rightfully, to give more info and be more specific.
I will expand on exactly what I need from this status bar, and why I need it and the context in which I need it for. (maybe there are better options that i'm not aware of).
I am writing a desktop app using nodejs electron (so my UI doesn't follow the common browser ui&ux rules).
The template that I have written so far looks like the following:
as you one can see, im trying to make it look as much as "mobile" I can while following google material design (i'm using angular 2, so angular 1 material is not an option, most of the component i'm using are from polymer elements collection)
The heart of my app is about running some algorithms on the server. I want a central place to show which algorithms are currently running and their status (there cant be more then 5 at once usually), so the only idea I could think of that fits material design and is central enough was to use something that looks like the android notification bar. The problem is that I couldn't find any web component that can achieve that. The status bar which i'm talking about looks like the following (The way it looks change a bit when looking at numerious android version, I don't mind exactly like which version it looks like). It should slide down from the top when clicked or dragged down like in an android mobile phone:
The notifications show whats currently active, I could also use a setting shortcut in it as well (The marked in red areas are the relevant parts). The rest of the options are not relevant.
So that's what I was initially looking for. If someone has a better idea on how to show these running algorithms in a central place, that fits the material design guidelines, I am also open to suggestions :)
Related
(I'm using Android Studio 1.1.0)
How can I make this kind of time selection in my app's layout?
Is it a ready made component? How is it called?
I'm talking about the circular part where the user can select how many minutes/hours until...
I can not confirm if it is a custom part of the mobile operating system, but it looks very much like a custom built app. Jquery Knob is the closest I have seen to something like this, but would require some heavy customization to begin to resemble that.
http://anthonyterrien.com/knob/ <-- Home Page
https://github.com/aterrien/jQuery-Knob <-- Git Hub Repository
Nice, downward compatible, touchable, jQuery dial
We have an App for both iOS and Android platforms. Currently our designers have designed similar User Interface for two of them, just have minor differences. Since those two shared lots of common features like buttons, text fields, etc, having similar interface works for both platforms. However, the most obviously differences between iOS and Android (from my point of view), are UINavigationBar in iOS and ActionBar in Android.
Now our interface for Action Bar and Navigation Bar looks like this:
This is followed UINavigation Design that have Title in centre. I'm just wondering should I keep the title centre in Android's Action Bar so two platforms will have similar interface or should I follow Android's design guide (Title next to left icon) for better Android User Experience?
Per Pure Android:
Most developers want to distribute their apps on multiple platforms. As you plan your app for Android, keep in mind that different platforms play by different rules and conventions. Design decisions that make perfect sense on one platform will look and feel misplaced in the context of a different platform. While a "design once, ship anywhere" approach might save you time up-front, you run the very real risk of creating inconsistent apps that alienate users.
This advice definitely applies to the app bar, which has very clear design guidelines as part of the Material Design guide, which is the driving force behind Android design at this time and is supported across all API 7+ devices via AppCompat.
See: https://developer.android.com/design/index.html.
This is somewhat opinion-based, but it is probably best to adhere to the Android styles where applicable, rather than shoot for consistency between you iOS and Android versions. If you want your users to have a comfortable, familiar experience, then keep in mind that they are probably most familiar with other apps on that specific device type.
An argument for consistency between Android and iOS would be (a) simpler to design for, (b) might be easier to test, (c) easier to support.
This all assumes you are building native apps. If you are making an HTML or hybrid app, a more device-neutral style might be acceptable.
I've been asked to develop an App for both systems, Android and iPhone, and both must look the same. So, I would like to get a set of icons that look like the iPhone buttons.
Anybody knows a link where I can download/buy a set of .png to make the Android app look like the iPhone one? (In iPhone, im gonna use de default buttons)
Thank you.
Before giving a few links to get you started, let me also include a link from Android's design guidelines followed by a quote from the same link:
Pure Android
Don't mimic UI elements from other platforms
Platforms typically provide a carefully designed set of UI elements
that are themed in a very distinctive fashion. For example, some
platforms advocate rounded corners for their buttons, others use
gradients in their title bars. In some cases, elements may have the
same purpose, but are designed to work a bit differently.
I am not sure if aping / mimicking the iPhone is the intention or the right way heading into multi-platform development (although I am inclined to think, based on the topic heading, that you intend to keep just a common icon base across platforms). But without getting into that debate and the proverbial can of worms. Anyway, here a few links as mentioned at the top:
NOTE: I do not develop for the iOS platform and am not entirely aware of what the default icons are. If the links posted are useless, give me a heads up. ;-)
http://www.glyphish.com/
http://www.designshock.com/free-iphone-icons/
http://www.iconshock.com/iphone-icons/
http://speckyboy.com/2008/07/18/35-free-icon-sets-for-your-iphone-pimp-it-up/
http://visionwidget.com/free-iphone-themes-icons-sets.html
http://ntt.cc/2010/05/10/50-free-hand-picked-iphone-icon-sets.html
http://www.tutorialchip.com/freebies/25-impressive-fantastic-icon-sets-for-your-iphone/
http://skyje.com/iphone-themes-and-icon-sets/
http://inspiredm.com/5-essential-icon-sets-for-iphone-applications/
The first link (glyphish) usually pops up all over Google when searching for mobile icons. Oh. They also support the Retina Display. :-)
What I mean to say while you're just getting started with the development and say you add a slider theres a predefined skin for that and you can place it somewhere on the screen, but in some apps there are things like a knob in a place of slider which you can rotate to do the same stuff what the slider does . How do they do that, does it require openGL or something I am not asking for a complete tutorial or something just curious on what stuff goes into building such thing
Mostly, if something is not provided out of the box, you will have to build your own control.
For example, you mention a Knob. That isn't available in the Android SDK. Such a control could prove to be useful.
Here is a tutorial to build such a custom Control: http://go-lambda.blogspot.in/2012/02/rotary-knob-widget-on-android.html
This is an image of the final result from the tutorial linked above:
Here is an example of a custom slider / seek bar: http://permadi.com/blog/2011/11/android-sdk-custom-slider-bar-seekbar/
This should give you a rough idea on how to go about creating your own custom views.
And finally, what I personally find the best possible resource for keeping track of almost all good Custom Views is here: http://www.androidviews.net/
The androidviews.net website has shut down. Android Arsenal is a new website that lists several third party Android libraries.
I came across this app and I wonder how was it developed on android (Cause it looks so much like an iphone app), see this screenshot.
Anyone have any idea how to accomplish that type of look on Android?
That's just a matter of styling after all. In general, I would consider it to be discouraged to make your Android app look like an iPhone app. Every platform has its own UX standards, and Android's standards are different from iPhone's. That quite obviously also reflects in the user interface.
Anyhow, you may want to read this article about Android themes and styles. It should get you going with defining own widget styles and stateful drawables to implement custom buttons.
This app obviously uses customized ListViews, ButtonView on the bottom of the screen.
Theses are pretty much standard and common in android apps.
Here is how to create custom components:
https://developer.android.com/guide/topics/ui/custom-components.html