Skip to content

Rebrand the Welcome screen #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mildrette wants to merge 1 commit into from
+211 −110
Closed

Rebrand the Welcome screen #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
311 changes: 201 additions & 110 deletions app/src/main/java/com/example/sw0b_001/ui/views/WelcomeView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,176 +1,265 @@
package com.example.sw0b_001.ui.views

import android.content.Intent
import android.content.res.Configuration
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
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.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Language
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringArrayResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.example.sw0b_001.R
import androidx.core.net.toUri
import androidx.navigation.compose.rememberNavController
import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.getCurrentLocale
import com.afkanerd.smswithoutborders_libsmsmms.extensions.context.setLocale
import com.example.sw0b_001.data.Helpers
import com.example.sw0b_001.ui.navigation.OnboardingInteractiveScreen
import com.example.sw0b_001.R
import com.example.sw0b_001.ui.theme.AppTheme
import kotlinx.coroutines.launch

@Composable
fun WelcomeMainView(
navController: NavController
) {
val context = LocalContext.current
fun WelcomeMainView(navController: NavController) {

var localeExpanded by remember { mutableStateOf(false) }
val localeArraysValues = stringArrayResource(R.array.language_values)
val localeArraysOptions= stringArrayResource(R.array.language_options)
val pageCount = 3
val pagerState = rememberPagerState(pageCount = { pageCount })
val scope = rememberCoroutineScope()

Scaffold { innerPadding ->
Column(
modifier = Modifier
.fillMaxHeight()
.fillMaxSize()
.padding(innerPadding)
.padding(start = 16.dp, end = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {

Image(
painter = painterResource(id = R.drawable.relay_sms_welcome,),
contentDescription = null,
modifier = Modifier.size(250.dp)
)
Spacer(modifier = Modifier.height(32.dp))
HorizontalPager(
state = pagerState,
modifier = Modifier.weight(1f)
) { page ->
when (page) {
0 -> PageOneContent()
1 -> PageTwoContent()
2 -> PageThreeContent()
}
}

Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp, vertical = 24.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
OutlinedButton(
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
repeat(pageCount) { index ->
Box(
modifier = Modifier
.size(
width = if (pagerState.currentPage == index) 24.dp else 8.dp,
height = 8.dp
)
.background(
color = if (pagerState.currentPage == index)
MaterialTheme.colorScheme.primaryContainer
else
MaterialTheme.colorScheme.outlineVariant,
shape = CircleShape
)
)
}
}

Button(
onClick = {
localeExpanded = true
scope.launch {
if (pagerState.currentPage < pageCount - 1) {
pagerState.animateScrollToPage(pagerState.currentPage + 1)
} else {

}
}
},
shape = RoundedCornerShape(24.dp),
modifier = Modifier.padding(end = 8.dp),
shape = RoundedCornerShape(50.dp)
) {
Icon(
imageVector = Icons.Filled.Language,
contentDescription = stringResource(R.string.language),
modifier = Modifier.size(20.dp),
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = context.getCurrentLocale()?.displayName ?:
stringResource(R.string.english1),
text = when (pagerState.currentPage) {
0 -> "Get Started"
pageCount - 1 -> "Done!"
else -> "Next"
}
)
}
Column(
modifier = Modifier
.fillMaxWidth()
.padding(start = 8.dp)
) {
DropdownMenu(
expanded = localeExpanded,
onDismissRequest = { localeExpanded = false }
Spacer(modifier = Modifier.width(8.dp))

Box(
modifier = Modifier
.size(28.dp)
.background(
color = MaterialTheme.colorScheme.onPrimary,
shape = CircleShape
),
contentAlignment = Alignment.Center
) {
localeArraysOptions.forEachIndexed { i, item ->
DropdownMenuItem(
text = { Text(item) },
onClick = {
context.setLocale(localeArraysValues[i])
localeExpanded = false
}
)
}
Icon(
imageVector = Icons.Filled.KeyboardArrowRight,
contentDescription = null,
modifier = Modifier.size(18.dp),
tint = MaterialTheme.colorScheme.primary
)
}
}

}
}
}
}

@Composable
fun PageOneContent() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = R.drawable.relay_sms_welcome),
contentDescription = null,
modifier = Modifier.size(150.dp)
)

Spacer(modifier = Modifier.height(64.dp))
Spacer(modifier = Modifier.height(24.dp))

Text(
text = stringResource(R.string.welcome_to_relaysms_),
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurface
)
Text(
text = stringResource(R.string.welcome_to_relaysms_),
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurface
)

Spacer(modifier = Modifier.height(16.dp))
Spacer(modifier = Modifier.height(12.dp))

Text(
text = stringResource(R.string.use_sms_to_make_a_post_send_emails_and_messages_with_no_internet_connection),
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
Text("send encrypted emails and online updates using sms no internet required",
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurfaceVariant
)

Spacer(modifier = Modifier.height(32.dp))

InfoCard()
}
}

Spacer(modifier = Modifier.weight(1f))
@Composable
fun PageTwoContent() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Page Two — Coming Soon",
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurface
)
}
}

@Composable
fun PageThreeContent() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Page Three — Coming Soon",
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurface
)
}
}

Button(
onClick = {
navController.navigate(OnboardingInteractiveScreen)
},
modifier = Modifier.fillMaxWidth(),
colors = ButtonDefaults.buttonColors(
MaterialTheme.colorScheme.primary)
@Composable
fun InfoCard() {
OutlinedCard(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(20.dp),
colors = CardDefaults.outlinedCardColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer
),
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colorScheme.primary
)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(text = stringResource(R.string.learn_how_it_works_),
color = MaterialTheme.colorScheme.onPrimary)
Icon(
painter = painterResource(R.drawable.lock_open_right),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.size(20.dp)
)
Spacer(modifier = Modifier.width(8.dp))

Text(
text = "Zero Accounts, Zero Passwords",
style = MaterialTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface
)
}

Spacer(modifier = Modifier.height(16.dp))
Spacer(modifier = Modifier.height(12.dp))

Text(
text = stringResource(R.string.read_our_privacy_policy),
modifier = if(LocalInspectionMode.current) Modifier
else Modifier.clickable(onClick = {
val intent = Intent(Intent.ACTION_VIEW,
context.getString(R.string.https_smswithoutborders_com_privacy_policy).toUri())
context.startActivity(intent)
}),
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.bodySmall
text = "Your device is completely independent. We never ask you to register or log in.",
style = MaterialTheme.typography.bodyMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
Spacer(modifier = Modifier.height(64.dp))
}
}
}
Expand All @@ -189,4 +278,6 @@ fun OnboardingViewPreview() {
AppTheme {
WelcomeMainView(rememberNavController())
}
}
}


10 changes: 10 additions & 0 deletions app/src/main/res/drawable/lock_open_right.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M240,800L720,800Q720,800 720,800Q720,800 720,800L720,400Q720,400 720,400Q720,400 720,400L240,400Q240,400 240,400Q240,400 240,400L240,800Q240,800 240,800Q240,800 240,800ZM536.5,656.5Q560,633 560,600Q560,567 536.5,543.5Q513,520 480,520Q447,520 423.5,543.5Q400,567 400,600Q400,633 423.5,656.5Q447,680 480,680Q513,680 536.5,656.5ZM240,800Q240,800 240,800Q240,800 240,800L240,400Q240,400 240,400Q240,400 240,400L240,400Q240,400 240,400Q240,400 240,400L240,800Q240,800 240,800Q240,800 240,800ZM240,880Q207,880 183.5,856.5Q160,833 160,800L160,400Q160,367 183.5,343.5Q207,320 240,320L520,320L520,240Q520,157 578.5,98.5Q637,40 720,40Q803,40 861.5,98.5Q920,157 920,240L840,240Q840,190 805,155Q770,120 720,120Q670,120 635,155Q600,190 600,240L600,320L720,320Q753,320 776.5,343.5Q800,367 800,400L800,800Q800,833 776.5,856.5Q753,880 720,880L240,880Z"/>
</vector>