I am having great trouble to implement layout swiping UI. Here I show you how each layout works.
My first Layout
My second layout
My third Layout
How it works:
A user can move one page to another by touching the screen and the indicator will move as the layout or page move. But the Sign In and Sign Up button will be fixed in there position. How can I implement this type of UI.
This can be done using a viewFlipper but there is a trick using this whole as a layout.
Use a frameLayout
having your buttons settled down with the gravity set to bottom
Note framelayout works as a stack LIFO things(widgets/layouts) placed at last will superimpose the ones place above them in xml
like for example
//so here view shows s2 and below that s1.....
so in your layout s2 will be the buttons with gravity as bottom
s1 -should be a viewFlipper ...
SWIPPING
swipping can be acheived using the onTouch event
SWIPE LEFT
When the touch down gives a position(x1,y1) and onTouchUp (x2,y2)
check if(x2>x1)
so use viewFlipper.setInAnimation(Animation) viewFlipper.setOutAnimation(Animation)--for the ui that will be gone
SWIPE RIGHT
similarly if (x2<x1)
viewFlipper.setInAnimation(Animation) viewFlipper.setOutAnimation(Animation)
You have used three different layout and increment counter by touching the layout and match to set the layout.
Here is the complete example of ViewFlow please check out the source
https://github.com/pakerfeldt/android-viewflow
and here is another example
http://developer.android.com/shareables/training/Animations.zip
see implementation of screen slide, that is what you exactly want.
The bar moves something like this
Display d= getWindowManager().getDefaultDisplay();
int h=d.getHeight();
int w=d.getWidth();
after getting this h and w , now at every swipe move the bar
where w=screen width calculated with the above method
increments=w/3;
bar_initial_position+=increments;
so it moves..
Related
I have been researching for the same since two days. Here is what i want to achieve. I havent ever tried much animations in android so please clear my approach wherever required. I will have two pages/screens (one visible at a time) Now when I am on page1, on swiping right to left page 2 will be displayed (achieving this is not that difficult) But here is my problem : when I am scrolling to page2 i would like to animate/translate/slide an image from page1 to page2 (without touching the image) and let the image sit on page2. I am just not sure of how to start with this.
I have thought of few ideas
First: I think i should implement a layout larger then window and then do the required animations and scrolling in it using horizontal scrollview.But now here I am not sure how will I make it look like they are 2 different pages(concerned about handling different screen sizes)
Second:I have seen example libraries of draggable gridview viewpager. But here both of my pages will have different layouts
Third:I am thinking of dividing both of my pages. the lower part of my pages will contain framelayout where I will only change the framelayout's content on scroll and perform hide n show trick on the upper part.But here again the trick is how am I supposed to place the image(contained in framelayout) to upper layout with an animation(image sliding to the top side on its own kind of animation)
Any Ideas. Any views/suggestions. Need all of it.Thank You for your valuable time.
This happens when I am trying to move the image to screen's top-left position. It moves in the left top direction as shown in the images below..
This happens when I am trying to move it besides second fragment textview
But the problem is I want to move it besides second fragment textview while scrolling and when scrolling is done it should come to top left of the screen just like the second fragment textview
I have to create to sliders(relative layout with background image) which are partially displaying on the screen on the click of that slider it should move to right and fully displaying on the screen and on another click it should move towards left and partially displaying on the screen .
I have achieved this moving animation but my problem is that Relative layout appearing fully on the screen and I want it to be display only 80%.
I have gone through this and this tutorial.
Use SlidingPaneLayout
SlidingPaneLayout provides a horizontal, multi-pane layout for use at the top level of a UI. A left (or first) pane is treated as a content list or browser, subordinate to a primary detail view for displaying content.
Check this : SlidingPanelLayout
I'm trying to implement a sliding menu, like in Prixing app. (The menu which lays under main layout and get visible when you take and drag main layout to the side)
But the trick is - i want it to appear on bottom of the screen, so I need to move the main layout to the top.
The second problem is that in tah layout I got a listview.
Please, I really need advices or maybe link to some usefull resources where I can understand how touch events are handled.
Thx!
i think you are try to do same as facebook app. i have found demo for it. so use this
there's really no magic on it.
To make it, move directly (in a button click or something):
you use a animation to change the LayoutParams.top from both fragments (the one on top (currently in view, and the one on the bottom, hidden under the screen).
On your XML layout make sure to set a fixed height for the bottom layout (in DIP) and during runtime animate the two layouts to move that amount of pixels.
To make it move with the user finger:
That will be tricky, because the listview MUST receive the the user input. Maybe if you call super on it.
But you can accomplish it by receiving OnTouchEvents:
TOUCH_DOWN, you start the move (mark it with a boolean or something)
TOUCH_MOVE, you apply the same change to the layout params that you did on the animation (1st option)
TOUCH_UP or TOUCH_CANCEL, you stop the move (clear the flag).
hope it helps pointing you to the right direction.
In my application I want to have sliding menu on the left side just like facebook.
In my previous question I had raised concern regarding the same and thanks to this answer that I could found a way to slide my layout to right using this library. But, I found that, the library does not actually slides the layout, instead it just takes the screenshot and slides the image towards right as the components on the layout are not clickable. And I need those components to be clickable. So, I tried a new way of achieving this by putting the slideout menu on the left by keeping its default visibility to View.GONE and make it visible on click on left top corner "Show/hide Menu" button as shown in figure below.
Layout before:
Now when I click "Show/Hide Menu" button, the layout is something like-
Layout after:
As you can see, the layout on the right shrinks and so the button "Some other view" changes its width even if I've set the android:minWidth attribute to those two buttons on the right as well as its parent RelativeLayout.
So my question is, is there any way to shift the layout towards right without the inner components changing their width/layout? So in whatever area is available for my view, it will be filled by whatever portion of the content that can be filled in in that area.
This problem can be solved like this:
create framelayout with inside: first left menu with 3 buttons and second layout that contains other two buttons (show/hide and other view). This way, the second layout is in front of menu (since it is fill_parent).
in onClick of show/hide button perform translate animation: assuming that your menu is 200px wide, move the second layout by 200 to the right.
in onAnimationEnd, set margins to the second layout like this: secondLayoutLayoutParams.setMargins(200, 0, -200, 0);
Closing menu is similar: move the second layout to the left by 200 and set all margins to 0.
By setting margins you will avoid button shrinking.
Hope it helps
#Rajkiran - I have a root layout, that contains my left & right layouts.
My right layout has layout_height set to 'match_parent' & layout_widht is also set to 'match_parent'
Now when my left sliding panel appears on button click, I reset the width & height of my right layout programmatically to match the width & height of the root layout.
This perfectly shifts the right layout towards right without the inner components wrapping up.
To change height & width programatically I used this -
rootLayoutParams = new LayoutParams(rootLayout.getWidth(), rootLayout.getHeight());
rightLayout.setLayoutParams(rootLayoutParams);
Hope it helps you as well.
Background:
I have an Activity that comprises four buttons that each take up a quarter of the screen.
It contains a horizontal LinearLayout that is divided in half by two vertical LinearLayouts as shown in the image below:
http://i.stack.imgur.com/P7Wd3.jpg
Desired Effect:
When I touch a button, I would like it to animate and fill up the entire screen.
Issue:
I have accomplished the animation aspect by changing X and Y scales from 1 to 2 onClick.
The problem is, however, that the animated button will not show when it leaves its parent LinearLayout.
Thoughts
I have tried making the non-animated buttons invisible, but the animated button will only show in its parent LinearLayout.
I know this problem would be solved if I had used a single LinearLayout, but I was unable to use the "layout:weight" feature to make each button take up half of both width and length.
So... How should I approach this issue?
I would appreciate any help :)
Try using a single RelativeLayout. Check this post for a nice example. You may have to setVisibility(View.INVISIBLE) for the other buttons.
Alternative:
Construct a RelativeLayout as above but put that as the only child
of a FrameLayout.
When animating a button, remove it from the RelativeLayout and add it to the FrameLayout specifying the gravity in the LayoutParams appropriately. This way the rest of the buttons will also be seen in the background during the animation.