Twitter on iOS has this nice bird animation on start.
(Source)
How can I make such an animation with an Android ImageView?
As simple as:
findViewById(R.id.image_view).animate()
.setStartDelay(500)
.setDuration(1000)
.scaleX(20)
.scaleY(20)
.alpha(0);
Make sure the image view is centered in your layout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>
To modify the animation further you can:
Delay the animation
Use an decelerating (or other) interpolator
Modify the scale factors
It's called Splash Screen and here is a tutorial how to achieve it - link
The difference is that you need to add after line
setContentView(R.layout.activity_splash);
Following code:
ImageView image = (ImageView) findViewById(R.id.imgLogo);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.my_animation);
image.startAnimation(animation);
And add in your res/anim new file my_animation.xml contains
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale android:fromXScale="1.0" android:fromYScale="1.0"
android:toXScale="5.0" android:toYScale="5.0"
android:duration="3000" android:fillBefore="false"
android:pivotX="50%" android:pivotY="50%" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="3000"/>
</set>
Agree with above answer but there is another solution: -
THis link may be useful for you just download the code and as per the link suggests
You can create in code:
// create and customize the view
SplashView splashView = new SplashView(context);
// the animation will last 0.5 seconds
splashView.setDuration(500);
// transparent hole will look white before the animation
splashView.setHoleFillColor(Color.WHITE);
// this is the Twitter blue color
splashView.setIconColor(Color.rgb(23, 169, 229));
// a Twitter icon with transparent hole in it
splashView.setIconResource(R.drawable.ic_twitter);
// remove the SplashView from MainView once animation is completed
splashView.setRemoveFromParentOnEnd(true);
or in XML:
<com.yildizkabaran.twittersplash.view.SplashView
xmlns:app="http://schemas.android.com/apk/res/com.yildizkabaran.twittersplash"
android:id="#+id/splash_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:icon="#drawable/ic_twitter"
app:iconColor="#color/twitter_blue"
app:duration="500"
app:holeFillColor="#color/white"
app:removeFromParentOnEnd="true" />
then to run the animation, simply call:
--> run the animation and listen to the animation events (listener can be left as null)
splashView.splashAndDisappear(new ISplashListener(){
#Override
public void onStart(){
}
#Override
public void onUpdate(float completionFraction){
}
#Override
public void onEnd(){
}
});`
Output will be
-Hope you find your answer.
Related
I have a Map, with markers on the Gas Stations around my location. When I click on them, I want a window to raise from the bottom of the screen (and go only half through the Map Screen) where I want to display info about that gas station. How do I do this window coming from the bottom of the screen? Animation?
Declarations :
Animation slideup, slidedown;
LinearLayout bottomLay;
Initializations:
slideup = AnimationUtils.loadAnimation(this, R.anim.slide_up);
slidedown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
bottomLay = findViewById(R.id.bottomLay); //your bottom view
start the animation :
public void startSlideDown() {
bottomLay.startAnimation(slidedown); // down
}
or
public void startSlideUp() {
bottomLay.startAnimation(slideup); // up
}
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromYDelta="0"
android:toYDelta="100%p" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_mediumAnimTime"
android:fromYDelta="100%p"
android:toYDelta="0%p" />
i have a animation not working which should be triggered on a button click, the click checks if the image is shown and runs a animation if so, then in the else runs a different animation. problem is only the animation in the else statement is working. the if statement is still carried out if conditions are metm tested with logcat, the animation just does not happen. any help appreciated.
following being called on a click event
if (smsArea.isShown()) {
Animation backDoww = AnimationUtils.loadAnimation(getContext(),
R.anim.slide_out_right);
smsArea.startAnimation(slide_out_right);
smsArea.setVisibility(View.GONE);
}else{
Animation slide_in_right= AnimationUtils.loadAnimation(getContext(),
R.anim.slide_in_right);
smsArea.startAnimation(slide_in_right);
smsArea.setVisibility(View.VISIBLE);
}
The animation in my else statement is the only one that works, the first animation that should be triggered with the if(smsArea.isShown()) never occurs.
i'm setting the smsArea to Gone initially, i'm doing this in the onCreate not in the xml, its left as its default viable in xml. i know the error is not in my animation file as even if i use the xml file in the else which i know works the animation does not happen.
XML
<LinearLayout
android:id="#+id/smsArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="12dp"> ..... </LinearLayout>
Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate android:duration="300" android:fromXDelta="0%" android:toXDelta="100%"/>
<alpha android:duration="300" android:fromAlpha="1.0" android:toAlpha="0.0" />
Add animation listener:
backDoww.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
smsArea.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
in onAnimationEnd hide your view.
Our application makes heavy use of webviews. When testing on ICS, we noticed that we need to set the application property hardwareAccelerated="true". However, doing this caused a few other bugs in our application, most of which we have fixed. We are still having problems getting our 'slide-in' animation working. Without any code changes, the animation simply does a 'reveal' type animation rather than sliding. We have tries a few different things:
Adding a small alpha transition (.99->1). This changes the 'reveal' to a 'slide' but causes some weird artifacts on the screen sometimes.
using hardware layers during the animation. This doesn't work consistently.
using software layers during the animation. This works, but causes a slow redraw after the slide-in animation completes for the first time.
Approach 3 is the most promising, but we have not figured out how to avoid the redraw. We have created a small test case using a sample project with a single activity:
activity class:
int accelValue = View.LAYER_TYPE_NONE; //hack
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
addClickListenerAnimation(R.id.buttonhl, R.anim.to_left, View.VISIBLE, View.INVISIBLE);
addClickListenerAnimation(R.id.buttonhr, R.anim.to_right, View.VISIBLE, View.INVISIBLE);
addClickListenerAnimation(R.id.buttonsl, R.anim.from_left, View.INVISIBLE, View.VISIBLE);
addClickListenerAnimation(R.id.buttonsr, R.anim.from_right, View.INVISIBLE, View.VISIBLE);
final Button b = (Button) findViewById(R.id.accel);
b.setOnClickListener(
new View.OnClickListener()
{
#Override
public void onClick(View v)
{
accelValue = ++accelValue % 3;
b.setText(accelValue == 0 ? "NONE" : accelValue == 1 ? "S/W" : "H/W");
}
});
}
private void addClickListenerAnimation(int buttonId, final int animId, final int startVis, final int endVis)
{
Button b = (Button) findViewById(buttonId);
b.setOnClickListener(
new View.OnClickListener()
{
#Override
public void onClick(View v)
{
final WebView wv = (WebView) findViewById(R.id.webview);
final View layout = findViewById(R.id.frame);
Animation a = AnimationUtils.loadAnimation(getApplicationContext(), animId);
a.setDuration(500);
a.setAnimationListener(new AnimationListener()
{
#Override
public void onAnimationStart(Animation animation)
{
Log.i("sb", "layer type was " + wv.getLayerType());
Log.i("sb", "llayout layer type was " + layout.getLayerType());
wv.setLayerType(accelValue, null);
Log.i("sb", "setting layer type " + accelValue);
}
#Override
public void onAnimationRepeat(Animation animation)
{
}
#Override
public void onAnimationEnd(Animation animation)
{
wv.setLayerType(View.LAYER_TYPE_NONE, null);
Log.i("sb", "restoring layout layer type " + layout.getLayerType());
}
});
layout.setAnimation(a);
layout.setVisibility(endVis);
}
});
}
#Override
protected void onStart()
{
super.onStart();
((WebView)findViewById(R.id.webview)).loadUrl("http://www.wikipedia.org");
}
from_left.xml animation (other animation xmls are similar):
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<translate android:fromXDelta="-100%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="0%"
android:duration="600"
android:zAdjustment="bottom"
/>
</set>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"
>
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</FrameLayout>
<View
android:layout_width="fill_parent"
android:layout_height="80dp"
android:background="#FF000000" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonsl"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="show L" />
<Button
android:id="#+id/buttonhl"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="hide L" />
<Button
android:id="#+id/buttonsr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="show R" />
<Button
android:id="#+id/buttonhr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="hide R" />
<Button
android:id="#+id/accel"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="NONE" />
</LinearLayout>
</LinearLayout>
manifest:
<uses-sdk android:minSdkVersion="14" />
<uses-permission android:name="android.permission.INTERNET" />
Well, if you are trying to support ICS and onward, you can use the new Animation APIs as they are much easier to use and I believe will be very smooth.
Here are two links to take a look into this API:
this and this
And if you want to use this API for older versions, try NineOldAndroids
Edit: Try setting the WebView's Layer to a Software one:
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
It stopped the flickering but you lose hardware acceleration inside the view. I am not sure but I guess that for stuff like animation the view would still be considered as having hardware acceleration since its "container" still does. But I could be completely wrong too.
it worked fine for me using
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
the flickering issue was solved
From you description it seems like that's the same problem I had, though I'm not completely sure of that. At first I used your solution, but now I have one that works even better. I simply set
android:alwaysDrawnWithCache="true"
on the web view. That get's rid of all flickering and wrong drawing.
I hope it helps!
I have enabled the built in zoom controls in my google maps application, however, it shows on my footer button panel:
I want the zoom controls to be one top of the footer button bar.
public class MinuteMapActivity extends MapActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// the methods on the map are initialised here - onCreate
zoomControls();
satelliteDisplay();
snapToMap();
}
// method for Zoomcontrols
private void zoomControls() {
LinearLayout zoomControls = (LinearLayout) findViewById(R.id.zoomControls);
MapView zoomLayout = (MapView) findViewById(R.id.MapView);
//zoomControls.addView(zoomLayout, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
zoomLayout.setBuiltInZoomControls(true);
}
XML Layout:
?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.google.android.maps.MapView
android:id="#+id/MapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:enabled="true"
android:clickable="true"
android:apiKey="0zZsLcQS5Zeiqjbo1n8-nn2CqtxKIuTq2T6bskg"
/>
<!-- set zoom controls on map at the bottom -->
<LinearLayout
android:id="#+id/zoomControls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
If I enable
//zoomControls.addView(zoomLayout, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
it crashes.
Some assistance on how I can move the zoomcontrols above the bottom bar.
I think the reason it crashes is because you are trying to assign LinearLayout parameters to a layout inside a RelativeLayout, so you would have to use RelativeLayout.LayoutParams instead.
Also, I am a bit confused as to why you are using a LinearLayout for your zoom controls instead of the pre-defined View called ZoomControls. Perhaps it would save you a bit of time?
If you want to place the zoom controls above your bottom view use
<ZoomControls
android:id="#+id/zoomControls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/buttonbar" />
assuming you call your ButtonBar view buttonbar.
May you have missed the two line of code in your
<com.google.android.maps.MapView.
so paste this two lines in it and you will got it. its working 100 percent.
android:enabled="true"
android:clickable="true"
As by object, I would reproduce fade effect between two layout.
Now I've this situation:
LinearLayout l;
LinearLayout l2;
To switch between them I've used
l.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);
I want add fade effect between this transiction, how I can do it?
Here is a working solution to cross fade between 2 layouts:
public class CrossFadeActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.crossfade);
final View l1 = findViewById(R.id.l1);
final View l2 = findViewById(R.id.l2);
final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out);
final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in);
findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
fadeOut.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
l1.setVisibility(View.GONE);
}
});
l1.startAnimation(fadeOut);
l2.setVisibility(View.VISIBLE);
l2.startAnimation(fadeIn);
}
});
findViewById(R.id.button2).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
fadeOut.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
l2.setVisibility(View.GONE);
}
});
l2.startAnimation(fadeOut);
l1.setVisibility(View.VISIBLE);
l1.startAnimation(fadeIn);
}
});
}
}
crossfade.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/l1"
android:layout_width="fill_parent"
android:layout_height="300dip"
android:orientation="vertical"
android:background="#drawable/someimage"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<RelativeLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="300dip"
android:orientation="vertical"
android:background="#drawable/someimage2"
android:visibility="gone"
>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</RelativeLayout>
Where l1 and l2 are 2 random example layouts. The trick is to put them in XML such that they overlap each other (e.g. in a RelativeLayout) with visible / gone, add listeners to the animations to toggle the visibility on finish, and set the view which has to fade in to visible before the animation starts, otherwise the animation will not be visible.
I put the buttons with the listeners to toggle the animation in the layouts itself, because I need to implement it that way but the click listener can be of course somewhere else (if it's only one it should be used in combination with some flag or check to know how to toggle).
These are the animation files. They have to be stored in folder res/anim:
fade_in.xml
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
fade_out.xml
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="1.0"
android:toAlpha="0" />
UPDATE:
Instead of using R.anim.fade_in, you can use the default fade_in from Android API (android.R.fade_in):
final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in);
Using android.R.anim.fade_in, you will not need to create the file res/anim/fade_in.xml.
Android has a package with some useful animations on android.R.anim: http://developer.android.com/reference/android/R.anim.html
Using R.anim.fade_out & .R.anim.fade_in you can create an animation which does this. I don't know much about this myself but heres a tutorial regarding animations in android: Animation Tutorial
P.S. This tutorial is not mine thus credit does not go out to me.
Edit:
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
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(100);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);
l.setLayoutAnimation(controller);
Fade out Animation
public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out);
target.startAnimation(animation);
return animation;
}
I'm guessing you can try something like this, I copy pasted the animation from the tutorial I don't know what it does exactly as I have no experience with Android development. Another example could be Example 2
Since android 3.0 you can use
android:animateLayoutChanges="true"
in a layout in xml and any changes to this specific layouts content at run time will be animated. For example, in your case, you will need to set this attribute for the parent for the parent layout of l and l2 e.g
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="me.kalem.android.RegistrationActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true"
android:padding="20dp">
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="visible">
........
</LinearLayout>
<LinearLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone">
........
</LinearLayout>
</LinearLayout>
Now hiding l1 and showing l2 at runtime will be animated.