I am trying to create an activity layout with two parts, where their respective size is dynamic. The activity should have two states:
Starting state:
The user scrolls the bottom part up to the second state (and back):
It's important that the change will be animated. I tried a few solutions so far but didn't manage to find the exact way to do that:
AndroidSlidingUpPanel - The panel acts as another layout, covering the upper view and moving the toolbar out of the screen.
Android Split Pane Layout - Correct behavior, but the splitter is dragged and not the bottom part (I don't want to have a visible splitter).
CoordinatorLayout with CollapsingToolbarLayout - I didn't find a way to limit the upper part from totally disappearing. Anyway I think that it's a bit abusing because I don't want to collapse a toolbar but just change the children's height with animation.
Is there a good way to implement this using another library, one of these that I perhaps didn't use correctly or with simple layouts? Thanks!
I found a custom version of the SlidingPaneLayout created by VLC, which is basically a vertical SlidingPaneLayout - the exact functionality that I was looking for.
Related
I've been using Phonograph music player for a while and it's a really good looking app in my opinion. It has a very nice sort of header: basically there's the toolbar wich slides up and down along with the recycler view hiding behind the status bar when scrolling down and coming back visible when scrolling up, the difference with other toolbars show/hide animations is that this one does not actually have two rigid states (hidden or shown) but instead it can be half covered, 70% covered, 80% covered and so on, it moves at the same speed of the recycler view, it's really different than the ActionBar.hide() .
Little clip to explain what I'm talking about:
http://i.imgur.com/JCIiFAA.jpg
I've searched the web for solutions but I haven't found nothing close enough but I think that the Observable Scroll View library might be a good starting point (Have already done some testings but so far it has those 2 rigid states wich I don't want).
I am using an activity MainActivity.java and setting its content view to activity_main.xml, how can I achieve that result?
Also how can I make that view pager selector just below the toolbar but sticky?
CoordinatorLayout from Design Support Library is what you are looking for.
See Tutorial here https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling(part3)/
First of all you need to wrap up your Layout with Coordinator layout and set this flag on Toolbar
app:layout_scrollFlags="scroll|enterAlways"
You usually traverse a list by scrolling through the views that are placed one after another. What I'm trying to achieve is similar, but the views would be stacked on top of each other. The views will also cover the whole screen. So when you scroll, the top view slides away (or uses some other transition animation), but the bottom one is not moving underneath. You can imagine that the views are like the papers in a top spiral-bound notebook.
So my question is - does something similar already exist? I haven't been able to found anything so I might need to make a custom implementation. Oh and the views will each contain an image and there might be quite a few of them, so it will need to handle that (I was thinking of using Android Universal Image Loader). Thanks.
Sounds like you want to use Depth page transformer, via http://developer.android.com/training/animation/screen-slide.html#pagetransformer
Had a question about making part of a View Always-On-Top. Please see the Groupon picture below. The black window at the bottom where it says "From $29" & "Buy!" is always on top of the activity page. Meaning the rest of the page is scrollable above that black window at the bottom. Please note I only want this activity to have an Always-On-Top
How do I make a portion of the activity Always On Top? And what kind of layout did you think they used for Groupon? I was just going to make a RelativeLayout and layout_alignParentBottom="true".
You could probably get away with having a vertical linear layout with two children. The first one a scrollable area and the bottom a view with whatever it is you want to be 'on top'. Since there's no transparency there's no visual difference between having the black view as always-on-top and having one view on top of the other (in the y-axis, not z-axis). Plus, if you do it this way you can reach and see the bottom of the scrollable view's content.
To the best of my knowledge, the best way to do this is by implementing a BaseActivity with this View, and have all your activities extend this activity instead of the standard Activity.
I am porting an iOS application so the design is pretty much out of my hand. What I have is two LinearLayouts, one with what is basically a bump (shown in pictures) that I want to overlap the second LinearLayout.
I get aesthetically what I want desire I use FrameLayout to contain the two layouts. However, here I run into two functional problems. The first, I need to be able to allow the bottom, overlapping LinearLayout which is composed of five adjacent image buttons to change size (preferably, using layout_weight). The second is anything that is in the bottom of the top LinearLayout it is hidden by the bottom LinearLayout.
When I switch to using LinearLayout, from FrameLayout to contain the two I get functionally what I want, however, aesthetically it smashes the button to fit.
Both cases are pictured. All feedback is appreciated. I am hoping to find a solution to this without designing a custom widget.
Thanks.
Seeking help to design a layout as shown here:
http://docs.google.com/Doc?docid=0AQhgDtGvE2HgZGZ6cmtua185MTd0eGdyZmc&hl=en
The major challenge I face is aligning the components at desired positions. Please refer the three buttons(icons) and the way they are positioned.
Literally, going nuts, thinking how to position those exactly at the desired places.
Any help is much appreciated.
Regards,
Rony
Since you used the Android category, I'm assuming that you're trying to recreate this iPhone layout in Android.
The three buttons would probably be best laid as follows.
Your main layout container would probably be a RelativeLayout, so you can dock things to the top and bottom and lay everything else out in relation to one of its sibling elements. The three button icons (and I'm assuming you're referring to the circular buttons and not the tab bar buttons at the very bottom) would be in a LinearLayout centered within its parent (probably want to use gravity=center_horizontal on the main outer layout) and the individual items would have an equal left and right margin parameters to get the desired spacing (layout_marginLeft, layout_marginRight). You could also make the LinearLayout container of the buttons flush (layout_width=fill_parent) and using android:weight attribute on the outer buttons laying them out towards the center and using a lower weight on the center item. I'd favor the first option, personally.
If you're trying to create relatively complex layouts and any of the above doesn't make sense, go back and read the docs. Layout in Android is very powerful, but you really have to understand the available tools to take advantage of it.