Skip to content

Commit 81bc54d

Browse files
philips77philips77
authored
Merge pull request #160 from NordicSemiconductor/improvements/ui
UI Improvements
2 parents 6aad6ef + a8da171 commit 81bc54d

File tree

3 files changed

+247
-18
lines changed

3 files changed

+247
-18
lines changed

‎ui/src/main/java/no/nordicsemi/android/common/ui/view/ActionIconButton.kt‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@file:Suppress("unused")
2+
3+
package no.nordicsemi.android.common.ui.view
4+
5+
import androidx.compose.foundation.BorderStroke
6+
import androidx.compose.foundation.layout.defaultMinSize
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.material3.ButtonDefaults
10+
import androidx.compose.material3.CircularProgressIndicator
11+
import androidx.compose.material3.Icon
12+
import androidx.compose.material3.IconButton
13+
import androidx.compose.material3.LocalContentColor
14+
import androidx.compose.material3.OutlinedButton
15+
import androidx.compose.material3.ProgressIndicatorDefaults
16+
import androidx.compose.material3.Text
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.ui.Modifier
19+
import androidx.compose.ui.graphics.Color
20+
import androidx.compose.ui.graphics.painter.Painter
21+
import androidx.compose.ui.graphics.vector.ImageVector
22+
import androidx.compose.ui.graphics.vector.rememberVectorPainter
23+
import androidx.compose.ui.unit.dp
24+
25+
/**
26+
* Common outlined button with an icon.
27+
*
28+
* @param modifier Modifier to be used for the button.
29+
* @param isInProgress Boolean flag that will indicate if the action is in progress and
30+
* this will show a progress indicator in front of the button text.
31+
* @param icon ImageVector to be shown int he button icon.
32+
* @param iconTint Color to be used as tint for the button icon.
33+
* @param onClick Action to be performed on button click.
34+
* @param enabled Flag to enable or disable the button.
35+
*/
36+
@Composable
37+
fun ActionIconButton(
38+
modifier: Modifier = Modifier,
39+
icon: Painter,
40+
iconTint: Color? = null,
41+
onClick: () -> Unit,
42+
isInProgress: Boolean = false,
43+
enabled: Boolean = true,
44+
) {
45+
IconButton(
46+
modifier = modifier,
47+
enabled = enabled,
48+
onClick = onClick,
49+
) {
50+
when {
51+
isInProgress -> {
52+
CircularProgressIndicator(
53+
modifier = Modifier.size(size = 24.dp),
54+
color = iconTint ?: ProgressIndicatorDefaults.circularColor
55+
)
56+
}
57+
else -> {
58+
Icon(
59+
painter = icon,
60+
contentDescription = null,
61+
tint = iconTint ?: LocalContentColor.current,
62+
)
63+
}
64+
}
65+
}
66+
}
67+
/**
68+
* Common outlined button with an icon.
69+
*
70+
* @param modifier Modifier to be used for the button.
71+
* @param isInProgress Boolean flag that will indicate if the action is in progress and
72+
* this will show a progress indicator in front of the button text.
73+
* @param icon ImageVector to be shown int he button icon.
74+
* @param iconTint Color to be used as tint for the button icon.
75+
* @param onClick Action to be performed on button click.
76+
* @param enabled Flag to enable or disable the button.
77+
*/
78+
@Composable
79+
fun ActionIconButton(
80+
modifier: Modifier = Modifier,
81+
icon: ImageVector,
82+
iconTint: Color? = null,
83+
onClick: () -> Unit,
84+
isInProgress: Boolean = false,
85+
enabled: Boolean = true,
86+
) {
87+
ActionIconButton(
88+
modifier = modifier,
89+
icon = rememberVectorPainter(image = icon),
90+
iconTint = iconTint,
91+
isInProgress = isInProgress,
92+
onClick = onClick,
93+
enabled = enabled,
94+
)
95+
}

‎ui/src/main/java/no/nordicsemi/android/common/ui/view/ActionOutlineButton.kt‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
@file:Suppress("unused")
2+
3+
package no.nordicsemi.android.common.ui.view
4+
5+
import androidx.compose.foundation.BorderStroke
6+
import androidx.compose.foundation.layout.defaultMinSize
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.material3.ButtonDefaults
10+
import androidx.compose.material3.CircularProgressIndicator
11+
import androidx.compose.material3.Icon
12+
import androidx.compose.material3.LocalContentColor
13+
import androidx.compose.material3.OutlinedButton
14+
import androidx.compose.material3.ProgressIndicatorDefaults
15+
import androidx.compose.material3.Text
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.graphics.painter.Painter
20+
import androidx.compose.ui.graphics.vector.ImageVector
21+
import androidx.compose.ui.graphics.vector.rememberVectorPainter
22+
import androidx.compose.ui.unit.dp
23+
24+
/**
25+
* Common outlined button with an icon, that can change to a progress indicator.
26+
*
27+
* @param modifier Modifier to be used for the button.
28+
* @param text Text to be shown on the button.
29+
* @param textColor Color of the text.
30+
* @param icon A painter to be shown in the button icon.
31+
* @param iconTint Color of the icon, defaults to the current content color.
32+
* @param isInProgress A flag that will indicate if the action is in progress and
33+
* this will show a progress indicator in front of the button text instead
34+
* of the icon.
35+
* @param onClick Action to be performed on button click.
36+
* @param enabled Flag to enable or disable the button.
37+
* @param border Border to be used for the button.
38+
*/
39+
@Composable
40+
fun ActionOutlinedButton(
41+
modifier: Modifier = Modifier,
42+
text: String,
43+
textColor: Color = Color.Unspecified,
44+
icon: Painter,
45+
iconTint: Color? = null,
46+
isInProgress: Boolean = false,
47+
onClick: () -> Unit,
48+
enabled: Boolean = true,
49+
border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled = enabled),
50+
) {
51+
OutlinedButton(
52+
modifier = modifier.defaultMinSize(minWidth = 120.dp),
53+
border = border,
54+
enabled = enabled,
55+
onClick = onClick,
56+
) {
57+
when {
58+
isInProgress -> {
59+
CircularProgressIndicator(
60+
modifier = Modifier.size(size = 24.dp),
61+
color = iconTint ?: ProgressIndicatorDefaults.circularColor,
62+
)
63+
}
64+
else -> {
65+
Icon(
66+
painter = icon,
67+
contentDescription = null,
68+
tint = iconTint ?: LocalContentColor.current,
69+
)
70+
}
71+
}
72+
Text(
73+
modifier = modifier.padding(start = 8.dp),
74+
text = text,
75+
color = textColor,
76+
)
77+
}
78+
}
79+
80+
/**
81+
* Common outlined button with an icon, that can change to a progress indicator.
82+
*
83+
* @param modifier Modifier to be used for the button.
84+
* @param text Text to be shown on the button.
85+
* @param textColor Color of the text.
86+
* @param icon A ImageVector to be shown in the button icon.
87+
* @param iconTint Color of the icon, defaults to the current content color.
88+
* @param isInProgress A flag that will indicate if the action is in progress and
89+
* this will show a progress indicator in front of the button text instead
90+
* of the icon.
91+
* @param onClick Action to be performed on button click.
92+
* @param enabled Flag to enable or disable the button.
93+
* @param border Border to be used for the button.
94+
*/
95+
@Composable
96+
fun ActionOutlinedButton(
97+
modifier: Modifier = Modifier,
98+
text: String,
99+
textColor: Color = Color.Unspecified,
100+
icon: ImageVector,
101+
iconTint: Color? = null,
102+
isInProgress: Boolean = false,
103+
onClick: () -> Unit,
104+
enabled: Boolean = true,
105+
border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled = enabled),
106+
) {
107+
ActionOutlinedButton(
108+
modifier = modifier,
109+
text = text,
110+
textColor = textColor,
111+
icon = rememberVectorPainter(image = icon),
112+
iconTint = iconTint,
113+
isInProgress = isInProgress,
114+
onClick = onClick,
115+
enabled = enabled,
116+
border = border,
117+
)
118+
}

‎ui/src/main/java/no/nordicsemi/android/common/ui/view/SectionTitle.kt‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,23 @@ package no.nordicsemi.android.common.ui.view
3535

3636
import androidx.compose.foundation.layout.Arrangement
3737
import androidx.compose.foundation.layout.Row
38-
import androidx.compose.foundation.layout.Spacer
39-
import androidx.compose.foundation.layout.size
38+
import androidx.compose.foundation.layout.RowScope
39+
import androidx.compose.material3.Icon
4040
import androidx.compose.material3.MaterialTheme
41+
import androidx.compose.material3.OutlinedButton
42+
import androidx.compose.material3.Switch
4143
import androidx.compose.material3.Text
4244
import androidx.compose.runtime.Composable
4345
import androidx.compose.ui.Alignment
4446
import androidx.compose.ui.Modifier
47+
import androidx.compose.ui.graphics.Color
4548
import androidx.compose.ui.graphics.painter.Painter
4649
import androidx.compose.ui.graphics.vector.ImageVector
4750
import androidx.compose.ui.graphics.vector.rememberVectorPainter
4851
import androidx.compose.ui.res.painterResource
49-
import androidx.compose.ui.text.font.FontWeight
5052
import androidx.compose.ui.text.style.TextAlign
5153
import androidx.compose.ui.tooling.preview.Preview
5254
import androidx.compose.ui.unit.dp
53-
import androidx.compose.ui.unit.sp
5455
import no.nordicsemi.android.common.ui.R
5556

5657
/**
@@ -67,25 +68,26 @@ fun SectionTitle(
6768
painter: Painter,
6869
title: String,
6970
modifier: Modifier = Modifier,
70-
menu: @Composable (() -> Unit)? = null,
71+
tint: Color = MaterialTheme.colorScheme.primary,
72+
menu: @Composable (RowScope.() -> Unit)? = null,
7173
) {
7274
Row(
7375
modifier = modifier,
7476
verticalAlignment = Alignment.CenterVertically,
75-
horizontalArrangement = Arrangement.Start
77+
horizontalArrangement = Arrangement.spacedBy(16.dp)
7678
) {
77-
CircularIcon(painter)
78-
79-
Spacer(modifier = Modifier.size(8.dp))
80-
79+
Icon(
80+
painter = painter,
81+
contentDescription = null,
82+
tint = tint,
83+
)
8184
Text(
8285
text = title,
8386
textAlign = TextAlign.Start,
84-
fontSize = 24.sp,
85-
fontWeight = FontWeight.Bold,
87+
style = MaterialTheme.typography.titleMedium,
8688
modifier = Modifier.weight(1f)
8789
)
88-
menu?.invoke()
90+
menu?.invoke(this)
8991
}
9092
}
9193

@@ -103,20 +105,34 @@ fun SectionTitle(
103105
icon: ImageVector,
104106
title: String,
105107
modifier: Modifier = Modifier,
106-
menu: @Composable (() -> Unit)? = null,
108+
tint: Color = MaterialTheme.colorScheme.primary,
109+
menu: @Composable (RowScope.() -> Unit)? = null,
107110
) {
108111
SectionTitle(
109112
painter = rememberVectorPainter(image = icon),
110113
title = title,
114+
modifier = modifier,
115+
tint = tint,
111116
menu = menu,
112-
modifier = modifier
113117
)
114118
}
115119

116120
@Preview(showBackground = true)
117121
@Composable
118122
private fun SectionTitlePreview() {
119-
MaterialTheme {
120-
SectionTitle(painter = painterResource(R.drawable.baseline_add_24), title = "Title")
121-
}
123+
SectionTitle(
124+
painter = painterResource(R.drawable.baseline_add_24),
125+
title = "Title",
126+
menu = {
127+
Switch(
128+
checked = true,
129+
onCheckedChange = {},
130+
)
131+
OutlinedButton(
132+
onClick = {},
133+
) {
134+
Text("Button")
135+
}
136+
}
137+
)
122138
}

0 commit comments

Comments
 (0)