[Android] AlphaAnimation フェードイン・フェードアウト

android.view.animation.Animation のクラスを使ってViewをフェードイン・フェードアウトさせることができるのがこの AlphaAnimation です。
　

Android Studio
2021.2.1

AlphaAnimation

alpha値を 1.0 -> 0.0 へアニメーションで変更させるのがAlphaAnimationですが、
画像１枚を使ってfade out/in を実現できるのでとても便利な機能です。
　

　
設定方法は２通りあります。
　

目次
1. XML attributes
2. コードで記述
3. サンプル動画

XML attributes

res以下にanimというフォルダーを作成してxmlファイルを置きます。
今回はfedeinとfadeoutの２種類作りました。

animationの属性設定は<alpha />タグを使って以下のように設定します。

interpolator：補間処理を行う
fromAlpha：アニメーション開始時のalpha値
toAlpha：アニメーション終了時のalpha値
fillAfter：アニメーション終了時にviewをそのまま残す(true)
duration：アニメーションの期間[msec]

res\anim\alpha_fadeout.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:fillAfter="true"
    android:duration="3000"
/>

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

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

android:fromAlpha="1.0"

android:toAlpha="0.0"

android:fillAfter="true"

android:duration="3000"

　
res\anim\alpha_fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:fillAfter="true"
    android:duration="3000"
/>

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

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:fillAfter="true"

android:duration="3000"

　
MainActivityでこれらのファイルをロードします。

AnimationUtils.loadAnimation(this,R.anim.alpha_fadeout)

1	AnimationUtils.loadAnimation(this,R.anim.alpha_fadeout)

まとめると
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.carlos);

        Button buttonFadeOut = findViewById(R.id.button_fadeout);
        buttonFadeOut.setOnClickListener(view -> fadeoutXml());

        Button buttonFadeIn = (Button)findViewById(R.id.button_fadein);
        buttonFadeIn.setOnClickListener(view -> fadeinXml());
    }

    private void fadeoutXml(){
        Animation animation= AnimationUtils.loadAnimation(this,
                R.anim.alpha_fadeout);
        imageView.startAnimation(animation);
    }

    private void fadeinXml(){
        Animation animation= AnimationUtils.loadAnimation(this,
                R.anim.alpha_fadein);
        imageView.startAnimation(animation);
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.carlos);

Button buttonFadeOut = findViewById(R.id.button_fadeout);

buttonFadeOut.setOnClickListener(view -> fadeoutXml());

Button buttonFadeIn = (Button)findViewById(R.id.button_fadein);

buttonFadeIn.setOnClickListener(view -> fadeinXml());

}

private void fadeoutXml(){

Animation animation= AnimationUtils.loadAnimation(this,

R.anim.alpha_fadeout);

imageView.startAnimation(animation);

}

private void fadeinXml(){

Animation animation= AnimationUtils.loadAnimation(this,

R.anim.alpha_fadein);

imageView.startAnimation(animation);

}

　
レイアウトです
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="20dp"
    android:gravity="center"
    android:background="#210"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/carlos"
        android:src="@drawable/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button_fadeout"
            android:text="@string/fadeout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/button_fadein"
            android:text="@string/fadein"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

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

<LinearLayout 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:orientation="vertical"

android:padding="20dp"

android:gravity="center"

android:background="#210"

tools:context=".MainActivity">

<ImageView

android:id="@+id/carlos"

android:src="@drawable/img"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/button_fadeout"

android:text="@string/fadeout"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

<Button

android:id="@+id/button_fadein"

android:text="@string/fadein"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">a man</string>
    <string name="fadeout">Fade out</string>
    <string name="fadein">Fade In</string>
</resources>

<string name="app_name">YourAppName</string>

</resources>

コードで記述

簡単なコンストラクタで設定してみます。

AlphaAnimation(float fromAlpha, float toAlpha)

1	AlphaAnimation(float fromAlpha, float toAlpha)

AlphaAnimation(1.0f, 0.0f)：透明度の設定は1.0から0.0まで変化させられます
setDuration(int msec)：アニメーションの期間[msec]
startAnimation()：アニメーションを開始
setFillAfter(true)：アニメーション終了時にViewをそのままにする

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AlphaAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.carlos);

        Button buttonFadeOut = findViewById(R.id.button_fadeout);
        buttonFadeOut.setOnClickListener(view -> fadeout());

        Button buttonFadeIn = findViewById(R.id.button_fadein);
        buttonFadeIn.setOnClickListener(view -> fadein());
    }

    private void fadeout(){
        // 透明度を1から0に変化
        AlphaAnimation alphaFadeout = new AlphaAnimation(1.0f, 0.0f);
        // animation時間 msec
        alphaFadeout.setDuration(3000);
        // animationが終わったそのまま表示にする
        alphaFadeout.setFillAfter(true);

        imageView.startAnimation(alphaFadeout);
    }

    private void fadein(){
        // 透明度を0から1に変化
        AlphaAnimation alphaFadeIn = new AlphaAnimation(0.0f, 1.0f);
        // animation時間 msec
        alphaFadeIn.setDuration(3000);
        // animationが終わったそのまま表示にする
        alphaFadeIn.setFillAfter(true);

        imageView.startAnimation(alphaFadeIn);
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.animation.AlphaAnimation;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.carlos);

Button buttonFadeOut = findViewById(R.id.button_fadeout);

buttonFadeOut.setOnClickListener(view -> fadeout());

Button buttonFadeIn = findViewById(R.id.button_fadein);

buttonFadeIn.setOnClickListener(view -> fadein());

}

private void fadeout(){

// 透明度を1から0に変化

AlphaAnimation alphaFadeout = new AlphaAnimation(1.0f, 0.0f);

// animation時間 msec

alphaFadeout.setDuration(3000);

// animationが終わったそのまま表示にする

alphaFadeout.setFillAfter(true);

imageView.startAnimation(alphaFadeout);

}

private void fadein(){

// 透明度を0から1に変化

AlphaAnimation alphaFadeIn = new AlphaAnimation(0.0f, 1.0f);

// animation時間 msec

alphaFadeIn.setDuration(3000);

// animationが終わったそのまま表示にする

alphaFadeIn.setFillAfter(true);

imageView.startAnimation(alphaFadeIn);

}

　
レイアウトです
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="20dp"
    android:gravity="center"
    android:background="#210"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/carlos"
        android:src="@drawable/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button_fadeout"
            android:text="@string/fadeout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            style="?android:attr/buttonBarButtonStyle" />

        <Button
            android:id="@+id/button_fadein"
            android:text="@string/fadein"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" 
            style="?android:attr/buttonBarButtonStyle" />

    </LinearLayout>

</LinearLayout>

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

<LinearLayout 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:orientation="vertical"

android:padding="20dp"

android:gravity="center"

android:background="#210"

tools:context=".MainActivity">

<ImageView

android:id="@+id/carlos"

android:src="@drawable/img"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/button_fadeout"

android:text="@string/fadeout"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

style="?android:attr/buttonBarButtonStyle" />

<Button

android:id="@+id/button_fadein"

android:text="@string/fadein"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

style="?android:attr/buttonBarButtonStyle" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">a man</string>
    <string name="fadeout">Fade out</string>
    <string name="fadein">Fade In</string>
</resources>

<string name="app_name">YourAppName</string>

</resources>