I am working on an Android application and have to code up the following design for one of the screens:
(Ignore the yellow stuff, I have just masked the Logo and the App-specific information for now)
My question is: How do I design this particular type of screen? The top pane is akin to an ActionBar in Android. However, when any button on the top pane is hit, this custom "popup" having a rectangular form with a small arrow on top pointing towards the button is display and does not interrupt the current/main activity.
I have looked around, but still dont understand how to accomplish this.
Any thoughts? Thanks!
You can use the native Action Bar along with the icons.
The only problem is if you want to show them all at once.
Some icons may be hidden depending on the size of the phone.
As for the custom pop-up, the toast feature is available to do that.
It is quite easy to adjust the position of toasts and customise toasts :
Customisation of toasts: http://developer.android.com/guide/topics/ui/notifiers/toasts.html#CustomToastView
Changing postion of toasts: How to change position of Toast in Android?
Related
I have tried demo FloatingActionButton. I don't see real differences why I should change from normal button class to FloatingActionButton because if I want to make round button, I can try this tutorial:make circular button
As definition of Android Document:
Floating action buttons are used for a special type of promoted
action. They are distinguished by a circled icon floating above the UI
and have special motion behaviors related to morphing, launching, and
the transferring anchor point.
Floating action buttons come in two sizes: the default and the mini.
The size can be controlled with the fabSize attribute.
I think everything here I can implement easily in normal button such as size, circle, above UI. Just one thing I don't understand:
special motion behaviors related to morphing, launching, and the
transferring anchor point
I don't really know this. What does it mean about morphing lauching and transfering anchor point. Please explain for me.
thanks :)
There is a nice article about Floating Action Buttons at Google's Material Design Guidelines: https://www.google.com/design/spec/components/buttons-floating-action-button.html There is a lot of examples about how you can (and should and shouldn't) use the Floating Action Button at activity transitions and how it can be used to create nice, meaningful and logical animations.
If you use the correct Floating Action Button (the one from the Support Design library) together with CoordinatorLayout, it will also take care of Snackbars. When a Snackbar appears, the Floating Action Button will move up in order not to be covered by the Snackbar. You can check it out here: http://android-developers.blogspot.cz/2015/05/android-design-support-library.html
Is it possible to add a button to the toolbar of android firefox, and also the top of the pop up menu as shown in this screenshot below:
edit:
just found a screenshot of an addon that had some other addons installed that added a button up there, pleease see addon screenshots:
https://addons.mozilla.org/en-US/android/addon/quitnow/
here is the screenshot:
(source: mozilla.net)
see that nightly globe and whatever that is to the left of it, im trying to do same :) top row in this second picture is toolbar button icons that would show in the top toolbar when there is enough screen space im interested in learning how to add to 1st and second row
The documentation for Developing for Firefox Mobile marks all UI APIs as Not supported. Mozilla uses the native UI of Android to build Firefox for Android. Therefore everything related to XUL might not work at all.
Now there is an Extensions for Firefox for Android API and the only thing related to what you'd like to achieve can be found with PageActions.jsm, which can be used like:
Pageactions.add({
icon: "drawable://alert_app",
title: "My page action",
clickCallback: function() { win.alert("Clicked!"); }
});
These are added to the toolbar, but displayed inside of the adressbar not beside it. In the screenshot you posted, the little book icon is a pageaction. But there's a limitation as well:
NOTE: A maximum of two page action items will be shown to users at a time. If users have three page actions showing, an overflow menu will appear to handle the extra ones. Your action has NO control over whether its shown in the urlbar or overflow. Don't depend on your page action always showing in the main urlbar.
The buttons you find at the top of the menu can't be changed neither. The star at the left is for the bookmarks and the graph on the right is the button for sharing the web page. The space inbetween is used to display the last two applications you shared the web page with.
So basically, what you'd like to do is not possible at all and the addons I know trying to achieve something similar use page actions.
I'm experimenting for the first time with Android's Navigation Drawer. I think it is a very elegant way to provide an application menu. However, showing my prototype to some friends, it seems that it is not quit intuitive to search for a menu i) on the top left corner respectively ii) on the left side of the screen.
To provide a "user hint" for case i), I added a custom image by creating an ActionBarDrawerToggle. This results in following design of the title bar (the little arrow is the cutom image, while the red star is the application icon):
Now while developping, I thought this is quite obvious, but apparantly I'm wrong :). So as a second idea, to support a user to find option ii) described below, I tried to figure out how to add a further image at a specific place, which I want to explain with following image:
Don't look at the design itself in the first place, but following: the image must be placed outside of the "view bounds" (when the navigation menu is hidden), and also exceed the navigation panel itself on the right side (always). Is this in any way possible without customize the entire navigation panel? I really wonder why I can't find much about this idea, since I think it is a very nice option to provide for the user (as long as the arrow don't disturbs the application usage)
Although I haven't actually tested it with Android's Navigation Drawer,
did you try putting an imageview in your activity's layout? The image would be placed in the middle vertically and on parent left horizontally. I believe this would work (i.e. the image will get pushed when you open the drawer. As an improvement you could also change the image itself in the drawer's callbacks, so that you have an arrow pointing right when the drawer is closed and an arrow pointing left when the drawer is open.
Hope it helps.
This is a picture of my phone (Android 2.1 with HKC Sense):
The bit that's got a red border around it is in the Clock app and the Media player on my phone. What is it called? Is it a standard Android interface control?
I've been trying to figure out how to get something like this for the past while and I'm not seeing anything immediately obvious.
I've seen a lot of people referring to the ActionBar or Split ActionBar, but that seems to be something that is anchored to the top. I need this to be at the bottom without any component on the top.
*please excuse
It's an actual pic of the phone, rather than a screenshot - the screenshot app I downloaded wouldn't work.
The fact that the pic was taken with an iPhone, and that the apple logo is clearly reflected in the pic.
You can use Split ActionBar
android:uiOptions="splitActionBarWhenNarrow"
And that will force the action bar items to be hosted on the bottom of the screen for narrow devices, mostly phones. When this flag is set, no components are hosted on the top of the ActionBar, unless you use tab navigation.
See example Image
Keep in mind though, that should you be displaying the layout on a non-narrow device, like a tablet, then the items will be attached to the top ActionBar.
Some other things to consider
Creating a custom view, which you can set to the bottom of the layout. The View would be a scrollable ListView per say, and you can add as many icons as you'd like to it. Here's an example. That would not be a standard nav pattern though.
I am developing a simple four-action app for Android 3.2. I want all the menu items to appear in the action menu on a single line. (At the moment they appear as a 2x2 grid. I want a 1x4 grid.)
To achieve this I would like to:
remove the text and display only the icon
I have tried removing the android:title attribute, but the empty space for the text remains
minimise the width of the items, so that they all fit in one row (this may not apply to literally all screen sizes, but in my case I can see that the icon images could fit on my emulator screen)
How can I achieve this?
this is just a guess , but it seems like a thing that android won't support out of the box , since there are many different screens out there , and some won't have enough space for all your buttons (you have 4 , but imagine someone who wishes 10 instead) and google won't like it that the user will be frustrated when trying to click the tiny action buttons.
if you want, you can always create your own customized action bar , which would have any behavior you wish .