From 2efe5ac67202b6b103b9199618977bbc80a2e3c9 Mon Sep 17 00:00:00 2001 From: Eton Otieno Date: Mon, 10 Jun 2024 08:59:40 +0300 Subject: [PATCH 1/2] Enable compose build features to fix Previews --- BeeTablesCompose/build.gradle.kts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/BeeTablesCompose/build.gradle.kts b/BeeTablesCompose/build.gradle.kts index 387dfdd..a5d91a0 100644 --- a/BeeTablesCompose/build.gradle.kts +++ b/BeeTablesCompose/build.gradle.kts @@ -52,6 +52,9 @@ android { excludes += "/META-INF/{AL2.0,LGPL2.1}" } } + buildFeatures { + compose = true + } } dependencies { From 292976de2592500feae511fd0177708a0262dfb7 Mon Sep 17 00:00:00 2001 From: Eton Otieno Date: Tue, 11 Jun 2024 09:18:29 +0300 Subject: [PATCH 2/2] Add preview for the sample app --- app/build.gradle.kts | 4 + .../breens/beetablescompose/MainActivity.kt | 400 +++++++++--------- 2 files changed, 211 insertions(+), 193 deletions(-) diff --git a/app/build.gradle.kts b/app/build.gradle.kts index e4255b9..c930a29 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -43,6 +43,7 @@ android { getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro", ) + signingConfig = signingConfigs.getByName("debug") } } compileOptions { @@ -57,6 +58,9 @@ android { excludes += "/META-INF/{AL2.0,LGPL2.1}" } } + buildFeatures { + compose = true + } } dependencies { diff --git a/app/src/main/java/com/breens/beetablescompose/MainActivity.kt b/app/src/main/java/com/breens/beetablescompose/MainActivity.kt index 4cbdbbf..4ce8146 100644 --- a/app/src/main/java/com/breens/beetablescompose/MainActivity.kt +++ b/app/src/main/java/com/breens/beetablescompose/MainActivity.kt @@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn @@ -32,6 +33,7 @@ import androidx.compose.material3.Slider import androidx.compose.material3.Surface import androidx.compose.material3.Switch import androidx.compose.material3.Text +import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -40,6 +42,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.breens.beetablescompose.ui.theme.BeeTablesComposeTheme import com.breens.beetablescompose.utils.premierLeagueTeams @@ -50,221 +53,232 @@ class MainActivity : ComponentActivity() { super.onCreate(savedInstanceState) setContent { BeeTablesComposeTheme { - Surface( - color = MaterialTheme.colorScheme.background, - ) { - var disableVerticalDividers by remember { - mutableStateOf(false) - } - var horizontalDividerThickness by remember { - mutableStateOf(0.6f) - } - - var enableHeaderTitles by remember { - mutableStateOf(false) - } + MainUi() + } + } + } +} - var centerContent by remember { - mutableStateOf(false) - } +@Composable +fun MainUi(modifier: Modifier = Modifier) { + Surface( + color = MaterialTheme.colorScheme.background, + modifier = modifier.fillMaxSize(), + ) { + var disableVerticalDividers by remember { + mutableStateOf(false) + } + var horizontalDividerThickness by remember { + mutableStateOf(0.6f) + } - var centerTextAlignment by remember { - mutableStateOf(false) - } + var enableHeaderTitles by remember { + mutableStateOf(false) + } - var increaseColumnWidth by remember { - mutableStateOf(null) - } + var centerContent by remember { + mutableStateOf(false) + } - LazyColumn(contentPadding = PaddingValues(16.dp)) { - item { - BeeTablesCompose( - data = premierLeagueTeams, - enableTableHeaderTitles = enableHeaderTitles, - disableVerticalDividers = disableVerticalDividers, - dividerThickness = horizontalDividerThickness.dp, - columnToIndexIncreaseWidth = increaseColumnWidth?.minus(1), - headerTableTitles = titles, - headerTitlesBackGroundColor = Color(0XFFE9AB17), - tableRowColors = listOf( - MaterialTheme.colorScheme.surface, - MaterialTheme.colorScheme.surface, - ), - contentAlignment = if (centerContent) Alignment.Center else Alignment.CenterStart, - textAlign = if (centerTextAlignment) TextAlign.Center else TextAlign.Start, - ) + var centerTextAlignment by remember { + mutableStateOf(false) + } - Spacer(modifier = Modifier.padding(12.dp)) - } + var increaseColumnWidth by remember { + mutableStateOf(null) + } + LazyColumn(contentPadding = PaddingValues(16.dp)) { + item { + BeeTablesCompose( + data = premierLeagueTeams, + enableTableHeaderTitles = enableHeaderTitles, + disableVerticalDividers = disableVerticalDividers, + dividerThickness = horizontalDividerThickness.dp, + columnToIndexIncreaseWidth = increaseColumnWidth?.minus(1), + headerTableTitles = titles, + headerTitlesBackGroundColor = Color(0XFFE9AB17), + tableRowColors = listOf( + MaterialTheme.colorScheme.surface, + MaterialTheme.colorScheme.surface, + ), + contentAlignment = if (centerContent) Alignment.Center else Alignment.CenterStart, + textAlign = if (centerTextAlignment) TextAlign.Center else TextAlign.Start, + ) + } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Enable Table Header Titles", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = enableHeaderTitles, - onCheckedChange = { - enableHeaderTitles = it - }, - ) - } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Enable Table Header Titles", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = enableHeaderTitles, + onCheckedChange = { + enableHeaderTitles = it + }, + ) + } - Spacer(modifier = Modifier.padding(12.dp)) - } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Hide Vertical Divider", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = disableVerticalDividers, - onCheckedChange = { - disableVerticalDividers = it - }, - ) - } + Spacer(modifier = Modifier.padding(12.dp)) + } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Hide Vertical Divider", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = disableVerticalDividers, + onCheckedChange = { + disableVerticalDividers = it + }, + ) + } - Spacer(modifier = Modifier.padding(8.dp)) - } + Spacer(modifier = Modifier.padding(8.dp)) + } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Divider Thickness", - style = MaterialTheme.typography.bodyMedium, - ) + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Divider Thickness", + style = MaterialTheme.typography.bodyMedium, + ) - Slider(value = horizontalDividerThickness, onValueChange = { - horizontalDividerThickness = it - }) - } - } + Slider(value = horizontalDividerThickness, onValueChange = { + horizontalDividerThickness = it + }) + } + } - item { - Spacer(modifier = Modifier.padding(12.dp)) + item { + Spacer(modifier = Modifier.padding(12.dp)) - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Center Content", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = centerContent, - onCheckedChange = { - centerContent = it - }, - ) - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Center Content", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = centerContent, + onCheckedChange = { + centerContent = it + }, + ) + } - Spacer(modifier = Modifier.padding(12.dp)) - } + Spacer(modifier = Modifier.padding(12.dp)) + } - item { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "Text Alignment Center", - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - checked = centerTextAlignment, - onCheckedChange = { - centerTextAlignment = it - }, - ) - } + item { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "Text Alignment Center", + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + checked = centerTextAlignment, + onCheckedChange = { + centerTextAlignment = it + }, + ) + } - Spacer(modifier = Modifier.padding(12.dp)) - } + Spacer(modifier = Modifier.padding(12.dp)) + } - item { - Column { - Text( - text = "The Column To Increase Width", - style = MaterialTheme.typography.bodyMedium, - ) - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "1", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 1, - onCheckedChange = { - increaseColumnWidth = if (it) 1 else null - }, - ) - } + item { + Column { + Text( + text = "The Column To Increase Width", + style = MaterialTheme.typography.bodyMedium, + ) + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "1", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 1, + onCheckedChange = { + increaseColumnWidth = if (it) 1 else null + }, + ) + } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "2", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 2, - onCheckedChange = { - increaseColumnWidth = if (it) 2 else null - }, - ) - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "2", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 2, + onCheckedChange = { + increaseColumnWidth = if (it) 2 else null + }, + ) + } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "3", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 3, - onCheckedChange = { - increaseColumnWidth = if (it) 3 else null - }, - ) - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "3", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 3, + onCheckedChange = { + increaseColumnWidth = if (it) 3 else null + }, + ) + } - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - Text(text = "4", style = MaterialTheme.typography.bodySmall) - Checkbox( - checked = increaseColumnWidth == 4, - onCheckedChange = { - increaseColumnWidth = if (it) 4 else null - }, - ) - } - } - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + Text(text = "4", style = MaterialTheme.typography.bodySmall) + Checkbox( + checked = increaseColumnWidth == 4, + onCheckedChange = { + increaseColumnWidth = if (it) 4 else null + }, + ) } } } } } } + +@Preview +@Composable +private fun MainUiPreview() { + BeeTablesComposeTheme { + MainUi() + } +}