Toggle the Navigation Drawer via the stock Action Bar title with highlight - android

I'm trying to mimic the Google Play Store application ActionBar: when you click on the title of the application, the title itself is highlighted (normally with a blue background in JB) and the Navigation Drawer opens/closes.
I'm using the Navigation-Drawer sample application available on Google Developers website (link) and it doesn't do the same. There is no blue background when you touch the title and also the "click zone" on the title text is only about 3-4 characters of lenght as width. On the Play Store or Gmail applications you can touch even the end of the string and the Navigation Drawer will open. See this screenshot for reference:
So, I'm looking for tips or even links to source code of other Android applications that have this feature and also:
Use standard ActionBar (no ActionBarCompact or ActionBarSherlock)
Target API 14+
Preferably do not use any external library (does Play Store use them?)
Thanks!

By default, the title is included in the touch target for the drawer on Android 4.3 and Android 4.4 devices (unlike previous versions of Android where the title was not included) so you shouldn't have to do anything to get consistent touch targets.
Note that in Android 5.0 and Material Design, the navigation button is much larger (taking the place of the app icon) and the title is not included in the touch target. Updating to AppCompat v21 will give you this new functionality and be consistent with Google apps across all API versions (although note that not all Google apps have fully followed the guidelines as of yet - a work in progress as they all move to using AppCompat)

Related

Android 12 Navigation bar disappearing

When pulling down the notifications, the gesture navigation bar on the bottom slides down, some apps like the PlayStore handle this well, while my app (and others like WA) is resizing, what is this about? Do I have to recompile with newer AndroidX version or do something in the manifest?
Couldn't find anything on this
(Take a close look at the bottom here ⬆️
First of all, I could not reproduce the issue on the official Android 31 emulator image.
Secondly, it appears that the Google Play app layouts fit the system window and use translucent system bars. Since your app doesn't implement such behaviour, the app layout needs resizing when the navigation bar re-appears. On the other hand, the Play Store layouts don't need resizing because the navigation bar will overlay on top of it. You can implement a translucent navigation bar using the instructions provided in this answer.

How to migrate app from sdk 8 to newer versions?

I've been developing an app (min sdk 8) that uses the physical menu buton for almost everything into the app. Recently I've bought a new cellphone and I realize that it doesn't have a physical menu button, compromising the usage of my app. I don't want to change the min sdk version, what is the best way to migrate to newer versions? I've taken a look into Action Bar but I don't know if I need to reimplement everything I've made so far (removing the logic that uses physical menu button) or if I let how it is and just implement new logic that uses action bar.
Thanks in advance.
You might want to take a look at ActionBarActivity from the support library. They have similar callback like onCreateOptionMenu, onOptionMenuSelected etc. So it is not that hard to make the transition in terms of the menu button you talked about.
Don't worry about action bar, you can use v4 or v7 support jars which will work on lower versions as well.
Hard menu button is just to give options menu. If you use action bar you will see three dots on the right side which indicates options menu.

Workaround for menu button for newer devices

I am new to Android app development and I recently published my first app. My app uses the menu key to display 2-3 functionalities. But there are HTC Evo 4G users who sent me e-mails complaining that they cant use that because their device doesnt have a physical menu key. Now how do I implement a solution the best possible way? The app supports devices android 2.2+ How do I add a action bar without breaking my app? I was wondering if I should add a action bar for all android versions or only for 4.0 and above? What would be easier?
My app uses the menu key to display 2-3 functionalities.
It should be doing so by using the standard options menu system.
Now how do I implement a solution the best possible way?
Add android:targetSdkVersion="11" (or higher) to your <uses-sdk> element in your manifest. Your title bar will be automatically converted to an action bar on API Level 11+ devices, and your options menu will appear as the overflow menu in the action bar.
How do I add a action bar without breaking my app?
See above.
I was wondering if I should add a action bar for all android versions
You can certainly do this, using libraries like ActionBarSherlock.

Navigation Drawer (Google+ vs. YouTube)

Does anyone know how to implement a sliding menu like some of the top apps of today?
Other Stack Overflow questions haven't had any answers on how to do this, so I'm trying to gather as much info to help out others. All the applications I mention below do a great job of implementing the slide menu.
1. Google Plus (as of 7/7/12)
You can only go from the first screen to the second screen by clicking the G+ logo in the upper left hand corner. Notice that the entire screen moves from it's position and get's nudged to the right side of the screen (including the action bar). To get back to the first screen you can either slide the right side back into focus or you can click the G+ icon again.
2. YouTube (as of 7/7/12)
You can go from the first screen to second screen using two methods. Either click the YouTube logo in the upper left, or you can use a swipe gesture to move it to the right. This is already different from the G+ app. Secondly, you can see that the action bar stays put (Unlike G+). Lastly, to get the original screen back it works just like G+.
Edit #3:
The Navigation Drawer pattern is officially described in the Android documentation!
Check out the following links:
Design docs can be found here.
Developer docs can be found here.
Edit #2:
Roman Nurik (an Android design engineer at Google) has confirmed that the recommended behavior is to not move the Action Bar when opening the drawer (like the YouTube app). See this Google+ post.
Edit #1:
I answered this question a while ago, but I'm back to re-emphasize that Prixing has the best fly-out menu out there... by far. It's absolutely beautiful, perfectly smooth, and it puts Facebook, Google+, and YouTube to shame. EverNote is pretty good too... but still not as perfect as Prixing. Check out this series of posts on how the flyout menu was implemented (from none other than the head developer at Prixing himself!).
Original Answer:
Adam Powell and Richard Fulcher talk about this at 49:47 - 52:50 in the Google I/O talk titled "Navigation in Android".
To summarize their answer, as of the date of this posting the slide out navigation menu is not officially part of the Android application design standard. As you have probably discovered, there's currently no native support for this feature, but there was talk about making this an addition to an upcoming revision of the support package.
With regards to the YouTube and G+ apps, it does seem odd that they behave differently. My best guess is that the reason the YouTube app fixes the position of the action bar is,
One of the most important navigational options for users using the YouTube app is search, which is performed in the SearchView in the action bar. It would make sense to make the action bar static in this regard, since it would allow the user to always have the option to search for new videos.
The G+ app uses a ViewPager to display its content, so making the pull out menu specific to the layout content (i.e. everything under the action bar) wouldn't make much sense. Swiping is supposed to provide a means of navigating between pages, not a means of global navigation. This might be why they decided to do it differently in the G+ app than they did in the YouTube app.
On another note, check out the Google Play app for another version of the "pull out menu" (when you are at the left most page, swipe left and a pull out, "half-page" menu will appear).
You're right in that this isn't very consistent behavior, but it doesn't seem like there is a 100% consensus within the Android team on how this behavior should be implemented yet. I wouldn't be surprised if in the future the apps are updated so that the navigation in both apps are identical (they seemed very keen on making navigation consistent across all Google-made apps in the talk).
Just recently I forked a current Github project called "RibbonMenu" and edited it to fit my needs:
https://github.com/jaredsburrows/RibbonMenu
What's the Purpose
Ease of Access: Allow easy access to a menu that slides in and out
Ease of Implementation: Update the same screen using minimal amount of code
Independency: Does not require support libraries such as ActionBarSherlock
Customization: Easy to change colors and menus
What's New
Changed the sliding animation to match Facebook and Google+ apps
Added standard ActionBar (you can chose to use ActionBarSherlock)
Used menuitem to open the Menu
Added ability to update ListView on main Activity
Added 2 ListViews to the Menu, similiar to Facebook and Google+ apps
Added a AutoCompleteTextView and a Button as well to show examples of implemenation
Added method to allow users to hit the 'back button' to hide the menu when it is open
Allows users to interact with background(main ListView) and the menu at the same time unlike the Facebook and Google+ apps!
ActionBar with Menu out
ActionBar with Menu out and search selected
There is a great implementation of NavigationDrawer that follows the Google Material Design Guidelines (and compatible down to API 10) - The MaterialDrawer library (link to GitHub). As of time of writing, May 2017, it's actively supported.
It's available in Maven Central repo.
Gradle dependency setup:
compile 'com.mikepenz:materialdrawer:5.9.1'
Maven dependency setup:
<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>
I know this is an old question but the most up to date answer is to use the Android Support Design library that will make your life easy.
Personally I like the navigationDrawer in Google Drive official app. It just works and works great. I agree that the navigation drawer shouldn't move the action bar because is the key point to open and close the navigation drawer.
If you are still trying to get that behavior I recently create a project Called SherlockNavigationDrawer and as you may expect is the implementation of the Navigation Drawer with ActionBarSherlock and works for pre Honeycomb devices. Check it:
SherlockNavigationDrawer github

Proper user experience for ActionBar on phones with Menu buttons?

I have an app that's built for Android 2.2, so I'm not using the 3.0+ built-in ActionBar class but rather building my own custom ActionBar implementation using Google's older UI recommendation that was introduced a couple of years ago.
All of my screens have between 1 and 3 actions that can be performed, so they all fit very nicely into the ActionBar UI (which Google recommends has a maximum of three buttons). The problem now is that none of my screens have a regular options menu and so they do nothing when the user presses the hardware Menu button.
According to Google's interface guidelines, this is correct behavior. If your activity doesn't have an options menu then it should do nothing when the Menu button is pressed. I've found during user testing, however, that users are quite perplexed when they press Menu and nothing happens (and every single user has tried, usually multiple times). They say that they appreciate the actions being exposed on the screen through the ActionBar, but at the same time they want the Menu button to do something.
I've been looking at Google's first party apps and it looks like they just always have enough options available to be able to load up the options menu with stuff after the ActionBar is full. Google+ seems to use the Menu button in the traditional way for overflow options on phones that have one, and they show a dropdown menu in the ActionBar for phones that don't. That would work if I had more than three actions but I currently don't.
It seems that the only way to meet my user's expectations is to put some junk options that have no value into the Options Menu just so that something happens when they push the button. I really don't want to do that. Does anybody know of a good way to deal with this problem? Should I just leave the menu button alone and expect people to figure out that it doesn't do anything?
I think it's safe to assume that most users don't know the menu button exists and having all of the actionable items displayed on screen is best. User testing by Google has revealed this and it is why they have chosen to eliminate the menu and go with the built-in action bar starting with Android 3.0 and culminating in the recent 4.0 release.
Something to think about would be added a single "About" item to the pre-3.0 options menu/post-3.0 overflow menu. This could just popup a dialog with simple info about the application (e.g., version, licensing, link to website, author, etc.). This way there is something there should they happen to press the menu button but it is not required in order to properly use each activity to its fullest potential.
I have an app that's built for Android 2.2, so I'm not using the 3.0+ built-in ActionBar class but rather building my own custom ActionBar implementation using Google's older UI recommendation that was introduced a couple of years ago.
As an author of an action bar library this sentence disturbs me. It's fairly trivial to use a custom action bar implementation on pre-3.0 and the native one post-3.0. Take a look at Google's Action Bar Compat sample.
...or, you know, you could also go with a library like ActionBarSherlock that does this for you! </shamelessPlug>

Categories

Resources