Cleanup Rally screens code & styling
Remove unnecessary containers, cleanup modifiers and
cleanup styling, paddings, etc according to actual
mocks for the main overview screen.
Also add an actual data structure to hold the static
data to avoid duplication.
Bug: 130636326
Test: run & compare appearance to mocks
Change-Id: I832d512f19b0521c29b8a8428b32b7e0d74da28a
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
index d9c4ece..0a4bd09 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/AccountsScreen.kt
@@ -54,7 +54,7 @@
)
Text(
text = "$12,132.49",
- style = MaterialTheme.typography().h3,
+ style = MaterialTheme.typography().h2,
modifier = LayoutGravity.Center
)
}
@@ -62,33 +62,14 @@
Spacer(LayoutHeight(10.dp))
Card {
Column(modifier = LayoutPadding(12.dp)) {
- AccountRow(
- name = "Checking",
- number = "1234",
- amount = "2,215.13",
- color = Color(0xFF005D57)
- )
- RallyDivider()
- AccountRow(
- name = "Home Savings",
- number = "5678",
- amount = "8,676.88",
- color = Color(0xFF04B97F)
- )
- RallyDivider()
- AccountRow(
- name = "Car Savings",
- number = "9012",
- amount = "987.48",
- color = Color(0xFF37EFBA)
- )
- RallyDivider()
- AccountRow(
- name = "Vacation",
- number = "3456",
- amount = "253",
- color = Color(0xFF005D57)
- )
+ UserData.accounts.forEach { account ->
+ AccountRow(
+ name = account.name,
+ number = account.number,
+ amount = account.balance,
+ color = account.color
+ )
+ }
}
}
}
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
index 4b6ea97..c3df6d8 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/BillsScreen.kt
@@ -54,42 +54,22 @@
)
Text(
text = "$1,810.00",
- style = MaterialTheme.typography().h3,
+ style = MaterialTheme.typography().h2,
modifier = LayoutGravity.Center
)
}
}
Spacer(LayoutHeight(10.dp))
Card {
- // TODO: change to proper bill items
Column(modifier = LayoutPadding(12.dp)) {
- AccountRow(
- name = "RedPay Credit",
- number = "Jan 29",
- amount = "-45.36",
- color = Color(0xFF005D57)
- )
- RallyDivider()
- AccountRow(
- name = "Rent",
- number = "Feb 9",
- amount = "-1,200.00",
- color = Color(0xFF04B97F)
- )
- RallyDivider()
- AccountRow(
- name = "TabFine Credit",
- number = "Feb 22",
- amount = "-87.33",
- color = Color(0xFF37EFBA)
- )
- RallyDivider()
- AccountRow(
- name = "ABC Loans",
- number = "Feb 29",
- amount = "-400.00",
- color = Color(0xFF005D57)
- )
+ UserData.bills.forEach { bill ->
+ BillRow(
+ name = bill.name,
+ due = bill.due,
+ amount = bill.amount,
+ color = bill.color
+ )
+ }
}
}
}
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
index b5d8bec..552fb54 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/CommonUi.kt
@@ -17,43 +17,111 @@
package androidx.ui.material.studies.rally
import androidx.compose.Composable
+import androidx.ui.core.Modifier
import androidx.ui.core.Text
import androidx.ui.foundation.ColoredRect
import androidx.ui.graphics.Color
+import androidx.ui.layout.Arrangement
import androidx.ui.layout.Column
-import androidx.ui.layout.LayoutPadding
+import androidx.ui.layout.LayoutGravity
+import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutWidth
import androidx.ui.layout.Row
import androidx.ui.layout.Spacer
import androidx.ui.material.Divider
import androidx.ui.material.MaterialTheme
+import androidx.ui.material.icons.Icons
+import androidx.ui.material.icons.filled.ArrowForwardIos
import androidx.ui.unit.dp
+import java.text.DecimalFormat
/**
- * A row within the Accounts card in the Rally Overview screen.
+ * A row representing the basic information of an Account.
*/
@Composable
-fun AccountRow(name: String, number: String, amount: String, color: Color) {
- Row(LayoutPadding(top = 12.dp, bottom = 12.dp)) {
+fun AccountRow(name: String, number: Int, amount: Float, color: Color) {
+ BaseRow(
+ color = color,
+ title = name,
+ subtitle = "• • • • • " + accountDecimalFormat.format(number),
+ amount = amount,
+ negative = false
+ )
+}
+
+/**
+ * A row representing the basic information of a Bill.
+ */
+@Composable
+fun BillRow(name: String, due: String, amount: Float, color: Color) {
+ BaseRow(
+ color = color,
+ title = name,
+ subtitle = "Due $due",
+ amount = amount,
+ negative = true
+ )
+}
+
+@Composable
+private fun BaseRow(
+ color: Color,
+ title: String,
+ subtitle: String,
+ amount: Float,
+ negative: Boolean
+) {
+ Row(LayoutHeight(68.dp)) {
val typography = MaterialTheme.typography()
- AccountIndicator(color = color)
+ AccountIndicator(color = color, modifier = LayoutGravity.Center)
Spacer(LayoutWidth(8.dp))
- Column {
- Text(text = name, style = typography.body1)
- Text(text = "•••••$number", style = typography.subtitle1)
+ Column(LayoutGravity.Center) {
+ Text(text = title, style = typography.body1)
+ Text(text = subtitle, style = typography.subtitle1)
}
Spacer(LayoutFlexible(1f))
- Text(text = "$ $amount", style = typography.h6)
+ Row(
+ modifier = LayoutGravity.Center + LayoutWidth(113.dp),
+ arrangement = Arrangement.SpaceBetween
+ ) {
+ Text(
+ text = if (negative) "–$ " else "$ ",
+ style = typography.h6,
+ modifier = LayoutGravity.Center
+ )
+ Text(
+ text = formatAmount(amount),
+ style = typography.h6,
+ modifier = LayoutGravity.Center
+ )
+ }
+ Spacer(LayoutWidth(16.dp))
+ Icon(
+ Icons.Filled.ArrowForwardIos,
+ tintColor = Color.White.copy(alpha = 0.6f),
+ modifier = LayoutGravity.Center,
+ size = 12.dp
+ )
}
+ RallyDivider()
}
/**
- * A vertical colored line that is used in a [AccountRow] to differentiate accounts.
+ * A vertical colored line that is used in a [BaseRow] to differentiate accounts.
*/
@Composable
-private fun AccountIndicator(color: Color) {
- ColoredRect(color = color, width = 4.dp, height = 36.dp)
+private fun AccountIndicator(color: Color, modifier: Modifier = Modifier.None) {
+ ColoredRect(color = color, width = 4.dp, height = 36.dp, modifier = modifier)
}
@Composable
-fun RallyDivider() = Divider(color = MaterialTheme.colors().background, height = 2.dp)
+fun RallyDivider(modifier: Modifier = Modifier.None) {
+ Divider(color = MaterialTheme.colors().background, height = 1.dp, modifier = modifier)
+}
+
+fun formatAmount(amount: Float): String {
+ return amountDecimalFormat.format(amount)
+}
+
+private val accountDecimalFormat = DecimalFormat("####")
+private val amountDecimalFormat = DecimalFormat("#,###.##")
\ No newline at end of file
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
index 3c45637..1c9f577 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/Icons.kt
@@ -26,6 +26,7 @@
import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutWidth
import androidx.ui.material.ripple.Ripple
+import androidx.ui.unit.Dp
import androidx.ui.unit.dp
/**
@@ -50,8 +51,13 @@
* 24x24dp icon from a resource id.
*/
@Composable
-fun Icon(vectorImage: VectorAsset, tintColor: Color = Color.White) {
- Box(modifier = LayoutHeight(24.dp) + LayoutWidth(24.dp)) {
+fun Icon(
+ vectorImage: VectorAsset,
+ tintColor: Color = Color.White,
+ modifier: Modifier = Modifier.None,
+ size: Dp = 24.dp
+) {
+ Box(modifier = LayoutHeight(size) + LayoutWidth(size) + modifier) {
DrawVector(
vectorImage = vectorImage,
tintColor = tintColor
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
index 249e51800..e3cfde5 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/OverviewScreen.kt
@@ -16,15 +16,14 @@
package androidx.ui.material.studies.rally
+import android.annotation.SuppressLint
import androidx.compose.Composable
import androidx.compose.state
import androidx.ui.core.Text
-import androidx.ui.foundation.Clickable
import androidx.ui.foundation.VerticalScroller
-import androidx.ui.graphics.Color
import androidx.ui.layout.Arrangement
import androidx.ui.layout.Column
-import androidx.ui.layout.Container
+import androidx.ui.layout.EdgeInsets
import androidx.ui.layout.LayoutGravity
import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutPadding
@@ -36,7 +35,6 @@
import androidx.ui.material.TextButton
import androidx.ui.material.icons.Icons
import androidx.ui.material.icons.filled.Sort
-import androidx.ui.material.ripple.Ripple
import androidx.ui.material.surface.Card
import androidx.ui.unit.dp
import java.util.Locale
@@ -46,9 +44,9 @@
VerticalScroller {
Column(modifier = LayoutPadding(16.dp)) {
AlertCard()
- Spacer(LayoutHeight(10.dp))
+ Spacer(LayoutHeight(RallyDefaultPadding))
AccountsCard()
- Spacer(LayoutHeight(10.dp))
+ Spacer(LayoutHeight(RallyDefaultPadding))
BillsCard()
}
}
@@ -59,13 +57,13 @@
*/
@Composable
private fun AlertCard() {
- val openDialog = state { false }
+ var openDialog by state { false }
val alertMessage = "Heads up, you've used up 90% of your Shopping budget for this month."
- if (openDialog.value) {
+ if (openDialog) {
RallyAlertDialog(
>
- openDialog.value = false
+ openDialog = false
},
bodyText = alertMessage,
buttonText = "Dismiss".toUpperCase(Locale.getDefault())
@@ -73,37 +71,79 @@
}
Card {
Column {
- Ripple(bounded = true) {
- Clickable( openDialog.value = true }) {
- Container {
- Row(
- modifier = LayoutPadding(12.dp) + LayoutWidth.Fill,
- arrangement = Arrangement.SpaceBetween
- ) {
- Text(text = "Alerts", style = MaterialTheme.typography().subtitle2)
- TextButton( }) {
- Text("See All")
- }
- }
- }
- }
- }
- Divider(
- LayoutPadding(start = 12.dp, end = 12.dp),
- color = MaterialTheme.colors().background,
- height = 2.dp
+ AlertHeader({ openDialog = true })
+ RallyDivider(
+ modifier = LayoutPadding(start = RallyDefaultPadding, end = RallyDefaultPadding)
)
- Row(LayoutPadding(12.dp)) {
- Text(
- style = MaterialTheme.typography().body1,
- modifier = LayoutFlexible(1f),
- text = alertMessage
- )
- IconButton(
- vectorImage = Icons.Filled.Sort,
- >
- modifier = LayoutGravity.Top
- )
+ AlertItem(alertMessage)
+ }
+ }
+}
+
+@Composable
+private fun AlertHeader(onClickSeeAll: () -> Unit) {
+ Row(
+ modifier = LayoutPadding(RallyDefaultPadding) + LayoutWidth.Fill,
+ arrangement = Arrangement.SpaceBetween
+ ) {
+ Text(
+ text = "Alerts",
+ style = MaterialTheme.typography().subtitle2,
+ modifier = LayoutGravity.Center
+ )
+ TextButton(
+ >
+ paddings = EdgeInsets(0.dp),
+ modifier = LayoutGravity.Center
+ ) {
+ Text("SEE ALL")
+ }
+ }
+}
+
+@Composable
+private fun AlertItem(message: String) {
+ // TODO: Make alerts into a data structure
+ Row(
+ modifier = LayoutPadding(RallyDefaultPadding),
+ arrangement = Arrangement.SpaceBetween
+ ) {
+ Text(
+ style = MaterialTheme.typography().h3,
+ modifier = LayoutFlexible(1f),
+ text = message
+ )
+ IconButton(
+ vectorImage = Icons.Filled.Sort,
+ >
+ modifier = LayoutGravity.Top
+ )
+ }
+}
+
+/**
+ * Base structure for cards in the Overview screen.
+ */
+@SuppressLint("UnnecessaryLambdaCreation")
+@Composable
+private fun <T> OverviewScreenCard(
+ title: String,
+ amount: Float,
+ onClickSeeAll: () -> Unit,
+ data: List<T>,
+ row: @Composable() (T) -> Unit
+) {
+ Card {
+ Column {
+ Column(modifier = LayoutPadding(RallyDefaultPadding)) {
+ Text(text = title, style = MaterialTheme.typography().subtitle2)
+ val amountText = "$" + formatAmount(amount)
+ Text(text = amountText, style = MaterialTheme.typography().h2)
+ }
+ Divider(color = rallyGreen, height = 1.dp)
+ Column(LayoutPadding(start = 16.dp, top = 4.dp, end = 8.dp)) {
+ data.take(3).forEach { row(it) }
+ SeeAllButton(>
}
}
}
@@ -114,40 +154,21 @@
*/
@Composable
private fun AccountsCard() {
- Card {
- Column {
- Column(modifier = LayoutPadding(12.dp)) {
- Text(text = "Accounts", style = MaterialTheme.typography().body1)
- Text(text = "$12,132.49", style = MaterialTheme.typography().h3)
- }
- Divider(color = rallyGreen, height = 1.dp)
- Column(modifier = LayoutPadding(12.dp)) {
- AccountRow(
- name = "Checking",
- number = "1234",
- amount = "2,215.13",
- color = Color(0xFF005D57)
- )
- RallyDivider()
- AccountRow(
- name = "Home Savings",
- number = "5678",
- amount = "8,676.88",
- color = Color(0xFF04B97F)
- )
- RallyDivider()
- AccountRow(
- name = "Car Savings",
- number = "9012",
- amount = "987.48",
- color = Color(0xFF37EFBA)
- )
- RallyDivider()
- TextButton( }) {
- Text("See All")
- }
- }
- }
+ val amount = UserData.accounts.map { account -> account.balance }.sum()
+ OverviewScreenCard(
+ title = "Accounts",
+ amount = amount,
+ >
+ // TODO: Figure out navigation
+ },
+ data = UserData.accounts
+ ) { account ->
+ AccountRow(
+ name = account.name,
+ number = account.number,
+ amount = account.balance,
+ color = account.color
+ )
}
}
@@ -155,41 +176,33 @@
* The Bills card within the Rally Overview screen.
*/
@Composable
-fun BillsCard() {
- Card {
- Column {
- Column(modifier = LayoutPadding(12.dp)) {
- Text(text = "Bills", style = MaterialTheme.typography().subtitle2)
- Text(text = "$1,810.00", style = MaterialTheme.typography().h3)
- }
- Divider(color = rallyGreen, height = 1.dp)
- // TODO: change to proper bill items
- Column(modifier = LayoutPadding(12.dp)) {
- AccountRow(
- name = "RedPay Credit",
- number = "Jan 29",
- amount = "-45.36",
- color = Color(0xFF005D57)
- )
- RallyDivider()
- AccountRow(
- name = "Rent",
- number = "Feb 9",
- amount = "-1,200.00",
- color = Color(0xFF04B97F)
- )
- RallyDivider()
- AccountRow(
- name = "TabFine Credit",
- number = "Feb 22",
- amount = "-87.33",
- color = Color(0xFF37EFBA)
- )
- RallyDivider()
- TextButton( }) {
- Text("See All")
- }
- }
- }
+private fun BillsCard() {
+ val amount = UserData.bills.map { bill -> bill.amount }.sum()
+ OverviewScreenCard(
+ title = "Bills",
+ amount = amount,
+ >
+ // TODO: Figure out navigation
+ },
+ data = UserData.bills
+ ) { bill ->
+ BillRow(
+ name = bill.name,
+ due = bill.due,
+ amount = bill.amount,
+ color = bill.color
+ )
}
-}
\ No newline at end of file
+}
+
+@Composable
+private fun SeeAllButton(onClick: () -> Unit) {
+ TextButton(
+ >
+ modifier = LayoutHeight(44.dp) + LayoutWidth.Fill
+ ) {
+ Text("SEE ALL")
+ }
+}
+
+private val RallyDefaultPadding = 12.dp
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyData.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyData.kt
new file mode 100644
index 0000000..835d282
--- /dev/null
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyData.kt
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.ui.material.studies.rally
+
+import androidx.ui.graphics.Color
+
+data class Account(
+ val name: String,
+ val number: Int,
+ val balance: Float,
+ val color: Color
+)
+
+data class Bill(
+ val name: String,
+ val due: String,
+ val amount: Float,
+ val color: Color
+)
+
+object UserData {
+ val accounts: List<Account> = listOf(
+ Account("Checking", 1234, 2215.13f, Color(0xFF005D57)),
+ Account("Home Savings", 5678, 8676.88f, Color(0xFF005D57)),
+ Account("Car Savings", 9012, 987.48f, Color(0xFF04B97F)),
+ Account("Vacation", 3456, 253f, Color(0xFF37EFBA))
+ )
+ val bills: List<Bill> = listOf(
+ Bill("RedPay Credit", "Jan 29", 45.36f, Color(0xFFFFDC78)),
+ Bill("Rent", "Feb 9", 1200f, Color(0xFFFF6951)),
+ Bill("TabFine Credit", "Feb 22", 87.33f, Color(0xFFFFD7D0)),
+ Bill("ABC Loans", "Feb 29", 400f, Color(0xFFFFAC12)),
+ Bill("ABC Loans 2", "Feb 29", 77.4f, Color(0xFFFFAC12))
+ )
+}
\ No newline at end of file
diff --git a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyTheme.kt b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyTheme.kt
index cd071e9..ed90727 100644
--- a/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyTheme.kt
+++ b/ui/ui-material/integration-tests/material-studies/src/main/java/androidx/ui/material/studies/rally/RallyTheme.kt
@@ -28,16 +28,11 @@
import androidx.ui.unit.sp
val rallyGreen = Color(0xFF1EB980)
-val rallyDarkGreen = Color(0xFF045D56)
-val rallyOrange = Color(0xFFFF6859)
-val rallyYellow = Color(0xFFFFCF44)
-val rallyPurple = Color(0xFFB15DFF)
-val rallyBlue = Color(0xFF72DEFF)
@Composable
fun RallyTheme(children: @Composable() () -> Unit) {
val colors = darkColorPalette(
- primary = rallyGreen,
+ primary = Color.White,
surface = Color(0xFF26282F),
>
background = Color(0xFF26282F),
@@ -45,42 +40,47 @@
)
// TODO: Bundle Roboto Condensed and Eczar font files.
val typography = Typography(
+ // Unused
h1 = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W100,
fontSize = 96.sp),
h2 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W100,
- fontSize = 60.sp),
+ fontWeight = FontWeight.W600,
+ fontSize = 44.sp),
h3 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W500,
- fontSize = 48.sp),
+ fontWeight = FontWeight.W400,
+ fontSize = 14.sp),
+ // Unused
h4 = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W700,
fontSize = 34.sp),
+ // Unused
h5 = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W700,
fontSize = 24.sp),
- h6 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W700,
- fontSize = 20.sp),
+ h6 = TextStyle(fontFamily = FontFamily.Default, // Eczar
+ fontWeight = FontWeight.Normal,
+ fontSize = 18.sp),
subtitle1 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W700,
- fontSize = 16.sp),
+ fontWeight = FontWeight.W300,
+ fontSize = 14.sp),
subtitle2 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W500,
+ fontWeight = FontWeight.W400,
fontSize = 14.sp),
body1 = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W700,
+ fontWeight = FontWeight.Normal,
fontSize = 16.sp),
body2 = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W200,
fontSize = 14.sp),
button = TextStyle(fontFamily = FontFamily.Default,
- fontWeight = FontWeight.W800,
+ fontWeight = FontWeight.W700,
fontSize = 14.sp),
+ // Unused
caption = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W500,
fontSize = 12.sp),
+ // Unused
overline = TextStyle(fontFamily = FontFamily.Default,
fontWeight = FontWeight.W500,
fontSize = 10.sp)