Add labels and animations to the tab bar

This commit is contained in:
Grishka
2024-02-24 23:03:18 +03:00
parent b3e53bc48d
commit 1e501c707c
16 changed files with 293 additions and 49 deletions

View File

@@ -1,21 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/m3_on_surface_variant_overlay">
<item android:gravity="center">
<selector>
<item android:state_selected="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="top|center_horizontal" android:top="12dp">
<animated-selector>
<item android:id="@+id/selected" android:state_selected="true">
<shape>
<solid android:color="?colorM3SecondaryContainer"/>
<size android:width="64dp" android:height="32dp"/>
<corners android:radius="16dp"/>
<solid android:color="?colorM3SecondaryContainer"/>
<size android:width="64dp" android:height="32dp"/>
<corners android:radius="16dp"/>
</shape>
</item>
</selector>
<item android:id="@+id/unselected">
<shape/>
</item>
<transition android:fromId="@+id/unselected" android:toId="@+id/selected" android:drawable="@drawable/bg_tabbar_tab_selected_anim"/>
<transition android:fromId="@+id/selected" android:toId="@+id/unselected" android:drawable="@drawable/bg_tabbar_tab_unselected_anim"/>
</animated-selector>
</item>
<item android:id="@android:id/mask" android:gravity="center">
<shape>
<solid android:color="#000"/>
<size android:width="64dp" android:height="32dp"/>
<corners android:radius="16dp"/>
</shape>
</item>
</ripple>
</layer-list>

View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/bg_tabbar_tab_vector">
<target
android:name="shape">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="500"
android:interpolator="@interpolator/m3_sys_motion_easing_standard"
android:propertyName="pathData"
android:valueFrom="M32 0A16 16 0 0 0 16 16A16 16 0 0 0 32 32h0A16 16 0 0 0 48 16A16 16 0 0 0 32 0Z"
android:valueTo="M16 0A16 16 0 0 0 0 16A16 16 0 0 0 16 32h32A16 16 0 0 0 64 16A16 16 0 0 0 48 0Z"
android:valueType="pathType"/>
<objectAnimator
android:duration="250"
android:interpolator="@interpolator/m3_sys_motion_easing_standard"
android:propertyName="fillAlpha"
android:valueFrom="0.0"
android:valueTo="1.0"
android:valueType="floatType"/>
</set>
</aapt:attr>
</target>
</animated-vector>

View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/bg_tabbar_tab_vector">
<target
android:name="shape">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="500"
android:interpolator="@interpolator/m3_sys_motion_easing_standard"
android:propertyName="fillAlpha"
android:valueFrom="1.0"
android:valueTo="0.0"
android:valueType="floatType"/>
</aapt:attr>
</target>
</animated-vector>

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="64" android:viewportHeight="32" android:width="64dp" android:height="32dp">
<path
android:name="shape"
android:fillColor="?colorM3SecondaryContainer"
android:pathData="M16 0A16 16 0 0 0 0 16A16 16 0 0 0 16 32h32A16 16 0 0 0 64 16A16 16 0 0 0 48 0Z"/>
</vector>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M4,21V9L12,3L20,9V21H14V14H10V21Z"/>
</vector>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M4,19V17H6V10Q6,7.925 7.25,6.312Q8.5,4.7 10.5,4.2V3.5Q10.5,2.875 10.938,2.438Q11.375,2 12,2Q12.625,2 13.062,2.438Q13.5,2.875 13.5,3.5V4.2Q15.5,4.7 16.75,6.312Q18,7.925 18,10V17H20V19ZM12,22Q11.175,22 10.588,21.413Q10,20.825 10,20H14Q14,20.825 13.413,21.413Q12.825,22 12,22Z"/>
</vector>

View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M19.6,21 L13.3,14.7Q12.55,15.3 11.575,15.65Q10.6,16 9.5,16Q6.775,16 4.888,14.113Q3,12.225 3,9.5Q3,6.775 4.888,4.887Q6.775,3 9.5,3Q12.225,3 14.113,4.887Q16,6.775 16,9.5Q16,10.6 15.65,11.575Q15.3,12.55 14.7,13.3L21,19.6ZM9.5,14Q11.375,14 12.688,12.688Q14,11.375 14,9.5Q14,7.625 12.688,6.312Q11.375,5 9.5,5Q7.625,5 6.312,6.312Q5,7.625 5,9.5Q5,11.375 6.312,12.688Q7.625,14 9.5,14Z"/>
</vector>

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_home_fill1_24px" android:state_selected="true"/>
<item android:drawable="@drawable/ic_home_24px"/>
</selector>

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_notifications_fill1_24px" android:state_selected="true"/>
<item android:drawable="@drawable/ic_notifications_24px"/>
</selector>

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_search_fill1_24px" android:state_selected="true"/>
<item android:drawable="@drawable/ic_search_24px"/>
</selector>