How to create facebook style bottom fly in menu - android

I like to create action bar / menu as Facebook android application .
I am talking about (Status | Photo | Check In) menu that appears in bottom pf application.
1.How can I create this kind of menu?
2.How to create fly in affect on that menu ?
Is that action bar ? or Relative layout at bottom ?
Thanks.

Here is a code of a floating layout.You can customize it to build a menu.
public class MainActivity extends Activity {
LinearLayout ll;
Float startY;
private Animation animUp;
private Animation animDown;
Button btn_show;
int f=1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll = (LinearLayout) findViewById(R.id.slider);
btn_show=(Button)findViewById(R.id.btn_show);
ll.setVisibility(View.GONE);
animUp = AnimationUtils.loadAnimation(this, R.anim.anim_up);
animDown = AnimationUtils.loadAnimation(this, R.anim.anim_down);
btn_show.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(f==1)
{
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animUp);
f=0;
}
else{
ll.setVisibility(View.GONE);
ll.startAnimation(animDown);
f=1;
}
}
});
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN :
{
startY = event.getY();
break ;
}
case MotionEvent.ACTION_UP:
{
float endY = event.getY();
if (endY < startY)
{
System.out.println("Move UP");
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animUp);
}
else {
ll.setVisibility(View.GONE);
ll.startAnimation(animDown);
}
}
} return true;
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show"
android:id="#+id/btn_show"
/>
<LinearLayout android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="false"
android:layout_centerInParent="true"
android:background="#android:color/darker_gray"
android:content="#+id/content"
android:gravity="bottom|center_horizontal"
android:orientation="vertical" >
<TextView android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Floating Tab Kaustav"/>
</LinearLayout>
</RelativeLayout>
Create a anim folder in res and make 2 xml files:
anim_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="400"/>
</set>
anim_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%"
android:toYDelta="40%"
android:duration="400"/>
</set>
Try it.Hope it helps.

Related

multiple if/else statement conundrum

Newb question.
So, I'm making sections of text that are clickable and can expand and contract to show more text from a very helpful tutorial but I'm stuck on the last part. There's an if/else statement for a text section that toggles the content from GONE to VISIBLE. But now I'm trying to adjust the code to include more else statements and I can't figure out what the condition should be.
public class AlabamaActivity extends AppCompatActivity {
TextView registration_info;
TextView info2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alabama);
registration_info = (TextView)findViewById(R.id.registration_info);
// hidden until its title is clicked
registration_info.setVisibility(View.GONE);
info2 = (TextView) findViewById(R.id.info2);
info2.setVisibility(View.GONE);
public void toggle_contents(View v) {
if (registration_info.isShown()){
Fx.slide_up(this, registration_info);
registration_info.setVisibility(View.GONE);
}
else if (//?????){
registration_info.setVisibility(View.VISIBLE);
Fx.slide_down(this, registration_info);
}
else if (info2.isShown()){
Fx.slide_up(this, info2);
info2.setVisibility(View.GONE);
}
else if (//?????){
info2.setVisibility(View.VISIBLE);
Fx.slide_down(this, info2);
}
...
This is the original if/else statement I'm trying to adjust.
public void toggle_contents(View v) {
if (registration_info.isShown()){
Fx.slide_up(this, registration_info);
registration_info.setVisibility(View.GONE);
}
else {
registration_info.setVisibility(View.VISIBLE);
Fx.slide_down(this, registration_info);
}
I've tried trial and error for the last couple of hours and the results I get online are a bit much for a newb like me.
Also, I've been wondering if I can make this switch/case instead?
Thanks!
EDIT---try not to laugh lol
Fx code
public static void slide_down(Context ctx, View v) {
Animation a = AnimationUtils.loadAnimation(ctx, R.anim.slide_down);
if (a != null) {
a.reset();
if (v != null) {
v.clearAnimation();
v.startAnimation(a);
}
}
}
public static void slide_up(Context ctx, View v){
Animation a = AnimationUtils.loadAnimation(ctx, R.anim.slide_up);
if(a != null){
a.reset();
if(v != null){
v.clearAnimation();
v.startAnimation(a);
}
}
}
}
Slide down
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="0.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
Slide up
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Alabama">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Registration"
android:textSize="20sp"
android:clickable="true"
android:onClick="toggle_contents"
android:paddingLeft="16dp"
android:paddingBottom="16dp"/>
<!--content to hide/show -->
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/registration_info"
android:text="info here"
android:paddingLeft="16dp"
android:paddingBottom="16dp"/>
<TextView
android:id="#+id/info2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info2"
android:textSize="20sp"
android:clickable="true"
android:onClick="toggle_contents"
android:paddingLeft="16dp"
android:paddingBottom="16dp"/>
<!--content to hide/show -->
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/info2"
android:text="info here"
android:paddingLeft="16dp"
android:paddingBottom="16dp"/>
This should do the job, [for now]:
public void toggle_contents(View v) {
// first set
if (registration_info.isShown()){
Fx.slide_up(this, registration_info);
registration_info.setVisibility(View.GONE);
}
else {
registration_info.setVisibility(View.VISIBLE);
Fx.slide_down(this, registration_info);
}
// second set
if (info2.isShown()){
Fx.slide_up(this, info2);
info2.setVisibility(View.GONE);
}
else {
info2.setVisibility(View.VISIBLE);
Fx.slide_down(this, info2);
}
[EDIT]
Based on your updated post, I believe this should be enough:
public void toggle_contents(View v) {
if (v.isShown()){
Fx.slide_up(this, v);
v.setVisibility(View.GONE);
}
else {
v.setVisibility(View.VISIBLE);
Fx.slide_down(this, v;
}
[EDIT2]
Since, you're attaching click listener to one textview and expanding/collapsing the other, switch-case seems the way to go:
public void toggle_contents(View v) {
View childTV;
switch(v.getId()) {
case R.id.registration:
childTV = findViewById(R.id.registration_info);
// Can add more cases here
default:
childTV = findViewById(R.id.info2_child);
}
if (childTV.isShown()){
Fx.slide_up(this, childTV);
childTV.setVisibility(View.GONE);
}
else {
childTV.setVisibility(View.VISIBLE);
Fx.slide_down(this, childTV);
}
}
NOTE: Currently, two of your views have id as info2 in the xml. I have taken a dummy id above, you should fix it accordingly.

How to animate active layout change (Layout A -> Layout B) in Android?

I have a problem with animating layout transision in my Android Application.
I've three layouts stacked on each others. I just change visible layout to decide what content is shown to user. So the lifecycle look like this A->B->C->A...
The problem is that I want to animate my layout changes and I don't have idea how to do that. I want to achive ebook's like sliding effect (or any other one, I just want to get how does it work).
Any ideas?
My code:
MainActivity:
public class MainActivity extends Activity implements View.OnTouchListener {
private ViewFlipper viewFlipper;
private float touchDownX;
private float touchUpX;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper);
viewFlipper.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
touchDownX = event.getX();
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP) {
touchUpX = event.getX();
if (touchUpX - touchDownX > 100) {
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_in));
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_out));
viewFlipper.showPrevious();
} else if (touchDownX - touchUpX > 100) {
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
viewFlipper.showNext();
}
return true;
}
return false;
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ViewFlipper
android:id="#+id/body_flipper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f0f0f0" >
<include
android:id="#+id/layout01"
layout="#layout/page1" />
<include
android:id="#+id/layout02"
layout="#layout/page2" />
<include
android:id="#+id/layout02"
layout="#layout/page3" />
</ViewFlipper>
</RelativeLayout>
push_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="400"
android:fromXDelta="-100.0%p"
android:toXDelta="0.0" />
<alpha
android:duration="400"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
push_right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="400"
android:fromXDelta="0.0"
android:toXDelta="100.0%p" />
<alpha
android:duration="400"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
push_left_in.xml and push_left_out.xml are similar to the above ones.
use ObjectAnimator class and implement fade/translation animations that fit your needs.
Try to use ViewFlipper to flip between views. http://developer.android.com/reference/android/widget/ViewFlipper.html

Rotate image 90 degrees ontouch left or right

So I'm in a bit of a crysis. I'm creating a game and I have a square with 4 different colors on each side. Can't seem to make the square rotate 90deg on right screen touch and -90deg on left screen tap. I can get it to rotate on tap but not stay at the position. Like it to be as smooth as possible.
The Activity:
public class GameActivity extends Activity implements OnTouchListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_game);
// Reference to the left and right linear screens
LinearLayout leftTap = (LinearLayout) findViewById(R.id.leftTap);
leftTap.setOnTouchListener(this);
LinearLayout rightTap = (LinearLayout) findViewById(R.id.rightTap);
rightTap.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
// Square itself
ImageView square = (ImageView) findViewById(R.id.square);
// Left and Right Animations
Animation leftAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_left_animation);
Animation rightAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_right_animation);
switch (v.getId()) {
case R.id.leftTap:
// Do left Rotate animation
square.startAnimation(leftAnimation);
break;
case R.id.rightTap:
// Do right Rotate animation
square.startAnimation(rightAnimation);
break;
default:
break;
}
return false;
}
}
The Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".GameActivity"
android:weightSum="1"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/leftTap"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/square"></LinearLayout>
<ImageView
android:contentDescription="The Square"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/square"
android:src="#drawable/photo"
android:scaleType="fitCenter" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rightTap"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/square"></LinearLayout>
</RelativeLayout>
Left Tap Animation XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-90"/>
</set>
Right Tap Animation XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90"/>
I could:
switch (v.getId()) {
case R.id.leftClick:
square.setRotation(square.getRotation() - 90);
break;
case R.id.rightClick:
square.setRotation(square.getRotation() + 90);
break;
default:
break;
}
But it won't have the animation (basically linear interpolation) affect. I want to know how can that be done?
Just use ViewPropertyAnimator.
Your OnTouchListener could look like this (although I'm not really sure why you've decided you wanna use OnTouchListener instead of for example OnClickListener):
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
switch (v.getId()) {
case R.id.leftTap:
// Do left Rotate animation
square.animate().rotation(-90).setInterpolator(new LinearInterpolator()).setDuration(500);
break;
case R.id.rightTap:
// Do right Rotate animation
square.animate().rotation(90).setInterpolator(new LinearInterpolator()).setDuration(500);
break;
default:
break;
}
}
return v.onTouchEvent(event);
}
Or you could use rotationBy instead of rotation if that fits your needs better.

How to animate android fragment in and out of the screen with support library

I'm trying to show a fragment inside my activity wich contains a menu and it is supposed to slide in from the right side of the screen until the user dismisses it pressing the button again or pressing back button, then it should slide out to where it came from, both actions with an animation of course. The problem is that the fragment slides in, but I can't make it to slide out with the animation, it just pops out dissapearing. I've readed some similar posts but a haven't found any working solution for my situation.
Here is the code that should get the job done:
private void showMenuFragment() {
if (this.frMenu == null) {
this.frMenu = new MenuFragment();
FragmentTransaction transaction = this.getSupportFragmentManager()
.beginTransaction();
transaction.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_right);
transaction.replace(R.id.fr_side_menu, this.frMenu);
transaction.addToBackStack(MenuFragment.class.getName());
transaction.commit();
}
else {
this.frMenu = null;
this.onBackPressed();
}
}
Animations:
File slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
</set>
File slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0%"
android:toXDelta="100%" >
</translate>
</set>
Please help!
Thanks in advance.
The Android docs explain, for setCustomAnimations(int enter, int exit)
These animations will not be played when popping the back stack.
So, you must use the longer form, which has additional parameters for popEnter, and popExit:
transaction.setCustomAnimations(R.anim.slide_in_right,
R.anim.slide_out_right,
R.anim.slide_in_left,
R.anim.slide_out_left);
To make this look right, you may want to define slide_in_left and slide_out_left, but that depends what you're going for...
After some research I've found a very simple solution using a complete different approach, hope it helps somebody.
The things is animate in and out a layout containing the information formerly inside the fragment but without a fragment. Initially the layout visibility is set to "GONE" and it is showed in respnd to a user's action like swipe or pressing a button.
Here is the complete example:
1 - The activity handling user actions:
public class MainActivity extends Activity {
private LinearLayout ll;
private float startX;
private Animation animLeft;
private Animation animRight;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll = (LinearLayout) findViewById(R.id.slider);
ll.setVisibility(View.GONE);
animLeft = AnimationUtils.loadAnimation(this, R.anim.anim_left);
animRight = AnimationUtils.loadAnimation(this, R.anim.anim_right);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
startX = event.getX();
break;
}
case MotionEvent.ACTION_UP: {
float endX = event.getX();
if (endX < startX) {
System.out.println("Move left");
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animLeft);
}
else {
ll.startAnimation(animRight);
ll.setVisibility(View.GONE);
}
}
}
return true;
}
}
2 - The layout containing the sliding "menu":
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_bright" >
<LinearLayout
android:id="#+id/slider"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#android:color/darker_gray"
android:content="#+id/content"
android:gravity="bottom|center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Surviving with android" />
</LinearLayout>
</RelativeLayout>

How to animate a slide in notification view that pushes the content view down

I have two views on the screen
one sits at the top of the screen and on sits directly below it
I need the green view to slide out the top - and make the blue view take up the entire screen as a result
this is what i am trying to do:
-- the problem is , when the animation is finished, the blue view just "jumps" up - and i want it to ease up with the disappearing green view, how do i do that?
slide_in_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="-100%"
android:toYDelta="0%" />
</set>
slide_out_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="0%"
android:toYDelta="-100%" />
</set>
MainActivity.java
slideInAnimation = AnimationUtils.loadAnimation(mActivity, R.anim.slide_in_animation);
slideOutAnimation = AnimationUtils.loadAnimation(mActivity,R.anim.slide_out_animation);
slideInAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
mGreenView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
slideOutAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
mGreenView.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// To change body of implemented methods use File | Settings
// | File Templates.
}
});
This worked for me
First you must import this library: http://nineoldandroids.com/
The import is done by importing existing android project into your workspace, afterwards right click your Poject -> Properties -> Android. Here you will see a library section, click the Add button and add the nineoldandroids library.
First off, here is the layout xml used for this to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:divider="#android:color/transparent"
android:fastScrollEnabled="false"
android:listSelector="#android:color/transparent"
android:scrollbars="vertical"
android:smoothScrollbar="true" />
<View
android:id="#+id/greenView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#ff00ff00"
android:alpha="0"/>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/animate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="animate" />
<Button
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="close" />
</LinearLayout>
Notice: Both the ListView and the green View could be layouts of any types with any kind of content.
And next a proof of concept Activity.
public class TestActivity extends Activity {
private View greenView;
private ListView listView;
private int greenHeight;
private boolean isShowingBox;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// The animated view
greenView = (View)findViewById(R.id.greenView);
listView = (ListView)findViewById(R.id.listView1);
// Instanciating an array list (you don't need to do this, you already have yours)
ArrayList<String> your_array_list = new ArrayList<String>();
your_array_list.add("1");
your_array_list.add("2");
your_array_list.add("3");
your_array_list.add("4");
your_array_list.add("5");
your_array_list.add("6");
your_array_list.add("7");
your_array_list.add("8");
your_array_list.add("9");
your_array_list.add("10");
your_array_list.add("11");
your_array_list.add("12");
your_array_list.add("13");
your_array_list.add("14");
your_array_list.add("15");
// This is the array adapter, it takes the context of the activity as a first // parameter, the type of list view as a second parameter and your array as a third parameter
ArrayAdapter<String> arrayAdapter =
new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, your_array_list);
listView.setAdapter(arrayAdapter);
final LinearLayout layout = (LinearLayout)findViewById(R.id.parentLayout);
final ViewTreeObserver vto = layout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < 16) {
layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
layout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
greenHeight = greenView.getHeight();
}
});
}
public void clickHandler(View v) {
if (isShowingBox) {
isShowingBox = false;
slideOut(1500, 0);
} else {
isShowingBox = true;
slideIn(1500, 0);
}
}
private void slideIn(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from off-screen in to screen
ObjectAnimator.ofFloat(greenView, "translationY", -greenHeight, 0),
ObjectAnimator.ofFloat(listView, "translationY", 0, greenHeight),
ObjectAnimator.ofFloat(greenView, "alpha", 0, 0.25f, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
private void slideOut(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from on-screen and out
ObjectAnimator.ofFloat(greenView, "translationY", 0, -greenHeight),
ObjectAnimator.ofFloat(listView, "translationY", greenHeight, 0),
ObjectAnimator.ofFloat(greenView, "alpha", 1, 1, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
}
Important note: Remember to import the AnimatorSet and ObjectAnimator from nineoldandroids in your class and not the Android SDK ones!!!
One potential solution that makes a nice and fluid exit is using the weight attribute of LinearLayout with a ValueAnimator. Assuming you're using LinearLayout as your parent view for your green and blue blocks, your code would look something like this.
layout.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!--Let's assume this is the view you wish you disappear-->
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
Now with this, in your code you can use the ValueAnimator as follows:
public class MainActivity extends Activity implements AnimatorUpdateListener
{
View view1;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
view1 = (View)findViewById(R.id.view1);
}
public void someAction()
{
//This is the important part, because it is FROM the first value TO
//the second. Notice that it must be a float type
ValueAnimator anim = ValueAnimator.ofFloat(1f, 0f);
anim.setDuration(200);
anim.addUpdateListener(this);
anim.start();
}
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
view1.setLayoutParams(new LinearLayout.LayoutParams(0,
LayoutParams.MATCH_PARENT,
(Float) animation.getAnimatedValue()));
}
}
The ValueAnimator will automatically calculate the increments and execute them to get the smooth transition you want with the added benefit of keeping your view running.
You may also need to handle some strange UI occurrences as a result of shrinking the view (i.e., TextViews may act funny on the transition out), but I didn't run into too much trouble patching those up and keeping it neat.
Good luck! Hope this helps.
Use following code.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>

Categories

Resources