Learn Python


Click to Learn Python3
Showing posts with label animation. Show all posts
Showing posts with label animation. Show all posts

Tuesday, November 1, 2011

Animation for view and activities with and without viewflipper in Android

Now we are going to see some animations in android, three types of animation are given on this pack



Yes as shown in the image we are going to see all these types.
First we can see about Animation using ViewFlipper



Here i had added three views in the viewflipper and i had called the animation changes on scrolling using touchevent, the xml section will be like this


viewer.xml

<?xml version="1.0" encoding="utf-8"?>

<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="5dip"
android:id="@+id/layoutswitcher"
android:layout_width="fill_parent"
android:layout_height="500dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_height="wrap_content"
android:padding="20dip"
android:background="@android:color/background_light"
android:text="Currently you are in Page 1. Scroll right or left to see next page"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textStyle="bold" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_height="wrap_content"
android:padding="20dip"
android:background="@android:color/darker_gray"
android:text="Currently you are in Page 2. Scroll right or left to see next page"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textStyle="bold" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_height="wrap_content"
android:padding="20dip"
android:background="@android:color/white"
android:text="Currently you are in Page 3. Scroll right or left to see next page"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textStyle="bold" >
</TextView>
</LinearLayout>
</ViewFlipper>



and in the java we need to apply the animation on touchevent as



ViewerEffect.java

package com.animmer;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ViewFlipper;

public class ViewerEffect extends Activity {

private ViewFlipper vf;
private float oldTouchValue;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewer);

vf = (ViewFlipper) findViewById(R.id.layoutswitcher);
}

//for the previous movement
public static Animation inFromRightAnimation() {

Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromRight.setDuration(400);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
public static Animation outToLeftAnimation() {
Animation outtoLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
outtoLeft.setDuration(400);
outtoLeft.setInterpolator(new AccelerateInterpolator());
return outtoLeft;
}
// for the next movement
public static Animation inFromLeftAnimation() {
Animation inFromLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromLeft.setDuration(400);
inFromLeft.setInterpolator(new AccelerateInterpolator());
return inFromLeft;
}
public static Animation outToRightAnimation() {
Animation outtoRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
outtoRight.setDuration(400);
outtoRight.setInterpolator(new AccelerateInterpolator());
return outtoRight;
}

@Override
public boolean onTouchEvent(MotionEvent touchevent) {
switch (touchevent.getAction())
{
case MotionEvent.ACTION_DOWN:
{
oldTouchValue = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP:
{
float currentX = touchevent.getX();
if (oldTouchValue < currentX)
{
vf.setInAnimation(inFromLeftAnimation());
vf.setOutAnimation(outToRightAnimation());
vf.showNext();
}
if (oldTouchValue > currentX)
{
vf.setInAnimation(inFromRightAnimation());
vf.setOutAnimation(outToLeftAnimation());
vf.showPrevious();
}
break;
}
}
return false;
}
}




Likewise the next is animation between activities



Yes we here we will be giving animation effect between activities
For animation effects we need to put four files in the anim folder, they are slide_in_left, slide_out_left, slide_in_right and slide_out_right.


Java

overridePendingTransition( R.anim.slide_in_left, R.anim.slide_out_left );


The above code is used to move left to right



Java

overridePendingTransition( R.anim.slide_in_right, R.anim.slide_out_right );


The above code is used to move right to left

The final animation technique is to hide and show the views



Here we will be using touch event to assign the animation part, the animation objects will be assigned as shown below


Java

mAnimShow = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
mAnimHide = AnimationUtils.loadAnimation(this, R.anim.slide_out_right);

mAnimShow.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {
overridePendingTransition( R.anim.slide_in_left, R.anim.slide_out_left );

}

@Override
public void onAnimationEnd(Animation animation) {


}

});

mAnimHide.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {
overridePendingTransition( R.anim.slide_in_right, R.anim.slide_out_right );

}

@Override
public void onAnimationEnd(Animation animation) {


}

});


The full source code is provided below, you can apply these animation for any other purpose also, the animation technique is same, we need to put this in our logic.


You can download the full source code


Download source


Have a good day.

Tuesday, April 5, 2011

Animated customized dialog or popup transparent layout with Button and Linear layout gradient effect in android

The image shown below is an example of animated customized popup with transparent layout for button and linearlayout, and the linearlayout and button is given gradient effect


How to get a transparent layout? For that we need to use a transparent class


TransparentPanel.java
package com.popup.design.layers;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class TransparentPanel extends LinearLayout
{
private Paint innerPaint, borderPaint ;

public TransparentPanel(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public TransparentPanel(Context context) {
super(context);
init();
}

private void init() {
innerPaint = new Paint();
innerPaint.setARGB(225, 0, 0, 0);
innerPaint.setAntiAlias(true);

borderPaint = new Paint();
borderPaint.setARGB(255, 0, 0, 0);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
}

public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;
}

public void setBorderPaint(Paint borderPaint) {
this.borderPaint = borderPaint;
}

@Override
protected void dispatchDraw(Canvas canvas) {

RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());

canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);

super.dispatchDraw(canvas);
}
}


We need to use this transparentPanel class in the xml file, where we need the transparent layout, in the popup.xml we are using the com.popup.design.layers.TransparentPanel instead of LinearLayout, see in the code


popup.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/white"
android:layout_width="fill_parent" android:layout_height="fill_parent">

<Button android:id="@+id/show_popup_button" android:layout_gravity="bottom"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="25px" android:text="Show Popup" />

<com.popup.design.layers.TransparentPanel
android:id="@+id/popup_window" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_gravity="bottom" android:gravity="left" android:padding="1px"
android:background="@drawable/white">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="right"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/button_bar_gradient">

<Button android:id="@+id/hide_popup_button"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_marginTop="5px"
android:layout_marginRight="10px" android:paddingLeft="5px"
android:paddingRight="5px" style="?android:attr/buttonStyleSmall"
android:textStyle="bold" android:textColor="@drawable/white"
android:textSize="12px" android:text=" Close " android:background="@drawable/button_close"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="1px" android:layout_marginTop="5px"
android:layout_below="@+id/hide_popup_button" android:background="@drawable/white" />
</RelativeLayout>

<TextView android:id="@+id/location_name"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textSize="16px" android:textColor="@drawable/white"
android:layout_marginTop="5px" android:layout_marginLeft="5px" />

<TextView android:id="@+id/location_description"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="@drawable/white" android:layout_margin="5px" />

</com.popup.design.layers.TransparentPanel>

</FrameLayout>


Customized Popup is the com.popup.design.layers.TransparentPanel, initially we will hide this layout, and on the button click will show this layout. The java code is as follows


AnimatePopup.java
package com.popup.design;

import com.popup.design.layers.TransparentPanel;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

/**
*
* @author http://www.android-codes-examples.blogspot.com/
*
*/
public class AnimatePopup extends Activity {

private Animation animShow, animHide;

@Override
public void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.popup);

initPopup();
}

private void initPopup() {

final TransparentPanel popup = (TransparentPanel) findViewById(R.id.popup_window);

// Start out with the popup initially hidden.
popup.setVisibility(View.GONE);


animShow = AnimationUtils.loadAnimation( this, R.anim.popup_show);
animHide = AnimationUtils.loadAnimation( this, R.anim.popup_hide);

final Button showButton = (Button) findViewById(R.id.show_popup_button);
final Button hideButton = (Button) findViewById(R.id.hide_popup_button);
showButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.setVisibility(View.VISIBLE);
popup.startAnimation( animShow );
showButton.setEnabled(false);
hideButton.setEnabled(true);
}});

hideButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.startAnimation( animHide );
showButton.setEnabled(true);
hideButton.setEnabled(false);
popup.setVisibility(View.GONE);
}});


final TextView locationName = (TextView) findViewById(R.id.location_name);
final TextView locationDescription = (TextView) findViewById(R.id.location_description);

locationName.setText("Animated Popup");
locationDescription.setText("Animated popup is created by http://www.android-codes-examples.blogspot.com/"
+ " Transparent layout is used on this example, and animation xml is also used"
+ " on this example. Have a Good day guys.");
}
}


For giving gradient effect we need to use this xml file as the background for the linearlayout or button. The xml file is


button_bar_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#C0C0C0"
android:endColor="#505050"
android:angle="90"/>
<corners android:radius="2px" />
</shape>



In the popup.xml we had used the button_bar_gradient as a background. This button_bar_gradient.xml will be in drawable folder.

You can download the full source code


Download source


Have a good day.