I am scaling and translating my parent layout, but the problem is my child view is also scaling and but not translating according to its parent(I want my child view to be at the center of the screen, no matter where my parent layout is translating).
Below is my code
public class Splash extends AppCompatActivity {
Animation zoomIn,zoomOut;
ImageView icon;
LinearLayout relativeLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
zoomIn = AnimationUtils.loadAnimation(this,R.anim.zoom_in);
zoomOut = AnimationUtils.loadAnimation(this,R.anim.zoom_out);
relativeLayout = (LinearLayout) findViewById(R.id.activity_splash);
relativeLayout.setBackgroundResource(R.drawable.utt);
icon = (ImageView) findViewById(R.id.icon);
relativeLayout.setAnimation(zoomIn);
relativeLayout.setAnimation(zoomOut);
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.height= 75;
layoutParams.width = 75;
layoutParams.gravity= Gravity.CENTER;
icon.setLayoutParams(layoutParams);
zoomIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
relativeLayout.startAnimation(zoomOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
zoomOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
icon.setAlpha(1.0f);
icon.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(),R.anim.translate_top_center));
}
#Override
public void onAnimationEnd(Animation animation) {
relativeLayout.startAnimation(zoomIn);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
It's Activity
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="store.shopnix.com.kenburns.Splash">
<ImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:alpha="0.0"
android:src="#drawable/icon"/>
anim.xml
zoom_in
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="20000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5"
android:repeatMode = "reverse"
android:translationX="100dp"
android:translationY = "100dp">
</scale>
zoom_out
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="20000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="70%"
android:pivotY="20%"
android:toXScale="1.5"
android:toYScale="1.5"
android:repeatCount="1"
android:repeatMode = "reverse"
android:translationX="20dp"
android:translationY = "20dp">
</scale>
Create two separate layouts, one that scales and other that doesn't.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_to_scale">
<!--put stuff that scales here-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_to_stay">
<!--put static stuff here-->
</LinearLayout>
</FrameLayout>
Now in your activity animate only layout with id = R.id.layout_to_scale
Instead of LinearLayout you can use RelativeLayout and place the childView inside it .
now you add property android:layout_centerInParent="true" for childView
now you can scale the RelativeLayout without scaling the childView it will definitely stay in centre of parentView(RelativeLayout).
Hope this solves your problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="store.shopnix.com.kenburns.Splash">
<ImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_centerInParent="true"
android:alpha="0.0"
android:src="#drawable/icon" />
Related
I have an ImageView with RelativeLayout parent and this the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageViwe
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/love"
android:src="#drawable/love_large"
android:layout_alignParentRight="true" />
</RelativeLayout >
now in jave i scale the ImageView
private ImageView love;
love = (ImageView)findViewById(R.id.love);
/*** animation scale with e value ***/
love.setScaleX(e);
love.setScaleY(e);
/*** animation scale ***/
now the ImageView size changed but its parent still same size
use this layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/love"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_love" />
</RelativeLayout>
and
public class MainActivity extends AppCompatActivity {
ImageView love;
RelativeLayout root;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
love = (ImageView)findViewById(R.id.love);
root = (RelativeLayout)findViewById(R.id.root);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f,5.0f);
valueAnimator.setDuration(5000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value =(Float) animation.getAnimatedValue();
love.setScaleX(value);
love.setScaleY(value);
}
});
valueAnimator.start();
}
}
I am making a simple calculator application for android. I've already made the code and everything works fine. However, I want to improve the design of its user interface by adding a little animation for the changing of text. So it's like this for example:
I will enter input via the buttons to the edittext, say for example, "2+3".
When I will press the enter button, "2+3" moves up and disappears then "5", from below, replaces the original position of "2+3".
How can I do this?
This should answer your question now that I understand it a little better. You just need a couple of animation files, one to slide the text out, and one to slide it in. You can adjust the animations however you would like:
Here is your click listener for the equals button:
Button btnEquals = (Button)findViewById(R.id.btnEquals);
btnEquals.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation slideOutBottom = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.out_bottom);
slideOutBottom.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// Update the text here
Animation slideInTop = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.in_top);
llContainer.startAnimation(slideInTop);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
llContainer.startAnimation(slideOutBottom);
}
});
}
And here are the out_bottom.xml and in_top.xml files (respectively) that go in your anim folder:
<?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="600"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%" android:toYDelta="0%" android:duration="600"/>
</set>
And here is how I wrapped the layouts. Kind of quick and dirty, but it works:
<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="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:background="#fff">
<LinearLayout
android:id="#+id/llContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<EditText
android:id="#+id/edtInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:padding="5dp"
android:background="#null"/>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btnEquals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="/>
</LinearLayout>
i want to animate the two images from middle of the screen to opposite to each other. like below image.
whatever i have done so far is right now i am able animate only one image from left to right and vice versa but now i want to animate them from middle.
here is my code :
b1 = (Button) findViewById(R.id.button1);
logo = (ImageView) findViewById(R.id.imageView1);
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
final Animation posX = new TranslateAnimation(0, width - 50, 0, 0);
posX.setDuration(1500);
posX.setFillAfter(true);
b1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
logo.startAnimation(posX);
logo.setVisibility(View.VISIBLE);
}
});
Edit:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:background="#drawable/set_user_profile_back"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="50dp"
android:contentDescription="#string/hello_world"
android:src="#drawable/prev_btn" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView1"
android:contentDescription="#string/hello_world"
android:src="#drawable/next_btn" />
</RelativeLayout>
Thanks
ImageView img1 = findViewById(R.id.img1);
ImageView img2 = findViewById(R.id.img2);
Animation img1_Anim = AnimationUtils.loadAnimation(this,
R.anim.img1_animation);
img1_Anim.setAnimationListener(AnimationListener);
img1.startAnimation(img1_Anim);
Animation img2_Anim = AnimationUtils.loadAnimation(this,
R.anim.img2_animation);
img2_Anim.setAnimationListener(AnimationListener);
img2.startAnimation(img2_Anim);
private AnimationListener AnimationListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
};
img1_animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<translate
android:duration="500"
android:fromXDelta="50%"
android:toXDelta="0%" />
</set>
img2_animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<translate
android:duration="500"
android:fromXDelta="50%"
android:toXDelta="100%" />
</set>
this is my code for animated image is work fine but i want to add green illuminated lighting border around image how i do this? like this image http://imgur.com/qg0JM0q ?
for fade in fade out on image rounded border???
public class MainActivity extends Activity {
Button btnAnimation, btnAnimation1, btnAnimation2;
Animation performAnimation, performAnimation1, performAnimation2;
ImageView androidImageView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
performAnimation1 = AnimationUtils.loadAnimation(this, R.layout.animation1);
performAnimation1.setRepeatCount(4);
androidImageView = (ImageView)findViewById(R.id.androidImageView);
btnAnimation1 = (Button)findViewById(R.id.btn_animation1);
btnAnimation1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
androidImageView.startAnimation(performAnimation1);
}
});
}
}
<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" >
<ImageView
android:id="#+id/androidImageView"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="192dp"
android:adjustViewBounds="false"
android:src="#drawable/alertlogo" />
<Button
android:id="#+id/btn_animation1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/androidImageView"
android:layout_below="#+id/btn_animation"
android:text="perform animation 2" />
</RelativeLayout>
<!------------ animation1.xml---->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="8000" />
</set>
I have an image view which acts as menu. When user click it a view group (including 5 other image view) will slide from left to right. When user click on menu again view group slides from right to left.
I can simulate this behavior but after sliding right to left I expect to not see view group however view group will put on its place. I tried to use LinearLayout.setVisibiliy(View.Invisible) but at that moment i couldn't see sliding right to left animation.
This is my code, any suggestion would be appreciated.
menu_open.xml
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="10%"
android:animation="#anim/slide_out" />
slide_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="#android:integer/config_mediumAnimTime" />
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
menu_close.xml
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="10%"
android:animation="#anim/slide_in" />
slide_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:fromXDelta="0%p"
android:toXDelta="-100%p"
android:duration="#android:integer/config_mediumAnimTime" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/ivMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_01" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/ivMenu" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_03" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_04" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_05" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_06" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/CD"
android:src="#drawable/ic_menu_07" />
</LinearLayout>
</RelativeLayout>
MainActivity.java
public class MainActivity extends Activity {
private ImageView ivMenu;
private Animation animate;
private LinearLayout groupLayout;
private boolean menuState = false;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
groupLayout = (LinearLayout) findViewById(R.id.linearLayout);
groupLayout.setVisibility(View.INVISIBLE);
ivMenu = (ImageView) findViewById(R.id.ivMenu);
animate = AnimationUtils.loadAnimation(this, R.anim.animate);
ivMenu.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ivMenu.startAnimation(animate);
runFadeOutAnimationOn(MainActivity.this, ivMenu);
if(!menuState) {
groupLayout.setVisibility(View.VISIBLE);
runExpandMenuAnimation(groupLayout, MainActivity.this);
} else {
runCollapseMenuAnimation(groupLayout, MainActivity.this);
// groupLayout.setVisibility(View.INVISIBLE);
}
menuState = !menuState;
Log.i("Menu state", "" + menuState);
}
});
}
public static void runExpandMenuAnimation(ViewGroup panel, Context ctx) {
LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(ctx, R.anim.menu_open);
panel.setLayoutAnimation(controller);
}
public static void runCollapseMenuAnimation(ViewGroup panel, Context ctx) {
LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(ctx, R.anim.menu_close);
panel.setLayoutAnimation(controller);
}
public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
Animation animation = AnimationUtils.loadAnimation(ctx, android.R.anim.fade_out);
target.startAnimation(animation);
return animation;
}
}
Finally I found the solution. In this case we should use aViewGroup.setLayoutAnimationListener(new AnimationListener()...) and override its methods.
Therefore I added:
groupLayout.setLayoutAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
if(menuState)
groupLayout.setVisibility(View.INVISIBLE);
menuState = !menuState;
Log.i("Menu state", "" + menuState);
}
});