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

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