I'd love to know if anybody knows how to achieve following:
I've got a ViewPager showing up a fragment. While this fragment is showing, You can see the small left border of the fragment to the right. This fragment can be pulled out and acts like a NavigationDrawer.
Here's an example, the Android L Calculator app:
https://d13yacurqjgara.cloudfront.net/users/409459/screenshots/1647461/calculatorrender.gif
As You can see, there is a small blueish border to the right which can be pulled out by swiping it in just like a NavigationDrawer.
Any suggestions how this is achieved?
From the looks of it, this is not done with a ViewPager.
If I would have to do this layout, I would do it with 2 ViewGroups next to each other.
The first one would take 90% width of the screen, would be in the back, and aligned to the left, lets call this layout A.
The second one would take 75% width of the screen, placed in the front, aligned to the right, and have right margin of -65%. I would also add a nice shadow to its left edge, and call it layout B.
Layout A would have a grey background and lots of buttons, as in the animation. If the user swipes left on this view, you set a flag that layout B is shown, and animate the right margin of layout B, to show it. You would do the same when layout B is tapped while being almost hidden.
Any tap on layout A now would close layout B (you can control this with the flag).
When tapped on a button in layout B, you also animate the right margin back, and set the flag also back to false.
If you would use fragments for this, then you would have to worry too much with the communication between the two, and it would just go the same way as with views.
Related
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 been struggling for a while with the strange behaviour of android Clipping. I have an activity with a ViewPager and I'm unable to deactivate clipping outside the bounds inside the viewpager. The pager is using a single type of fragment which is divided in two parts: the top part is static and is always visible, the bottom part translated left/right to achieve an animation.
The problem is that the translated part of the fragments are overlapped by the currently active fragments.
Does someone have any idea how to disable clipping?
[The problem: the view(marked with blue) is visible just on the left side, on the right it's overlapped by the current fragment / out of view bounds.
I am trying to put a view horizontally on the right side of the tabs. If i put a view next to tabs, the activity displayed in tabs does not cover the region which is outside tabs thus it leaves a gap for that view. Does anyone know how to fix this.
Temporarily, I am using views instead of Tabs which made my layout very complex.
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.
in my Activity, I have a layout containing 3 FrameLayouts, one at the top, one at the left and one at the "center".
Now, I sometimes only want to display one or two of them. Atm I am doing it this way:
FrameLayout frame = (FrameLayout) findViewById(R.id.framelayout_menu_left);
frame.setVisibility(...);
frame = (FrameLayout) findViewById(R.id.framelayout_content);
frame.setVisibility(...);
frame = (FrameLayout) findViewById(R.id.framelayout_menu_top);
frame.setVisibility(...);
However this can get really ugly results, e.g. when I switch the "content" Fragment and hide the top and/or left FrameLayout. It all starts flickering as the "content" Fragment jumps to the top and/or left and only afterwards is replaced.
Also, I can obviously not navigate back to another setup, so is there any other way to do this?
Kind regards,
jellyfish
Edit:
Maybe a little drawing makes my question clearer...
A shows a Layout of 3 FrameLayouts containing 3 different Fragments. Each color represents one distinct Fragment.
Now what I want to do is to switch from A to D.
I am doing this by replacing the blue Fragment with the yellow Fragment via a FragmentTransaction.
However, this still keeps the other Frames visible, so I hide them via the code above.
Now, Frame.setVisibility() is called way before commit(), so in B and C the blue Fragment "jumps" to the left and the top and only afterwards (in D) is replaced with the yellow Fragment. This produces a nasty flickering.
As a workaround, I now hide all three FrameLayouts before the transaction and re-show the ones I need once the transaction has finished. But there still is the problem that I can't go back via the back button as this isn't a real transaction.
I would have two suggestions. Firstly, if you both add a fragment transition effect and do the visibility changes after the transaction, that would probably substantially reduce much of your flicker effect
ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
Secondly, I've simply given up on having the system manage the fragment stack for me -- it seems that this only works well with simple transactions. Override onBackPressed and do your own logic there.
--randy