M3 redesign: search/discover
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
44
mastodon/src/main/res/layout/item_trending_link_card.xml
Normal file
44
mastodon/src/main/res/layout/item_trending_link_card.xml
Normal 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>
|
||||
Reference in New Issue
Block a user