Add labels and animations to the tab bar

mastodon/build.gradle

@@ -9,7 +9,7 @@ android {
 		applicationId "org.joinmastodon.android"
 		minSdk 23
 		targetSdk 33
-		versionCode 85
+		versionCode 86
 		versionName "2.3.0"
 		testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
 		resConfigs "ar-rSA", "be-rBY", "bn-rBD", "bs-rBA", "ca-rES", "cs-rCZ", "da-rDK", "de-rDE", "el-rGR", "es-rES", "eu-rES", "fa-rIR", "fi-rFI", "fil-rPH", "fr-rFR", "ga-rIE", "gd-rGB", "gl-rES", "hi-rIN", "hr-rHR", "hu-rHU", "hy-rAM", "ig-rNG", "in-rID", "is-rIS", "it-rIT", "iw-rIL", "ja-rJP", "ka-rGE", "kab", "ko-rKR", "lt-rLT", "my-rMM", "nl-rNL", "no-rNO", "oc-rFR", "pl-rPL", "pt-rBR", "pt-rPT", "ro-rRO", "ru-rRU", "si-rLK", "sl-rSI", "sv-rSE", "th-rTH", "tr-rTR", "uk-rUA", "ur-rIN", "vi-rVN", "zh-rCN", "zh-rTW"

mastodon/src/main/java/org/joinmastodon/android/ui/ViewProperties.java

@@ -0,0 +1,37 @@
+package org.joinmastodon.android.ui;
+
+import android.graphics.Typeface;
+import android.os.Build;
+import android.util.Property;
+import android.widget.TextView;
+
+import androidx.annotation.RequiresApi;
+
+public class ViewProperties{
+	public static final Property<TextView, Integer> FONT_WEIGHT=new Property<>(Integer.class, "fontWeight"){
+		@RequiresApi(api = Build.VERSION_CODES.P)
+		@Override
+		public Integer get(TextView object){
+			return object.getTypeface().getWeight();
+		}
+
+		@RequiresApi(api = Build.VERSION_CODES.P)
+		@Override
+		public void set(TextView object, Integer value){
+			// typeface objects are cached internally, I looked at AOSP sources to confirm that
+			object.setTypeface(Typeface.create(null, value, false));
+		}
+	};
+
+	public static final Property<TextView, Integer> TEXT_COLOR=new Property<>(Integer.class, "textColor"){
+		@Override
+		public Integer get(TextView object){
+			return object.getCurrentTextColor();
+		}
+
+		@Override
+		public void set(TextView object, Integer value){
+			object.setTextColor(value);
+		}
+	};
+}

mastodon/src/main/java/org/joinmastodon/android/ui/views/TabBar.java

@@ -1,20 +1,35 @@
 package org.joinmastodon.android.ui.views;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
 import android.content.Context;
+import android.graphics.Typeface;
+import android.os.Build;
 import android.util.AttributeSet;
 import android.view.View;
+import android.view.animation.AnimationUtils;
 import android.widget.LinearLayout;
+import android.widget.TextView;
 
+import org.joinmastodon.android.R;
+import org.joinmastodon.android.ui.ViewProperties;
+import org.joinmastodon.android.ui.utils.UiUtils;
+
+import java.util.ArrayList;
 import java.util.function.IntConsumer;
 import java.util.function.IntPredicate;
 
 import androidx.annotation.IdRes;
+import me.grishka.appkit.utils.CubicBezierInterpolator;
 
 public class TabBar extends LinearLayout{
 	@IdRes
 	private int selectedTabID;
 	private IntConsumer listener;
 	private IntPredicate longClickListener;
+	private Typeface mediumFont=Typeface.create("sans-serif-medium", Typeface.NORMAL), boldFont=Typeface.DEFAULT_BOLD;
 
 	public TabBar(Context context){
 		this(context, null);
@@ -32,9 +47,14 @@ public class TabBar extends LinearLayout{
 	public void onViewAdded(View child){
 		super.onViewAdded(child);
 		if(child.getId()!=0){
+			ViewHolder holder=new ViewHolder();
+			holder.label=child.findViewById(R.id.label);
+			child.setTag(holder);
 			if(selectedTabID==0){
 				selectedTabID=child.getId();
-				child.setSelected(true);
+				setTabSelected(child, true);
+			}else{
+				holder.label.setTypeface(mediumFont);
 			}
 			child.setOnClickListener(this::onChildClick);
 			child.setOnLongClickListener(this::onChildLongClick);
@@ -45,8 +65,8 @@ public class TabBar extends LinearLayout{
 		listener.accept(v.getId());
 		if(v.getId()==selectedTabID)
 			return;
-		findViewById(selectedTabID).setSelected(false);
+		setTabSelected(findViewById(selectedTabID), false);
-		v.setSelected(true);
+		setTabSelected(v, true);
 		selectedTabID=v.getId();
 	}
 
@@ -60,8 +80,40 @@ public class TabBar extends LinearLayout{
 	}
 
 	public void selectTab(int id){
-		findViewById(selectedTabID).setSelected(false);
+		setTabSelected(findViewById(selectedTabID), false);
 		selectedTabID=id;
-		findViewById(selectedTabID).setSelected(true);
+		setTabSelected(findViewById(selectedTabID), true);
+	}
+
+	private void setTabSelected(View tab, boolean selected){
+		tab.setSelected(selected);
+		ViewHolder holder=(ViewHolder) tab.getTag();
+		if(holder.currentAnim!=null)
+			holder.currentAnim.cancel();
+		ArrayList<Animator> anims=new ArrayList<>();
+		if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.P){
+			anims.add(ObjectAnimator.ofInt(holder.label, ViewProperties.FONT_WEIGHT, selected ? 700 : 500));
+		}else{
+			holder.label.setTypeface(selected ? boldFont : mediumFont);
+		}
+		anims.add(ObjectAnimator.ofArgb(holder.label, ViewProperties.TEXT_COLOR, UiUtils.getThemeColor(getContext(), selected ? R.attr.colorM3OnSurface : R.attr.colorM3OnSurfaceVariant)));
+		AnimatorSet set=new AnimatorSet();
+		set.playTogether(anims);
+		set.setDuration(400);
+//		set.setInterpolator(AnimationUtils.loadInterpolator(getContext(), R.interpolator.m3_sys_motion_easing_standard));
+		set.setInterpolator(CubicBezierInterpolator.DEFAULT);
+		holder.currentAnim=set;
+		set.addListener(new AnimatorListenerAdapter(){
+			@Override
+			public void onAnimationEnd(Animator animation){
+				holder.currentAnim=null;
+			}
+		});
+		set.start();
+	}
+
+	private static class ViewHolder{
+		public TextView label;
+		public Animator currentAnim;
 	}
 }

mastodon/src/main/res/color/tab_bar_icon.xml

@@ -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>

mastodon/src/main/res/drawable/bg_tabbar_tab.xml

@@ -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">
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-	<item android:gravity="center">
+	<item android:gravity="top|center_horizontal" android:top="12dp">
-		<selector>
+		<animated-selector>
-			<item android:state_selected="true">
+			<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"/>
 				</shape>
 			</item>
-		</selector>
+			<item android:id="@+id/unselected">
+				<shape/>
 			</item>
-	<item android:id="@android:id/mask" android:gravity="center">
+			<transition android:fromId="@+id/unselected" android:toId="@+id/selected" android:drawable="@drawable/bg_tabbar_tab_selected_anim"/>
-		<shape>
+			<transition android:fromId="@+id/selected" android:toId="@+id/unselected" android:drawable="@drawable/bg_tabbar_tab_unselected_anim"/>
-			<solid android:color="#000"/>
+		</animated-selector>
-			<size android:width="64dp" android:height="32dp"/>
-			<corners android:radius="16dp"/>
-		</shape>
 	</item>
-</ripple>
+</layer-list>

mastodon/src/main/res/drawable/bg_tabbar_tab_selected_anim.xml

@@ -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>

mastodon/src/main/res/drawable/bg_tabbar_tab_unselected_anim.xml

@@ -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>

mastodon/src/main/res/drawable/bg_tabbar_tab_vector.xml

@@ -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>

mastodon/src/main/res/drawable/ic_home_fill1_24px.xml

@@ -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>

mastodon/src/main/res/drawable/ic_notifications_fill1_24px.xml

@@ -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>

mastodon/src/main/res/drawable/ic_search_fill1_24px.xml

@@ -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>

mastodon/src/main/res/drawable/ic_tab_home.xml

@@ -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>

mastodon/src/main/res/drawable/ic_tab_notifications.xml

@@ -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>

mastodon/src/main/res/drawable/ic_tab_search.xml

@@ -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>

mastodon/src/main/res/layout/tab_bar.xml

@@ -12,8 +12,7 @@
 	<org.joinmastodon.android.ui.views.TabBar
 		android:id="@+id/tabbar"
 		android:layout_width="match_parent"
-		android:layout_height="56dp"
+		android:layout_height="80dp"
-		android:paddingLeft="8dp"
 		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_width="32dp"
-				android:layout_height="24dp"
+				android:layout_height="32dp"
-				android:layout_gravity="center"
+				android:layout_gravity="top|center_horizontal"
+				android:layout_marginTop="12dp"
 				android:scaleType="center"
 				android:importantForAccessibility="no"
-				android:tint="?colorM3OnSurfaceVariant"
+				android:tint="@color/tab_bar_icon"
-				android:src="@drawable/ic_home_24px"/>
+				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_width="32dp"
-				android:layout_height="24dp"
+				android:layout_height="32dp"
-				android:layout_gravity="center"
+				android:layout_gravity="top|center_horizontal"
+				android:layout_marginTop="12dp"
 				android:scaleType="center"
 				android:importantForAccessibility="no"
-				android:tint="?colorM3OnSurfaceVariant"
+				android:tint="@color/tab_bar_icon"
-				android:src="@drawable/ic_search_24px"/>
+				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_width="32dp"
-				android:layout_height="24dp"
+				android:layout_height="32dp"
-				android:layout_gravity="center"
+				android:layout_gravity="top|center_horizontal"
+				android:layout_marginTop="12dp"
 				android:scaleType="center"
 				android:importantForAccessibility="no"
-				android:tint="?colorM3OnSurfaceVariant"
+				android:tint="@color/tab_bar_icon"
-				android:src="@drawable/ic_notifications_24px"/>
+				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_gravity="top|center_horizontal"
-				android:layout_marginTop="-6dp"
+				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_height="32dp"
-				android:layout_gravity="center"
+				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>
 

mastodon/src/main/res/values/strings.xml

@@ -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>