Merge remote-tracking branch 'upstream/master'

mastodon/src/main/java/org/joinmastodon/android/fragments/SplashFragment.java

@@ -1,11 +1,19 @@
 package org.joinmastodon.android.fragments;
 
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
+import android.text.SpannableString;
+import android.text.style.ImageSpan;
+import android.text.style.ReplacementSpan;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
 import android.view.WindowInsets;
+import android.widget.LinearLayout;
+import android.widget.TextView;
 
 import org.joinmastodon.android.MastodonApp;
 import org.joinmastodon.android.R;
@@ -14,7 +22,11 @@ import org.joinmastodon.android.fragments.onboarding.InstanceChooserLoginFragmen
 import org.joinmastodon.android.ui.InterpolatingMotionEffect;
 import org.joinmastodon.android.ui.views.SizeListenerFrameLayout;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.recyclerview.widget.RecyclerView;
+import androidx.viewpager.widget.PagerAdapter;
+import androidx.viewpager2.widget.ViewPager2;
 import me.grishka.appkit.Nav;
 import me.grishka.appkit.fragments.AppKitFragment;
 import me.grishka.appkit.utils.V;
@@ -23,12 +35,13 @@ public class SplashFragment extends AppKitFragment{
 
 	private SizeListenerFrameLayout contentView;
 	private View artContainer, blueFill, greenFill;
-	private InterpolatingMotionEffect motionEffect;
+	private ViewPager2 pager;
+	private ViewGroup pagerDots;
+	private View artClouds, artPlaneElephant, artRightHill, artLeftHill, artCenterHill;
 
 	@Override
 	public void onCreate(Bundle savedInstanceState){
 		super.onCreate(savedInstanceState);
-		motionEffect=new InterpolatingMotionEffect(MastodonApp.context);
 	}
 
 	@Nullable
@@ -37,15 +50,44 @@ public class SplashFragment extends AppKitFragment{
 		contentView=(SizeListenerFrameLayout) inflater.inflate(R.layout.fragment_splash, container, false);
 		contentView.findViewById(R.id.btn_get_started).setOnClickListener(this::onButtonClick);
 		contentView.findViewById(R.id.btn_log_in).setOnClickListener(this::onButtonClick);
+		artClouds=contentView.findViewById(R.id.art_clouds);
+		artPlaneElephant=contentView.findViewById(R.id.art_plane_elephant);
+		artRightHill=contentView.findViewById(R.id.art_right_hill);
+		artLeftHill=contentView.findViewById(R.id.art_left_hill);
+		artCenterHill=contentView.findViewById(R.id.art_center_hill);
+		pager=contentView.findViewById(R.id.pager);
+		pagerDots=contentView.findViewById(R.id.pager_dots);
+		pager.setAdapter(new PagerAdapter());
+		pager.setOffscreenPageLimit(3);
+		pager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback(){
+			@Override
+			public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){
+				for(int i=0;i<pagerDots.getChildCount();i++){
+					float alpha;
+					if(i==position){
+						alpha=0.3f+0.7f*(1f-positionOffset);
+					}else if(i==position+1){
+						alpha=0.3f+0.7f*positionOffset;
+					}else{
+						alpha=0.3f;
+					}
+					pagerDots.getChildAt(i).setAlpha(alpha);
+				}
+
+				float parallaxProgress=(position+positionOffset)/2f;
+				artClouds.setTranslationX(V.dp(-27)*(position>=1 ? 1f : positionOffset));
+				artPlaneElephant.setTranslationX(V.dp(101.55f)*parallaxProgress);
+				artLeftHill.setTranslationX(V.dp(-88)*parallaxProgress);
+				artLeftHill.setTranslationY(V.dp(24)*parallaxProgress);
+				artRightHill.setTranslationX(V.dp(-88)*parallaxProgress);
+				artRightHill.setTranslationY(V.dp(-24)*parallaxProgress);
+				artCenterHill.setTranslationX(V.dp(-40)*parallaxProgress);
+			}
+		});
 
 		artContainer=contentView.findViewById(R.id.art_container);
 		blueFill=contentView.findViewById(R.id.blue_fill);
 		greenFill=contentView.findViewById(R.id.green_fill);
-		motionEffect.addViewEffect(new InterpolatingMotionEffect.ViewEffect(contentView.findViewById(R.id.art_clouds), V.dp(-5), V.dp(5), V.dp(-5), V.dp(5)));
-		motionEffect.addViewEffect(new InterpolatingMotionEffect.ViewEffect(contentView.findViewById(R.id.art_right_hill), V.dp(-15), V.dp(25), V.dp(-10), V.dp(10)));
-		motionEffect.addViewEffect(new InterpolatingMotionEffect.ViewEffect(contentView.findViewById(R.id.art_left_hill), V.dp(-25), V.dp(15), V.dp(-15), V.dp(15)));
-		motionEffect.addViewEffect(new InterpolatingMotionEffect.ViewEffect(contentView.findViewById(R.id.art_center_hill), V.dp(-14), V.dp(14), V.dp(-5), V.dp(25)));
-		motionEffect.addViewEffect(new InterpolatingMotionEffect.ViewEffect(contentView.findViewById(R.id.art_plane_elephant), V.dp(-20), V.dp(12), V.dp(-20), V.dp(12)));
 
 		contentView.setSizeListener(new SizeListenerFrameLayout.OnSizeChangedListener(){
 			@Override
@@ -72,10 +114,10 @@ public class SplashFragment extends AppKitFragment{
 	}
 
 	private void updateArtSize(int w, int h){
-		float scale=w/(float)V.dp(412);
+		float scale=w/(float)V.dp(360);
 		artContainer.setScaleX(scale);
 		artContainer.setScaleY(scale);
-		blueFill.setScaleY(h/2f);
+		blueFill.setScaleY(artContainer.getBottom()-V.dp(90));
 		greenFill.setScaleY(h-artContainer.getBottom()+V.dp(90));
 	}
 
@@ -101,15 +143,91 @@ public class SplashFragment extends AppKitFragment{
 		return true;
 	}
 
-	@Override
+	private class PagerAdapter extends RecyclerView.Adapter<PagerViewHolder>{
-	protected void onShown(){
+
-		super.onShown();
+		@NonNull
-		motionEffect.activate();
+		@Override
+		public PagerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType){
+			return new PagerViewHolder(viewType);
+		}
+
+		@Override
+		public void onBindViewHolder(@NonNull PagerViewHolder holder, int position){}
+
+		@Override
+		public int getItemCount(){
+			return 3;
+		}
+
+		@Override
+		public int getItemViewType(int position){
+			return position;
+		}
 	}
 
-	@Override
+	private class PagerViewHolder extends RecyclerView.ViewHolder{
-	protected void onHidden(){
+		public PagerViewHolder(int page){
-		super.onHidden();
+			super(new LinearLayout(getActivity()));
-		motionEffect.deactivate();
+			LinearLayout ll=(LinearLayout) itemView;
+			ll.setOrientation(LinearLayout.VERTICAL);
+			int pad=V.dp(16);
+			ll.setPadding(pad, pad, pad, pad);
+			ll.setLayoutParams(new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
+
+			TextView title=new TextView(getActivity());
+			title.setTextAppearance(R.style.m3_headline_medium);
+			title.setText(switch(page){
+				case 0 -> {
+					String src=getString(R.string.welcome_page1_title);
+					SpannableString ss=new SpannableString(src);
+					int start=src.indexOf("{logo}");
+					if(start!=-1){
+						LogoSpan span=new LogoSpan(getResources().getDrawable(R.drawable.splash_logo, getActivity().getTheme()));
+						ss.setSpan(span, start, start+6, 0);
+					}
+					yield ss;
+				}
+				case 1 -> getString(R.string.welcome_page2_title);
+				case 2 -> getString(R.string.welcome_page3_title);
+				default -> throw new IllegalStateException("Unexpected value: "+page);
+			});
+			title.setTextColor(0xFF17063B);
+			LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, V.dp(page==0 ? 46 : 36));
+			lp.bottomMargin=V.dp(page==0 ? 4 : 14);
+			ll.addView(title, lp);
+
+			TextView text=new TextView(getActivity());
+			text.setTextAppearance(R.style.m3_body_medium);
+			text.setText(switch(page){
+				case 0 -> R.string.welcome_page1_text;
+				case 1 -> R.string.welcome_page2_text;
+				case 2 -> R.string.welcome_page3_text;
+				default -> throw new IllegalStateException("Unexpected value: "+page);
+			});
+			text.setTextColor(0xFF17063B);
+			ll.addView(text, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
+		}
+	}
+
+	private class LogoSpan extends ReplacementSpan{
+		private final Drawable drawable;
+
+		private LogoSpan(Drawable drawable){
+			this.drawable=drawable;
+		}
+
+		@Override
+		public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable Paint.FontMetricsInt fm){
+			return drawable.getIntrinsicWidth();
+		}
+
+		@Override
+		public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint){
+			drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
+			canvas.save();
+			canvas.translate(x, y-V.dp(20));
+			drawable.draw(canvas);
+			canvas.restore();
+		}
 	}
 }

mastodon/src/main/res/color/button_text_m3_text.xml

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

mastodon/src/main/res/color/m3_primary_overlay.xml

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

mastodon/src/main/res/drawable/bg_button_m3_text.xml

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

mastodon/src/main/res/drawable/splash_logo.xml

@@ -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:width="134dp"
-    android:height="67dp"
+    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>

mastodon/src/main/res/drawable/white_circle.xml

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

mastodon/src/main/res/layout/fragment_splash.xml

@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<org.joinmastodon.android.ui.views.SizeListenerFrameLayout
+<org.joinmastodon.android.ui.views.SizeListenerFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-	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:clipToPadding="false">
-	android:clipChildren="false">
 
 	<View
 		android:id="@+id/blue_fill"
@@ -18,51 +17,60 @@
 
 	<FrameLayout
 		android:id="@+id/art_container"
-		android:layout_width="450dp"
+		android:layout_width="360dp"
-		android:layout_height="631dp"
+		android:layout_height="640dp"
-		android:layout_marginTop="40dp"
+		android:layout_gravity="center"
-		android:layout_gravity="center">
+		tools:ignore="rtlHardcoded">
 		
 		<ImageView
 			android:id="@+id/art_clouds"
-			android:layout_width="450dp"
+			android:layout_width="414dp"
-			android:layout_height="589dp"
+			android:layout_height="541dp"
-			android:layout_gravity="bottom|center_horizontal"
+			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_width="150.84dp"
-			android:layout_height="255dp"
+			android:layout_height="176.44dp"
-			android:layout_gravity="bottom|right"
+			android:layout_gravity="top|left"
-			android:layout_marginBottom="156dp"
+			android:layout_marginLeft="322dp"
-			android:layout_marginRight="11dp"
+			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_width="197.2dp"
-			android:layout_height="222dp"
+			android:layout_height="153.61dp"
-			android:layout_gravity="bottom|left"
+			android:layout_gravity="top|left"
-			android:layout_marginLeft="-6dp"
+			android:layout_marginTop="294dp"
-			android:layout_marginBottom="243dp"
+			android:importantForAccessibility="no"
 			android:src="@drawable/splash_art_layer2"/>
 
 		<ImageView
 			android:id="@+id/art_center_hill"
-			android:layout_width="457dp"
+			android:layout_width="400dp"
-			android:layout_height="397dp"
+			android:layout_height="346dp"
-			android:layout_gravity="bottom|center_horizontal"
+			android:layout_gravity="top|left"
-			android:layout_marginBottom="51dp"
+			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_height="match_parent"
-		android:layout_gravity="bottom"
-		android:padding="16dp"
 		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"
+			android:layout_gravity="center_horizontal"
-			style="@style/Widget.Mastodon.Button.Large.Primary_LightOnDark"
+			android:layout_marginBottom="16dp"
-			android:text="@string/get_started"/>
+			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:layout_marginLeft="16dp"
-			android:background="@drawable/bg_button_green"
+			android:layout_marginRight="16dp"
-			android:text="@string/log_in"/>
+			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>

mastodon/src/main/res/values/strings.xml

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

mastodon/src/main/res/values/styles.xml

@@ -753,6 +753,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>