I want to create a login page (Like facebook android app) where the userid and password EditText
fields are hidden. A logo is shown on the page which animates above upto a certain distance and stays at the new position and then the edit fields are shown.
Here is something I have tried. But here the logo starts from bottom of the page and travels to the top of the page. Where as I want the logo to start from middle of the page and shift a little up to its new position.
Any idea on how this can be done>?
main.xml
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="116dp"
android:src="@drawable/ic_launcher" />
res/anim/animationfile.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator" >
<translate
android:duration="5000"
android:fromYDelta="50%p"
android:toYDelta="-50%p"
/>
</set>
Main.java
Animation translatebu= AnimationUtils.loadAnimation(this, R.anim.animationfile);
// tv.setText("Some text view.");
img.startAnimation(translatebu);
1st The facebook image goes up so you have to translate it from current position to top
<translate
android:fromYDelta="0%p"
android:toYDelta="-30%p"
android:duration="1000" />
Here android:fromYDelta
is start position and android:toYDelta
is end position in percentage i.e -30%
and android:duration
is in time i.e. 1 second
2nd Now attach a listener to check when animation is done 3rd Now Fade in your login box
here is the code
MinActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button startAnimation =(Button) findViewById(R.id.button1);
final LinearLayout LoginBox = (LinearLayout) findViewById(R.id.LoginBox);
LoginBox.setVisibility(View.GONE);
startAnimation.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Animation animTranslate = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
animTranslate.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) { }
@Override
public void onAnimationRepeat(Animation arg0) { }
@Override
public void onAnimationEnd(Animation arg0) {
LoginBox.setVisibility(View.VISIBLE);
Animation animFade = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade);
LoginBox.startAnimation(animFade);
}
});
ImageView imgLogo = (ImageView) findViewById(R.id.imageView1);
imgLogo.startAnimation(animTranslate);
}
});
}
}
And in the anim
folder use these xml's
fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
<alpha
android:duration="200"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="-30%p"
android:duration="1000" />
</set>
And the layout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Start Animation" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:id="@+id/LoginBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email ID" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
</RelativeLayout>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With