I am trying to design a layout in Android but I don't even know how to call it. It is somewhat similar to Android Surfaces I would say, but actually the old Google Maps Entry details are designed more like it and i would prefer to target sdks prior lollipop.
I want that a picture is shown on top of the screen.
Below is a Headline and below that is a List.
When i scroll down, the image shall be put into the background and the complete block of other elements should float above, taking roughly the half of the image heigth additionaly.
When i scroll down further the Headline element should be fixed on top of the screen, the image completele covered and the list should float under the Headline.
How does Google Maps achieve this? I am not even sure if it is a List that is displayed there below the image. Any ideas? The name of that design would suffice, any guides or tutorials are very appriciated.
I'm sure this needs a visual explanation:
I want a design like the second screen shows it with a transition to the third screen.
Screenshots taken from Google Maps Android App.
And here is the new Surface Layout from Android 5.0 but as i said, i would prefer to do it compatible to lower versions and besides this does not look like the fluent transparant change i aspire.
Thanks for every help!
Found it. Can't believe it was so hard to find. The magic keyword is Sliding Panel
To those who stumble upon this question, here is the most referenced library, but searching for Sliding Panel will help as well.
Sorry for bothering...
https://github.com/umano/AndroidSlidingUpPanel
Related
I am trying to achieve the following on a relative layout.
It's similar to WhatsApp profile image style and I think Google uses it on the YouTube app too. I've searched around but can't find anything as I don't know what it's called.
Is there a library or possibly anyone who's used/achieved a similar feature?
The purpose is to use minimum height as needed as some images are portrait and can take up full height of screen not allowing user to realise there's more under it.
I'm using a scrollview xml with a relative layout.
What I've tried so far:
Lots of Google searching. No luck as I simply do not know the concept.
I think it's called a Parallax Effect, not really sure, but here are some libraries that do some similar stuff using listviews:
https://github.com/Gnod/ParallaxListView
https://github.com/Frank-Zhu/PullZoomView
A picture may tells what I want:
I donnt have enough Reputation so please check this link.
http://ww3.sinaimg.cn/large/005yyi5Jjw1ej4gsxduwej31h70h245u.jpg
When you scroll the list up, the image will scroll up in different speed in the background too.
Play store and Google I/O 2014 app have this effect.
use a recyclerView and custom layout manager?
Thanks!
Sorry for my poor English.
Probably you have already noticed, but source code for I/O app had been released.
https://github.com/google/iosched
See this article:
http://flavienlaurent.com/blog/2013/11/20/making-your-action-bar-not-boring/
and this answer: Is there an addHeaderView equivalent for RecyclerView?
It is using setTranslationY, but you can similarly use setHeight like on the image you provided.
The hand (and the space above his head) disappears gradually because the height changes and the image in the ImageView is centerCrop.
I'm not sure if this is the exact code, but looks close enough: https://github.com/google/iosched/blob/master/android/src/main/res/layout/activity_session_detail.xml#L43
I am developing an Android app and am a bit stuck on how I go about creating the layout I'm after. I said spotify-like (website not app) as I dont want the parallax effect. It's actually closer to http://www.poormet.com/.
What I have tested so far is a RelativeLayout with an ImageView and Listview (with transparent dividers) within it. This layout shows the image in the background between rows which is a step in the right direction. The issue is I'm at a loss as to how to get the images to change smoothly depending on what listrows are on screen.
Also, if I want to replicate the text over the images like poormet example mentioned above, then it seems to me I am going to have to have alternating transparent and not transparent rows.
Am I on the right track or am I approaching this problem the wrong way?
Any guidance will be greatly appreciated!!!
(also, please let me know if what I have described doesn't make sense - more than happy to clarify)
At the moment, I am using Euro 2012 app and it has some interesting layout parts. If you go to matches->knockout screen, you'll see 3 screens like this.
If you slide left or right, you move between them not like between one activity to another, but just like all these elements are laid on one big canvas and you slide each screen into focus. Even thou, if you slide left/right, the screen cannot be stopped in the way that half of each image is visible, so I guess it's not a big canvas. Somehow you can slide screen like one big image, and yet it always lock perfectly as if they used 3 activities for this.
How did the do this?
It's a ViewPager, available in Android support package and described in their blog.
The designing is not so much difficult, As i think to draw that boxes showing quarterfinals, semifinals.
They having layout( we can do by placing image in background also).
The major role played by FrameLayout which shows you that effect(emphasis), the flages are fetch from url as matches are decided(not essentially images only names are sufficient as flags came inside app and gets applied as updated).
After your click i think the start image gets change it's just replacing that image with new one.
As you said they are not on single canvas (but if they did customization of heir Viewpager that it's not stopping in between activities), but i think it's on single canvas.
If your taking about quickness of loading and all it's up to you as much code and processing you optimized it gives you smooth feel and fast processing.
We can appreciate the work but we can not say it's too much difficult as i think it's quit easy...
Hope this explanation helps you to understand ....
What's the best way to implement functionality in Android where I have a large amount of text (let's say a book), and I display one page at a time. However, instead of displaying it all at once, and having the user scroll through it, I would want to create it like iBooks where each page is separate, and the user "flips" through it [although, I don't need a fancy flip. A simple slide, like Kindle for iOS, would do].
So how should I go about this? Is creating a customview necessary, or is there some way to do it without that?
Previously asked (I think): How to do page flip/turn/curl effect in android
Possibly answered: Implement page curl on android? with a project at http://code.google.com/p/android-page-curl/
If that doesn't do what you need, you will probably need a custom view, and you'll probably need to do some OpenGL work. The animation and page bending done (to simulate bending the corner of a page) is quite possible but would require some knowledge of the math, which appears to be described at the answer. Your mileage may vary.
EDIT: ah, see Android Left to Right slide animation