Friday, December 3, 2010

slide up /down translate

Many would be interested to perform some kindaa of slide up or bottom up animation of images on a button click.

Translate animation can be used to perform this.
public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

FromX - 0
ToX - 0
FromY - 100
ToY - 0

// This means from the height of 100px, the animation will move up the view upwards untill toY becomes 0. THis looks like the view is moved from bottom up or slide up

What i tried out here

1 - A Linearlayout of height 100px is created and set a edit text inside it.
Intially edit text is set to invisible state.So that first time, application
started you will see nothing.
2 - On the onlick() of Button object
- created a translate animation with fromY = 100
- Set the fillafter(true) so that when animation ends, the position of view will be retained. else the view will not be visible.

3 - start the animation on the edit text object.



public void onClick(View v) {
edit.setVisibility(View.VISIBLE);
TranslateAnimation slide = new TranslateAnimation(0, 0, 100,0 );
slide.setDuration(1000);
slide.setFillAfter(true);
edit.startAnimation(slide);
}
});






edittext.java
----------------



package com.android.edittext;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.EditText;

public class edittext extends Activity {
Button b;
EditText edit;
View layout;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
edit = (EditText)findViewById(R.id.edittext);
b = (Button)findViewById(R.id.button);
layout = (View) findViewById(R.id.layout);
b.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
edit.setVisibility(View.VISIBLE);
TranslateAnimation slide = new TranslateAnimation(0, 0, 100,0 );
slide.setDuration(1000);
slide.setFillAfter(true);
edit.startAnimation(slide);
}
});
}
}





layout.xml
------------


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Button
android:id="@+id/button"

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="slideup"
/>

<LinearLayout
android:id="@+id/layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="100px"
>

<EditText
android:id="@+id/edittext"
android:visibility="gone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollHorizontally="true"
/>

</LinearLayout>

</LinearLayout>

14 comments:

  1. Sir can you tell me how to move text Up and Down in a ListView..or Drag text from from the ListView..

    Regard
    Ali

    ReplyDelete
  2. I havenot tried like that. But to achieve this, you may need to over ride the listview class and handle in onTouch, onDraw. But certainly u cannot move the text out of the listview region, u can only move within the listview space up/down.

    Thanks,
    Mani

    ReplyDelete
  3. Hi mani can you share any link for tutorial you know, that can help me..

    Thanks,
    ali

    ReplyDelete
  4. As Ataturk stated "All the power you need is in your blood"

    ReplyDelete
  5. How would I move one view down... wait 2 seconds... then move another view back up?

    ReplyDelete
    Replies
    1. You would create two translate animations, one for up and one for down. Then for the second animation create an offset amount of 2000ms. You could then catch the animation end event of the first and start the second animation of your other view.

      Delete
  6. Thankss :) TranslateAnimation is my drug..

    ReplyDelete
  7. when I dissapear my edittext it can recieve touch events and leave a big blank space. Please how can I solve this?

    ReplyDelete
    Replies
    1. try to use mEdittext.setVisisbility(EditText.GONE) on animation end using an animation listener.

      Delete
  8. Thank you! This is very helpful.

    ReplyDelete
  9. I want when we intent our activity that means when we change our page on click of anything it should come as slide up... can you give me idea how i will achieve this thing

    ReplyDelete