archive
/
tailscale-android
mirror of https://github.com/tailscale/tailscale-android
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

android/ui: restyle the intro screen

Browse Source 
Updates tailscale/corp#18202

Restyle the intro screen per UX

Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>
jonathan/intro_screen
Jonathan Nobels 7 months ago committed by Jonathan Nobels
parent a0e7777958
commit c30260166f
3 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File

46
android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt
Unescape Escape View File

@ -4,22 +4,21 @@
package com.tailscale.ipn.ui.view
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
@ -30,33 +29,36 @@ import com.tailscale.ipn.R
fun IntroView(onContinue: () -> Unit) {
Surface {
Column(
modifier = Modifier.fillMaxHeight().padding(20.dp),
horizontalAlignment = Alignment.CenterHorizontally) {
Spacer(modifier = Modifier.height(30.dp))
modifier = Modifier.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
Image(
modifier =
Modifier.width(140.dp)
.height(140.dp)
.clip(RoundedCornerShape(50))
.background(Color.Black)
.padding(15.dp),
painter = painterResource(id = R.drawable.ic_tile),
modifier = Modifier.width(80.dp).height(80.dp),
painter = painterResource(id = R.drawable.androidicon_light),
contentDescription = stringResource(R.string.app_icon_content_description))
Spacer(modifier = Modifier.height(10.dp))
Text(
text = stringResource(R.string.tailscale),
style = MaterialTheme.typography.headlineLarge)
Spacer(modifier = Modifier.height(20.dp))
Spacer(modifier = Modifier.height(40.dp))
Text(
modifier = Modifier.padding(start = 40.dp, end = 40.dp, bottom = 40.dp),
text = stringResource(R.string.welcome1),
style = MaterialTheme.typography.bodyMedium,
style = MaterialTheme.typography.bodyLarge,
textAlign = TextAlign.Center)
Spacer(modifier = Modifier.height(20.dp))
PrimaryActionButton(onClick = onContinue) {
Button(onClick = onContinue) {
Text(
text = stringResource(id = R.string.getStarted),
fontSize = MaterialTheme.typography.titleMedium.fontSize)
}
Spacer(modifier = Modifier.height(40.dp))
}
Box(
modifier = Modifier.fillMaxHeight().padding(start = 20.dp, end = 20.dp, bottom = 40.dp),
contentAlignment = Alignment.BottomCenter) {
Text(
text = stringResource(R.string.welcome2),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
textAlign = TextAlign.Center)
}
}
}

34
android/src/main/res/drawable/androidicon_light.xml
Unescape Escape View File

@ -0,0 +1,34 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">
<path
android:pathData="M50,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#cccccc"/>
<path
android:pathData="M87.5,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#cccccc"/>
<path
android:pathData="M125,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#cccccc"/>
<path
android:pathData="M50,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#222222"/>
<path
android:pathData="M87.5,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#222222"/>
<path
android:pathData="M125,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#222222"/>
<path
android:pathData="M50,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#cccccc"/>
<path
android:pathData="M87.5,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#222222"/>
<path
android:pathData="M125,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
android:fillColor="#cccccc"/>
</vector>

6
android/src/main/res/values/strings.xml
Unescape Escape View File

@ -219,8 +219,8 @@
<string name="taildrop_share_failed_title">Taildrop failed</string>
<!-- Strings for the intro screen -->
<string name="tailscale">Tailscale</string>
<string name="getStarted">Get started</string>
<string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices. All connections are device-to-device, so we never see your data.\n\nWe collect and use your email address and name, as well as your device name, OS version, and IP address in order to help you to connect your devices and manage your settings. We log when you are connected to your network.\n</string>
<string name="getStarted">Get Started</string>
<string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices.</string>
<string name="welcome2">All connections are device-to-device, so we never see your data. We collect and use your email address and name, as well as your device name, OS version, and IP address in order to help you to connect your devices and manage your settings. We log when you are connected to your network.</string>
</resources>

Write Preview
Loading…
Cancel
Save