Skip to content

design(network): network screen is now more close to material3 guidelines #6

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

Merged
demndevel merged 1 commit into from
Feb 3, 2026
Merged

design(network): network screen is now more close to material3 guidelines #6

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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> Make new friends!

Private social network to make meeting friends easier. You can learn more on our page: [getfriend.ly](https://github.com/friendly-social/android).
Private social network to make meeting friends easier. You can learn more on our page: [getfriend.ly](https://getfriend.ly).

## Download

Expand Down
4 changes: 4 additions & 0 deletions app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ kotlin {
freeCompilerArgs.add("-Xcontext-sensitive-resolution")
freeCompilerArgs.add("-Xnested-type-aliases")
optIn.add("kotlin.time.ExperimentalTime")
optIn.add("androidx.compose.material3.ExperimentalMaterial3Api")
optIn.add(
"androidx.compose.material3.ExperimentalMaterial3ExpressiveApi",
)
}
}

Expand Down
11 changes: 4 additions & 7 deletions app/src/main/java/friendly/android/AddFriendByTokenScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,10 @@ private fun NetworkError(
friendToken: FriendToken,
modifier: Modifier = Modifier,
) {
Column(modifier) {
Text(text = stringResource(R.string.network_error_occurred))
Spacer(Modifier.height(16.dp))
OutlinedButton(onClick = { vm.add(userId, friendToken) }) {
Text(text = "Retry")
}
}
NetworkErrorBox(
onRetry = { vm.add(userId, friendToken) },
modifier = modifier,
)
}

@Composable
Expand Down
271 changes: 114 additions & 157 deletions app/src/main/java/friendly/android/FeedScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
package friendly.android

import androidx.compose.animation.AnimatedContent
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.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
Expand Down Expand Up @@ -51,75 +53,93 @@ sealed interface FeedScreenUiState {
fun FeedScreen(vm: FeedScreenViewModel, modifier: Modifier = Modifier) {
val state by vm.state.collectAsState()
val isRefreshing = isRefreshing(state)
val pullToRefreshState = rememberPullToRefreshState()

LaunchedEffect(Unit) {
vm.loadInitial()
}

Scaffold(
modifier = modifier.fillMaxSize(),
) { innerPadding ->
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
) {
when (val state = state) {
is FeedScreenUiState.Idle -> {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize(),
) {
EmptyFeed(
isRefreshing = false,
onRefresh = vm::refresh,
modifier = Modifier
.padding(innerPadding)
.fillMaxSize(),
)

IndicatedCardFeed(
currentItems = state.currentFeedItems,
like = vm::like,
dislike = vm::dislike,
modifier = Modifier.fillMaxSize(),
)
}
}

is FeedScreenUiState.NetworkError -> {
NetworkError(
onRefresh = vm::refresh,
onRetry = vm::retry,
isRefreshing = isRefreshing,
modifier = Modifier.fillMaxSize(),
)
}
PullToRefreshBox(
isRefreshing = isRefreshing,
state = pullToRefreshState,
onRefresh = vm::refresh,
indicator = {
PullToRefreshDefaults.LoadingIndicator(
modifier = Modifier
.safeDrawingPadding()
.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
containerColor = MaterialTheme.colorScheme.primaryContainer,
color = MaterialTheme.colorScheme.onPrimaryContainer,
state = pullToRefreshState,
)
},
modifier = modifier,
) {
Scaffold(
modifier = modifier.fillMaxSize(),
) { innerPadding ->
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(innerPadding),
) {
ScaffoldContent(vm, state)
}
}
}
}

is FeedScreenUiState.EmptyFeed -> {
@Composable
private fun ScaffoldContent(
vm: FeedScreenViewModel,
state: FeedScreenUiState,
) {
AnimatedContent(
targetState = state,
) { state ->
when (val state = state) {
is FeedScreenUiState.Idle -> {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize(),
) {
EmptyFeed(
isRefreshing = isRefreshing,
onRefresh = vm::refresh,
modifier = Modifier
.padding(innerPadding)
.fillMaxSize(),
modifier = Modifier.fillMaxSize().padding(16.dp),
)
}

is FeedScreenUiState.ServerError -> {
ServerError(
onRefresh = vm::refresh,
isRefreshing = isRefreshing,
IndicatedCardFeed(
currentItems = state.currentFeedItems,
like = vm::like,
dislike = vm::dislike,
modifier = Modifier.fillMaxSize(),
)
}
}

is FeedScreenUiState.Loading -> {
LoadingState()
}
is FeedScreenUiState.NetworkError -> {
NetworkError(
onRetry = vm::retry,
modifier = Modifier.fillMaxSize().padding(16.dp),
)
}

is FeedScreenUiState.EmptyFeed -> {
EmptyFeed(
modifier = Modifier.fillMaxSize().padding(16.dp),
)
}

is FeedScreenUiState.ServerError -> {
ServerError(
modifier = Modifier.fillMaxSize().padding(16.dp),
)
}

is FeedScreenUiState.Loading -> {
LoadingState()
}
}
}
Expand All @@ -134,7 +154,6 @@ private fun isRefreshing(state: FeedScreenUiState): Boolean = when (state) {
}

@Composable
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
private fun LoadingState() {
Box(
contentAlignment = Alignment.Center,
Expand All @@ -146,117 +165,55 @@ private fun LoadingState() {

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
private fun EmptyFeed(
isRefreshing: Boolean,
onRefresh: () -> Unit,
modifier: Modifier = Modifier,
) {
val pullToRefreshState = rememberPullToRefreshState()
PullToRefreshBox(
isRefreshing = isRefreshing,
state = pullToRefreshState,
onRefresh = onRefresh,
indicator = {
PullToRefreshDefaults.LoadingIndicator(
modifier = Modifier.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
containerColor = MaterialTheme.colorScheme.primaryContainer,
color = MaterialTheme.colorScheme.onPrimaryContainer,
state = pullToRefreshState,
)
},
private fun EmptyFeed(modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier,
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Icon(
painter = painterResource(R.drawable.ic_inbox),
contentDescription = null,
tint = MaterialTheme.colorScheme.outline,
)
Spacer(Modifier.height(8.dp))
Text(
text = stringResource(R.string.you_re_all_caught_up),
style = MaterialTheme.typography.headlineSmall,
)
Spacer(Modifier.height(8.dp))
Text(
text = stringResource(R.string.add_more_friends_feed_text),
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.outline,
)
}
Icon(
painter = painterResource(R.drawable.ic_inbox),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.size(64.dp),
)

Spacer(Modifier.height(16.dp))

Text(
text = stringResource(R.string.you_re_all_caught_up),
style = MaterialTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface,
)
Text(
text = stringResource(R.string.add_more_friends_feed_text),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
textAlign = TextAlign.Center,
)
}
}

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
private fun ServerError(
isRefreshing: Boolean,
onRefresh: () -> Unit,
modifier: Modifier = Modifier,
) {
val pullToRefreshState = rememberPullToRefreshState()
PullToRefreshBox(
isRefreshing = isRefreshing,
state = pullToRefreshState,
onRefresh = onRefresh,
indicator = {
PullToRefreshDefaults.LoadingIndicator(
modifier = Modifier.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
containerColor = MaterialTheme.colorScheme.primaryContainer,
color = MaterialTheme.colorScheme.onPrimaryContainer,
state = pullToRefreshState,
)
},
modifier = modifier,
private fun ServerError(modifier: Modifier = Modifier) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Text("Server error")
}
Text("Server error")
}
}

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
private fun NetworkError(
onRefresh: () -> Unit,
onRetry: () -> Unit,
isRefreshing: Boolean,
modifier: Modifier = Modifier,
) {
val pullToRefreshState = rememberPullToRefreshState()
PullToRefreshBox(
isRefreshing = isRefreshing,
state = pullToRefreshState,
onRefresh = onRefresh,
indicator = {
PullToRefreshDefaults.LoadingIndicator(
modifier = Modifier.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
containerColor = MaterialTheme.colorScheme.primaryContainer,
color = MaterialTheme.colorScheme.onPrimaryContainer,
state = pullToRefreshState,
)
},
modifier = modifier,
) {
NetworkErrorBox(
onRetry = onRetry,
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
)
}
private fun NetworkError(onRetry: () -> Unit, modifier: Modifier = Modifier) {
NetworkErrorBox(
onRetry = onRetry,
modifier = modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
)
}
Loading