tweak account card design

closes sk22#731
This commit is contained in:
sk
2023-08-25 17:20:54 +02:00
parent 86081654fb
commit aa9e66e6a2
14 changed files with 172 additions and 84 deletions

View File

@@ -0,0 +1,21 @@
<?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="?colorFilledCardAlpha"/>
</shape>
</item>
<item>
<ripple android:color="@color/m3_on_surface_variant_overlay">
<item android:id="@android:id/mask">
<shape>
<solid android:color="#000"/>
<corners android:radius="4dp"/>
</shape>
</item>
</ripple>
</item>
</layer-list>

View File

@@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="26dp"/>
<stroke android:width="4dp" android:color="?colorM3Surface"/>
</shape>

View File

@@ -3,74 +3,114 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorM3SurfaceVariant"
android:elevation="2dp"
android:paddingBottom="0dp">
android:background="@drawable/bg_filled_card">
<ImageView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="128dp"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:scaleType="centerCrop"
tools:src="#0f0"/>
<View
android:id="@+id/avatar_border"
android:layout_width="60dp"
android:layout_height="60dp"
<FrameLayout
android:id="@+id/avatar_wrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/cover"
android:layout_alignParentStart="true"
android:layout_marginTop="-6dp"
android:layout_marginStart="14dp"
android:background="@drawable/discover_ava_bg"/>
android:layout_marginTop="-12dp"
android:layout_marginStart="13dp"
android:layout_marginEnd="12dp">
<ImageView
android:id="@+id/avatar"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_below="@id/cover"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:layout_marginTop="-4dp"
android:scaleType="centerCrop"
tools:src="#f00" />
<View
android:id="@+id/avatar_border"
android:layout_gravity="center"
android:layout_width="66dp"
android:layout_height="66dp"
android:background="@drawable/bg_filled_card"/>
<TextView
android:id="@+id/name"
<ImageView
android:id="@+id/avatar"
android:layout_gravity="center"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleType="centerCrop"
tools:src="#f00" />
</FrameLayout>
<org.joinmastodon.android.ui.views.HeaderSubtitleLinearLayout
android:id="@+id/name_wrap"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_toEndOf="@id/avatar"
android:layout_below="@id/cover"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_height="wrap_content"
android:layout_toEndOf="@id/avatar_wrap"
android:layout_marginEnd="16dp"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textAppearance="@style/m3_title_medium"
tools:text="Eugen"/>
android:layout_above="@+id/username">
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="@style/m3_title_medium"
android:textColor="?colorM3OnSurface"
android:gravity="start|center_vertical"
tools:text="Eugen" />
<TextView
android:id="@+id/pronouns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8sp"
android:maxWidth="161sp"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="@style/m3_title_medium"
android:fontFamily="sans-serif"
android:textAlignment="viewStart"
android:textColor="?colorM3OnSurface"
tools:text="they/them" />
<TextView
android:id="@+id/extra_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8sp"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="@style/m3_title_medium"
android:fontFamily="sans-serif"
android:textAlignment="viewStart"
android:textColor="?colorM3OnSurface"
tools:text="boosted your cat picture" />
</org.joinmastodon.android.ui.views.HeaderSubtitleLinearLayout>
<TextView
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@id/name"
android:layout_alignEnd="@id/name"
android:layout_below="@id/name"
android:layout_alignBottom="@id/avatar_wrap"
android:layout_marginEnd="16dp"
android:layout_toEndOf="@id/avatar_wrap"
android:layout_marginBottom="3sp"
android:textAlignment="viewStart"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:textAppearance="@style/m3_title_small"
android:textAppearance="@style/m3_body_medium"
android:textColor="?colorM3OnSurfaceVariant"
tools:text="\@Gargron@mastodon.social"/>
<TextView
android:id="@+id/bio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/avatar"
android:layout_below="@id/avatar_wrap"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"

View File

@@ -40,7 +40,7 @@
<color name="m3_neutral2_100">@android:color/system_neutral2_100</color>
<color name="m3_neutral2_50t">@android:color/system_neutral2_50</color>
<color name="m3_neutral2_50">@android:color/system_neutral2_50</color>
<color name="m3_neutral2_25">@android:color/system_neutral2_10</color>
<color name="m3_neutral2_10">@android:color/system_neutral2_10</color>
<color name="m3_accent2_25">@android:color/system_accent2_10</color>
<color name="m3_accent2_50">@android:color/system_accent2_50</color>

View File

@@ -35,6 +35,7 @@
<attr name="colorProfileHeaderBackground" format="color"/>
<attr name="colorM3DarkOnSurface" format="color" />
<attr name="colorTabBarAlpha" format="color" />
<attr name="colorFilledCardAlpha" format="color" />
<attr name="colorPrimary25" format="color" />
<attr name="colorPrimary50" format="color" />

View File

@@ -125,7 +125,7 @@
<color name="m3_neutral2_100">@color/gray_100</color>
<color name="m3_neutral2_50t">@color/gray_50t</color>
<color name="m3_neutral2_50">@color/gray_50</color>
<color name="m3_neutral2_25">@color/gray_25</color>
<color name="m3_neutral2_10">@color/gray_25</color>
<color name="m3_accent1_25">@color/primary_25</color>
<color name="m3_accent1_50">@color/primary_50</color>

View File

@@ -28,6 +28,7 @@
</style>
<style name="ColorPalette">
<!-- https://m3.material.io/styles/color/the-color-system/tokens -->
<item name="colorM3Primary">?colorPrimary600</item>
<item name="colorM3OnPrimary">@color/white</item>
<item name="colorM3PrimaryContainer">?colorPrimary100</item>
@@ -56,6 +57,7 @@
<item name="colorBoost">?colorM3Primary</item>
<item name="colorPoll">@color/bookmark_selected</item>
<item name="colorTabBarAlpha">#14000000</item>
<item name="colorFilledCardAlpha">#30000000</item>
<item name="colorM3DisabledBackground">#1F1F1F1F</item>
<item name="colorM3Error">#B3261E</item>
@@ -151,6 +153,7 @@
<item name="colorM3SurfaceVariant">?colorNeutral900</item>
<item name="colorM3SecondaryContainer">?colorNeutral800</item>
<item name="colorTabBarAlpha">#00000000</item>
<item name="colorFilledCardAlpha">#00000000</item>
</style>
<style name="ColorPalette.Material3">
@@ -238,7 +241,7 @@
<item name="colorNeutral100">@color/m3_neutral2_100</item>
<item name="colorNeutral50t">@color/m3_neutral2_50t</item>
<item name="colorNeutral50">@color/m3_neutral2_50</item>
<item name="colorNeutral25">@color/m3_neutral2_25</item>
<item name="colorNeutral25">@color/m3_neutral2_10</item>
</style>
<style name="ColorPalette.Material3.Dark">

View File

@@ -372,4 +372,8 @@
<string name="sk_duration_days_3">3 days</string>
<string name="sk_duration_days_7">7 days</string>
<string name="sk_notification_mention">You were mentioned by %s</string>
<plurals name="sk_posts_count_label">
<item quantity="one">post</item>
<item quantity="other">posts</item>
</plurals>
</resources>