Added composable for search bar to the android app (#12)

re #10

README.md

@@ -18,14 +18,14 @@ This is currently a playground to get to know with [Kotlin Mobile Multiplatform]
 
 ## Versions
 
-### 0.2 (Android MVP)
+### 0.2.* (Android MVP)
 **Main features**
 
-First Android views (List, detail, map) alongside the required `shared` features were implemented and tested.
+First Android views (List, detail, map, filter) alongside the required `shared` features were implemented and tested.
 
 **UI**
 
-![](docs/020-summary.png)
+![](docs/021-summary.png)
 
 ### 0.1 (Project setup)
 **Main features**

app/androidApp/build.gradle.kts

@@ -63,6 +63,10 @@ dependencies {
  implementation(navigation)
  implementation(activity)
  }
+
+ with(Dependencies.Koin) {
+ implementation(compose)
+ }
 }
 
 object Dependencies {
@@ -86,6 +90,10 @@ object Dependencies {
  const val activity = "androidx.activity:activity-compose:${Versions.Androidx.activity}"
  }
 
+ object Koin {
+ const val compose = "io.insert-koin:koin-androidx-compose:${Versions.Koin.version}"
+ }
+
  private object Versions {
  object Androidx {
  const val version = "1.4.0"
@@ -100,5 +108,9 @@ object Dependencies {
  const val version = "2.11.2"
  const val playServices = "18.1.0"
  }
+
+ object Koin {
+ const val version = "3.4.3"
+ }
  }
 }

app/androidApp/src/main/AndroidManifest.xml

@@ -3,6 +3,7 @@
  <uses-permission android:name="android.permission.INTERNET" />
 
  <application
+ android:name=".MainApplication"
  android:allowBackup="false"
  android:supportsRtl="true"
  android:icon="@drawable/common_google_signin_btn_text_light"
@@ -17,7 +18,6 @@
  android:name="com.google.android.gms.version"
  android:value="@integer/google_play_services_version" />
 
-
  <activity
  android:name=".MainActivity"
  android:exported="true">

app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/MainActivity.kt

@@ -8,6 +8,9 @@ import io.github.tscholze.kennzeichner.android.composables.screens.NavigationCon
 class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
+
+ // MARK: - UI -
+
  setContent {
  NavigationContainer()
  }

app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/MainApplication.kt

@@ -0,0 +1,20 @@
+package io.github.tscholze.kennzeichner.android
+
+import android.app.Application
+import io.github.tscholze.kennzeichner.android.di.appModule
+import org.koin.android.ext.koin.androidContext
+import org.koin.android.ext.koin.androidLogger
+import org.koin.core.context.startKoin
+
+class MainApplication : Application(){
+ override fun onCreate() {
+ super.onCreate()
+
+ // Setup koin
+ startKoin{
+ androidContext(this@MainApplication)
+ androidLogger()
+ modules(appModule)
+ }
+ }
+}

app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/composables/components/KennScaffold.kt

@@ -22,6 +22,7 @@ import androidx.compose.material.icons.rounded.Place
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -78,49 +79,35 @@ internal fun KennScaffold(
 
  @Composable
  fun KennBottomAppBar() {
+ // MARK: - Properties -
 
  val currentRoute = navController.currentBackStackEntry?.destination?.route ?: ""
+ val items = listOf(BottomNavigationItemData.List, BottomNavigationItemData.Map)
 
- BottomAppBar {
- // List
- BottomNavigationItem(
- icon = {
- Icon(
- Icons.Rounded.List,
- contentDescription = stringResource(R.string.tabitem_list_title)
- )
- },
- label = {
- Text(
- text = stringResource(R.string.tabitem_list_title),
- fontSize = 10.sp
- )
- },
- selected = currentRoute.contains("regions"),
- onClick = {
- navController.navigate("regions")
- }
- )
+ // MARK: - UI -
 
- // Map
- BottomNavigationItem(
- icon = {
- Icon(
- Icons.Rounded.Place,
- contentDescription = stringResource(R.string.tabitem_map_title)
- )
- },
- label = {
- Text(
- text = stringResource(R.string.tabitem_map_title),
- fontSize = 10.sp
- )
- },
- selected = currentRoute == "map",
- onClick = {
- navController.navigate("map")
- }
- )
+ BottomAppBar {
+ items.map { item ->
+ // List
+ BottomNavigationItem(
+ icon = {
+ Icon(
+ item.icon,
+ contentDescription = stringResource(id = item.title)
+ )
+ },
+ label = {
+ Text(
+ text = stringResource(id = item.title),
+ fontSize = 10.sp
+ )
+ },
+ selected = currentRoute.contains(item.route),
+ onClick = {
+ navController.navigate(item.route)
+ }
+ )
+ }
  }
  }
 
@@ -142,4 +129,22 @@ internal fun KennScaffold(
  }
  }
  }
+}
+
+sealed class BottomNavigationItemData(
+ val title: Int,
+ val icon: ImageVector,
+ val route: String
+ ) {
+ object List: BottomNavigationItemData(
+ R.string.tabitem_map_title,
+ Icons.Rounded.List,
+ "regions"
+ )
+
+ object Map: BottomNavigationItemData(
+ R.string.tabitem_map_title,
+ Icons.Rounded.Place,
+ "map"
+ )
 }

app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/composables/components/RegionDetails.kt → app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/composables/components/RegionInformation.kt

@@ -23,7 +23,7 @@ import java.text.NumberFormat
  * @param region: Region that shall be rendered.
  */
 @Composable
-fun RegionDetails(region: Region) {
+fun RegionInformation(region: Region) {
  Row(
  modifier = Modifier.padding(8.dp),
  verticalAlignment = Alignment.CenterVertically,

app/androidApp/src/main/java/io/github/tscholze/kennzeichner/android/composables/components/SearchBar.kt

@@ -0,0 +1,73 @@
+package io.github.tscholze.kennzeichner.android.composables.components
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.material.TextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+import io.github.tscholze.kennzeichner.android.R
+
+/**
+ * Represents a search bar.
+ * If the user types or clears the search bar text the state
+ * property will be updated.
+ *
+ * @param state: Observable state of the search query.
+ */
+@Composable
+fun SearchBar(state: MutableState<String>) {
+ // MARK: - Properties -
+
+ val focusManager = LocalFocusManager.current
+
+ // MARK: - UI -
+
+ TextField(
+ modifier = Modifier.fillMaxWidth(),
+ value = state.value,
+ onValueChange = { state.value = it },
+ singleLine = true,
+ placeholder = { Text(stringResource(R.string.searchbar_text_placeholder))
+ },
+ leadingIcon = {
+ Icon(
+ Icons.Default.Search,
+ contentDescription = "Search icon",
+ )
+ },
+ trailingIcon = {
+ if (state.value.isNotEmpty()) {
+ IconButton(
+ onClick = {
+ state.value = ""
+ focusManager.moveFocus(FocusDirection.Next)
+ }
+ ) {
+ Icon(
+ Icons.Default.Close,
+ contentDescription = "Clear icon",
+ )
+ }
+ }
+ },
+ keyboardActions = KeyboardActions(
+ onAny = { focusManager.clearFocus() }
+ ),
+ keyboardOptions = KeyboardOptions(
+ autoCorrect = false,
+ imeAction = ImeAction.Search
+ )
+ )
+}