Meet Aamir Kamal

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

13719

Abstract

"hljs-keyword">else 1 - (item.offset.toFloat() + item.size) / (layoutInfo.viewportSize.height + item.size) }

<span class="hljs-keyword">else</span> -&gt; <span class="hljs-number">1f</span>

}</pre></div>Then for each element that gets animated; I used its scroll progress as a driver for its animation. This allowed me to create custom animations for elements when they scroll in and out of the screen.<div id="bda3"><pre>// Using progress to drive animation val parallaxProgress by remember { derivedStateOf { scrollState.scrollProgressFor(11) } } ParallaxImages( parallaxProgress = parallaxProgress, topImagePath = wonder.photo3, bottomImagePath = wonder.photo4, )</pre></div><h1 id="4dc3">MapView — Integrating platform-specific views</h1><figure id="0eb3"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*EsBzMKMPEbI3RwkI7aOHCQ.png"><figcaption></figcaption></figure>There is currently no out-of-box solution for displaying Maps in compose multiplatform. Being relatively new, Compose multiplatform doesn’t enjoy the library ecosystem as large as Flutter. But that might not even be needed… thanks to Koltin Multiplatform.Kotlin multiplatform (KMP) is the technology that Compose Multiplatform itself is built upon. Generally, writing code that can interoperate with platform APIs is a difficult task. In Flutter for example; you have to create MethodChanels, which requires you to make the caller function asynchronous. You also need to pass the data in the form of primitive types. You also need to ensure you are naming the methods right on all the target platforms. KMP makes it a breeze to share code between multiple platforms while providing platform-specific implementations. It becomes easy to create your own small multiplatform library using KMP.This example of MapView demonstrates how platform-specific implementation can be created. It implements a cross-platform MapView using. It is not as good as a true cross-platform library from a single vendor, but it’s a good starting point.<ul><li>Google Maps library for Android</li><li>MKMapView for iOS</li><li>Map module extracted from the official sample for JVM desktop</li><li>OpenLayers javascript library for Web</li></ul>In short, you write an <code>expect</code>ed function signature in the common source set, and in the platform-specific source set, you provide an <code>actual</code> implementation. This is similar(not the same) to how you define an interface and then provide its implementation.<div id="9a71"><pre>// Function with "expect" modifier has no body @Composable expect fun MapView( modifier: Modifier, gps: GpsPosition, title: String, parentScrollEnableState: MutableState<Boolean> = mutableStateOf(true), zoomLevel: Float = 10f, mapType: MapType = MapType.Normal, )</pre></div>This is the function that will be used in the common UI code. But the Kotlin compiler won’t be happy till we provide <code>actual</code> implementations of this function for all the platforms.For Android, the actual implementation uses <code>GoogleMap</code> from Maps Compose Library. This library itself uses the View-based Google Map library internally. Compose provides an interoperability layer in the form of <code>AndroidView</code> that allows us to use platform-specific UI elements.<div id="f4ff"><pre>// In Android module the actual implementation is provided @OptIn(ExperimentalComposeUiApi::class) @Composable actual fun MapView( modifier: Modifier, gps: GpsPosition, title: String, parentScrollEnableState: MutableState<Boolean>, zoomLevel: Float, mapType: MapType ) { // .... // We can embed native Android View here via AndroidView GoogleMap( modifier = modifier, cameraPositionState = cameraPositionState, properties = MapProperties(mapType = mapType.toGoogleMapType()) ) { val markerState = rememberMarkerState(position = currentLocation) Marker(markerState) } }</pre></div>Here in IOS implementation, you can see Compose’s interoperability in action. <code>UIKitView</code> is a composable function that allows embedding UIKit elements inside Compose. The <code>MKMapView</code> is not a Compose function; it’s a native UIKit view written in Objective-C; called from Kotlin 🤯.<div id="aeab"><pre>// actual IOS implementation @OptIn(ExperimentalForeignApi::class) @Composable actual fun MapView( modifier: Modifier, gps: GpsPosition, title: String, parentScrollEnableState: MutableState<Boolean>, zoomLevel: Float, mapType: MapType ) { val location = CLLocationCoordinate2DMake(gps.latitude, gps.longitude) val annotation = remember { MKPointAnnotation( location, title = null, subtitle = null ) } annotation.setTitle(title) UIKitView( modifier = modifier, factory = { // Initializing MKMapView MKMapView().apply { addAnnotation(annotation) setMapType(mapType.toAppleMapType()) } }, update = { it.addAnnotations(listOf(MKPointAnnotation(location))) it.setRegion( MKCoordinateRegionMakeWithDistance( centerCoordinate = location, zoomLevel * 10_000.0, zoomLevel * 10_000.0 ), animated = false ) } ) }

fun MapType.toAppleMapType() = when (this) { MapType.Normal -> MKMapTypeStandard MapType.Satellite -> MKMapTypeSatellite }</pre></div>For the desktop platform, Compose once again provides interoperability with Swing via <code>SwingPanel</code> composable. Since unfortunately I couldn’t find any Swing-based map viewer; I chose to copy <code>mapview-desktop</code> module which is a pure Compose based module from official samples.For web targets, Compose for now doesn’t provide any out-of-box solution for embedding HTML content inside composables. Here I’ve used a <a href="https://github.com/Hamamas/Kotlin-Wasm-Html-Interop">Kotlin-Wasm-Html-Interop</a> by Soufiane Hamama to embed <a href="https://openlayers.org/">OpenLayers</a> map.<div id="f4bb"><pre>// Actual WASM implementation actual fun MapView( modifier: Modifier, latLng: LatLng, title: String, parentScrollEnableState: MutableState<Boolean>, zoomLevel: Float, mapType: MapType ) { val map = remember { openlayersmap.Map() } val adjustedZoomLevel = zoomLevel * 5f

<span class="hljs-comment">// https://github.com/Hamamas/Kotlin-Wasm-Html-Interop</span>
HtmlView(
    modifier = modifier,
    factory = {
        createElement(<span class="hljs-string">"div"</span>).apply {
            id = <span class="hljs-string">"map"</span>
        }
    },
    update = {
        <span class="hljs-comment">// Calling OpenLayers Javascript code from here</span>
        <span class="hljs-keyword">val</span> center = fromLonLat(LonLat(latLng.longitude, latLng.latitude))
        <span class="hljs-keyword">val</span> tileLayer = TileLayer(TileLayerOptions(source = mapType.toOlSource()))
        <span class="hljs-keyword">val</span> vectorLayerForMaker = Vector(
            VectorOptions(
                source = VectorSource(VectorSourceOptions(feature = Feature(Point(center)))),
                style = DEFAULT_MARKER_STYLE,
            ),
        )
        <span class="hljs-keyword">val</span> view = View(
            ViewOptions(
                center = center,
                zoom = adjustedZoomLevel,
                maxZoom = MAX_ZOOM
            )
        )
        map.apply {
            setTarget(<span class="hljs-string">"map"</span>)
            setLayers(jsArrayOf(tileLayer, vectorLayerForMaker))
            setView(view)
        }
    },
)

}</pre></div><h1 id="fd5f">Photo Gallery — Custom Layout and Gesture detection</h1>In this screen; instead of using built-in <code>LazyVerticalGridView</code> which supports scrolling in only one direction; I created a custom grid layout. This <code>SimpleGrid</code> Layout simply puts its children in a grid :P<div id="f7fa"><pre>@Composable fun SimpleGrid( modifier: Modifier = Modifier, columnCount: Int, content: @Composable () -> Unit, ) { Layout( modifier = modifier, content = content ) { measurables, constraints ->

    <span class="hljs-keyword">val</span> placeables = measurables.map { it.measure(constraints) }

    layout(constraints.maxWidth, constraints.maxHeight) {
        <span class="hljs-keyword">var</span> x = <span class="hljs-number">0</span>
        <span class="hljs-keyword">var</span> y = <span class="hljs-number">0</span>
        placeables.chunked(columnCount).forEach { placeables -&gt;
            placeables.forEach { placeable -&gt;
                <span class="hljs-comment">// placing in a row</span>
                placeable.place(x, y)
                x += placeable.width
            }
            x = <span class="hljs-number">0</span> <span class="hljs-comment">// reset x</span>
            y += placeables.maxOf { it.height } <span class="hljs-comment">// move to next row</span>
        }
    }
}

}</pre></div>You can see here how easy it is to create custom layouts in Compose.<ul><li>First, call <code>Layout</code> function providing it the Composable content you want to lay out.</li><li>In the callback, the first parameter we receive is the measurables which is the list of actual UI elements (children) that will be placed in our layout. The second parameter is the constraints provided by the parent.</li><li>By measuring the measurables to our constraints we receive a list of placeables.</li><li>And then finally we place those placeables by providing their x and y coordinates.</li></ul><figure id="6266"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*Kq2zdNjP9Iv6nYxbQroV0Q.png"><figcaption></figcaption></figure>Here for example; the items are placed in a row by incrementing their x values by their widths; then for the next row x value is reset to 0 and the y value is incre

Options

mented by the height of the tallest element in that row. The placement is relative to top-left corner of the element. You could add item spacing logic pretty easily, but I handled it by applying padding around individual items.<h2 id="d204">Eight-Way Gesture Detector</h2>The tricky part of this screen was gesture recognition. To allow users to swipe in any of the 8 directions a custom modifier was created. This Modifier detects swipes in 8 directions and sends the normalized vector representing the direction.<div id="4e8c"><pre>/**

the [onSwipe] callback receives normalized direction.
(-1, -1) left-top
(1, 1) right-bottom */ fun Modifier.eightWaySwipeDetector( minDragLength: Int = 20, onSwipe: (direction: Offset) -> Unit, ) = composed { var offset: Offset = Offset.Zero pointerInput(Unit) { detectDragGestures( onDragEnd = { if (abs(offset.x) > minDragLength || abs(offset.y) > minDragLength) { val normalizedOffset = offset.normalizedDirection() if (normalizedOffset != Offset.Zero) onSwipe(normalizedOffset) } offset = Offset.Zero }, ) { change, dragAmount -> change.consume() offset += dragAmount } } }</pre></div>This uses lower-level <code>pointerInput</code> APIs to get drag amount using <code>detectDragGesture</code> . This drag is accumulated until it ends. If the accumulated drag is larger than <code>minSwipeLenght</code>; its normalized value (swipe direction) is sent through the callback, else it is ignored.<h1 id="77c2">Artifact Details Screen — Logic in UI layer</h1>This screen has some data-fetching logic. It fetches artifact data from the Metropolitan Museum of Art. Since the amount of logic here is minimal; I’ve chosen to keep it in the Composable function itself. Ideally, a ViewModel should be used here; but I’ve kept it for demonstration purposes.First, the repository (which handles communication logic) is instantiated in a<code>remember</code> call. As compose may re-execute the Composable functions to react to the state changes; our repository will be created again and again. Wrapping it in <code>remember</code> is the way to keep an instance of it in the memory.<div id="766c"><pre>@Composable fun ArtifactDetailsScreen( artifactId: String, onClickBack: () -> Unit, ) { // This is not an ideal way to handle data fetching. Use ViewModel instead. val repo = remember { MetRepository() } var result by remember { mutableStateOf<Result<ArtifactData?>?>(null) } LaunchedEffect(artifactId) { // This will only run once, when the artifactId changes result = repo.getArtifactById(artifactId) }

// UI

}</pre></div>Then to store the result of the API call; I created another <code>remember</code>ed variable called <code>result</code>. The result itself is wrapped in a <code>MutableState</code> . This is the way to notify the Compose framework that when this value gets updated; UI also needs to be updated. Finally to trigger the API call; <code>LaunchedEffect</code> with key <code>artifactId</code> is used. This may look similar to <code>useEffect</code> from React. The <code>artifcatId</code> key provided ensures <code>LaunchedEffect</code> only re-runs our API function when the user selects a different artifact.<h1 id="5b7f">Artifact List Screen — Logic in ViewModel (MVVM)</h1>This screen shows all the artifacts for a wonder and allows searching them. As this screen contains some business logic; a <a href="https://readmedium.com/viewmodels-a-simple-example-ed5ac416317e">ViewModel</a> is used here.<blockquote id="027f">ViewModel is the businees logic holder that survives recompositions and configuration changes (Android). It is supposed to be free from framework or platform dependencies.</blockquote>The <code>ArtifactListViewModel</code> receives the current wonder as input and then it exposes some observable State properties and functions to mutate those properties.For example here the ViewModel exposes <code>searchText</code>, <code>suggestions</code>, and <code>filteredArtifacts</code> states and an <code>onSearch</code> and <code>onQueryChange</code> functions to the UI. UI observes the states and displays the UI. When the user performs any action; it invokes the functions which in turn update the states.<div id="b091"><pre>class ArtifactListViewModel(wonder: Wonder) : ViewModel() {

<span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> allSuggestions = wonder.searchSuggestions
<span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> allArtifacts = wonder.searchData

<span class="hljs-keyword">val</span> searchText = MutableStateFlow(<span class="hljs-string">""</span>)

<span class="hljs-keyword">val</span> suggestions = searchText.map {
    <span class="hljs-keyword">if</span> (it.isBlank()) allSuggestions
    <span class="hljs-keyword">else</span> allSuggestions.filter { suggestion -&gt;
        suggestion.contains(it.lowercase())
    }
}.stateIn(
    viewModelScope,
    SharingStarted.WhileSubscribed(<span class="hljs-number">5000</span>),
    allSuggestions
)


<span class="hljs-keyword">val</span> filteredArtifacts = MutableStateFlow(allArtifacts)

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onQueryChange</span><span class="hljs-params">(query: <span class="hljs-type">String</span>)</span></span> = searchText.update { query }

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onSearch</span><span class="hljs-params">(suggestion: <span class="hljs-type">String</span>)</span></span> {
    filteredArtifacts.update {
        allArtifacts.filter { artifact -&gt;
            artifact.title.lowercase().contains(suggestion) ||
                    artifact.keywords.lowercase().contains(suggestion)
        }
    }
}

}</pre></div><h1 id="308d">Wonders Timeline — Logic in the UI controller</h1><figure id="116a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*IFu-2N3C3-JPZ1PRXFGIww.gif"><figcaption></figcaption></figure>This screen presents a timeline of all the important events and the construction period of all the wonders. This screen displays the current year based on how far the user has scrolled and also animates to a certain location based on selected Wonder. I thought it would be nice if I could abstract away this logic. This was a perfect opportunity to create a UI state-holder named <code>TimelineState</code> .<code>TimelineState</code> class is a view state holder class that simply wraps a <code>ScrollState</code> and exposes its methods and properties in terms of years instead of pixels. For example, <code>ScrollState</code> has <code>scrollTo</code> method which requires pixel offset for scrolling. <code>TimelineState</code> exposes this as <code>scrollToYear</code> which requires a target year to which you want to scroll.<blockquote id="17f8">Compose uses State classes to abstract/store UI components state. Such as TextFieldState. In Flutter world this kind of class is generally called a Controller such as TextEditingController. Besides naming and how observable data is exposed or retained; there’s not much difference here.</blockquote><div id="78b4"><pre>class TimelineState(initialScroll: Int = 0) { val scrollState = ScrollState(initialScroll) var scale by mutableStateOf(1.dp) private set

<span class="hljs-keyword">val</span> timelineHeight <span class="hljs-keyword">get</span>() = TimelineDuration * scale

<span class="hljs-keyword">val</span> scrollFraction <span class="hljs-keyword">by</span> derivedStateOf {
    ((scrollState.value) / scrollState.maxValue.toFloat()).coerceIn(<span class="hljs-number">0f</span>, <span class="hljs-number">1f</span>)
}

<span class="hljs-keyword">val</span> currentYear <span class="hljs-keyword">by</span> derivedStateOf {
    (scrollFraction * TimelineDuration - <span class="hljs-number">3000</span>).roundToInt()
}

<span class="hljs-keyword">val</span> currentYearHighlightRange <span class="hljs-keyword">get</span>() = currentYear.eventHighlightRange

<span class="hljs-keyword">val</span> currentTimelineEvent <span class="hljs-keyword">by</span> derivedStateOf {
    AllTimelineEvents.firstOrNull { it.year <span class="hljs-keyword">in</span> currentYearHighlightRange }
}

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">setScale</span><span class="hljs-params">(zoom: <span class="hljs-type">Float</span>)</span></span> {
    scale = (scale * zoom).coerceIn(MinZoomScale, MaxZoomScale)
}

<span class="hljs-comment">/**
 * Scrolls to the [year] starting from 1000 years above it.
 */</span>
<span class="hljs-keyword">suspend</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">animateRevealYear</span><span class="hljs-params">(year: <span class="hljs-type">Int</span>)</span></span> {
    <span class="hljs-keyword">val</span> startYear = (year - <span class="hljs-number">1000</span>).coerceAtLeast(StartYear)
    <span class="hljs-comment">// first snap timeline to scroll pos just above the selected year</span>
    scrollToYear(startYear)
    <span class="hljs-comment">// then animate from that point till year appears on screen</span>
    animateScrollToYear(
        year, spring(
            dampingRatio = Spring.DampingRatioLowBouncy,
            stiffness = <span class="hljs-number">25f</span>
        )
    )
}

<span class="hljs-comment">/// Private methods excluded for brevity</span>

<span class="hljs-keyword">companion</span> <span class="hljs-keyword">object</span> {
    <span class="hljs-comment">/**
     * This is used to save [TimelineState] in an event of Activity or Process recreation
     */</span>
    <span class="hljs-keyword">val</span> Saver = Saver&lt;TimelineState, <span class="hljs-built_in">Int</span>&gt;(
        save = { it.scrollState.value },
        restore = { TimelineState(it) }
    )
}

}</pre></div>The Saver object here allows Compose to save and restore this class in case of Process recreation.The scrolling timeline section is wrapped in a scrollable Box composable (A Box composable with <code>scrollable</code> modifier applied). The time markers are in a <code>LazyColumn</code>. While the rest of the screen uses some combination of box/column/row for the placement.<h1 id="c888">Wonder Events Screen — Adaptive Layout</h1><figure id="912a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*NQRTFCCRV76rbIyMyDlRbQ.png"><figcaption>Adaptive Layout in Wodner Events Details scren</figcaption></figure>The Wonder Events screen is made responsive for phones and tablets. Two layouts are used to achieve this. For screens lesser than 600 dp width, a single-column layout is used. Wonder image is in the body of the <code>BottomSheetScaffold</code> while; The list of events is placed inside a <code>BottomSheetScaffold</code>‘s <code>sheetContent</code>. For screens larger than 600 dp a <code>Row</code> is used to achieve a two-column layout.<h1 id="f2b2">What’s Next</h1>As mentioned earlier, there’s still a lot of work to do. These are some of the goals.<ul><li>Add Collectibles and My Collection screen.</li><li>System independent localization.</li><li>Add documentation and tests.</li></ul>Thanks to the team <a href="https://gskinner.com/">gskinner</a> for creating the original Wonderous. Without it, this app wouldn’t have been possible. All the assets used in the app are taken from their repository. Do check out the <a href="https://flutter.gskinner.com/wonderous/">original app</a>.</article></body>

Meet Aamir Kamal

Senior editor at ILLUMINATION Integrated Publications on Medium

Other Editor Profiles

Collection of Editor Bios

Meet Editors of Illumination Integrated Publications

Writer Biographies

Curated Writer Bios

Learn about contributing writers of ILLUMINATION written by their pen

Featured Stories by Editors

Featured Stories by Editors on ILLUMINATION Integrated Publications

Editors’ choices are in place. We offer a unique curation and visibility service for storytellers on Medium.

Publication Resources

Starter Kit for Writers of ILLUMINATION Integrated Publications

One-stop-shop for beginners

Invitation to Potential Writers