🪓 Extended FAB Implemented.

aritra-tech · Jul 20, 2023 · 8ab2688 · 8ab2688
1 parent 0e8ee01
commit 8ab2688
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 41 deletions.
diff --git a/app/src/main/java/com/aritra/notify/navigation/NotifyApp.kt b/app/src/main/java/com/aritra/notify/navigation/NotifyApp.kt
@@ -2,6 +2,7 @@ package com.aritra.notify.navigation
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Home
 import androidx.compose.material.icons.rounded.Settings

diff --git a/app/src/main/java/com/aritra/notify/screens/notes/homeScreen/HomeScreen.kt b/app/src/main/java/com/aritra/notify/screens/notes/homeScreen/HomeScreen.kt
@@ -3,67 +3,48 @@
 package com.aritra.notify.screens.notes.homeScreen
 
 
-import android.view.MotionEvent
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateFloatAsState
+
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.rounded.Add
-import androidx.compose.material3.BottomSheetScaffold
-import androidx.compose.material3.Button
+import androidx.compose.material.icons.outlined.Edit
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.DismissDirection.*
 import androidx.compose.material3.DismissValue.*
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SearchBar
-import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.material3.Surface
-import androidx.compose.material3.SwipeToDismiss
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberBottomSheetScaffoldState
-import androidx.compose.material3.rememberDismissState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.input.pointer.pointerInteropFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.Font
@@ -72,15 +53,11 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
-import androidx.lifecycle.viewmodel.compose.viewModel
 import com.aritra.notify.R
 import com.aritra.notify.components.dialog.TextDialog
 import com.aritra.notify.components.topbar.TopBar
 import com.aritra.notify.data.models.Note
 import com.aritra.notify.utils.Const
-import kotlinx.coroutines.Job
-import kotlinx.coroutines.coroutineScope
-import kotlinx.coroutines.delay
 import me.saket.swipe.SwipeAction
 import me.saket.swipe.SwipeableActionsBox
 import java.text.SimpleDateFormat
@@ -97,18 +74,23 @@ fun HomeScreen(
     val listOfAllNotes by viewModel.listOfNotes.observeAsState(listOf())
     var searchQuery by rememberSaveable { mutableStateOf("") }
 
+    val scrollState = rememberLazyListState()
+    val fabVisibleState = scrollState.firstVisibleItemIndex > 0
+
     Scaffold(
         topBar = { TopBar() },
         floatingActionButton = {
-            FloatingActionButton(
-                modifier = Modifier.padding(0.dp, 0.dp, 20.dp, 5.dp),
-                onClick = { onFabClicked() }
-            ) {
-                Icon(
-                    imageVector = Icons.Rounded.Add,
-                    contentDescription = "Add FAB"
-                )
-            }
+            ExtendedFloatingActionButton(
+                text = { Text(text = "Compose") },
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.Edit,
+                        contentDescription = null
+                    )
+                },
+                onClick = { onFabClicked() },
+                expanded = !fabVisibleState
+            )
         },
     ) {
         Surface(
@@ -145,12 +127,13 @@ fun HomeScreen(
                 LazyColumn(
                     modifier = Modifier
                         .fillMaxSize()
-                        .padding(0.dp, 5.dp, 0.dp, 0.dp)
+                        .padding(0.dp, 5.dp, 0.dp, 0.dp),
+                    state = scrollState
                 ) {
 
                     if (listOfAllNotes.isNotEmpty()) {
                         items(listOfAllNotes.filter { note ->
-                            note.title.contains(searchQuery,true)
+                            note.title.contains(searchQuery, true)
                         }) { notesModel ->
                             SwapDelete(notesModel, viewModel, navigateToUpdateNoteScreen)
                         }
@@ -243,7 +226,10 @@ fun NotesCard(
             )
             Spacer(modifier = Modifier.height(10.dp))
             val formattedDateTime =
-                SimpleDateFormat(Const.DATE_TIME_FORMAT, Locale.getDefault()).format(noteModel.dateTime)
+                SimpleDateFormat(
+                    Const.DATE_TIME_FORMAT,
+                    Locale.getDefault()
+                ).format(noteModel.dateTime)
             Text(
                 text = formattedDateTime,
                 fontSize = 14.sp,