owen/moshidon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add labels and animations to the tab bar

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
mastodon/src/main/res/color/tab_bar_icon.xml Normal file
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:color="?colorM3OnSecondaryContainer" android:state_selected="true"/>
<item android:color="?colorM3OnSurfaceVariant"/>
</selector>

30
mastodon/src/main/res/drawable/bg_tabbar_tab.xml
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>

26
mastodon/src/main/res/drawable/bg_tabbar_tab_selected_anim.xml Normal file
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>

17
mastodon/src/main/res/drawable/bg_tabbar_tab_unselected_anim.xml Normal file
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>

7
mastodon/src/main/res/drawable/bg_tabbar_tab_vector.xml Normal file
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>

9
mastodon/src/main/res/drawable/ic_home_fill1_24px.xml Normal file
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>

9
mastodon/src/main/res/drawable/ic_notifications_fill1_24px.xml Normal file
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>

9
mastodon/src/main/res/drawable/ic_search_fill1_24px.xml Normal file
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>

5
mastodon/src/main/res/drawable/ic_tab_home.xml Normal file
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>

5
mastodon/src/main/res/drawable/ic_tab_notifications.xml Normal file
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>

5
mastodon/src/main/res/drawable/ic_tab_search.xml Normal file
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>

111
mastodon/src/main/res/layout/tab_bar.xml
View File

@@ -12,8 +12,7 @@
<org.joinmastodon.android.ui.views.TabBar
android:id="@+id/tabbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingLeft="8dp"
android:layout_height="80dp"
tools:ignore="RtlHardcoded,RtlSymmetry">
<FrameLayout
@@ -21,18 +20,32 @@
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="8dp"
android:background="@drawable/bg_tabbar_tab"
android:paddingHorizontal="4dp"
android:contentDescription="@string/home_timeline">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="12dp"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_home_24px"/>
android:tint="@color/tab_bar_icon"
android:src="@drawable/ic_tab_home"/>
<TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="bottom"
android:gravity="center"
android:textSize="12dp"
android:textColor="?colorM3OnSurface"
android:singleLine="true"
android:ellipsize="end"
android:text="@string/tab_home"/>
</FrameLayout>
@@ -41,18 +54,32 @@
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="8dp"
android:background="@drawable/bg_tabbar_tab"
android:paddingHorizontal="4dp"
android:contentDescription="@string/search_hint">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="12dp"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_search_24px"/>
android:tint="@color/tab_bar_icon"
android:src="@drawable/ic_tab_search"/>
<TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="bottom"
android:gravity="center"
android:textSize="12dp"
android:textColor="?colorM3OnSurface"
android:singleLine="true"
android:ellipsize="end"
android:text="@string/tab_search"/>
</FrameLayout>
@@ -61,25 +88,26 @@
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="8dp"
android:background="@drawable/bg_tabbar_tab"
android:paddingHorizontal="4dp"
android:contentDescription="@string/notifications">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="12dp"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_notifications_24px"/>
android:tint="@color/tab_bar_icon"
android:src="@drawable/ic_tab_notifications"/>
<TextView
android:id="@+id/notifications_badge"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_gravity="center"
android:layout_marginTop="-6dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="12dp"
android:layout_marginEnd="-8dp"
android:background="@drawable/bg_tabbar_badge"
android:textColor="?colorM3OnPrimary"
@@ -90,6 +118,19 @@
android:paddingHorizontal="4dp"
tools:text="222"/>
<TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="bottom"
android:gravity="center"
android:textSize="12dp"
android:textColor="?colorM3OnSurface"
android:singleLine="true"
android:ellipsize="end"
android:text="@string/notifications"/>
</FrameLayout>
<FrameLayout
@@ -97,25 +138,41 @@
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="8dp"
android:background="@drawable/bg_tabbar_tab"
android:paddingHorizontal="4dp"
android:contentDescription="@string/my_profile">
<ImageView
android:id="@+id/tab_profile_ava"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:layout_gravity="top|center_horizontal"
android:scaleType="centerCrop"
android:importantForAccessibility="no"
android:src="@null"/>
<ImageView
android:layout_width="8dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_height="32dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="12dp"
android:layout_marginStart="24dp"
android:importantForAccessibility="no"
android:scaleType="center"
android:tint="?colorM3OnSurfaceVariant"
android:tint="@color/tab_bar_icon"
android:src="@drawable/ic_unfold_more_24px"/>
<TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="bottom"
android:gravity="center"
android:textSize="12dp"
android:textColor="?colorM3OnSurface"
android:singleLine="true"
android:ellipsize="end"
android:text="@string/tab_profile"/>
</FrameLayout>
</org.joinmastodon.android.ui.views.TabBar>

3
mastodon/src/main/res/values/strings.xml
View File

@@ -713,4 +713,7 @@
<string name="in_app_browser">In-app browser</string>
<string name="system_browser">System browser</string>
<string name="add_muted_word_short">Add word</string>
<string name="tab_home">Home</string>
<string name="tab_search">Explore</string>
<string name="tab_profile">Profile</string>
</resources>