I'd like to build an app that has what I understand top be a three top level screen hierarchy like this:
That is, Master screen displays different sections with different content, comprised of items that can be articles (green) or videos (blue).
Clicking on an article (in any of the sections) would take you to a detail screen (top right, in yellow) that should maximize reading area, with a topbar with a back/close button, and covering the bottomnavigationview. Going back (or up) takes you again to the screen with bottomnavigationview.
Clicking on a video would launch a different detail page in which the video can be dragged to the bottom as shown in bottom left screen, so you can still operate with the master list of items (or whatever lies beneath).
Either clicking on an article item (green), or clicking on a video item on top right (detail of an article), would take you to what is shown on bottom right; that is, video detail over article detail. Video then can be dragged to reveal underlying article and still be operable.
Now I already have a fragment that implements the dragging behavior of a video detail, that is not an issue.
My problem comes with understanding how to architect this with Navigation Component. My naivest approach would be ditching the nav component and have on my activity three fragment holders, one for the bottomnav content, one for the article detail, one for the video detail (which has to be above everything else), but getting rid of the nav component means i have to implement such things as backstack and deep linking myself.
Is this kind of navigation flow possible with navigation component? If anything, I'd like at least to get the master-article detail implemented with NavComponent, and separate the video implementation in a differnet fragment holder.
Related
I'm trying to add a slidingUpPanel(Sliding up panel) across all activities. This panel consists of a viewpager which in turn consists of two fragments. One of these fragments has a recyclerView (more than 1000 items) and the other fragment has some data that changes dynamically depending on the users' choice. This panel is very similar to that of google play music and soundcloud. Now to display this panel I tested two approaches:
1) I created a base activity and added the sliding up panel to it and then extended rest of the activities to base activity. So this way I have to create only one panel and viewpager.
2) I included the sliding up panel in all activities. But this approach is quite unmanageable as I have create viewpagers for all activities and if data changes in one activity I have to write the code to reflect that change across all activities.
Now the problem with both the methods is that each time I open a new activity, a new instance of the viewpager and fragments is created. So, suppose if I have 1000+ items in the recyclerview fragment, switching activities takes more than 2-3 seconds, because each time new instance of fragment is created and the data is loaded all again. This will definitely result in bad user experience.
Is there any way by which the viewpager and the fragments are created only once(when the app starts) and are destroyed only when user closes the app? And data should not load each time user switches activities. I just want to reduce the activity switching time. Any ideas?
Thank you.
Well, for such ui elements as your sliding panel, which stays the same for many items it is preferable to have a single activity.
So if you have 1 activity, you can have a viewpager inside sliding panel, and that part stays untouched. Next, inside your activity you can have FrameLayout wich can be used to host fragments. Doing this you can achieve single instance of sliding panel and navigation between content with fragments.
Having some heavy data collections makes you wishing minimum recreation of that items.
Two approaches for this are (assuming you're using SlidingUpPanelLayout by sothree)
With bottom navigation view
Easy way to do it is creating a bottom navigation view and keeping it in MainActivity and attaching the sliding up panel layout to the bottom navigation view ( layout_above = bottomnavbar_id ) since bottom navigation stays throughout the app so sliding up panel will also have to stay with it
Without bottom navigation view
Create a frame layout inside MainActivity give attributes width and height as match_parent and create slidinguppanelayout and give attributes gravity="bottom"
make the frame layout stay above that slidinguppanellayout , use that frame_layout to show content your want to show from fragments
that's all
This may sound stupid, but can I do that? I have searched a little, and this says "Re-attach a fragment ... causes its view hierarchy to be re-created, attached to the UI, and displayed.", probably meaning that the UI of the fragment is recreated losing states and other things.
The reason why I am trying to do is that I would like to achieve something like the Bottom Sheet of Google Maps. The only title part is showed at the bottom, but we can swipe it up and it becomes a Bottom Sheet. I think when only the title part is showing, it is not actually a Bottom Sheet, as it would be difficult to make exactly that part of a Bottom Sheet to be shown. I think Google Maps has put the title part separately, and is replacing it with a Bottom Sheet whose top part looks just like the title part, when swiping up begins.
So, to achieve similar effect, I thought I would create a cluster of UI as a fragment, and when the user begins swiping up, I place a Bottom Sheet with the peek size is set exactly to the height of the fragment, and move the fragment into the top of the Bottom Sheet, so that it can be swiped up.
But I want to keep everything of the fragment without recreating anything, as if I take the fragment and just move into the fragment instantly. Is that possible, or should I save the states and restore them when the fragment's UI is recreated?
Yes. Consider fragment as View and play with ObjectAnimator or any animation class as per behaviour. (Slide-up animation will do the trick)
Note: Fragment will initialize first even you display 20% of portion over main layout. State will remain same This does answers your question i guess.
Here is similar example for your work around. Reference
I have the requirement for what is effectively two activities side by side, allowing the user to scroll from one to the other, and back. I've decided that ViewPager is probably the best way to handle this, but am open to suggestions.
When the activity loads, the left hand view is displayed. I want to indicate to the user that the other view exists, by just scrolling it a small amount to the left and back again (similar to the way it's now common to show that a sliding drawer menu exists).
I've tried a number of things but have yet failed to find a method where both the views scroll smoothly together. Another way of interpretting the requirement is saying I want to programmatically fake a user flicking the page briefly.
Try calling the method fakeDragBy(float)! According to the documentation you need to first call beginFakeDrag() to initiate it and then call endFakeDrag(). This will mantain the ViewPagers default snapping behavior, so once you've revealed the other screen is there you don't have to animate the transition back, simply call endFakeDrag and the ViewPager will correctly snap back to the last screen (As long as you haven't dragged it past the half-way mark).
I am exploring share element transition from one activity to other.
I have a list of video thumbnail in one activity and in second activity i have two fragments, FragmentA and FragmentB. In FragmentB i am showing videos like snap chat. If user click on right next video will play. Now if user swipes from top and drag video to bottom, I want to make animation like snap chat where video view will shrink according to drag distance.
Please give me some hint/suggestions how can i achieve transition of element like snapchat.
You can check this project in Github: https://github.com/pedrovgs/DraggablePanel
Draggable Panel is an Android library created to build a draggable user interface similar to the new YouTube draggable video component based on Fragments or Views.
It has the drag functionality you mentioned as seen from this image
screenshot
I've been trying to figure out how to go about doing this specific task, but I can't quite figure out.
So, I have a ViewPager setup with 2 layouts that work perfectly. In the landing Pager, I have a button. What I'd like to do is, hit that button and the page animate vertically (up) to another layout.
I got the similar movement with starting a new Activity, but the problem with that, is that the title bar gets animated as well. So it doesn't give this fluid motion to the layout above.
I tried several things, but came up short with a lot of crashes.
Then I was thinking of having the landing Pager be a ScrollView and stack both layouts on top of each other, and navigate to a specific id, but came to no avail.
Does what I'm saying making sense? How should I go about creating something like this?
So to summarize.
Land on a page where you can swipe to one additional page (left).
Be able to hit a Button (on landing page) and animate up (vertically) to another layout.
All of this while having a static title bar.
Thanks in advance.