I saw this design mockup here and I think the button flow is superb. Any idea how it can be done on android? Or is it iOS specific? Or not doable at all? I don't have much experience in frontend android design.
This is certainly doable. I would look into view property animators for android. You could go about this different ways. One way would be to animate the view directly. So say you have 2 buttons at the bottom like in the link you posted. When your activity or fragment is created, initialize the buttons but then set their visibility to View.INVISIBLE. That way they won't be visible to the user and they won't be clickable.
Then you can animate the buttons using xml animations. You'll need to make an animation that will make the buttons appear like they are coming up. So in your project, make a folder anim under resources and then make a file called slide_up_animation. It should look something like this:
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="#android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="100%" android:toYDelta="0%"
android:duration="400" />
</set>
Note that in your layout (use a frame layout), your buttons should be laid out to be at the bottom. This includes the "setup", "detail" and "next" button. You just have to make them all invisible at the beginning. Then the animation will start at a y position 100% above your views length, so it will apppear like they are sliding up.
Next in the on click method of the button you want to initialize the sliding to the left animation just load the animation and start it when the button is clicked. That animation will look something like:
slide_left.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%p" android:toXDelta="-200%p"
android:duration="500" />
So to summarize your acitivity will look something like this.
public class AnimationActivity extends Activity {
private Button nextButton;
private Button detailButton;
private Button cancelButton;
private Animation slideUp;
private Animation slideLeft;
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.yourlayout);
nextButton = (Button) findViewById(R.id.nextButton) // ...you get the idea.
nextButton.setVisibility(View.INVISIBLE) // do this for all buttons
//...other code
slideUp = AnimationUtils.loadAnimation(context,R.anim.slide_up);
slideLeft = AnimationUtils.loadAnimation(context,R.anim.slide_left);
//slide buttons up
slideButtonsUp();
nextButton.setOnClickListener(new View.OnClickListener() {
public void onClick() {
slideLeft();
}
});
}
private void slideButtonsUp() {
if(nextButton != null && detailButton != null) {
nextButton.clearAnimations();
detailButton.clearAnimations();
nextButton.startAnimation(slideUp);
detailButton.startAnimation(slideUp);
nextButton.setVisibility(View.VISIBLE);
detailButton.setVisibility(View.VISIBLE);
}
}
private void slideLeft() {
nextButton.clearAnimations();
detailButton.clearAnimations();
nextButton.startAnimation(slideLeft);
detailButton.startAnimation(slideLeft);
nextButton.setVisibility(View.INVISIBLE);
detailButton.setVisibility(View.INVISIBLE);
cancelButton.startAnimation(slideLeft);
cancelButton.setVisibility(View.INVISIBLE);
}
}
It may not be elegant or pretty but I've used similar techniques in my apps and it works quite well and looks good to the user. It shouldn't be a huge performance issue either but I could be wrong. Hope that helps.
Related
Working in Android Studio, I need to add in my app a click listener on my imageview which has a certain animation. This is the code I have in MainActivity:
myImage.startAnimation(myAnimation);
myImage.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//DO SOMETHING
}
});
myAnimation comes from an XML in anim folder which does a translational animation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:interpolator="#android:anim/accelerate_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:fromYDelta="0%p"
android:toYDelta="40%p"
android:duration="1000"/>
</set>
This works fine, although this click listener is set on the space that has the image on the layout (activity_main.xml) and does not follow the animation inserted in the image. If I click on the space which belongs to the image in the layout, the click listener starts even if the image is not there due to the animation.
Is there a way in which the click listener is attach to the imageview in motion?
Thank you
This happens because the xml Translate animation you are using, does not really animate the View's property, it just moves the pixels on the screen and so it just looks like it has changed position, that is why the OnClickListener is still active on the View's original position, because Android thinks the View never really moved.
Simple solution use ObjectAnimator or even better ViewPropertyAnimator. Both will animate the View's property and so the OnClicklistener will also change it's position with it.
If you have used the Google+ app on Android you must have noticed the comments on posts are animated to show comments one by one using a fadeIn and fadeOut animation on each ListView item.
I want to achieve this type of animation for certain views like TextView, etc within each of my ListView item.
I can achieve the fadeIn and fadeOut animation part but the problem is where do I put the animation code for it to work independently for each inflated ListView item.
Any help would be appreciated. Thanks in advance.
Please use a BaseAdapter and put the necessary animation codes in your getView() method.
Just inflate the views and start the animations when the views are inflated for the first time. (Hint - when convertView == null)
Use the ViewHolder pattern to hold each of the elements of the single list item uniquely and start animations no any View you need inside each list item.
To start animations, create an animation in XML and start the animation like this,
Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_up);
anim.setInterpolator(new DecelerateInterpolator());
anim.setDuration(500);
anim.setStartOffset(100);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
progress.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
progress.startAnimation(anim);
To give you an idea on how to create animations in XML,
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="200"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<translate
android:duration="200"
android:fromYDelta="0%p"
android:toYDelta="5%p" />
</set>
You can use an animation set to combine multiple animations together and play them at once.
Please also explore the Animation API in greater detail, you will find useful methods like setRepeatMode() and setRepeatCount() which will help you to achieve the desired result.
Moreover, you do not need two separate TextViews, you can do it using one. Just make proper use of the animation listeners.
Hope it helps.
Let's say I have an ImageButton btn. I have two different Bitmap, bmp1 and bmp2. By default, btn displays bmp1, like this:
btn.setImageBitmap(bmp1);
Can I somehow make an animation, which crossfades bmp1 and bmp2, when calling the following:
btn.setImageBitmap(bmp2);
So the question is, is it possible - if yes, how - to animate the changing of bitmaps on ImageButtons?
The way I see it, there are two main ways to implement this functionality. Note that there may be other methods that will make this happen exactly as you are describing, but these would be my approaches.
First Approach: Leveraging the onAnimationEnd() Callback
Here, you would want to essentially fade out the first ImageButton, change the resource in the onAnimationEnd() callback, and then fade it back in. To do this, you would have to implement the below code.
Create an Animation resource in XML that would be used to fade the View in:
<!-- Filename: fadein.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Note that you might want to change the duration here-->
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="250"/>
</set>
Create an Animation resource in XML that would be used to fade the View out:
<!-- Filename: fadeout.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Note that you might want to change the duration here-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="250"/>
</set>
Load the fade out and fade in Animations in your code:
// Obtain a reference to the Activity Context
Context context = getContext();
// Create the Animation objects.
Animation outAnimation = AnimationUtils.loadAnimation(context, R.anim.fadeout);
Animation inAnimation = AnimationUtils.loadAnimation(context, R.anim.fadein);
Assign a new AnimationListener to this Animation, and build it out as follows:
outAnimation.setAnimationListener(new AnimationListener(){
// Other callback methods omitted for clarity.
public void onAnimationEnd(Animation animation){
// Modify the resource of the ImageButton
yourImageButton.setImageResource(R.drawable.[your_second_image]);
// Create the new Animation to apply to the ImageButton.
yourImageButton.startAnimation(inAnimation);
}
}
Assign the Animation to the ImageButton, and start the first Animation:
yourImageButton.startAnimation(outAnimation);
Then, if you wish to animate back to the previous image, you would simply do the same but in the reverse order.
Second Approach: Overlay a Second ImageButton
For this approach, you would simply assign two ImageButtons to the same coordinates on the screen, and with the same width. Then, you would fade out the first ImageButton and fade in the second one after the first Animation ended (much like the example above).
I hope that this answer aligns with your expectations. My apologies if there are any code errors, as I am doing this without an editor at the moment. Please let me know if you would like any additional clarification!
It is not possible to animate image button source changes. The workaround would be to stack two ImageButtons and animate its alfa channel separately to get expected behavior.
I'm very new regarding developing apps for android. Now what I want to do is to implement four buttons and as soon as a user clicks, let's say, on the topmost button, another two sub-buttons should appear underneath the clicked button and the other three remaining buttons should automatically move downwards.
I think my explanation is not hundred per cent clear, so I try to illustrate the problem with some images.
Now here are the four buttons:
http://advancedata.ad.funpic.de/First-AGApp.png
And as soon as the user pushes button one, two extra buttons should appear and the other three buttons should move downwards:
http://advancedata.ad.funpic.de/Second-AgApp.png
I would be very thankful for any advice how to implement this.
Thanks,
enne
Draw all your buttons in a LinearLayout with vertical orientation. Add the attribute
android:visibility="gone"
to the buttons that should appear when clicking the main buttons. Then you can show those buttons in the OnClickListener of the main buttons with the line:
button.setVisibility(View.VISIBLE);
where button is the reference to your layout in the code.
Button button = (Button) findViewById (R.id.your_button_id);
EDIT:
To add an animation to the process, you have to slide up/down the new buttons appearing and the buttons below. (Group the views into Layouts so it's easier to apply the animations).
Here you have the two XML files to create in your res/anim folder:
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-50" android:toYDelta="0"
android:duration="300" />
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0" android:toYDelta="-50"
android:duration="300" />
Create the animations in your code with:
Animation slideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
and apply it to the buttons with:
secondaryButton.startAnimation(slideDown);
When sliding up, you need to set the visibility to "gone" after the animation is finished, not before. In order to do that, you need to set the animation listener and hide the button in onAnimationEnd:
slideUp.setAnimationListener(new AnimationListener () {
#Override
public void onAnimationEnd(Animation animation) {
secondaryButton.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationStart(Animation animation) {}
});
I have a toolbar aligned at the bottom and a WebView above it, which fill remaining height. Now I want to slide down the toolbar in order to hide it, and while it's animating the webview height should expand. I've tried using TranslateAnimation but unfortunetely it's not adjusting toolbar's real position, only it's contents are moved. Here's what I tried:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="700"
android:fillAfter="true" />
And the actual code:
final View v = findViewById(R.id.browseToolbar);
Animation animation = AnimationUtils.loadAnimation(someContext, R.anim.toolbar_hide);
v.startAnimation(animation);
How can I do it?
I wrote some code to do actual resize animations. Take a look:
http://www.touchlab.co/blog/resize-animation/
Also look at a presentation I did on Android animation
https://docs.google.com/present/view?id=djqv5kb_187c62jvbf7
Essentially, as mentioned above, the regular animation classes only affect what's in their parent view. The key to understanding them is they aren't "real". Think of the Android animation as a mirage. If you run the example app I created, say you do a scale animation and make a button smaller, if you click outside, where the button USED to be, it still registers as a button click. Android animations don't actually affect real boundaries and dimensions.
What the code in my blog post does, essentially, is implement a ViewGroup.OnHierarchyChangeListener. When stuff is added/removed from the hierarchy, the container animates a physical resize.
When you use android animation only the pixels of the view are shifted. To actually move the view, you will need to add an animation listener to the animation object and override the onAnimationEnd method. In that method you need to programatically move the view.
AnimationListener animListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {}
#Override
public void onAnimationRepeat(Animation arg0) {}
#Override
public void onAnimationEnd(Animation arg0) {
Move the view here
}
};
animation.setAnimationListener(animListener);