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

Tab bar M3 design

This commit is contained in:
Grishka 2023-03-23 01:49:39 +03:00
parent 8afad21113
commit 30b0d226b5
8 changed files with 134 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
mastodon/src/main/java/org/joinmastodon/android/fragments/HomeFragment.java
View File

@ -23,6 +23,7 @@ import org.joinmastodon.android.fragments.discover.DiscoverFragment;
import org.joinmastodon.android.fragments.onboarding.OnboardingFollowSuggestionsFragment; import org.joinmastodon.android.fragments.onboarding.OnboardingFollowSuggestionsFragment;
import org.joinmastodon.android.model.Account; import org.joinmastodon.android.model.Account;
import org.joinmastodon.android.ui.AccountSwitcherSheet; import org.joinmastodon.android.ui.AccountSwitcherSheet;
import org.joinmastodon.android.ui.OutlineProviders;
import org.joinmastodon.android.ui.utils.UiUtils; import org.joinmastodon.android.ui.utils.UiUtils;
import org.joinmastodon.android.ui.views.TabBar; import org.joinmastodon.android.ui.views.TabBar;
import org.parceler.Parcels; import org.parceler.Parcels;
@ -100,15 +101,10 @@ public class HomeFragment extends AppKitFragment implements OnBackPressedListene
tabBarWrap=content.findViewById(R.id.tabbar_wrap); tabBarWrap=content.findViewById(R.id.tabbar_wrap);
tabBarAvatar=tabBar.findViewById(R.id.tab_profile_ava); tabBarAvatar=tabBar.findViewById(R.id.tab_profile_ava);
tabBarAvatar.setOutlineProvider(new ViewOutlineProvider(){ tabBarAvatar.setOutlineProvider(OutlineProviders.OVAL);
@Override
public void getOutline(View view, Outline outline){
outline.setOval(0, 0, view.getWidth(), view.getHeight());
}
});
tabBarAvatar.setClipToOutline(true); tabBarAvatar.setClipToOutline(true);
Account self=AccountSessionManager.getInstance().getAccount(accountID).self; Account self=AccountSessionManager.getInstance().getAccount(accountID).self;
ViewImageLoader.load(tabBarAvatar, null, new UrlImageLoaderRequest(self.avatar, V.dp(28), V.dp(28))); ViewImageLoader.loadWithoutAnimation(tabBarAvatar, null, new UrlImageLoaderRequest(self.avatar, V.dp(24), V.dp(24)));
if(savedInstanceState==null){ if(savedInstanceState==null){
getChildFragmentManager().beginTransaction() getChildFragmentManager().beginTransaction()
@ -176,7 +172,7 @@ public class HomeFragment extends AppKitFragment implements OnBackPressedListene
public void onApplyWindowInsets(WindowInsets insets){ public void onApplyWindowInsets(WindowInsets insets){
if(Build.VERSION.SDK_INT>=27){ if(Build.VERSION.SDK_INT>=27){
int inset=insets.getSystemWindowInsetBottom(); int inset=insets.getSystemWindowInsetBottom();
tabBarWrap.setPadding(0, 0, 0, inset>0 ? Math.max(inset, V.dp(36)) : 0); tabBarWrap.setPadding(0, 0, 0, inset>0 ? Math.max(inset, V.dp(24)) : 0);
super.onApplyWindowInsets(insets.replaceSystemWindowInsets(insets.getSystemWindowInsetLeft(), 0, insets.getSystemWindowInsetRight(), 0)); super.onApplyWindowInsets(insets.replaceSystemWindowInsets(insets.getSystemWindowInsetLeft(), 0, insets.getSystemWindowInsetRight(), 0));
}else{ }else{
super.onApplyWindowInsets(insets.replaceSystemWindowInsets(insets.getSystemWindowInsetLeft(), 0, insets.getSystemWindowInsetRight(), insets.getSystemWindowInsetBottom())); super.onApplyWindowInsets(insets.replaceSystemWindowInsets(insets.getSystemWindowInsetLeft(), 0, insets.getSystemWindowInsetRight(), insets.getSystemWindowInsetBottom()));

4
mastodon/src/main/res/color/m3_on_surface_overlay.xml Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?colorM3OnSurface" android:alpha="0.12"/>
</selector>

11
mastodon/src/main/res/drawable/bg_tabbar.xml Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="?colorM3Surface"/>
</item>
<item>
<shape android:tint="?colorM3Primary">
<solid android:color="#14000000"/>
</shape>
</item>
</layer-list>

21
mastodon/src/main/res/drawable/bg_tabbar_tab.xml Normal file
View File

@ -0,0 +1,21 @@
<?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">
<shape>
<solid android:color="?colorM3SecondaryContainer"/>
<size android:width="64dp" android:height="32dp"/>
<corners android:radius="16dp"/>
</shape>
</item>
</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>

9
mastodon/src/main/res/drawable/ic_home_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,9V21H14V14H10V21ZM6,19H8V12H16V19H18V10L12,5.5L6,10ZM12,12.25Z"/>
</vector>

9
mastodon/src/main/res/drawable/ic_notifications_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,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5Q12,11.5 12,11.5ZM12,22Q11.175,22 10.588,21.413Q10,20.825 10,20H14Q14,20.825 13.413,21.413Q12.825,22 12,22ZM8,17H16V10Q16,8.35 14.825,7.175Q13.65,6 12,6Q10.35,6 9.175,7.175Q8,8.35 8,10Z"/>
</vector>

9
mastodon/src/main/res/drawable/ic_search_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>

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

@ -1,9 +1,10 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tabbar_wrap" android:id="@+id/tabbar_wrap"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:background="?android:statusBarColor" android:background="@drawable/bg_tabbar"
android:elevation="3dp" android:elevation="3dp"
android:outlineProvider="bounds" android:outlineProvider="bounds"
android:clipChildren="false"> android:clipChildren="false">
@ -11,73 +12,90 @@
<org.joinmastodon.android.ui.views.TabBar <org.joinmastodon.android.ui.views.TabBar
android:id="@+id/tabbar" android:id="@+id/tabbar"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="52dp" android:layout_height="56dp"
android:paddingLeft="16dp" android:paddingLeft="8dp"
android:paddingRight="16dp"> tools:ignore="RtlHardcoded,RtlSymmetry">
<ImageView
<FrameLayout
android:id="@+id/tab_home" android:id="@+id/tab_home"
android:layout_width="60dp" android:layout_width="0dp"
android:layout_height="52dp" android:layout_height="match_parent"
android:scaleType="center" android:layout_weight="1"
android:contentDescription="@string/home_timeline" android:layout_marginRight="8dp"
android:background="?android:selectableItemBackgroundBorderless" android:background="@drawable/bg_tabbar_tab"
android:tint="?android:colorPrimary" android:contentDescription="@string/home_timeline">
android:src="@drawable/ic_fluent_home_28_selector"/>
<Space <ImageView
android:layout_width="0px" android:layout_width="24dp"
android:layout_height="1px" android:layout_height="24dp"
android:layout_weight="1"/> android:layout_gravity="center"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_home_24px"/>
<ImageView </FrameLayout>
<FrameLayout
android:id="@+id/tab_search" android:id="@+id/tab_search"
android:layout_width="60dp" android:layout_width="0dp"
android:layout_height="52dp" android:layout_height="match_parent"
android:scaleType="center" android:layout_weight="1"
android:contentDescription="@string/search_hint" android:layout_marginRight="8dp"
android:background="?android:selectableItemBackgroundBorderless" android:background="@drawable/bg_tabbar_tab"
android:tint="?android:colorPrimary" android:contentDescription="@string/search_hint">
android:src="@drawable/ic_fluent_search_28_selector"/>
<Space <ImageView
android:layout_width="0px" android:layout_width="24dp"
android:layout_height="1px" android:layout_height="24dp"
android:layout_weight="1"/> android:layout_gravity="center"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_search_24px"/>
<ImageView </FrameLayout>
<FrameLayout
android:id="@+id/tab_notifications" android:id="@+id/tab_notifications"
android:layout_width="60dp" android:layout_width="0dp"
android:layout_height="52dp" android:layout_height="match_parent"
android:scaleType="center" android:layout_weight="1"
android:contentDescription="@string/notifications" android:layout_marginRight="8dp"
android:background="?android:selectableItemBackgroundBorderless" android:background="@drawable/bg_tabbar_tab"
android:tint="?android:colorPrimary" android:contentDescription="@string/notifications">
android:src="@drawable/ic_fluent_alert_28_selector"/>
<Space <ImageView
android:layout_width="0px" android:layout_width="24dp"
android:layout_height="1px" android:layout_height="24dp"
android:layout_weight="1"/> android:layout_gravity="center"
android:scaleType="center"
android:importantForAccessibility="no"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_notifications_24px"/>
</FrameLayout>
<FrameLayout <FrameLayout
android:id="@+id/tab_profile" android:id="@+id/tab_profile"
android:layout_width="60dp" android:layout_width="0dp"
android:layout_height="52dp" android:layout_height="match_parent"
android:contentDescription="@string/my_profile" android:layout_weight="1"
android:foreground="@drawable/bg_tab_profile" android:layout_marginRight="8dp"
android:background="?android:selectableItemBackgroundBorderless"> android:background="@drawable/bg_tabbar_tab"
android:contentDescription="@string/my_profile">
<ImageView <ImageView
android:id="@+id/tab_profile_ava" android:id="@+id/tab_profile_ava"
android:layout_width="28dp" android:layout_width="24dp"
android:layout_height="28dp" android:layout_height="24dp"
android:layout_gravity="center" android:layout_gravity="center"
android:scaleType="centerCrop" android:scaleType="centerCrop"
android:src="@null"/> android:src="@null"/>
<View <View
android:layout_width="16dp" android:layout_width="16dp"
android:layout_height="16dp" android:layout_height="16dp"
android:layout_gravity="end|center_vertical" android:layout_gravity="center"
android:layout_marginEnd="-4dp" android:layout_marginEnd="-20dp"
android:backgroundTint="?android:colorPrimary" android:backgroundTint="?android:colorPrimary"
android:background="@drawable/ic_fluent_chevron_up_down_16_regular"/> android:background="@drawable/ic_fluent_chevron_up_down_16_regular"/>
</FrameLayout> </FrameLayout>