Scribd
Upload
71 views11 pages

Android Slide and Fade Animations Guide

The document discusses how to implement slide up, slide down, fade in, and fade out animations in Android applications. It explains that animation XML files need to be created using <scale> tags for slide animations and <alpha> tags for fade animations. It provides examples of XML code to define the different animations and also discusses how to call the animations in an activity's Java code. Buttons are added to an activity layout to trigger starting the slide up, slide down, fade in, or fade out animations on a target image view.

Uploaded by

Ali Hassan Naqvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
71 views11 pages

Android Slide and Fade Animations Guide

The document discusses how to implement slide up, slide down, fade in, and fade out animations in Android applications. It explains that animation XML files need to be created using <scale> tags for slide animations and <alpha> tags for fade animations. It provides examples of XML code to define the different animations and also discusses how to call the animations in an activity's Java code. Buttons are added to an activity layout to trigger starting the slide up, slide down, fade in, or fade out animations on a target image view.

Uploaded by

Ali Hassan Naqvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Imtiaz

Saifullah

Android Guide
with
Imtiaz Saifullah
Email: [email protected]
FB: facebook.com/ImtiazSaif.Khan
Ping/Text: +92-331-7370872
Imtiaz
Saifullah

Slide Up / Down Animations


Imtiaz
Saifullah Slide Up / Down Animations
Slide Up and Slide Down animations are used to change the appearance and behaviour of the objects over a
particular interval of time. The Slide Up and Slide Down animations will provide a better look and feel for our
applications.

Generally, the animations are useful when we want to notify users about the change’s happening in our app, such as
new content loaded or new actions available, etc.

We need to create an xml file that defines the type of animation to perform in a new
folder anim under res directory (res >> anim >> slide_up.xml) with required properties. In case, anim folder not
exists in res directory, create a new one.

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Slide Up / Down Animations
To use Slide Up or Slide Down animations in our android applications, we need to define a new xml file
with <scale> tag
For Slide Up animation, we need to set android:fromYScale="1.0" and android:toYScale="0.0"
For Slide Down animation, we need to
set android:fromYScale="0.0" and android:toYScale="1.0" 
slide_up.xml slide_down.xml
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/ <set xmlns:android="http://schemas.android.com/
apk/res/android" android:interpolator="@android apk/res/android" 
:anim/linear_interpolator"> android:interpolator="@android:anim/linear_inte
    <scale rpolator">
        android:duration="500"     <scale
        android:fromXScale="1.0"         android:duration="500"
        android:fromYScale="1.0"         android:fromXScale="1.0"
        android:toXScale="1.0"         android:fromYScale="0.0"
        android:toYScale="0.0" />         android:toXScale="1.0"
</set>         android:toYScale="1.0" />
</set>

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Slide Up / Down Animations
Open activity_main.xml file from \res\layout folder path and write the code like as shown below.

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView android:id="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:src="@drawable/is_pic"/>
<Button
android:id="@+id/btnSlideDown"
android:layout_below="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide Down"
android:layout_marginLeft="100dp" />
<Button
android:id="@+id/btnSlideUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btnSlideDown"
android:layout_toRightOf="@+id/btnSlideDown"
android:text="Slide Up" />
</RelativeLayout>

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Slide Up / Down Animations
Now open your main activity file MainActivity.java
public class MainActivity extends AppCompatActivity {
private Button btnSDown;
private Button btnSUp;
private ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnSDown = (Button)findViewById(R.id.btnSlideDown);
btnSUp = (Button)findViewById(R.id.btnSlideUp);
img = (ImageView)findViewById(R.id.imgvw);
btnSDown.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animSlideDown = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_down);
img.startAnimation(animSlideDown);
}
});
btnSUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animSlideUp = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
img.startAnimation(animSlideUp);
}});}}

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Fade In / Out Animations
Fade In and Fade Out animations are used to change the appearance and behaviour of the objects over a particular
interval of time. The Fade In and Fade Out animations will provide a better look and feel for our applications.

Generally, the animations are useful when we want to notify users about the change’s happening in our app, such as
new content loaded or new actions available, etc.

We need to create an xml file that defines the type of animation to perform in a new folder anim under res directory
(res >> anim >> fade_in.xml) with required properties. In case anim folder not exists in res directory, create a
new one.

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Fade In / Out Animations
Fade In or Fade Out animations in our android applications, we need to define a new xml file with <alpha> tag

For Fade In animation, we need to increase the alpha value from 0 to 1


For Fade Out animation, we need to decrease the alpha value from 1 to 0 

fade_in.xml fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/
<set xmlns:android="http://schemas.android.com/
apk/res/android" 
apk/res/android"
android:interpolator="@android:anim/linear_inte
    android:interpolator="@android:anim/linear_
rpolator">
interpolator">
   <alpha
    <alpha
        android:duration="2000"
        android:duration="2000"
        android:fromAlpha="0.1"
        android:fromAlpha="1.0"
        android:toAlpha="1.0">
        android:toAlpha="0.1" >
    </alpha>
    </alpha>
</set>
</set>

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Fade In / Out Animations
Open activity_main.xml file from \res\layout folder path and write the code like as shown below.

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView android:id="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:src="@drawable/is_pic"/>
<Button
android:id="@+id/btnFadeIn"
android:layout_below="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fade In"
android:layout_marginLeft="100dp" />
<Button
android:id="@+id/btnFadeOut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btnFadeIn"
android:layout_toRightOf="@+id/btnFadeIn"
android:text="Fade Out" />
</RelativeLayout>

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah Fade In / Out Animations
Now open your main activity file MainActivity.java

public class MainActivity extends AppCompatActivity {


private Button btnfIn;
private Button btnfOut;
private ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnfIn = (Button)findViewById(R.id.btnFadeIn);
btnfOut = (Button)findViewById(R.id.btnFadeOut);
img = (ImageView)findViewById(R.id.imgvw);
btnfIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);
img.startAnimation(animFadeIn);
}
});
btnfOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);
img.startAnimation(animFadeOut);
}
});
}
}

Innovative Sun (Software Development Academy) | Imtiaz Saifullah | +92-331-7370872


Imtiaz
Saifullah

You might also like