The scenario: There is a Dialog whose content is larger than the screen's height therefore scrolling is needed to see everything in the Dialog. Because scrolling should be avoided in Dialogs (according to Material Design guidelines) I was trying to find the way to omit that issue.
The solution?: I noticed that in Google Play Store there is a dialog that when scrolled down it animates smoothly into a full screen. If I get to the top of the screen again and scroll up, it becomes the Dialog again and when scrolled even further it dismisses the dialog. I was wondering whether there is an easy solution that would allow this kind of transition or do I have to add some kind of OnScroll() listeners manually?
Related
Not sure how to explain this better, but it's mostly implemented by chat applications for Gallery picker fragments and alike. Best example is Google Allo, for which I posted GIF below. I'd like to know how is that implemented and how I could replicate the feature.
As you can see, the map fragment first transition animates from bottom to half of the screen, but then it can be dragged by finger to the top of the screen, when it actually fills the whole screen and even creates it's own toolbar. Most of all, I tested it, and this also works on API 16.
When a dialog is disappearing, it can look bad if you have another animation running at the same that takes up a large portion of the screen. I've also found that a disappearing dialog doesn't mix well with listView.smoothScrollToPosition().
Is it possible to put a listener on the dialog disappearing animation so that you can start your own animation or scrolling when it has completely gone?
I will accept the answer of "no it isn't possible" if someone can convince me of that.
Background
on Firefox and Chrome apps for Android, if the user scrolls down, the upper actionBar starts to disappear.
if the scrolling is fast enough , it starts an animation to finish the disappearing, but if not, it returns to its normal state.
and there is a similar effect for showing the action bar, only that it's for scrolling up.
The problem
I need to have the same ability to make a customized view that is on the top of the screen (looks a bit like an action bar but it's not).
a part of the view will always be visible, but a part of it will shrink like in the effect of chrome and firefox.
I've looked for libraries that allow such a thing but without any luck.
The question
How can I achieve this behavior?
My guess is that I need to use the scrolling listener of the adapterView , but then what?
I think this library can help, in the inner sample of "animation" :
https://github.com/LarsWerkman/QuickReturnListView
sadly i also use a customized pinterest-like listView, which doesn't report about scrolling (not states, but the real positions as you scroll). in fact it doesn't even extend from AdapterView.
I have an app that works in the following way:
Upper part of the screen is the 'primary' part of the app, the actual content that the user can interact with is displayed here.
Lower part of the screen (maybe 1/4 of the screen height or so) is a navigation wheel. The user can turn this wheel to change the upper part of the display. When turned the entire upper part is replaced by something else.
These two part are implemented using fragments. The lower part (navigation wheel) is just a static fragment that displays a view hierarchy that can be rotated. The upper part (content display area) is a fragment as well, but it can be switched to other fragments when the wheel is turned.
Now what I want is that when the app starts, we are displaying a free content section, however when the user turns the wheel to one of the other content sections a window pops up to block the content display area, saying "buy this mode on Google Play." This popup should obviously block the content area behind it, so the user can see some of the display area behind the popup, but he/she cannot interact with it before he/she has completed the Google Play transaction. It would be nice if the views of the content area could be greyed out as well. The navigation wheel in the bottom of the screen however should not be blocked so that the user is able to navigate back to where he/she came from or further on to another content section. How can I make a popup that blocks the top view hierarchy from interaction but leaves the lower one intact?
As far as I know it is not possible to use the PopupWindow class to create a popup that will only block some of the screen behind it. It seems to always block it all.
Here is an of illustration the design. 'P' for paid and 'F' for free. On the second screen the app should ignore any press on the content section (behind the grey window), but the navigation wheel should still be able to turn.
Thank you.
On the second screen the app should ignore any press on the content
section (behind the grey window), but the navigation wheel should
still be able to turn.
You could make an overlay and set it up to eat all touch events(either by setting a OnTouchListener on it or by using a custom layout with the onTouch() method overriden to return true) and put it on top of your normal fragment content. This way the actual content will be visible underneath but will not receive any touch events. You could also add some content to your overlay right like in your image.
Also, as the overlay will only cover the paid fragment the wheel at the bottom will be touchable by the user(I don't know how that wheel actually interacts with your fragments so the approach above might not work).
I've made a small rudimentary sample as an example(you can find it here).
It would be nice if the views of the content area could be greyed out
as well.
You could make a recursive method to traverse the view hierarchy of your paid fragment and call View.setEnabled(false) on the views it meets.
Seems overly complicated to me.. I cannot imagine the design..
I would create a different fragment to be triggered if the user has purchased the item, with a different interaction, like a Dialog to be shown at every click, or something like that.
In pseudocode:
if wheel.position == 4
if itemPurchased
showFullFragment
else
showMockFragment
Create a default fragment with one button, that opens the right page of Google Play to buy the content. Then, every time the navigation wheel is turned, you decide in your code if you show the fragment with content (when user has finished the Google Play transaction) or you show the default fragment with just the button to Google Play.
Only one thing: Google Play is asynchronous. There might be some time when the user actually has finished the transaction but Google Play didn't inform your App, yet.
If the transaction was initiated you must decide if you show the content without having to 100% clarity that the user actually paid, or if you show a blank fragment. In any way, you should not show the button again, because that would confuse the user ("I paid! Why do I need to go to Google Play again???")
Hi,
I need to create a UI such that an image view appears at the edge of an alert dialog. Please find below the steps in detail.
I click on a button in activity.
Alert dialog windows should slide from the right to the center.
In the edge of the dialog window, i have an image.
I am done till step 2. I don't know how to place an UI such that half of that appears on the dialog view. Please refer to the image i have provided.
Please provide me with the code samples or pointers for implementing the same. Thanks.
Try using frame layout
A dialog is usually a small window that appears in front of the current Activity. The underlying Activity loses focus and the dialog accepts all user interaction.
So, I doubt if such an effect can be obtained in a dialog.
However, I tried using absolute layout as dialog's content view to create a custom dialog and moved the imageview to an edge by altering the layout parameter. That showed only the portion of the imageview that could fit into the dialog and the rest was not visible.