M3 redesign: search/discover

This commit is contained in:
Grishka
2023-06-24 22:56:55 +03:00
parent c9e467ac2f
commit e1db5f15ca
40 changed files with 1300 additions and 774 deletions

View File

@@ -5,30 +5,27 @@
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:elevation="1dp"
android:outlineProvider="background"
android:background="?colorWindowBackground">
android:layout_margin="16dp"
android:padding="16dp"
android:background="@drawable/rect_12dp"
android:backgroundTint="?colorM3SurfaceVariant">
<ImageView
android:id="@+id/icon"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="16dp"
android:tint="?colorM3OnPrimaryContainer"
android:scaleType="center"
android:importantForAccessibility="no"
tools:src="@drawable/ic_whatshot_24px"/>
<TextView
android:id="@+id/banner_text"
android:layout_width="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:textAppearance="@style/m3_body_large"
android:textAppearance="@style/m3_body_medium"
android:textColor="?colorM3OnSurface"
tools:text="@string/trending_posts_info_banner"/>
<ImageButton
android:id="@+id/banner_dismiss"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:src="@drawable/ic_fluent_dismiss_circle_24_filled"
android:tint="?android:textColorSecondary"
android:contentDescription="@string/dismiss"
android:background="?android:selectableItemBackgroundBorderless"/>
</LinearLayout>

View File

@@ -9,106 +9,74 @@
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp"
android:background="?android:statusBarColor">
<!-- https://github.com/mastodon/mastodon-android/issues/95 -->
<View
android:layout_width="1px"
android:layout_height="1px"
android:focusable="true"
android:focusableInTouchMode="true"/>
<FrameLayout
android:background="?colorM3Surface">
<LinearLayout
android:id="@+id/search_wrap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_search_field"
android:outlineProvider="background"
android:clipToOutline="true">
<EditText
android:id="@+id/search_edit"
android:layout_width="match_parent"
android:layout_height="40dp"
android:hint="@string/search_hint"
android:textColorHint="?colorSearchHint"
android:textColor="?android:textColorPrimary"
android:textSize="16dp"
android:singleLine="true"
android:inputType="textFilter"
android:imeOptions="actionSearch"
android:paddingLeft="48dp"
android:paddingRight="48dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:background="@null"
android:elevation="0dp"/>
android:layout_height="56dp"
android:layout_margin="16dp"
android:orientation="horizontal"
android:background="@drawable/bg_m3_surface3">
<ImageButton
android:id="@+id/search_back"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="start"
android:layout_marginStart="4dp"
android:background="?android:selectableItemBackgroundBorderless"
android:tint="?colorSearchHint"
android:elevation="1dp"
android:layout_margin="8dp"
android:contentDescription="@string/back"
android:src="@drawable/ic_fluent_search_24_regular"/>
android:background="@drawable/bg_round_ripple"
android:tint="?colorM3OnSurfaceVariant"
android:src="@drawable/ic_search_24px"/>
<ImageButton
android:id="@+id/search_clear"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="end"
android:layout_marginEnd="4dp"
android:background="?android:selectableItemBackgroundBorderless"
android:tint="?colorSearchHint"
android:elevation="1dp"
android:visibility="invisible"
android:contentDescription="@string/clear"
android:src="@drawable/ic_fluent_dismiss_24_regular"/>
<ProgressBar
android:id="@+id/search_progress"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="end|center_vertical"
android:layout_marginEnd="14dp"
android:indeterminateTint="?colorSearchHint"
style="?android:progressBarStyleSmall"
android:visibility="invisible"/>
</FrameLayout>
<TextView
android:id="@+id/search_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:singleLine="true"
android:textColor="?colorM3OnSurfaceVariant"
android:textAppearance="@style/m3_body_large"
android:text="@string/search_mastodon"/>
</LinearLayout>
</FrameLayout>
<org.joinmastodon.android.ui.tabs.TabLayout
android:id="@+id/tabbar"
<LinearLayout
android:id="@+id/discover_content"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabGravity="start"
app:tabMinWidth="120dp"
app:tabIndicator="@drawable/mtrl_tabs_default_indicator"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="?android:textColorPrimary"
app:tabMode="scrollable"
android:background="@drawable/bg_discover_tabs"/>
android:layout_height="match_parent"
android:orientation="vertical">
<org.joinmastodon.android.ui.tabs.TabLayout
android:id="@+id/tabbar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabGravity="start"
app:tabIndicator="@drawable/tab_indicator_m3"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="?colorM3Primary"
app:tabIndicatorFullWidth="false"
app:tabMinWidth="90dp"
app:tabMode="scrollable"
android:background="?colorM3Surface"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:id="@+id/tabs_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?colorM3SurfaceVariant"/>
<FrameLayout
android:id="@+id/search_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout
android:id="@+id/search_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone"/>
</LinearLayout>
</me.grishka.appkit.views.FragmentRootLinearLayout>

View File

@@ -8,18 +8,6 @@
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="?android:windowBackground">
<org.joinmastodon.android.ui.tabs.TabLayout
android:id="@+id/tabbar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabGravity="start"
app:tabMinWidth="120dp"
app:tabIndicator="@drawable/mtrl_tabs_default_indicator"
app:tabIndicatorAnimationMode="elastic"
app:tabIndicatorColor="?android:textColorPrimary"
app:tabMode="scrollable"
android:background="@drawable/bg_discover_tabs"/>
<FrameLayout
android:id="@+id/appkit_loader_content"
android:layout_width="match_parent"

View File

@@ -3,28 +3,31 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:paddingEnd="24dp">
<ImageView
android:id="@+id/photo"
android:layout_width="132dp"
android:layout_height="wrap_content"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignBottom="@id/subtitle"
android:layout_marginStart="8dp"
android:layout_alignParentStart="true"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
android:importantForAccessibility="no"
tools:src="#0f0"/>
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="@id/photo"
android:textAppearance="@style/m3_title_small"
android:textColor="?android:textColorPrimary"
android:layout_height="16dp"
android:layout_toEndOf="@id/photo"
android:textAppearance="@style/m3_label_medium"
android:textColor="?colorM3OnSurfaceVariant"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center_vertical"
tools:text="Site Name"/>
<TextView
@@ -32,24 +35,12 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_toStartOf="@id/photo"
android:layout_marginTop="4dp"
android:layout_marginBottom="32dp"
android:textAppearance="@style/m3_title_medium"
android:maxLines="5"
android:layout_toEndOf="@id/photo"
android:textAppearance="@style/m3_body_large"
android:textColor="?colorM3OnSurface"
android:paddingVertical="2.5dp"
android:maxLines="2"
android:ellipsize="end"
tools:text="Title title title"/>
<TextView
android:id="@+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_toStartOf="@id/photo"
android:textAppearance="@style/m3_label_medium"
android:textColor="?android:textColorSecondary"
android:singleLine="true"
android:ellipsize="end"
tools:text="Discussed 123 times"/>
</RelativeLayout>

View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="280dp"
android:layout_height="240dp"
android:foreground="@drawable/bg_settings_banner">
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:importantForAccessibility="no"
tools:src="#0f0"/>
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/photo"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:textAppearance="@style/m3_body_large"
android:paddingVertical="2.5dp"
android:textColor="?colorM3OnSurface"
android:maxLines="2"
android:ellipsize="end"
tools:text="Title title title"/>
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_below="@id/title"
android:layout_marginHorizontal="16dp"
android:textAppearance="@style/m3_body_medium"
android:textColor="?colorM3OnSurfaceVariant"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center_vertical"
tools:text="Site Name"/>
</RelativeLayout>