Develop Reference

CircularReveal animation doesn't work on first attempt

In android 5.0 i am trying to work with circular reveal animation
Problem
When i click on button to start reveal animation, on first click animation doesn't start
Second Click onwards it works normally
My Code
public class MainActivity extends ActionBarActivity {
Animator a;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final View cardType = findViewById(R.id.cardtype);
cardType.setVisibility(View.GONE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
a = ViewAnimationUtils.createCircularReveal(cardType,
cardType.getWidth(),
cardType.getHeight(),
0,
cardType.getHeight() * 2)
.setDuration(2500);
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
cardType.setVisibility(View.VISIBLE);
}
});
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
cardType.setVisibility(View.GONE);
}
});
findViewById(R.id.icon_first_activity).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
a.start();
}
});
}
}}

I haven't tried your code, but I think you have a small ordering problem. I think you just need to set the cardType visible before you start the animation.
Edited to add:
... and you should be setting your button View.INVISIBLE, not View.GONE.
Here: This code works.
Edited once more to add:
Yes. Your problem is that you set the view GONE initially. That means it has 0 size. Then you use cardType.getHeight and cardType.getWidth as reveal coordinates. They are 0. You are going to want to set the view INVISIBLE, initially, and then use width/2 and height/2 as the center of the reveal.

Basically what others answers say, it's correct, but the problem is if you want visibility GONE (because your layout requires it GONE!) you have to set visibility INVISIBLE in the xml with height 0dp (and/or width 0dp as well) and programmatically set the correct LayoutParams even inside the click event it will work. For example my code:
...
expandButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//To not have empty scroll, the container is INVISIBLE with 0dp height.
//Otherwise the Reveal effect will not work at the first click.
//Here I set the parameters programmatically.
viewContainer.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
if (viewContainer.getVisibility() == View.VISIBLE) {
expandButton.animate().rotation(0f).setDuration(duration).start();
Utils.unReveal(viewContainer, 0, 0);
} else {
expandButton.animate().rotation(180f).setDuration(duration).start();
Utils.reveal(viewContainer, viewContainer.getWidth(), 0);
}
}
});
...
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void reveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.VISIBLE);
return;
}
//Get the final radius for the clipping circle
int finalRadius = Math.max(view.getWidth(), view.getHeight());
//Create the animator for this view (the start radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
//Make the view VISIBLE and start the animation
view.setVisibility(View.VISIBLE);
animator.start();
}
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void unReveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.GONE);
return;
}
//Get the initial radius for the clipping circle
int initialRadius = view.getWidth();
//Create the animation (the final radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0);
//Make the view GONE when the animation is done
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
//Start the animation
animator.start();
}
If you set only GONE in the xml, the first time will never work because height/width/x/y/etc.. are 0. Also, if you just set INVISIBLE before the call to the animation it will not work as well, but if you start with visibility INVISIBLE it will initialize the layout params.

what i did is, Like i have two view with same height,As we now visibility gone returns 0 {height and width} than i am giving visible view height every time and its work for me.

The solution is don't get values directly into code
Either put the animation code on click and the values outside onclick
or get the values from other activity
By values i mean cardType.getWidth() and cardType.getHeight()

Three sliding panes - the Middle pane above Left and Right panes

I am trying to have the same navigation style as Viber's interface (the discussion page), without using a third-part Library such as SlidingMenu.
I thought that they have used SlidingPaneLayout to achieve this nice effect, but when I tried to code it, I noticed that the last pane is always over the second.
My questions :
Is this really a SlidingPaneLayout ?
If yes how to achieve this please ?
If no, is there an android native way to do the same thing ?!
Left Pane
Right Pane

First of all declare this all variable in your Class
/** Sliding Menu */
boolean alreadyShowing = false;
private int windowWidth;
private Animation animationClasses;
private RelativeLayout classesSlider;
LayoutInflater layoutInflaterClasses;
then inside onCreate method declare this, this will help you to get screen's height and width
Display display = getWindowManager().getDefaultDisplay();
windowWidth = display.getWidth();
display.getHeight();
layoutInflaterClasses = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
and then any of your button or image where by clicking you want to open slider put below code.
findViewById(R.id.slidermenu).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if (!alreadyShowing) {
alreadyShowing = true;
openSlidingMenu();
}
}
});
and then outside the onCreate declare openSlidingMenu() as below.
private void openSlidingMenu() {
// showFadePopup();
int width = (int) (windowWidth * 0.8f);
translateView((float) (width));
#SuppressWarnings("deprecation")
int height = LayoutParams.FILL_PARENT;
// creating a popup
final View layout = layoutInflaterClasses.inflate(
R.layout.option_popup_layout,
(ViewGroup) findViewById(R.id.popup_element));
ImageView imageViewassignment = (ImageView) layout
.findViewById(R.id.assignment);
imageViewassignment.setOnClickListener(this);
final PopupWindow optionsPopup = new PopupWindow(layout, width, height,
true);
optionsPopup.setBackgroundDrawable(new PaintDrawable());
optionsPopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);
optionsPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {
public void onDismiss() {
// to clear the previous animation transition in
cleanUp();
// move the view out
translateView(0);
// to clear the latest animation transition out
cleanUp();
// resetting the variable
alreadyShowing = false;
}
});
}
just replace
final View layout = layoutInflaterClasses.inflate(
R.layout.option_popup_layout,
(ViewGroup) findViewById(R.id.popup_element));
this above code with your custom screen XML name and by it's ID. and here is other methos's which you need.
private void translateView(float right) {
animationClasses = new TranslateAnimation(0f, right, 0f, 0f);
animationClasses.setDuration(100);
animationClasses.setFillEnabled(true);
animationClasses.setFillAfter(true);
classesSlider = (RelativeLayout) findViewById(R.id.classes_slider);
classesSlider.startAnimation(animationClasses);
classesSlider.setVisibility(View.VISIBLE);
}
private void cleanUp() {
if (null != classesSlider) {
classesSlider.clearAnimation();
classesSlider = null;
}
if (null != animationClasses) {
animationClasses.cancel();
animationClasses = null;
}
}
remember here animationClasses = new TranslateAnimation(0f, right, 0f, 0f); you can play with this parameter for some different effect and also do not forget to change this line's ID with your current screen's ID like for example check below id
classesSlider = (RelativeLayout) findViewById(R.id.classes_slider);
here you need to replace this ID with your Current java screen's XML file's ID.
Hope this will help you.

SlideAnimation is not working properly in android?

I developed slideAnimation for my Activity,But its not working some times means the animation stared and ended and again started. i.e., the animation is done but its comes back to the previous state again. But some times its working perfectly.
i am using the following code :
class ClickListener implements OnClickListener {
#Override
public void onClick(View v) {
// live=false;
// setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// player.suspend();
// player.resume();
// System.out.println("onClick " + new Date());
SlideAnimationThenCallLayout me = SlideAnimationThenCallLayout.this;
int w = app.getMeasuredWidth();
int h = app.getMeasuredHeight();
int left = (int) (app.getMeasuredWidth() * 0.65);
if (!menuOut) {
menucheck=true;
// if(responed.equals("zero")){}
// else
// layout.setClickable(false);
// anim = AnimationUtils.loadAnimation(context, R.anim.push_right_out_80);
anim = new TranslateAnimation(0, left, 0, 0);
menu.setVisibility(View.VISIBLE);
animParams.init(left, 0, left + w, h);
} else {
menucheck=false;
// layout.setClickable(true);
// anim = AnimationUtils.loadAnimation(context, R.anim.push_left_in_80);
anim = new TranslateAnimation(0, -left, 0, 0);
animParams.init(0, 0, w, h);
}
anim.setDuration(500);
anim.setAnimationListener(me);
//Tell the animation to stay as it ended (we are going to set the app.layout first than remove this property)
anim.setFillAfter(true);
// Only use fillEnabled and fillAfter if we don't call layout ourselves.
// We need to do the layout ourselves and not use fillEnabled and fillAfter because when the anim is finished
// although the View appears to have moved, it is actually just a drawing effect and the View hasn't moved.
// Therefore clicking on the screen where the button appears does not work, but clicking where the View *was* does
// work.
// anim.setFillEnabled(true);
// anim.setFillAfter(true);
app.startAnimation(anim);
}
}
public void onAnimationEnd(Animation animation) {
System.out.println("onAnimationEnd");
ViewUtils.printView("menu", menu);
Log.e("this is","onAnimaition end");
ViewUtils.printView("app", app);
menuOut = !menuOut;
if (!menuOut) {
menu.setVisibility(View.INVISIBLE);
}
layoutApp(menuOut);
}

You are likely doing something differently before when it doesn't work, you question isn't very detailed so I recomend you use your app and try to find a pattern that forms when the menu doesnt work and if you see that a certain thing is causing it not to work find that section in your code and edit it.

Keep view above animation of another view

I have an Activity with a main screen that simply has a title bar (among other things). I have another TextView below the title bar that I have animate from top to bottom into place (it starts out as View.GONE, then I animate it visible and into place after an event from the user).
This works fine and dandy, except the TextView below the title bar animates above the title bar into place. I want it to seem as if the TextView came from underneath the title bar. Both views are in a LinearLayout, so I'm not able to address the z-order like I would in a FrameLayout. Any suggestions?

I eventually solved this by encompassing the textview inside of a LinearLayout, then setting a LayoutAnimationController to the LinearLayout. This causes all the childs to be animated with respect to the parent container, which made the drop-down only to be rendered within the LinearLayout (which worked perfectly). Here is the code I used for the Animation Controller and ListView:
private void addDeleteDropAnimation() {
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(150);
set.addAnimation(animation);
animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f
);
animation.setDuration(300);
set.addAnimation(animation);
controllerDel = new LayoutAnimationController(set, 0.5f);
vw_delLinearLayout.setLayoutAnimation(controllerDel);
}

Handler handler = new Handler();
new Thread(){
public void run(){
TextView tv = (TextView)findViewById(R.id.xx);
LayoutParams params = (LayoutParams)tv.getLayoutParams();
handler.post(new Runnable(){
public void run(){
tv.setVisible(View.Visible);
}
}
int height = params.height;
for(int i = 0; i < height + 1; i++) {
params.topMargin = i - height;
handler.post(new Runnable(){
public void run(){
tv.requestLayout();
}
}
try{
Thread.sleep(5);
}catch(InterruptedException e){
}
}
}
}.start();
you can try this.

android apply color to alpha animation

is there a way to apply a color to an alpha animation in android? I know how to use the <alpha> element, but i'd like to have the alpha apply a color as well as an alpha so i can hightlight a layout. is this possible?

Animations can not include color changes in Android--only alpha, rotation, scale, and translation are included.
That said, you can still make color changes by overlaying two objects of different colors on top of each other and fading the top one in or out.
You could also look into a TransitionDrawable or TextSwitcher to accomplish something similar. Hopefully we will be able to get full support for color animations in a future update.

Well, here is my solution animating a particular region of the screen (see demo down below). Please note that this code is targeting devices which run >= API9.
Beginner friendly, just copy and paste.
FadeAnimationColored.java
public class FadeAnimationColored {
private View view;
private float maxBrightness = 1.0f;
private float minBrightness = 0.0f;
private long duration = 400L;
private long startOffset = 0L;
private int color = android.R.color.white;
// Constructors...
public FadeAnimationColored(View view, String color, float maxBrightness, float minBrightness, long duration, long startOffset) {
this.view = view;
this.color = Color.parseColor(color);
this.maxBrightness = maxBrightness;
this.minBrightness = minBrightness;
this.duration = duration;
this.startOffset = startOffset;
prepareView();
}
public void fadeOut() {
this.view.setAlpha(1f);
Animation anim = new AlphaAnimation(minBrightness, maxBrightness);
anim.setDuration(duration);
anim.setStartOffset(startOffset);
anim.setFillEnabled(true);
anim.setFillAfter(true);
view.startAnimation(anim);
}
public void fadeIn() {
Animation anim = new AlphaAnimation(maxBrightness, minBrightness);
anim.setDuration(duration);
anim.setStartOffset(startOffset);
anim.setFillEnabled(true);
anim.setFillAfter(true);
view.startAnimation(anim);
}
private void prepareView() {
this.view.setBackgroundColor(this.color);
this.view.setAlpha(0f);
}
}
Next add an additional View to your layout, think of it as an overlay (I used a simple FrameLayout which is set to match_parent)
Here is a snippet which shows how to set up the animation in your Activity or Fragment:
FrameLayout interceptorFrame = (FrameLayout) mView.findViewById(R.id.fl_interceptor);
final FadeAnimationColored fadeAnimationLayout =
new FadeAnimationColored(interceptorFrame, MaterialColor.GREY_800, 0.9f, 0.0f, 400L, 0);
mFabMenu.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
#Override
public void onMenuToggle(boolean opened) {
if (opened) {
fadeAnimationLayout.fadeOut();
} else {
fadeAnimationLayout.fadeIn();
}
}
});