Mastodon
/
mastodon-app-ufficiale-android
mirror of https://github.com/mastodon/mastodon-android.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

2
mastodon/build.gradle
View File

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

37
mastodon/src/main/java/org/joinmastodon/android/ui/ViewProperties.java Normal file
View File

@ -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);
}
};
}

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

@ -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);
v.setSelected(true);
setTabSelected(findViewById(selectedTabID), false);
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;
}
}

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>