Splash fragment redesign
This commit is contained in:
Grishka
5
mastodon/src/main/res/color/button_text_m3_text.xml
Normal file
5
mastodon/src/main/res/color/button_text_m3_text.xml
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:color="?colorM3Primary" android:state_enabled="true"/>
|
||||
<item android:color="?colorM3OnSurface" android:alpha="0.38"/>
|
||||
</selector>
|
||||
4
mastodon/src/main/res/color/m3_primary_overlay.xml
Normal file
4
mastodon/src/main/res/color/m3_primary_overlay.xml
Normal 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="?colorM3Primary" android:alpha="0.12"/>
|
||||
</selector>
|
||||
9
mastodon/src/main/res/drawable/bg_button_m3_text.xml
Normal file
9
mastodon/src/main/res/drawable/bg_button_m3_text.xml
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<ripple android:color="@color/m3_primary_overlay" xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:id="@android:id/mask">
|
||||
<shape>
|
||||
<solid android:color="#000"/>
|
||||
<corners android:radius="20dp"/>
|
||||
</shape>
|
||||
</item>
|
||||
</ripple>
|
||||
@@ -1,7 +1,7 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:aapt="http://schemas.android.com/aapt"
|
||||
android:width="257dp"
|
||||
android:height="67dp"
|
||||
android:width="134dp"
|
||||
android:height="34dp"
|
||||
android:viewportWidth="313"
|
||||
android:viewportHeight="81">
|
||||
<path
|
||||
@@ -20,8 +20,8 @@
|
||||
</path>
|
||||
<path
|
||||
android:pathData="M14.81,23.2C14.81,20.72 16.77,18.72 19.2,18.72C21.62,18.72 23.58,20.73 23.58,23.2C23.58,25.67 21.62,27.68 19.2,27.68C16.77,27.68 14.81,25.67 14.81,23.2Z"
|
||||
android:fillColor="#ffffff"/>
|
||||
android:fillColor="#000"/>
|
||||
<path
|
||||
android:pathData="M80.02,27.06V47.66H72.03V27.67C72.03,23.45 70.3,21.32 66.83,21.32C63,21.32 61.07,23.87 61.07,28.87V39.82H53.14V28.87C53.14,23.84 51.24,21.32 47.38,21.32C43.92,21.32 42.18,23.45 42.18,27.67V47.65H34.21V27.06C34.21,22.86 35.25,19.51 37.35,17.03C39.53,14.54 42.37,13.29 45.89,13.29C49.97,13.29 53.07,14.9 55.11,18.11L57.11,21.52L59.1,18.11C61.14,14.91 64.23,13.29 68.32,13.29C71.84,13.29 74.69,14.55 76.86,17.03C78.96,19.51 80.01,22.83 80.01,27.06H80.02ZM107.49,37.3C109.15,35.51 109.93,33.29 109.93,30.59C109.93,27.89 109.14,25.65 107.49,23.94C105.91,22.15 103.89,21.3 101.45,21.3C99.02,21.3 97.01,22.15 95.41,23.94C93.83,25.65 93.04,27.89 93.04,30.59C93.04,33.29 93.83,35.53 95.41,37.3C97,39 99.02,39.87 101.45,39.87C103.89,39.87 105.9,39.02 107.49,37.3ZM109.93,14.12H117.8V47.06H109.93V43.18C107.55,46.41 104.26,48 99.99,48C95.71,48 92.42,46.36 89.5,43C86.64,39.64 85.18,35.48 85.18,30.61C85.18,25.74 86.65,21.65 89.5,18.29C92.43,14.93 95.92,13.23 99.99,13.23C104.06,13.23 107.55,14.81 109.93,18.02V14.14V14.12ZM144.26,29.97C146.58,31.76 147.73,34.25 147.67,37.41C147.67,40.77 146.52,43.41 144.14,45.24C141.76,47.03 138.89,47.94 135.41,47.94C129.13,47.94 124.87,45.3 122.61,40.11L129.43,35.96C130.34,38.78 132.35,40.25 135.41,40.25C138.22,40.25 139.62,39.33 139.62,37.42C139.62,36.03 137.79,34.78 134.07,33.8C132.66,33.41 131.5,33.01 130.6,32.68C129.31,32.16 128.22,31.56 127.31,30.83C125.05,29.04 123.9,26.68 123.9,23.65C123.9,20.42 124.99,17.85 127.19,16C129.45,14.09 132.19,13.18 135.48,13.18C140.73,13.18 144.56,15.48 147.07,20.16L140.37,24.1C139.4,21.86 137.74,20.74 135.48,20.74C133.11,20.74 131.95,21.65 131.95,23.44C131.95,24.83 133.78,26.08 137.5,27.06C140.37,27.72 142.63,28.7 144.26,29.97H144.27H144.26ZM169.26,22.27H162.37V35.98C162.37,37.63 162.98,38.63 164.15,39.08C165,39.4 166.71,39.47 169.27,39.34V47.05C163.98,47.71 160.14,47.17 157.88,45.41C155.62,43.7 154.53,40.53 154.53,36V22.27H149.23V14.1H154.53V7.46L162.39,4.89V14.12H169.29V22.29H169.27L169.26,22.27ZM194.34,37.1C195.92,35.4 196.71,33.22 196.71,30.58C196.71,27.94 195.92,25.78 194.34,24.05C192.74,22.35 190.79,21.48 188.42,21.48C186.04,21.48 184.09,22.33 182.49,24.05C180.97,25.84 180.18,28 180.18,30.58C180.18,33.16 180.97,35.31 182.49,37.1C184.08,38.81 186.04,39.67 188.42,39.67C190.79,39.67 192.74,38.82 194.34,37.1ZM176.96,42.96C173.85,39.6 172.32,35.52 172.32,30.58C172.32,25.63 173.85,21.62 176.96,18.26C180.07,14.9 183.91,13.19 188.42,13.19C192.92,13.19 196.77,14.9 199.87,18.26C202.97,21.62 204.57,25.77 204.57,30.58C204.57,35.39 202.97,39.6 199.87,42.96C196.76,46.32 192.98,47.96 188.42,47.96C183.85,47.96 180.06,46.32 176.96,42.96ZM230.86,37.29C232.45,35.5 233.24,33.28 233.24,30.58C233.24,27.87 232.45,25.63 230.86,23.93C229.28,22.14 227.26,21.29 224.82,21.29C222.39,21.29 220.37,22.14 218.73,23.93C217.14,25.63 216.35,27.87 216.35,30.58C216.35,33.28 217.14,35.52 218.73,37.29C220.38,38.99 222.45,39.86 224.82,39.86C227.2,39.86 229.27,39 230.86,37.29ZM233.24,0.92H241.11V47.05H233.24V43.17C230.93,46.39 227.63,47.99 223.36,47.99C219.09,47.99 215.75,46.35 212.8,42.98C209.93,39.62 208.48,35.47 208.48,30.6C208.48,25.73 209.95,21.64 212.8,18.28C215.72,14.92 219.26,13.22 223.36,13.22C227.45,13.22 230.93,14.8 233.24,18.01V0.93V0.92ZM268.74,37.07C270.32,35.36 271.12,33.18 271.12,30.54C271.12,27.9 270.32,25.74 268.74,24.01C267.15,22.31 265.21,21.45 262.82,21.45C260.43,21.45 258.5,22.3 256.9,24.01C255.37,25.8 254.58,27.96 254.58,30.54C254.58,33.12 255.37,35.28 256.9,37.07C258.48,38.77 260.44,39.64 262.82,39.64C265.2,39.64 267.14,38.78 268.74,37.07ZM251.36,42.92C248.26,39.56 246.73,35.48 246.73,30.54C246.73,25.6 248.25,21.58 251.36,18.22C254.47,14.86 258.32,13.15 262.82,13.15C267.32,13.15 271.18,14.86 274.27,18.22C277.38,21.58 278.97,25.73 278.97,30.54C278.97,35.35 277.38,39.56 274.27,42.92C271.16,46.28 267.38,47.93 262.82,47.93C258.26,47.93 254.46,46.28 251.36,42.92ZM313,26.78V47.01H305.14V27.84C305.14,25.66 304.59,24.01 303.48,22.77C302.45,21.65 300.98,21.07 299.09,21.07C294.65,21.07 292.39,23.77 292.39,29.24V47.03H284.53V14.1H292.39V17.81C294.28,14.71 297.28,13.19 301.47,13.19C304.82,13.19 307.57,14.37 309.71,16.81C311.91,19.24 313,22.54 313,26.82"
|
||||
android:fillColor="#ffffff"/>
|
||||
android:fillColor="#000"/>
|
||||
</vector>
|
||||
|
||||
4
mastodon/src/main/res/drawable/white_circle.xml
Normal file
4
mastodon/src/main/res/drawable/white_circle.xml
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
|
||||
<solid android:color="#fff"/>
|
||||
</shape>
|
||||
@@ -1,12 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<org.joinmastodon.android.ui.views.SizeListenerFrameLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
<org.joinmastodon.android.ui.views.SizeListenerFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:orientation="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:fitsSystemWindows="true"
|
||||
android:clipToPadding="false"
|
||||
android:clipChildren="false">
|
||||
android:clipToPadding="false">
|
||||
|
||||
<View
|
||||
android:id="@+id/blue_fill"
|
||||
@@ -18,51 +17,60 @@
|
||||
|
||||
<FrameLayout
|
||||
android:id="@+id/art_container"
|
||||
android:layout_width="450dp"
|
||||
android:layout_height="631dp"
|
||||
android:layout_marginTop="40dp"
|
||||
android:layout_gravity="center">
|
||||
android:layout_width="360dp"
|
||||
android:layout_height="640dp"
|
||||
android:layout_gravity="center"
|
||||
tools:ignore="rtlHardcoded">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_clouds"
|
||||
android:layout_width="450dp"
|
||||
android:layout_height="589dp"
|
||||
android:layout_gravity="bottom|center_horizontal"
|
||||
android:layout_width="414dp"
|
||||
android:layout_height="541dp"
|
||||
android:layout_marginTop="91dp"
|
||||
android:layout_gravity="top|left"
|
||||
android:alpha="0.3"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_art_layer0"/>
|
||||
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_plane_elephant"
|
||||
android:layout_width="245.64dp"
|
||||
android:layout_height="72.65dp"
|
||||
android:layout_marginLeft="-101.55dp"
|
||||
android:layout_marginTop="238.12dp"
|
||||
android:layout_gravity="left|top"
|
||||
android:alpha="0.3"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_art_layer4"/>
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_right_hill"
|
||||
android:layout_width="218dp"
|
||||
android:layout_height="255dp"
|
||||
android:layout_gravity="bottom|right"
|
||||
android:layout_marginBottom="156dp"
|
||||
android:layout_marginRight="11dp"
|
||||
android:layout_width="150.84dp"
|
||||
android:layout_height="176.44dp"
|
||||
android:layout_gravity="top|left"
|
||||
android:layout_marginLeft="322dp"
|
||||
android:layout_marginTop="310dp"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_art_layer1"/>
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_left_hill"
|
||||
android:layout_width="285dp"
|
||||
android:layout_height="222dp"
|
||||
android:layout_gravity="bottom|left"
|
||||
android:layout_marginLeft="-6dp"
|
||||
android:layout_marginBottom="243dp"
|
||||
android:layout_width="197.2dp"
|
||||
android:layout_height="153.61dp"
|
||||
android:layout_gravity="top|left"
|
||||
android:layout_marginTop="294dp"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_art_layer2"/>
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_center_hill"
|
||||
android:layout_width="457dp"
|
||||
android:layout_height="397dp"
|
||||
android:layout_gravity="bottom|center_horizontal"
|
||||
android:layout_marginBottom="51dp"
|
||||
android:layout_width="400dp"
|
||||
android:layout_height="346dp"
|
||||
android:layout_gravity="top|left"
|
||||
android:layout_marginTop="294dp"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_art_layer3"/>
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/art_plane_elephant"
|
||||
android:layout_width="355dp"
|
||||
android:layout_height="105dp"
|
||||
android:layout_gravity="left|top"
|
||||
android:src="@drawable/splash_art_layer4"/>
|
||||
|
||||
</FrameLayout>
|
||||
|
||||
<View
|
||||
@@ -73,36 +81,65 @@
|
||||
android:transformPivotY="1px"
|
||||
android:background="#478E6A"/>
|
||||
|
||||
<org.joinmastodon.android.ui.views.SplashLogoView
|
||||
android:layout_width="261dp"
|
||||
android:layout_height="71dp"
|
||||
android:layout_gravity="center_horizontal|top"
|
||||
android:layout_marginTop="24dp"
|
||||
android:scaleType="center"
|
||||
android:importantForAccessibility="no"
|
||||
android:src="@drawable/splash_logo"/>
|
||||
|
||||
<LinearLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="bottom"
|
||||
android:padding="16dp"
|
||||
android:layout_height="match_parent"
|
||||
android:clipToPadding="false"
|
||||
android:orientation="vertical">
|
||||
<Button
|
||||
android:id="@+id/btn_get_started"
|
||||
|
||||
<androidx.viewpager2.widget.ViewPager2
|
||||
android:id="@+id/pager"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="0dp"
|
||||
android:layout_weight="1"/>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/pager_dots"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginBottom="13dp"
|
||||
style="@style/Widget.Mastodon.Button.Large.Primary_LightOnDark"
|
||||
android:text="@string/get_started"/>
|
||||
android:layout_gravity="center_horizontal"
|
||||
android:layout_marginBottom="16dp"
|
||||
android:orientation="horizontal">
|
||||
|
||||
<View
|
||||
android:layout_width="8dp"
|
||||
android:layout_height="8dp"
|
||||
android:background="@drawable/white_circle"/>
|
||||
|
||||
<View
|
||||
android:layout_width="8dp"
|
||||
android:layout_height="8dp"
|
||||
android:layout_marginLeft="16dp"
|
||||
android:layout_marginRight="16dp"
|
||||
android:alpha="0.3"
|
||||
android:background="@drawable/white_circle"/>
|
||||
|
||||
<View
|
||||
android:layout_width="8dp"
|
||||
android:layout_height="8dp"
|
||||
android:alpha="0.3"
|
||||
android:background="@drawable/white_circle"/>
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
<Button
|
||||
android:id="@+id/btn_log_in"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
style="@style/Widget.Mastodon.Button.Large.Primary_DarkOnLight"
|
||||
android:background="@drawable/bg_button_green"
|
||||
android:text="@string/log_in"/>
|
||||
android:layout_marginLeft="16dp"
|
||||
android:layout_marginRight="16dp"
|
||||
style="@style/Widget.Mastodon.M3.Button.Text"
|
||||
android:textColor="#fff"
|
||||
android:text="@string/already_have_account"/>
|
||||
<Button
|
||||
android:id="@+id/btn_get_started"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginLeft="16dp"
|
||||
android:layout_marginRight="16dp"
|
||||
android:layout_marginBottom="16dp"
|
||||
style="@style/Widget.Mastodon.M3.Button.Filled"
|
||||
android:text="@string/get_started"/>
|
||||
</LinearLayout>
|
||||
|
||||
</org.joinmastodon.android.ui.views.SizeListenerFrameLayout>
|
||||
@@ -2,7 +2,8 @@
|
||||
<resources>
|
||||
<string name="app_name" translatable="false">Mastodon</string>
|
||||
|
||||
<string name="get_started">Get started</string>
|
||||
<string name="get_started">Create account</string>
|
||||
<string name="already_have_account">I already have an account</string>
|
||||
<string name="log_in">Log in</string>
|
||||
<string name="next">Next</string>
|
||||
<string name="loading_instance">Retrieving server info…</string>
|
||||
@@ -397,4 +398,11 @@
|
||||
<string name="login_title">Welcome Back</string>
|
||||
<string name="login_subtitle">Log in with the server where you created your account.</string>
|
||||
<string name="server_url">Server URL</string>
|
||||
<!-- {logo} is a placeholder that is replaced with the Mastodon logo image at runtime. Please copy it into your translation as is. -->
|
||||
<string name="welcome_page1_title">What is {logo}?</string>
|
||||
<string name="welcome_page1_text">Imagine you have an email address that ends with @example.com.\n\nYou can still send and receive emails from anyone, even if their email ends in @gmail.com or @icloud.com or @example.com.</string>
|
||||
<string name="welcome_page2_title">Mastodon is like that.</string>
|
||||
<string name="welcome_page2_text">Your handle might be @gothgirl654@example.social, but you can still follow, reblog, and chat with @fallout5ever@example.online.</string>
|
||||
<string name="welcome_page3_title">How do I pick a server?</string>
|
||||
<string name="welcome_page3_text">Different people choose different servers for any number of reasons. art.example is a great place for artists, while glasgow.example might be a good pick for Scots.\n\nYou can’t go wrong with any of our recommend servers, so regardless of which one you pick (or if you enter your own in the server search bar), you’ll never miss a beat anywhere.</string>
|
||||
</resources>
|
||||
@@ -297,6 +297,13 @@
|
||||
<item name="android:paddingRight">24dp</item>
|
||||
</style>
|
||||
|
||||
<style name="Widget.Mastodon.M3.Button.Text">
|
||||
<item name="android:background">@drawable/bg_button_m3_text</item>
|
||||
<item name="android:textColor">@color/button_text_m3_text</item>
|
||||
<item name="android:paddingLeft">24dp</item>
|
||||
<item name="android:paddingRight">24dp</item>
|
||||
</style>
|
||||
|
||||
<style name="alert_title">
|
||||
<item name="android:textColor">?android:textColorPrimary</item>
|
||||
<item name="android:textSize">24dp</item>
|
||||
|
||||
Reference in New Issue
Block a user