CenterAlignedTopAppBar in screen template

core/base/src/main/res/values/strings.xml

@@ -1102,6 +1102,7 @@
     <string name="enable_unit_group_description">Enable unit group</string>
     <string name="reorder_unit_group_description">Reorder unit group</string>
     <string name="disable_unit_group_description">Disable unit group</string>
+    <string name="open_menu_description">Open menu</string>
 
     <string name="app_version_name_setting">Version name</string>
     <string name="about_unitto">About Unitto</string>

core/ui/src/main/java/com/sadellie/unitto/core/ui/common/MenuButton.kt

@@ -0,0 +1,42 @@
+/*
+ * Unitto is a unit converter for Android
+ * Copyright (c) 2022 Elshan Agaev
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.sadellie.unitto.core.ui.common
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.MenuOpen
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import com.sadellie.unitto.core.ui.R
+
+/**
+ * Button that is used in Top bars
+ *
+ * @param onClick Action to be called when button is clicked.
+ */
+@Composable
+fun MenuButton(onClick: () -> Unit) {
+    IconButton(onClick = onClick) {
+        Icon(
+            Icons.Outlined.MenuOpen,
+            contentDescription = stringResource(R.string.open_menu_description)
+        )
+    }
+}

core/ui/src/main/java/com/sadellie/unitto/core/ui/common/UnittoScreenWithTopBar.kt

@@ -20,39 +20,38 @@ package com.sadellie.unitto.core.ui.common
 
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 
 /**
- * Commonly used TopAppBar with scroll behavior.
+ * Template screen. Uses [Scaffold] and [CenterAlignedTopAppBar]
  *
- * @param title Text that is displayed in top bar.
+ * @param modifier See [Scaffold]
- * @param navigateUpAction Action when user click arrow button at the top.
+ * @param title See [CenterAlignedTopAppBar]
- * @param content Content that can be scrolled. Don't forget to use padding values.
+ * @param navigationIcon See [CenterAlignedTopAppBar]
+ * @param actions See [CenterAlignedTopAppBar]
+ * @param colors See [CenterAlignedTopAppBar]
+ * @param content See [Scaffold]
  */
 @Composable
-fun UnittoTopAppBar(
+fun UnittoScreenWithTopBar(
-    title: String,
+    modifier: Modifier = Modifier,
-    navigateUpAction: () -> Unit,
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable () -> Unit,
     actions: @Composable RowScope.() -> Unit = {},
     colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
     content: @Composable (PaddingValues) -> Unit
 ) {
     Scaffold(
-        modifier = Modifier,
+        modifier = modifier,
         topBar = {
-            TopAppBar(
+            CenterAlignedTopAppBar(
-                title = {
+                title = title,
-                    Text(text = title)
+                navigationIcon = navigationIcon,
-                },
-                navigationIcon = {
-                    NavigateUpButton { navigateUpAction() }
-                },
                 actions = actions,
                 colors = colors
             )

feature/calculator/src/main/java/com/sadellie/unitto/feature/calculator/CalculatorScreen.kt

@@ -60,7 +60,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import com.sadellie.unitto.core.ui.common.UnittoTopAppBar
+import com.sadellie.unitto.core.ui.common.MenuButton
+import com.sadellie.unitto.core.ui.common.UnittoScreenWithTopBar
 import com.sadellie.unitto.core.ui.theme.NumbersTextStyleDisplayMedium
 import com.sadellie.unitto.data.model.HistoryItem
 import com.sadellie.unitto.feature.calculator.components.CalculatorKeyboard
@@ -112,9 +113,9 @@ private fun CalculatorScreen(
     var textThingyHeight by remember { mutableStateOf(0) }
     var historyItemHeight by remember { mutableStateOf(0) }
 
-    UnittoTopAppBar(
+    UnittoScreenWithTopBar(
-        title = stringResource(R.string.calculator),
+        title = { Text(stringResource(R.string.calculator)) },
-        navigateUpAction = navigateUpAction,
+        navigationIcon = { MenuButton { navigateUpAction() } },
         colors = TopAppBarDefaults.topAppBarColors(MaterialTheme.colorScheme.surfaceVariant),
         actions = {
             AnimatedVisibility(
@@ -179,7 +180,9 @@ private fun CalculatorScreen(
                     verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
                     InputTextField(
-                        modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp),
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 8.dp),
                         value = TextFieldValue(
                             text = uiState.input,
                             selection = TextRange(uiState.selection.first, uiState.selection.last)
@@ -188,7 +191,9 @@ private fun CalculatorScreen(
                         pasteCallback = addSymbol
                     )
                     Text(
-                        modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp),
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 8.dp),
                         text = uiState.output,
                         textAlign = TextAlign.End,
                         softWrap = false,

feature/epoch/src/main/java/com/sadellie/unitto/feature/epoch/EpochScreen.kt

@@ -19,6 +19,7 @@
 package com.sadellie.unitto.feature.epoch
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -26,8 +27,9 @@ import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.sadellie.unitto.core.ui.common.MenuButton
 import com.sadellie.unitto.core.ui.common.PortraitLandscape
-import com.sadellie.unitto.core.ui.common.UnittoTopAppBar
+import com.sadellie.unitto.core.ui.common.UnittoScreenWithTopBar
 import com.sadellie.unitto.feature.epoch.component.EpochKeyboard
 import com.sadellie.unitto.feature.epoch.component.TopPart
 
@@ -58,9 +60,9 @@ private fun EpochScreen(
     swap: () -> Unit,
     onCursorChange: (IntRange) -> Unit
 ) {
-    UnittoTopAppBar(
+    UnittoScreenWithTopBar(
-        title = stringResource(R.string.epoch_converter),
+        title = { Text(stringResource(R.string.epoch_converter)) },
-        navigateUpAction = navigateUpAction
+        navigationIcon = { MenuButton { navigateUpAction() } }
     ) { padding ->
         PortraitLandscape(
             modifier = Modifier.padding(padding),