Animated title in top bap

app/src/main/java/com/sadellie/unitto/screens/main/AnimatedTopBarText.kt

@@ -0,0 +1,55 @@
+/*
+ * 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.screens.main
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.with
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import com.sadellie.unitto.R
+
+/**
+ * Composable for MainScreen top bar title. Changes from "Hello" to "Unitto".
+ *
+ * @param showAppName When True will show app name, else will show "Hello"
+ */
+@Composable
+fun AnimatedTopBarText(showAppName: Boolean) {
+    AnimatedContent(
+        targetState = showAppName,
+        transitionSpec = {
+            fadeIn() + slideInVertically() with fadeOut() + slideOutVertically()
+        }
+    ) {
+        Text(
+            text = if (showAppName) stringResource(R.string.app_name) else stringResource(R.string.hello_label),
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.W600)
+        )
+    }
+}

app/src/main/java/com/sadellie/unitto/screens/main/MainScreen.kt

@@ -31,16 +31,18 @@ import androidx.compose.material.icons.outlined.MoreVert
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.sadellie.unitto.R
@@ -50,6 +52,7 @@ import com.sadellie.unitto.screens.MainScreenUIState
 import com.sadellie.unitto.screens.MainViewModel
 import com.sadellie.unitto.screens.main.components.Keyboard
 import com.sadellie.unitto.screens.main.components.TopScreenPart
+import kotlinx.coroutines.delay
 
 
 @Composable
@@ -57,17 +60,14 @@ fun MainScreen(
     navControllerAction: (String) -> Unit = {},
     viewModel: MainViewModel = viewModel()
 ) {
+    var launched: Boolean by rememberSaveable { mutableStateOf(false) }
+
     Scaffold(
         modifier = Modifier,
         topBar = {
             CenterAlignedTopAppBar(
                 modifier = Modifier,
-                title = {
-                    Text(
-                        text = stringResource(id = R.string.app_name),
-                        style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.W600)
-                    )
-                },
+                title = { AnimatedTopBarText(launched) },
                 actions = {
                     IconButton(onClick = { navControllerAction(SETTINGS_SCREEN) }) {
                         Icon(
@@ -97,6 +97,16 @@ fun MainScreen(
             )
         }
     )
+
+    LaunchedEffect(Unit) {
+        /**
+         * 1.5 seconds is enough for user to see "Hello" in app bar title. Also, since we are using
+         * Unit as key, "Hello" will be switched to app name only when composable is not getting
+         * recomposed for 1.5 seconds.
+         */
+        delay(1500)
+        launched = true
+    }
 }
 
 @Composable

app/src/main/res/values-en-rGB/strings.xml

@@ -741,5 +741,6 @@
     <string name="force_amoled_mode_support">Use black background for dark themes</string>
     <string name="color_theme">Colour theme</string>
     <string name="drop_down_description">Open or close drop down menu</string>
+    <string name="hello_label">Hello!</string>
 
 </resources>

app/src/main/res/values-ru/strings.xml

@@ -676,5 +676,6 @@
     <string name="force_amoled_mode_support">Использовать черный фон в темных темах</string>
     <string name="color_theme">Цветовая тема</string>
     <string name="drop_down_description">Открыть или закрыть меню</string>
+    <string name="hello_label">Привет!</string>
 
 </resources>

app/src/main/res/values/strings.xml

@@ -1005,6 +1005,7 @@
     <string name="search_bar_placeholder">Search units</string>
     <string name="search_placeholder">No results found</string>
     <string name="search_placeholder_secondary">Make sure there are no typos or try different filters</string>
+    <string name="hello_label">Hello!</string>
 
     <!--Content descriptions-->
     <string name="navigate_up_description">Navigate up</string>