Animation

Alpha

res/anim/view_tween_animation_alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromAlpha="0.2"
    android:toAlpha="1.0" />

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_alpha)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenAlpha.startAnimation(this)
    }

Rotate

res/anim/view_tween_animation_rotate.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" />

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_rotate)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenRotate.startAnimation(this)
    }

Scale

res/anim/view_tween_animation_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromXScale="0.2"
    android:fromYScale="0.2"
    android:pivotX="0.0"
    android:pivotY="0.0"
    android:toXScale="1.0"
    android:toYScale="1.0" />

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_scale)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenScale.startAnimation(this)
    }

translate

res/anim/view_tween_animation_translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromXDelta="-100"
    android:fromYDelta="-10"
    android:toXDelta="100"
    android:toYDelta="10" />

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_translate)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenTranslate.startAnimation(this)
    }

Set

res/anim/view_tween_animation_set.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <alpha
        android:fromAlpha="0.2"
        android:toAlpha="1.0" />

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <scale
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="0.0"
        android:pivotY="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <translate
        android:fromXDelta="-100"
        android:fromYDelta="-10"
        android:toXDelta="100"
        android:toYDelta="10" />

</set>

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_set)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenSet.startAnimation(this)
    }

Frame

res/drawable/view_frame_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@android:color/holo_green_dark"
        android:duration="1000" />
    <item
        android:drawable="@android:color/holo_blue_bright"
        android:duration="1000" />
    <item
        android:drawable="@android:color/holo_orange_dark"
        android:duration="1000" />
    <item
        android:drawable="@android:color/holo_red_dark"
        android:duration="1000" />
    <item
        android:drawable="@android:color/holo_purple"
        android:duration="1000" />

</animation-list>

mBinding.tvViewFrame.run {
    setBackgroundResource(R.drawable.view_frame_animation)
    if (background is Animatable) {
        (background as Animatable).start()
    }
}

Animator

Value

res/animator/property_animator_value.xml

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:valueFrom="0f"
    android:valueTo="-100f"
    android:valueType="floatType" />

(AnimatorInflater.loadAnimator(
    context,
    R.animator.property_animator_value
) as ValueAnimator)
    .apply {
        mAnimators.add(this)
        addUpdateListener {
            mBinding.tvPropertyValue.translationX = it.animatedValue as Float
        }
        start()
    }

Object

res/animator/property_animator_object.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:propertyName="textColor"
    android:valueFrom="@color/colorPrimary"
    android:valueTo="@color/colorAccent"
    android:valueType="colorType"  />

(AnimatorInflater.loadAnimator(
    context,
    R.animator.property_animator_object
) as ObjectAnimator)
    .apply {
        mAnimators.add(this)
        target = mBinding.tvPropertyObject
        start()
    }

Set

res/animator/property_animator_set.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <animator
        android:duration="1000"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:valueFrom="0f"
        android:valueTo="-100f"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="6000"
        android:propertyName="textColor"
        android:valueFrom="@color/colorPrimary"
        android:valueTo="@color/colorAccent"
        android:valueType="colorType" />
</set>

(AnimatorInflater.loadAnimator(context, R.animator.property_animator_set) as AnimatorSet)
    .apply {
        mAnimators.add(this)
        (this.childAnimations[0] as ValueAnimator).addUpdateListener {
            mBinding.tvPropertySet.translationX = it.animatedValue as Float
        }
        setTarget(mBinding.tvPropertySet)
        start()
    }

ColorStateList

res/color/color_state_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item android:color="#ffff0000" android:state_pressed="true" />
    <!-- focused -->
    <item android:color="#ff0000ff" android:state_focused="true" />
    <!-- default -->
    <item android:color="#ff000000" />
</selector>

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="@string/menu_color_state_list"
    android:textAllCaps="false"
    android:textColor="@color/color_state_list" />

Drawable - 可绘制对象资源

Bitmap File - 位图文件

res/drawable/drawable_bitmap.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:alpha="0.5"
    android:antialias="true"
    android:src="@drawable/ic_android_developers"
    android:tileMode="mirror" />

<ImageView
    android:id="@+id/iv_bitmap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="BitmapDrawable"
    app:srcCompat="@drawable/drawable_bitmap" />

Nine-Patch File - 九宫格文件

res/drawable/drawable_nine_patch.xml

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_android_developers_patch" />

<TextView
    android:id="@+id/tv_nine_patch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:background="@drawable/ic_android_developers_patch"
    android:text="@string/draw_9_patch_content" />

Layer List - 图层列表

res/drawable/drawable_layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <item
        android:width="60dp"
        android:height="60dp"
        android:drawable="@android:color/holo_red_dark"
        tools:ignore="UnusedAttribute" />
    <item
        android:width="60dp"
        android:height="60dp"
        android:drawable="@android:color/holo_green_dark"
        android:left="10dp"
        android:top="10dp"
        tools:ignore="UnusedAttribute" />
    <item
        android:width="60dp"
        android:height="60dp"
        android:drawable="@android:color/holo_blue_dark"
        android:left="20dp"
        android:top="20dp"
        tools:ignore="UnusedAttribute" />
</layer-list>

<ImageView
    android:id="@+id/iv_layers"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:contentDescription="LayerDrawable"
    app:srcCompat="@drawable/drawable_layer_list" />

State List - 状态列表

res/drawable/drawable_state_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item android:drawable="@color/colorAccent" android:state_pressed="true" />
    <!-- focused -->
    <item android:drawable="@color/colorAccent" android:state_focused="true" />
    <!-- hovered -->
    <item android:drawable="@color/colorAccent" android:state_hovered="true" />
    <!-- default -->
    <item android:drawable="@color/colorPrimaryDark" />
</selector>

<Button
    android:id="@+id/btn_state_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:background="@drawable/drawable_state_list"
    android:text="StateListDrawable"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />

Level List - 级别列表

res/drawable/drawable_level_list.xml

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:drawable/star_off"
        android:maxLevel="0" />
    <item
        android:drawable="@android:drawable/star_on"
        android:maxLevel="1" />
</level-list>

<ImageButton
    android:id="@+id/ib_level_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:contentDescription="LevelListDrawable"
    android:src="@drawable/drawable_level_list" />

mBinding.ibLevelList.setOnClickListener {
    (it as ImageButton).drawable.level.let { level ->
        if (level == 1) {
            it.drawable.level = 0
        } else {
            it.drawable.level = 1
        }
    }
}

Transition Drawable - 转换可绘制对象

res/drawable/drawable_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:drawable/star_big_on" />
    <item android:drawable="@android:drawable/star_big_off" />
</transition>

<ImageButton
    android:id="@+id/ib_transition"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:contentDescription="TransitionDrawable"
    android:src="@drawable/drawable_transition"/>

mBinding.ibTransition.setOnClickListener {
    ((it as ImageButton).drawable as TransitionDrawable).startTransition(500)
}

Inset Drawable - 插入可绘制对象

res/drawable/drawable_insert.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@color/colorAccent"
    android:insetLeft="10dp"
    android:insetTop="10dp"
    android:insetRight="10dp"
    android:insetBottom="10dp" />

<Button
    android:id="@+id/btn_insert"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:foreground="@drawable/drawable_insert"
    android:text="InsertDrawable"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />

Clip Drawable - 裁剪可绘制对象

res/drawable/drawable_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/ic_android_developers"
    android:gravity="left"/>

<ImageView
    android:id="@+id/iv_clip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:contentDescription="ClipDrawable"
    android:src="@drawable/drawable_clip" />

mBinding.ivClip.drawable.level = 1000
mBinding.ivClip.setOnClickListener {
    (it as ImageView).drawable.let { drawable ->
        drawable.level += 1000
        if (drawable.level >= 10000) {
            drawable.level = 0
        }
    }
}

Scale Drawable - 缩放可绘制对象

res/drawable/drawable_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/ic_android_developers"
    tools:level="5000"
    android:scaleWidth="80%"
    android:scaleHeight="80%"
    android:scaleGravity="center" />

<ImageView
    android:id="@+id/iv_scale"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:contentDescription="ScaleDrawable"
    android:background="@drawable/drawable_scale" />

mBinding.ivScale.background.level = 1000
mBinding.ivScale.setOnClickListener {
    (it as ImageView).background.let { drawable ->
        drawable.level += 1000
        if (drawable.level >= 10000) {
            drawable.level = 0
        }
    }
}

Shape Drawable - 形状可绘制对象

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="8dp"
    android:shape="rectangle"
    android:useLevel="false">

    <!--为形状产生圆角。仅当形状为矩形时适用。-->
    <corners android:radius="8dp" />
    
    <!--用于填充形状的纯色。-->
    <!--    <solid android:color="@color/colorPrimaryDark" />-->

    <!--指定形状的渐变颜色。-->
    <gradient
        android:angle="90"
        android:centerColor="@android:color/white"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/colorAccent"
        android:startColor="@color/colorPrimary" />

    <!--要应用到包含视图元素的内边距（这会填充视图内容的位置，而非形状）。-->
    <padding
        android:bottom="10dp"
        android:left="20dp"
        android:right="20dp"
        android:top="10dp" />

    <!--形状的大小。-->
    <size
        android:width="100dp"
        android:height="100dp" />

    <!--形状的笔划中线。外边框-->
    <stroke
        android:width="10dp"
        android:color="@color/colorPrimary"
        android:dashWidth="20dp"
        android:dashGap="10dp" />
</shape>

<TextView
    android:id="@+id/tv_gradient"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:background="@drawable/drawable_gradient"
    android:text="@string/draw_9_patch_content" />