Develop Reference

How can I resize views with animation without deforming the content inside the view?

I want to resize views with animation android without deforming the content inside the view. Specifically, I want to press a cluster icon in google maps and resize the map fragment and show a listview, here is my code
public void showDataView(){
RelativeLayout dataLinearLayout = getView().findViewById(R.id.dataLinearLayout);
View map = getView().findViewById(R.id.map);
if(isAnimationOn == 0) {
isAnimationOn = 1;
Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.minimize_maps);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
map.startAnimation(anim);
Animation anim2 = AnimationUtils.loadAnimation(getContext(), R.anim.maximize_maps);
anim2.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
isAnimationOn = 1;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
dataLinearLayout.startAnimation(anim2);
}
}
here is the animation XML
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:fillAfter="true">
<scale android:fromXScale="1.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="0.5"
android:pivotX="50%p" android:pivotY="0%p"
android:duration="250" />
</set>
the view code
<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:weightSum="100"
android:orientation="vertical">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="100"
tools:context="com.viralandroid.googlemapsandroidapi.MapsActivity" />
<RelativeLayout
android:id="#+id/dataLinearLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
</RelativeLayout>
</LinearLayout>
And this is how it works
please if you know anything please help me!

View Animations in Android Collapse/Expand Views in LinearLayout

I added Images view dynamically to my Linear layout,
I want to achieve
Here is sample code what I have done
MainActivity
package ksp.com.animationssample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
private Button btn_expand;
private Button btn_collapse;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_expand = (Button) findViewById(R.id.btn_expand);
btn_collapse = (Button) findViewById(R.id.btn_collapse);
LinearLayout.LayoutParams vp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
final LinearLayout layout = (LinearLayout) findViewById(R.id.imageLayout);
for (int i = 0; i < 3; i++) {
final ImageView image = new ImageView(MainActivity.this);
image.setLayoutParams(vp);
if (i == 0)
image.setImageDrawable(getResources().getDrawable(R.drawable.item_image1));
else image.setImageDrawable(getResources().getDrawable(R.drawable.item_image2));
if (i == 2)
image.setVisibility(View.VISIBLE);
else
image.setVisibility(View.GONE);
layout.addView(image);
}
btn_expand.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
expandOrCollapse(layout.getChildAt(2), true, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight());
expandOrCollapse(layout.getChildAt(1), true, layout.getChildAt(0).getHeight());
expandOrCollapse(layout.getChildAt(0), true, 0);
}
});
btn_collapse.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
expandOrCollapse(layout.getChildAt(0), false, 0);
expandOrCollapse(layout.getChildAt(1), false, layout.getChildAt(0).getHeight());
expandOrCollapse(layout.getChildAt(2), false, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight());
}
});
}
public void expandOrCollapse(final View v, boolean is_expand, final int animheight) {
TranslateAnimation anim = null;
if (is_expand) {
anim = new TranslateAnimation(0.0f, 0.0f, -animheight, 0.0f);
v.setVisibility(View.VISIBLE);
Animation.AnimationListener expandedlistener = new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
};
anim.setAnimationListener(expandedlistener);
} else {
anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -animheight);
Animation.AnimationListener collapselistener = new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
v.setVisibility(View.GONE);
}
};
anim.setAnimationListener(collapselistener);
}
anim.setDuration(1500);
anim.setInterpolator(new AccelerateInterpolator(0.5f));
v.startAnimation(anim);
}
}
activity_mainn.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
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"
android:orientation="vertical"
android:background="#android:color/holo_blue_dark"
tools:context="ksp.com.animationssample.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:id="#+id/btn_expand"
android:text="Expand"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btn_collapse"
android:text="Collopse"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/imageLayout"
android:gravity="center"
android:orientation="vertical"
android:layout_height="wrap_content">
</LinearLayout>
<!--android:animateLayoutChanges="true"-->
</ScrollView>
</RelativeLayout>
when I click expand button at the first time is not showing the animation from the second time it's working.
enable Visible the item after click on collapse button.
What to do next :
When I selected any View item it has to show select animation then collapse animation, after collapse it has to appear as top View like I mention in Image above. Currently I am hard code the count of the views and wrote static animations for each view with static heights of animations i.e (expandOrCollapse(view, height_of_view))
I search a while for this, but no luck.
I follow the Vie expand/collapse and smooth expand / collapse but they can't help me expand all views in Linear layout.
Can we do this List views are recycler view or something ?
for time saving I have added my sample to git hub you can try it Animation Sample Github
Suggest me, please.

I have made separate class for it. Check if it works for you:
public class DropDownAnim extends Animation {
private final int sourceHeight;
private final int targetHeight;
private final View view;
private final boolean down;
public DropDownAnim(View view, int sourceHeight, int targetHeight, boolean down) {
this.view = view;
this.sourceHeight = sourceHeight;
this.targetHeight = targetHeight;
this.down = down;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newHeight;
if (down) {
newHeight = sourceHeight + (int) (targetHeight * interpolatedTime);
} else {
newHeight = sourceHeight + targetHeight - (int) (targetHeight * interpolatedTime);//(int) (targetHeight * (1 - interpolatedTime));
}
view.getLayoutParams().height = newHeight;
view.requestLayout();
view.setVisibility(down ? View.VISIBLE : View.GONE);
}
#Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds() {
return true;
}
}
While working with this. For expand
public void expand(final View v) {
final int sourceHeight = v.getLayoutParams().height;
final int targetHeight = getResources().getDimensionPixelSize(R.dimen.notification_height);//v.getMeasuredHeight();
DropDownAnim a = new DropDownAnim(v,targetHeight,true);
a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
a.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// Your code on end of animation
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
v.setVisibility(View.INVISIBLE);
v.startAnimation(a);
}
For collapse:
public void collapse(final View v) {
final int sourceHeight = v.getLayoutParams().height;
final int targetHeight = v.getMeasuredHeight();
DropDownAnim a = new DropDownAnim(v, targetHeight, false);
a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
a.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// Your code on end of animation
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
v.startAnimation(a);
}
Update:
sourceHeight added to prevent view blinking.

Try to not hide your target view (now you set visibility GONE for all views after collapsed animation end) and do this:
targetView.bringToFront();
targetView.invalidate();
targetView.getParent().requestLayout();

Ring Glow Animation in Android

I'm trying to reproduce this animation from an iOS app in Android. and I'm stuck
If anyone knows how to create them will be deeply grateful. Don't mind the logo in the center, just those rings pulsating. (is possible 3 at a time, short break, repeat)
Here's a possible solution, but it's quite ugly and I'm sure something nicer can be made
3 imageviews one on top of eachother
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<ImageView
android:id="#+id/imageView_circle1"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_circle2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_circle3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/logo"
/>
</RelativeLayout>
a drawable circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#DDDDDD"/>
</shape>
an animation zoom_and_fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false">
<alpha
android:duration="3500"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<scale
android:duration="3500"
android:fromXScale="0"
android:fromYScale="0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="50"
android:toYScale="50" />
</set>
on Activity:
imageView_circle1 = (ImageView) findViewById(R.id.imageView_circle1);
imageView_circle2 = (ImageView) findViewById(R.id.imageView_circle2);
imageView_circle3 = (ImageView) findViewById(R.id.imageView_circle3);
anim1 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim2 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim3 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim2.setStartOffset(800);
anim3.setStartOffset(1600);
imageView_circle1.startAnimation(anim1);
imageView_circle2.startAnimation(anim2);
imageView_circle3.startAnimation(anim3);
anim2.setAnimationListener(new Animation.AnimationListener() {
#Override public void onAnimationStart(Animation animation) {
}
#Override public void onAnimationEnd(Animation animation) {
imageView_circle1.startAnimation(anim1);
imageView_circle2.startAnimation(anim2);
imageView_circle3.startAnimation(anim3);
}
#Override public void onAnimationRepeat(Animation animation) {
}
});

I don't think you can achieve same result with only XML.
This is really rough code (Literally 5 minutes) using canvas. But I think with some minor changes you can get really nice Animation.
Check out the video. https://www.youtube.com/watch?v=378Jjc4amD8.
I'll improve if you like it.
public class CircleAnimationView extends View {
private Paint[] paints = new Paint[3];
private int[] colors = new int[3];
private float[] circleRadius = new float[3];
public CircleAnimationView(Context context) {
super(context);
init();
}
public CircleAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
colors[0] = ContextCompat.getColor(getContext(), R.color.gray1);
colors[1] = ContextCompat.getColor(getContext(), R.color.gray2);
colors[2] = ContextCompat.getColor(getContext(), R.color.gray3);
for (int i = 0; i < paints.length; i++) {
paints[i] = new Paint();
paints[i].setAntiAlias(true);
paints[i].setStyle(Paint.Style.FILL);
paints[i].setColor(colors[i]);
}
}
public void startCircleAnimation() {
CircleRadiusAnimation animation = new CircleRadiusAnimation();
animation.setDuration(1500);
animation.setRepeatCount(Animation.INFINITE);
startAnimation(animation);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[0], paints[0]);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[1], paints[1]);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[2], paints[2]);
}
private class CircleRadiusAnimation extends Animation {
public CircleRadiusAnimation() {
setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
reset();
}
});
}
public void reset() {
circleRadius[0] = 0;
circleRadius[1] = 0;
circleRadius[2] = 0;
CircleAnimationView.this.requestLayout();
CircleAnimationView.this.invalidate();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation transformation) {
circleRadius[0] += 10;
if (interpolatedTime > 0.3) {
circleRadius[1] += 10;
Log.d("animate", "2nd circle");
}
if (interpolatedTime > 0.6) {
circleRadius[2] += 10;
Log.d("animate", "3nd circle");
}
CircleAnimationView.this.requestLayout();
CircleAnimationView.this.invalidate();
}
}
}}

How to animate a layout in android?

In my Activity screen,half of the screen contain a layout.When Activity loaded it visible and after 10 seconds it will be get down slowly finally it will be not visible to user.But it get down slowly.How i can do it.Please can any one help me.
Thanking in Advance.

In your res\anim folder (create the folder if it's not there) create slide_out_down.xml and paste the following
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="#android:integer/config_longAnimTime" />
to start the animation and hide the view use this
private void hideView(final View view){
Animation animation = AnimationUtils.loadAnimation(this, R.anim.slide_out_down);
//use this to make it longer: animation.setDuration(1000);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
view.setVisibility(View.GONE);
}
});
view.startAnimation(animation);
}

public void animateLayout(){
LinearLayout layout = findViewById(R.id.layoutId);
layout.animate().translationYBy(1000f).setDuration(50000);
}
The above code will make the view go invisible very slowly.
setDuration(50000) //change the number according to your need. It varies the speed of the layout.

You can use FragmentActivity and Fragment for this and add animation to the fragment
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<scale
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
/>

try this:
// gone layout
collapse(recipientLayout);
//show layout
expand(recipientLayout);
public void expand(final LinearLayout v) {
v.measure(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
final int targtetHeight = v.getMeasuredHeight();
/*if (v.isShown()) {
collapse(v);
} else */{
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1 ? LinearLayout.LayoutParams.WRAP_CONTENT
: (int) (targtetHeight * interpolatedTime);
v.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int) (targtetHeight + 600));
v.startAnimation(a);
}
}
public void collapse(final LinearLayout v) {
final int initialHeight = v.getMeasuredHeight();
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
/*if (v.isShown()) {
collapse(v);
}*/
if (interpolatedTime == 1) {
v.setVisibility(View.GONE);
} else {
v.getLayoutParams().height = initialHeight
- (int) (initialHeight * interpolatedTime);
v.requestLayout();
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int) (v.getLayoutParams().height + 600));
v.startAnimation(a);
}

Layout expand animation

I have done the layout expand animation with the following code. It works fine when we invoke the animation by clicking a text view, but the same is not happening when I try to do that by clicking a layout. Can anyone help me in solving this?
LinearLayout hello= (LinearLayout)findViewById(R.id.lin_hello);
final RelativeLayout rel=(RelativeLayout)findViewById(R.id.rel_nah_hide);
hello.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
expand=!expand;
Animation a=expand(rel, expand);
rel.setAnimation(a);
a.start();
}
});
public static Animation expand(final View v, final boolean expand) {
try {
Method m = v.getClass().getDeclaredMethod("onMeasure", int.class, int.class);
m.setAccessible(true);
m.invoke(v,
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
MeasureSpec.makeMeasureSpec(((View)v.getParent()).getMeasuredWidth(), MeasureSpec.AT_MOST)
);
} catch (Exception e) {
e.printStackTrace();
}
final int initialHeight = v.getMeasuredHeight();
if (expand) {
v.getLayoutParams().height = 0;
} else {
v.getLayoutParams().height = initialHeight;
}
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newHeight = 0;
if (expand) {
newHeight = (int) (initialHeight * interpolatedTime);
} else {
newHeight = (int) (initialHeight * (1 - interpolatedTime));
}
v.getLayoutParams().height = newHeight;
v.requestLayout();
if (interpolatedTime == 1 && !expand)
v.setVisibility(View.GONE);
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration(SPEED_ANIMATION_TRANSITION);
a.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
animWorkingFlag=false;
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation animation) {
animWorkingFlag=true;
}
});
return a;
}
and following is the xml layout,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lin_hello"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/hello"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Nah"
android:gravity="center"
android:background="#F03535"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/rel_nah_hide"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="#+id/txt_nah_hide1"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Incorrect Name/Address"
android:gravity="center"
android:textColor="#color/white"/>
<TextView
android:id="#+id/txt_nah_hide2"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Venue is closed"
android:gravity="center"
android:textColor="#color/white"
android:layout_below="#id/txt_nah_hide1"/>
<TextView
android:id="#+id/txt_nah_hide3"
android:layout_height="50dp"
android:layout_width="fill_parent"
android:text="Venue is duplicate"
android:gravity="center"
android:textColor="#color/white"
android:layout_below="#id/txt_nah_hide2"/>
</RelativeLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="28dp"
android:text="heelo2222"/>
</LinearLayout>

Use next part code: ->
View hello= findViewById(R.id.lin_hello);
final RelativeLayout rel=(RelativeLayout)findViewById(R.id.rel_nah_hide);
hello.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
expand=!expand;
Animation a=expand(rel, expand);
rel.setAnimation(a);
a.start();
}
});