Skip to content

Commit 72551e6

Browse files
SmartToolFactorySmartToolFactory
committed
add Material2 Color Selection demo
1 parent d5d4f39 commit 72551e6

File tree

7 files changed

+236
-20
lines changed

7 files changed

+236
-20
lines changed

‎app/build.gradle‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,19 @@ dependencies {
4949

5050
implementation project(':extendedcolors')
5151
implementation 'androidx.core:core-ktx:1.7.0'
52+
5253
implementation "androidx.compose.ui:ui:$compose_version"
5354
implementation "androidx.compose.material:material:$compose_version"
5455
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
55-
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
56-
implementation 'androidx.activity:activity-compose:1.3.1'
56+
57+
def accompanist_version = "0.24.6-alpha"
58+
// Accompanist
59+
implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
60+
implementation "com.google.accompanist:accompanist-pager:$accompanist_version"
61+
implementation "com.google.accompanist:accompanist-drawablepainter:$accompanist_version"
62+
63+
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
64+
implementation 'androidx.activity:activity-compose:1.4.0'
5765
testImplementation 'junit:junit:4.13.2'
5866
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
5967
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/MainActivity.kt‎

Lines changed: 79 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,25 @@ package com.smarttoolfactory.composecolorsextended
33
import android.os.Bundle
44
import androidx.activity.ComponentActivity
55
import androidx.activity.compose.setContent
6+
import androidx.compose.animation.ExperimentalAnimationApi
7+
import androidx.compose.foundation.layout.Column
68
import androidx.compose.foundation.layout.fillMaxSize
7-
import androidx.compose.material.MaterialTheme
8-
import androidx.compose.material.Surface
9-
import androidx.compose.material.Text
10-
import androidx.compose.runtime.Composable
9+
import androidx.compose.material.*
10+
import androidx.compose.runtime.*
1111
import androidx.compose.ui.Modifier
1212
import androidx.compose.ui.graphics.Color
13-
import androidx.compose.ui.tooling.preview.Preview
13+
import androidx.compose.ui.unit.dp
14+
import com.google.accompanist.pager.ExperimentalPagerApi
15+
import com.google.accompanist.pager.HorizontalPager
16+
import com.google.accompanist.pager.PagerState
17+
import com.google.accompanist.pager.rememberPagerState
18+
import com.google.accompanist.systemuicontroller.rememberSystemUiController
19+
import com.smarttoolfactory.composecolorsextended.demo.MaterialColorSelectionDemo
20+
import com.smarttoolfactory.composecolorsextended.demo.PrimaryColorSelectionDemo
1421
import com.smarttoolfactory.composecolorsextended.ui.theme.ComposeColorsExtendedTheme
15-
import com.smarttoolfactory.extendedcolors.MaterialSwatches
22+
import kotlinx.coroutines.launch
1623

24+
@OptIn(ExperimentalPagerApi::class)
1725
class MainActivity : ComponentActivity() {
1826

1927
override fun onCreate(savedInstanceState: Bundle?) {
@@ -25,22 +33,77 @@ class MainActivity : ComponentActivity() {
2533
modifier = Modifier.fillMaxSize(),
2634
color = MaterialTheme.colors.background
2735
) {
28-
36+
Column(modifier = Modifier.fillMaxSize()) {
37+
HomeContent()
38+
}
2939
}
3040
}
3141
}
3242
}
3343
}
3444

45+
@ExperimentalPagerApi
46+
@OptIn(ExperimentalAnimationApi::class)
3547
@Composable
36-
fun Greeting(name: String) {
37-
Text(text = "Hello $name!")
38-
}
48+
private fun HomeContent() {
3949

40-
@Preview(showBackground = true)
41-
@Composable
42-
fun DefaultPreview() {
43-
ComposeColorsExtendedTheme {
44-
Greeting("Android")
50+
val pagerState: PagerState = rememberPagerState(initialPage = 0)
51+
var backgroundColor by remember { mutableStateOf(Color(0xff03a9f4)) }
52+
var contentColor by remember { mutableStateOf(Color.White) }
53+
54+
val systemUiController = rememberSystemUiController()
55+
56+
systemUiController.setStatusBarColor(
57+
color = backgroundColor
58+
)
59+
60+
val coroutineScope = rememberCoroutineScope()
61+
62+
ScrollableTabRow(
63+
backgroundColor = backgroundColor,
64+
contentColor = contentColor,
65+
edgePadding = 8.dp,
66+
// Our selected tab is our current page
67+
selectedTabIndex = pagerState.currentPage,
68+
// Override the indicator, using the provided pagerTabIndicatorOffset modifier
69+
indicator = {}
70+
) {
71+
// Add tabs for all of our pages
72+
tabList.forEachIndexed { index, title ->
73+
Tab(
74+
text = { Text(title) },
75+
selected = pagerState.currentPage == index,
76+
onClick = {
77+
coroutineScope.launch {
78+
pagerState.animateScrollToPage(index)
79+
}
80+
}
81+
)
82+
}
4583
}
46-
}
84+
85+
HorizontalPager(
86+
state = pagerState,
87+
count = tabList.size
88+
) { page: Int ->
89+
90+
when (page) {
91+
0 -> PrimaryColorSelectionDemo {
92+
backgroundColor = it
93+
}
94+
else -> MaterialColorSelectionDemo {
95+
backgroundColor = it
96+
}
97+
}
98+
}
99+
}
100+
101+
internal val tabList =
102+
listOf(
103+
"MD2 Primary Colors",
104+
"MD2 Material Colors",
105+
"MD3 Shades",
106+
"Color Names",
107+
"Gradient Angles",
108+
"Color Conversions",
109+
)

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/MaterialColorPicker.kt‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
package com.smarttoolfactory.composecolorsextended
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.lazy.LazyColumn
7+
import androidx.compose.foundation.lazy.itemsIndexed
8+
import androidx.compose.foundation.shape.CircleShape
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material.Divider
11+
import androidx.compose.material.Text
12+
import androidx.compose.runtime.*
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.draw.clip
16+
import androidx.compose.ui.draw.shadow
17+
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.graphics.graphicsLayer
19+
import androidx.compose.ui.text.font.FontWeight
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
import com.smarttoolfactory.extendedcolors.ColorSwatch
23+
import com.smarttoolfactory.extendedcolors.util.colorToHex
24+
25+
@Composable
26+
fun MaterialColorPicker(onColorChange: (Color) -> Unit) {
27+
28+
var headerIndex by remember { mutableStateOf(0) }
29+
var selectedColorIndex by remember { mutableStateOf(-1) }
30+
31+
Row(modifier = Modifier.fillMaxSize()) {
32+
LazyColumn(
33+
verticalArrangement = Arrangement.spacedBy(8.dp),
34+
contentPadding = PaddingValues(horizontal = 8.dp, vertical = 8.dp)
35+
) {
36+
itemsIndexed(ColorSwatch.HeaderColors) { index: Int, item: Color ->
37+
Header(
38+
modifier = Modifier
39+
.padding(horizontal = 2.dp)
40+
.clip(CircleShape)
41+
.size(60.dp)
42+
.clickable {
43+
headerIndex = index
44+
}, color = item
45+
)
46+
}
47+
}
48+
49+
val colorSwatch: LinkedHashMap<Int, Color> = ColorSwatch.primaryColorSwatches[headerIndex]
50+
51+
val keys: List<Int> = colorSwatch.keys.toList()
52+
val colors: List<Color> = colorSwatch.values.toList()
53+
54+
val result: Result<List<Color>> =
55+
runCatching { ColorSwatch.accentColorSwatches[headerIndex].values.toList() }
56+
57+
58+
Divider(
59+
modifier = Modifier
60+
.fillMaxHeight()
61+
.width(1.dp)
62+
.background(Color.LightGray)
63+
)
64+
65+
LazyColumn(
66+
modifier = Modifier.fillMaxWidth(),
67+
verticalArrangement = Arrangement.spacedBy(10.dp),
68+
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 8.dp)
69+
) {
70+
itemsIndexed(colors) { index: Int, item: Color ->
71+
ColorRowWithInfo(
72+
modifier =
73+
Modifier
74+
.graphicsLayer {
75+
scaleY = if (selectedColorIndex == index) 1.03f else 1f
76+
scaleX = if (selectedColorIndex == index) 1.03f else 1f
77+
}
78+
.shadow(2.dp, RoundedCornerShape(4.dp))
79+
.fillMaxWidth()
80+
.clickable {
81+
selectedColorIndex = index
82+
onColorChange(item)
83+
},
84+
title = keys[index].toString(),
85+
color = item,
86+
textColor = if (index < 5) Color.Black else Color.White
87+
)
88+
}
89+
}
90+
}
91+
}
92+
93+
@Composable
94+
fun Header(modifier: Modifier, color: Color) {
95+
Box(
96+
modifier = modifier
97+
.background(color)
98+
)
99+
}
100+
101+
@Composable
102+
fun ColorRowWithInfo(
103+
modifier: Modifier,
104+
title: String,
105+
color: Color,
106+
textColor: Color
107+
) {
108+
Row(
109+
modifier
110+
.background(color)
111+
.padding(16.dp),
112+
verticalAlignment = Alignment.CenterVertically
113+
) {
114+
Text(text = title, color = textColor, fontSize = 22.sp)
115+
Spacer(modifier = Modifier.weight(1f))
116+
Text(
117+
text = colorToHex(color),
118+
color = textColor,
119+
fontSize = 24.sp,
120+
fontWeight = FontWeight.Bold
121+
)
122+
}
123+
}

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MaterialColorSelectionDemo.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.smarttoolfactory.composecolorsextended.demo
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.graphics.Color
5+
import com.smarttoolfactory.composecolorsextended.MaterialColorPicker
6+
7+
@Composable
8+
fun MaterialColorSelectionDemo(onColorChange: (Color) -> Unit) {
9+
MaterialColorPicker(onColorChange = onColorChange)
10+
}

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/PrimaryColorSelectionDemo.kt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
package com.smarttoolfactory.composecolorsextended.demo
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.graphics.Color
5+
import com.smarttoolfactory.composecolorsextended.MaterialColorPicker
6+
7+
@Composable
8+
fun PrimaryColorSelectionDemo(onColorChange: (Color) -> Unit) {
9+
MaterialColorPicker(onColorChange = onColorChange)
10+
}
11+

‎app/src/main/res/values/colors.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77
<color name="teal_700">#FF018786</color>
88
<color name="black">#FF000000</color>
99
<color name="white">#FFFFFFFF</color>
10+
<color name="blue_stf">#03a9f4</color>
1011
</resources>

‎app/src/main/res/values/themes.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<resources>
2+
<resources xmlns:tools="http://schemas.android.com/tools">
33

44
<style name="Theme.ComposeColorsExtended" parent="android:Theme.Material.Light.NoActionBar">
5-
<item name="android:statusBarColor">@color/purple_700</item>
5+
<item name="android:statusBarColor" tools:targetApi="l">@color/blue_stf</item>
66
</style>
77
</resources>

0 commit comments

Comments
 (0)