アニメーションを付けるとアプリの見栄えがグッと良くなる事が多い。
(もちろんやりすぎは良くないが。)

そこで、今回は簡単に出来るアニメーションをやってみる。 
横に2つ並んだImageViewの左側を非表示にし、右側が詰まるアニメーションを行うようにする。
 
アニメーション無しの実装
まずはアニメーション無しで実装してみよう。
このような画面を用意する。
Screenshot_1534811400
XMLはこうだ。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/simple_animation_root_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".SimpleAnimationActivity">

  <ImageView
    android:id="@+id/simple_animation_image1"
    android:layout_width="100dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintDimensionRatio="h,1:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:drawable/ic_btn_speak_now" />

  <ImageView
    android:id="@+id/simple_animation_image2"
    android:layout_width="100dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintDimensionRatio="h,1:1"
    app:layout_constraintStart_toEndOf="@+id/simple_animation_image1"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:drawable/ic_lock_idle_alarm" />

  <ToggleButton
    android:id="@+id/simple_animation_toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="ToggleButton"
    android:textOff="隠す"
    android:textOn="表示する"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
次に動作の実装を行う。
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_simple_animation)

    // トグルボタンのイベントを設定する
    simple_animation_toggle.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener {button, isChecked ->
      if (isChecked) {
        // 左側のImageViewを隠す
        simple_animation_image1.visibility = View.GONE
      } else {
        // 左側のImageViewを表示する
        simple_animation_image1.visibility = View.VISIBLE
      }
    })
  }
これで実行するとこのようになる。
アニメーション無し
これにアニメーションを付ける。

やり方はとても簡単だ。
変更を加える処理の前にTransitionManager.beginDelayedTransition()を呼び出してやるだけでいい。
このメソッドを呼び出した後に再描画されるまでの変更を勝手にアニメーションしてくれる。

先ほどのコードにTransitionManager.beginDelayedTransition()を追加してやろう。
    // トグルボタンのイベントを設定する
    simple_animation_toggle.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener {button, isChecked ->
      // アニメーションを付ける
      TransitionManager.beginDelayedTransition(simple_animation_root_layout)

      if (isChecked) {
        // 左側のImageViewを隠す
        simple_animation_image1.visibility = View.GONE
      } else {
        // 左側のImageViewを表示する
        simple_animation_image1.visibility = View.VISIBLE
      }
    })
たったこれだけだ。
なお、第二引数で好きなトランジションを設定することもできる。

では実行結果を見てみよう。
アニメーション有り
期待通りの結果を得られた!