Getting Started with Sharing UI between iOS and Android - Compose Multiplatform

let's try sharing the jetpack compose UI with the IOS and [Music] Android I will show you everything you need to know to get started as quickly as possible for those of you who don't know compose a multiplatform is a declarative UI framework built by a jet brains that allows developers to share their application uis across different platforms it enables you to reuse up to 100% of your code base across Android iOS desktop and the web the framework itself leverages the code sharing capabilities of the core cotlin multiplatform technology at the time of a recording this video compose multiplatform for iOS is still in Alpha before we even start you need to consider the following to run the iOS application you are going to need a MacBook with an X code and an iOS simulator installed that's not necessary however if you don't plan to run the iOS application at all you will be able to write the code for iOS even without the MacBook but my suggestion is that you have a Macbook for The Full multiplatform Experience first you do need to choose a development environment to write the code on both Android and iOS we should use a new Fleet ID it offers a code highlighting feature for both platforms and it has other nice features as well that were specifically made for a multiplatform development you can use this ID on a Windows as well and like I said you should be able to write the code without running an iOS simulator you can also install jet brain's toolbox a desktop application that allows you to quickly open open and update your existing IDs pretty convenient tool then for the project template generator we should use a KMP wizard that's a new userfriendly web application which is used to quickly decide for what platforms we want to generate this getting started template so that we don't start from scratch from here select those two platforms with a shared UI and click the button to download the project next let me explain the project structure of this composer multiplatform template so we have a two modules here compose app and the IOS app then in the compose app we have a three different Source sets Android main iOS Main and the common main a shared composed UI logic is located inside the common main source set and that's where we declare how our application will look like Now launch the fleet ID and let me show you around in this project level grade Bild file we have a four plugins jet brains compose Android application Android library and compose or a cotl multiplatform then in the compos app grade file we have a three plugins and two Targets for Android and iOS we have a block that exports this composed app module as a framework in the iOS application project module that way we should be able to use the common main UI code in the IOS as well now let's open up the common main source set to explore the shared UI here you will see some extra cing files that were automatically generated which I'm going to remove for now and just leave this app cing file for the shared UI here inside the app cotlin file we have a basic compos UI that should be visible on both platforms pretty familiar stuff here so we have a shared UI but also a shared State as well now open up the iOS main source set and you will see a main view controller which is something similar to an activity in Android it holds that app composable UI that is shared then in the Android main source set we have a main activity inside which we are calling that the same shared app composable pretty simple and a straightforward structure now for the demonstration purposes I will modify this app composable a little bit and add a text along with a text field we should update the text state whenever we type something inside the text field now to Launch the application on both Android and iOS you do need to make sure that you have already installed the Android emulator as well as the iOS simulator and the X code for the iOS part all right now let's click the play button in the top right corner to launch the app on a platforms and voila we have a working application built with a jetpack compose on a both Android and iOS let me know in the comments section if you have used this technology so far what's your overall experience and would you recommend this framework to your fellow developers don't forget to like this video but only if you find it helpful [Music] [Applause] foring down to rest

Channel: Stevdza-San

Views: 5,729

Keywords:

Id: uv5rEvwVFYg

Length: 5min 55sec (355 seconds)

Published: Fri Dec 08 2023