I have used an Android application recently that has an interesting UI pattern in it. I have made two screenshots to show you what I'm talking about:
Initial State (look at the blue rectangle on the right of the screen):
After clicking on that blue rectangle, it slides smoothly to the left, which results in the following screen:
My question is simple, how do you think this could be achieved? Also, what's the name of this pattern? A sliding pane?
This is called sliding drawer in the android vocabulary.
You can find is as an ui component.
To obtain the same result you would actually need to change the default handle to a blue one (from an image a priori).
Some links on the topic:
official documentation
A good example on how to customize it
Related
I'm totally new to Android development. I even don't know the name of components yet, something that make a bit harder to find how can I reach my goals.
Now my main goal is to desing a screen with a bottom tabbed bar, where the user can click in the tabs and the body of the screen changes, like the Spotify's do.
This image shows exactly what I'm looking for with those five icons at the bottom.
You are looking for navigation bottom bar.
Link for design guidelines:
https://material.io/guidelines/components/bottom-navigation.html
Link for example library implementation: https://github.com/aurelhubert/ahbottomnavigation
As per Google's material design specs, under Animation - meaningful transitions
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3RXRFb0tRZEZDUUU/animation_meaninfultransitions_considerations_do.webm
Sometimes wish they could provide some sample codes right beside the design specs..
I couldn't find anything on google, probably because I am not sure what keywords to use.
Thanks!
The example that you linked appears to be using a reveal transition animation with a shared element between two Activities. For details on how to get your feet wet, take a look at the Android training documentation on Defining Custom Animations.
I am investigating if there is a 15+ API to implement sidebar icon transitions as displayed on the video by google:
http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B0NGgBg38lWWRm5QODB0bk95SUE/patterns-loadingimages-loading-070901_Load_Add_Animation_xhdpi_002.mp4
If I use the classic ObjectAnimator.fromFloat() the code will be huge and cumbersome.
Is there a way to reposition the items with a reasonable length of code?
Use the following library with sample.
https://github.com/neokree/MaterialNavigationDrawer
You will get the perfect result as you want
I'm trying to cope with some problem in finding good idea. I would like to make interesting menu like in games on Android (eg. ANngry Birds or here: http://www.youtube.com/watch?v=Q3g6SdTODY4) In this panda game I supose that first menu are simply 3 color buttons, but what about this sliding menu later with stages description - this same as in angry birds? Telling the truth I have got no idea what object it can be?
I will be glad if someone can tell me that. Or the best to give some tutorials about it. I cant google any.
Well, it seems that this sliding stage description is implemented with some simple layout placed to HorizontalScrollView and some animation applied to the buttons.
It can be your custom view provided with your translation animations and handling its visibility on the click of the default menu button (via onKeyDown()) on Android.
There are similar questions:
Custom options menu in Android
Android: customize application's menu (e.g background color)
I've been using firefox for Android and really like the use of the sidebar to hold shortcut icons and the like. How would I go about creating a similar bar myself with the following attributes:
progressively revealed as I swipe in one direction
progressively hides as I swipe in the other direction
can be a custom width
I can dynamically inject layout in to it or it can hold static content
Is there any open source code available? If not, what approach would I use to create this?
Sound like you're describing a Gallery control. There are some examples in the ApiDemos project here.
The first part can be solved by using a ListView. The second part I don't know yet. I'm looking for such a component as well.