Here is what i want to do.
Lets say i have a parent linear layout and 3 childs in it.
{ ---------------- ++++++++++++++++ -------------- }
"+"/"-" are the layouts. What i want to do is this:
{------ ++++++++++++++++++++++++++++ -------} //1st step
{ ++++++++++++++++++++++++++++++++++++ } //2nd step..
Animate the layout "+" taking over the layouts - .
The same end result as having these 3 layout height "fill_parrent" with weights and
Setvisibility to "Gone" for the "-" layouts but animated
You should look at http://developerlife.com/tutorials/?p=343 He gives very good examples on how to do something you want. I managed to create the move of the first layout to the top (he uses a left-to-right example). So you should move the first layout to the top, the third to the bottom and expand the middle layout after both are completed.
The only difficulty remaining is to get the LayoutParams right so that everything stays as you want it. In the end, you should have 3 animations: one that pushes the top layout off the top, one that does the some with the bottom and the last one that expands the middle one (if you don't want to animate it, you could just set the LayoutParams to both FILL_PARENT
Related
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..
I have a RelativeLayout (that I am not married to) and two TextViews. I would like the bottom of the first TextView to line up with the center of it's parent, and the top of the second TextView to line up with the center of it's parent.
I put a green line in the picture above at the (vertical) center of the parent. The TextViews are currently in exactly the right spot, but I did this as I will describe below with margin's and aligning them to the parent and knowing the parent's size.
For various reasons I can't use just one TextView and center it. Also I don't know the height of the parent, so I can't align each to the top/bottom of the parent and margin them down/up to center them.
I also tried having another View that takes up half the height and be invisible, but layout_height doesn't take percents (or at least it gave me errors).
Any ideas how I can accomplish this?
Should I just put the two TextViews inside another layout and have that center itself?
Create a 0-height view that is centered in its parent and serves as an anchor. (Use the attribute android:layout_centerVertical="true" for this.) Position one text view above the anchor and the other below the anchor.
I've solved this problem before by using a vertical LinearLayout with the two TextViews inside it.
ps.: the Android Design Guidelines http://developer.android.com/design/patterns/pure-android.html specific points out to Don't use right-pointing carets on line items. It might not be a line item that you're doing, but in case it is, just to point it out.
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.
I have a top section for the app which is mainly logo and stuff, and roughly the bottom half is supposed to be buttons.. In the outer container, i have a layout for the logo, and imageView to create a seperator line between the top and bottom and the bottom layout..
The issue is bottom layout has 2 linearlayouts (one of which is hidden initially) first one is just a spinner and the second one is 2 buttons..
I have achieved the "roughly 1/3 of space) by using layout_weights in the top and bottom linear layout (2 and 1 respectively) but when I hide the spinner and show the 2 buttons in the bottom layout in the code, the seperator line is pushed up.. I want it to stay in the same place (like be where it would be after the 2 buttons show up from the get-go so that it doesn't have to move)
I could probably just add some margin to the original one to match it but i feel like that will cause issues in the future on different devices.
How can I accomplish this feat?
I think you might be neglecting to set android:layout_height="0dp" on the LinearLayouts that you set android:layout_weight="1" on. If you do this it should fill the space like you want, and you can do layoutView.setVisibility(View.GONE) and layoutView.setVisibility(View.VISIBLE) to toggle the views.