Skip to content

Commit 249714b

Browse files
add BottomNavigation menu animated icons
1 parent 30f8464 commit 249714b

31 files changed

+1037
-8
lines changed

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ fragment transitions and image to ViewPager transitions and more.
2727

2828
| Ch1-1 Animated VDs | Ch1-2 State Change | Ch1-3 BNV Icons |
2929
| ----------|----------------| --------|
30-
| <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_1.gif"/> |
30+
| <img src="./screenshots/avd_chapter1_1.gif"/> | <img src="./screenshots/avd_chapter1_2.gif"/> | <img src="./screenshots/avd_chapter1_3.gif"/> |
3131

3232

3333
## Physics Based Animations

Tutorial2-1AnimatedVectorDrawables/src/main/AndroidManifest.xml

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
</activity>
1919
<activity android:name=".Activity1_1Basics" />
2020
<activity android:name=".Activity1_2StateChange" />
21+
<activity android:name=".Activity1_3BottomNavIcons" />
2122
</application>
2223

2324
</manifest>

Tutorial2-1AnimatedVectorDrawables/src/main/java/com/smarttoolfactory/tutorial2_1animatedvectordrawables/Activity1_1Basics.kt

+3-3
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ class Activity1_1Basics : AppCompatActivity() {
9494
add(AVDModel(R.drawable.avd_no_connection))
9595
add(AVDModel(R.drawable.avd_add_to_comment))
9696
add(AVDModel(R.drawable.avd_comment_to_add))
97-
add(AVDModel(R.drawable.avd_profile))
98-
add(AVDModel(R.drawable.avd_notifications_ring))
97+
add(AVDModel(R.drawable.avd_account2))
98+
add(AVDModel(R.drawable.avd_notification_ring))
9999
add(AVDModel(R.drawable.avd_settings))
100100

101101
add(HeaderModel("Seekable Vector Drawable"))
@@ -109,7 +109,7 @@ class Activity1_1Basics : AppCompatActivity() {
109109
add(AVDModel(R.drawable.avd_clock_stopwatch))
110110

111111
add(HeaderModel("Path Morph"))
112-
add(AVDModel(R.drawable.avd_house))
112+
add(AVDModel(R.drawable.avd_home))
113113
add(AVDModel(R.drawable.avd_pathmorph_arrowoverflow_arrow_to_overflow))
114114
add(AVDModel(R.drawable.avd_pathmorph_arrowoverflow_overflow_to_arrow))
115115
add(AVDModel(R.drawable.avd_pathmorph_crosstick_cross_to_tick))
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
package com.smarttoolfactory.tutorial2_1animatedvectordrawables
2+
3+
import android.os.Bundle
4+
import androidx.appcompat.app.AppCompatActivity
5+
6+
class Activity1_3BottomNavIcons : AppCompatActivity() {
7+
8+
override fun onCreate(savedInstanceState: Bundle?) {
9+
super.onCreate(savedInstanceState)
10+
setContentView(R.layout.activity1_3bnv_icons)
11+
title = getString(R.string.activity1_3)
12+
}
13+
}

Tutorial2-1AnimatedVectorDrawables/src/main/java/com/smarttoolfactory/tutorial2_1animatedvectordrawables/MainActivity.kt

+7
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@ class MainActivity : AppCompatActivity(), BaseAdapter.OnRecyclerViewItemClickLis
6868
getString(R.string.activity1_2)
6969
)
7070
)
71+
72+
activityClassModels.add(
73+
ActivityClassModel(
74+
Activity1_3BottomNavIcons::class.java,
75+
getString(R.string.activity1_3)
76+
)
77+
)
7178
}
7279

7380
@Override
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
3+
4+
<item
5+
android:id="@+id/checked"
6+
android:drawable="@drawable/vd_account_active"
7+
android:state_checked="true" />
8+
9+
<item
10+
android:id="@+id/unchecked"
11+
android:drawable="@drawable/vd_account_outlined"
12+
android:state_checked="false" />
13+
14+
<transition
15+
android:drawable="@drawable/avd_account"
16+
android:fromId="@id/unchecked"
17+
android:toId="@id/checked" />
18+
</animated-selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
3+
4+
<item
5+
android:id="@+id/checked"
6+
android:drawable="@drawable/vd_dashboard_active"
7+
android:state_checked="true" />
8+
9+
<item
10+
android:id="@+id/unchecked"
11+
android:drawable="@drawable/vd_dashboard_outlined" />
12+
13+
<transition
14+
android:drawable="@drawable/avd_dashboard"
15+
android:fromId="@id/unchecked"
16+
android:toId="@id/checked" />
17+
</animated-selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
3+
4+
<item
5+
android:id="@+id/checked"
6+
android:drawable="@drawable/vd_home_active"
7+
android:state_checked="true" />
8+
9+
<item
10+
android:id="@+id/unchecked"
11+
android:drawable="@drawable/vd_home_outlined" />
12+
13+
<transition
14+
android:drawable="@drawable/avd_home"
15+
android:fromId="@id/unchecked"
16+
android:toId="@id/checked" />
17+
</animated-selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
3+
4+
<item
5+
android:id="@+id/checked"
6+
android:drawable="@drawable/vd_notification_active"
7+
android:state_checked="true" />
8+
9+
<item
10+
android:id="@+id/unchecked"
11+
android:drawable="@drawable/vd_notification_outlined"
12+
android:state_checked="false"/>
13+
14+
<transition
15+
android:drawable="@drawable/avd_notification"
16+
android:fromId="@id/unchecked"
17+
android:toId="@id/checked" />
18+
</animated-selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:aapt="http://schemas.android.com/aapt">
3+
4+
<aapt:attr name="android:drawable">
5+
<vector
6+
android:width="24dp"
7+
android:height="24dp"
8+
android:viewportWidth="24"
9+
android:viewportHeight="24">
10+
11+
<path
12+
android:name="body"
13+
android:fillColor="#555"
14+
android:pathData="M 12 14 C 9.33 14 4 15.34 4 18 L 4 20 L 20 20 L 20 18 C 20 15.34 14.67 14 12 14 Z" />
15+
<group
16+
android:name="head_group"
17+
android:pivotX="12"
18+
android:pivotY="20"
19+
android:rotation="2">
20+
<path
21+
android:fillColor="#555"
22+
android:pathData="M 12 12 C 14.21 12 16 10.21 16 8 C 16 5.79 14.21 4 12 4 C 9.79 4 8 5.79 8 8 C 8 10.21 9.79 12 12 12 Z" />
23+
</group>
24+
</vector>
25+
</aapt:attr>
26+
27+
<target android:name="head_group">
28+
<aapt:attr name="android:animation">
29+
<set android:interpolator="@android:interpolator/fast_out_slow_in">
30+
<objectAnimator
31+
android:duration="150"
32+
android:propertyName="translateX"
33+
android:valueFrom="0"
34+
android:valueTo="2" />
35+
<objectAnimator
36+
android:duration="100"
37+
android:propertyName="translateY"
38+
android:valueFrom="0"
39+
android:valueTo="-1" />
40+
<objectAnimator
41+
android:duration="150"
42+
android:propertyName="translateX"
43+
android:startOffset="800"
44+
android:valueFrom="2"
45+
android:valueTo="-2" />
46+
<objectAnimator
47+
android:duration="150"
48+
android:propertyName="translateX"
49+
android:startOffset="1800"
50+
android:valueFrom="-2"
51+
android:valueTo="0" />
52+
<objectAnimator
53+
android:duration="100"
54+
android:propertyName="translateY"
55+
android:startOffset="1800"
56+
android:valueFrom="-1"
57+
android:valueTo="0" />
58+
</set>
59+
</aapt:attr>
60+
</target>
61+
62+
</animated-vector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<animated-vector
3+
xmlns:android="http://schemas.android.com/apk/res/android"
4+
xmlns:aapt="http://schemas.android.com/aapt">
5+
6+
<aapt:attr name="android:drawable">
7+
<vector
8+
android:width="24dp"
9+
android:height="24dp"
10+
android:viewportWidth="24"
11+
android:viewportHeight="24">
12+
<group
13+
android:name="heart"
14+
android:pivotX="12"
15+
android:pivotY="12">
16+
<path
17+
android:pathData="M12,21 L10.695,19.853406 C6.06,15.7771117 3,13.0871935 3,9.79564033 C3,7.10572207 5.1735,5 7.95,5 C9.516,5 11.019,5.70626703 12,6.81798365 C12.981,5.70626703 14.484,5 16.05,5 C18.8265,5 21,7.10572207 21,9.79564033 C21,13.0871935 17.94,15.7771117 13.305,19.853406 L12,21 L12,21 Z"
18+
android:fillColor="#555" />
19+
</group>
20+
</vector>
21+
</aapt:attr>
22+
23+
<target android:name="heart">
24+
<aapt:attr name="android:animation">
25+
<set android:interpolator="@android:interpolator/accelerate_quad">
26+
<!-- beat 1 -->
27+
<objectAnimator
28+
android:propertyName="scaleX"
29+
android:valueFrom="1"
30+
android:valueTo="1.2"
31+
android:duration="100" />
32+
<objectAnimator
33+
android:propertyName="scaleY"
34+
android:valueFrom="1"
35+
android:valueTo="1.2"
36+
android:duration="100" />
37+
<objectAnimator
38+
android:propertyName="scaleX"
39+
android:valueFrom="1.2"
40+
android:valueTo="1"
41+
android:startOffset="100"
42+
android:duration="150" />
43+
<objectAnimator
44+
android:propertyName="scaleY"
45+
android:valueFrom="1.2"
46+
android:valueTo="1"
47+
android:startOffset="100"
48+
android:duration="150" />
49+
<!-- beat 2 -->
50+
<objectAnimator
51+
android:propertyName="scaleX"
52+
android:valueFrom="1"
53+
android:valueTo="1.2"
54+
android:startOffset="500"
55+
android:duration="100" />
56+
<objectAnimator
57+
android:propertyName="scaleY"
58+
android:valueFrom="1"
59+
android:valueTo="1.2"
60+
android:startOffset="500"
61+
android:duration="100" />
62+
<objectAnimator
63+
android:propertyName="scaleX"
64+
android:valueFrom="1.2"
65+
android:valueTo="1"
66+
android:startOffset="600"
67+
android:duration="150" />
68+
<objectAnimator
69+
android:propertyName="scaleY"
70+
android:valueFrom="1.2"
71+
android:valueTo="1"
72+
android:startOffset="600"
73+
android:duration="150" />
74+
<!-- beat 3 -->
75+
<objectAnimator
76+
android:propertyName="scaleX"
77+
android:valueFrom="1"
78+
android:valueTo="1.2"
79+
android:startOffset="850"
80+
android:duration="100" />
81+
<objectAnimator
82+
android:propertyName="scaleY"
83+
android:valueFrom="1"
84+
android:valueTo="1.2"
85+
android:startOffset="850"
86+
android:duration="100" />
87+
<objectAnimator
88+
android:propertyName="scaleX"
89+
android:valueFrom="1.2"
90+
android:valueTo="1"
91+
android:startOffset="950"
92+
android:duration="150" />
93+
<objectAnimator
94+
android:propertyName="scaleY"
95+
android:valueFrom="1.2"
96+
android:valueTo="1"
97+
android:startOffset="950"
98+
android:duration="150" />
99+
100+
101+
</set>
102+
</aapt:attr>
103+
</target>
104+
105+
</animated-vector>

0 commit comments

Comments
 (0)