How to Migrate an Android Project to Kotlin Multiplatform (KMP)

hey guys and welcome back to a new video KMP cotton multiplatform is finally stable and to celebrate that I decided to make a video how you can now take a native Android project and migrate that to a KMP project so you can also write code that works on iOS so that's of course something that very often happens that you have some kind of Android app then KMP came into the market and now you want to take this existing Android app and migrate it into a project where you can have a shared code section and iOS specific section and an Android specific section and in order to do that I have prepared a little native Android project and we now want to take this native Android product it's really just an empty blank product want to take this and migrate it to a CM project or KMP it's actually called nowadays and the first thing you need to make sure is that you actually have the KMP plugin installed in Android Studio you can check that by opening your Android Studio settings you can also open this by going to Android studio uh settings and then going to plugins and here you need to make sure that you have a Cartland multiplatform mobile plug-in that actually update um but version 0.8.0 should be completely fine to follow through this video make sure this is installed activated if so then in order to just migrate this product it helps a lot if you just create a new blank KMP project so we can just copy over some Gradle config that is just the same for this project um you can do so by going to file new new project and then scrolling down to cotland multiplatform app selecting some kind of name that really doesn't matter we will just use this reference project to copy over some config I already did that you can see here is my coton multiplatform um reference project which is completely empty but uh I will copy a few things over in this video from this project so let's first of all think about the structure a KMP project has we want to switch to the project view to just get a better overview of what we have here and in Native Android we typically just have one single app module so the application module where really the magic happens if you have a multi module app then you just have more modules some cotland specific modules which only contain cotland code and some Android specific mod modules which can also uh yeah reference the Android SDK in simple projects you typically just have such an application plugin that is also what you will have and what you need in a KMP project but you need a little bit more than that in addition in KMP we have a shared module as well which contains all the code we want to share between IOS and Android and potentially more platforms so this is really the pure cotton code which is going to be shared which is also then separated into an Android Main and iOS main module so if you have shared code that just differs a little bit on Android than it uh than on iOS then you can use these Android Main and iOS main modules I'm pretty sure if you have built something with K km or k p then that won't be new to you and last but not least you will have a product folder with an IOS app in a KMP codebase and the first thing that we want to start with uh for the migration is that we want to rename this app module now that is optional but typically when you create a blank a project this is called Android app and then you also have an IOS app folder just to be able to distinguish these two so to do that click on app hold on shift and F6 to rename this make sure to select rename module and then we want to rename this to Android app click okay and gr will do some syncing and after that you can see it is now called Android app okay what is the next step the next step is we want to create our shared module if we take a look at our reference project then that is already created if we scroll down this is the shared module and the shared module is is separated into Android main as I said common main for all the shared code and iOS Main and we now want to create this whole thing which is luckily very easy with the KMP plugin in Android Studio so we want to right click on our root package new module and I'm want to select cotton multiplatform shared module the name should of course not be that long we just want to call this shared we could add some sample tests I'll leave that out uh for iOS regular framework is fine unless you want to use saw something like cocoa poods for dependency management but I will just leave it at regular framework click finish Gradle will do its job again um we do get some issues here um because by default this module is using version catalogs so just a way to manage your versions in a multimodule project and we did not yet Define these versions in the version catalog it's of course Very optional if you want to use a version catalog it's a it's a nice addition which is probably also the reason why the coton team decided to um have such a catalog by default but in order to apply that in our project in order to recognize these versions for carton multiplatform for the gr plugin the Android library and so on we should just copy over the version catalog from a blank um KP project for that let's move this over here that version catalog is located here in our grad folder lbs. versions. TMO and here we just Define all the different version of course if you now already have some kind of app with a certain size then you will need more dependencies and more versions than just these few here but the pattern how you declare more versions is just uh it should be pretty clear by just taking a look at this catalog so you just Define the version you then Define your libraries which you include with your direct dependencies and potentially Gradle plugins like here we want to take this lips versions file copy this we go inside of our Android project inside the Gradle folder and here just paste this exactly as it is the next thing we need to do is need to take a look back at our reference product and go to build at Gradle the at at the project level want to just copy paste these grad plugins as they are just copy this go to our Android project open build Gradle project and replace this here so these grad plugins also use the version from the version catalog of course as I said um if you have more grle plugins then of course just add these here and don't completely replace it but in this simple case um we can just replace it click try again and hopefully gr should succeed now and should recognize this um version reference yes that works um there is still some kind of error Gradle has here but um this is not really an important error so everything will build just fine that's also how how the KMP project looks like um by default and now if we take a look in our shared module that looks exact L like in a new KMP project of course if you now already have an existing code base and you now want to migrate that hope codebase to a KP code base then you have to do a lot more than I show you in the video here because you need to take all your classes that are in Java or just Android specific and migrate them to Pure coton code so for example if you're using retrofit you need to migrate that to something like Kor for networking if you're using room for your database then you need to migrate that to something like SQL Delight that just works in your shared module since it's purely coton based and this is of course the biggest part of a migration but if how that works is new to you how you now really take real Android code native Android code and migrate that to cotlon code then I think my other videos about coton multiplatform will help you more with that where we just build full product so you you get a good overview of um how all that stuff just worked together for us in this case the next thing I want to dive into is our build. grad file from Android app because we haven't yet migrated that to use version cataloges so for the plugins here we want to replace the ID with Alias so we just reference the version catalog and the notation is lips. plugins. Android application because that is our Android application plugin and we need to make sure that we use the codin Gradle plugin as well cotland Android Gradle Alias again and replace this with Libs pin codin Android then when to scroll down we also need to replace this coton compiler extension version with the version from our version catalog so Libs do versions compose compiler doget since we need to reference an exact string here we need to use get and of course you would also need to reference these versions from the catalog down here in your dependencies um that won't lead to an issue if we don't do it but uh you want to manage your dependencies at a central place so that is recommended I won't do that here uh should be pretty straightforward how you do this so you just um reference the library that you want to use here for activity compos for example you say lips do um let me check what that is here we have Android activity composed that is the dependency we want so we reference oops we reference lips. androidx activity compos and that would now also implement the same version but refer to the version in our version catalog which we defined here at this point okay I'll r that um just to show you how that migration would work how it would look like and at this point we should already have a working Android app that uses the shared code in our shared module but the last thing that is missing here for this migration is of course to also set up an iOS project and where can we create this iOS project well in the IDE that we use for iOS development ax code let's open a code and then click on create new a code project this window will open up we want to create a normal app create next um click next the product name should be whatever you want to call this app in km it's typically just called IOS app for example or my IOS app um I don't know let's call it IOS app we going selected team I'll just leave this in blank you can also change this later Swift UI language Swift is fine clicking next and now we need to open the Android project which we are currently migrating to KMP because in that folder in that code base we also want to create our iOS project I will simply drag that in here so um that folder will open up and then we can click create there we go there is our very blank IOS app and now what we need to do in xcode is we need to take this iOS project which in and of itself does not know anything about our shared module about how KMP works so we need to set it up that way and how do we do that we go to our IOS app project click on build faces and now we need to follow the guide from the official KMP docs so I opened that here already you will find this link in the video description where you can just now copy paste some code so first of all to scroll down to where is it um the first thing need to change is down here um where you where we make our crossplatform application work on iOS here this script going to copy this and we now want to add a new So-Cal run script phase in X code so just that it runs this script that we paste here after every build so we click on this plus new runscript face and in here we paste what we just copied from the docs and we move this I think it was after compile sources or before let me quickly check that again it should be here run script should be before the compile sources space yes and that is currently the case as you can see next I want to switch to build settings here we also need to make some adjustments let's take a look back in Chrome this is the next line of code that we need to copy copy this then we need to sear for framework search path right here under filter framework search path we can then click in this field double click click on plus paste what we just copied and the last thing is I think called other Linker Flex there we go here we also need to paste something from the docs go to Google Chrome scroll down and this is it so copy this text go to a code double click right of other Linker Flex add such an entry enter and there we go that should be the setup for our IOS app if we now go to content view our very initial view to really test this if we can now access shared code on iOS as well we want to reference that shared code of course and by default that shared module of our my credit code base contains this greeting it just prints hello platform name that platform name depends based on Android or iOS on Android it will print Android and the um SDK version and on iOS it will print yeah whatever iOS version the device is running on and we can now check this by going to xcode first of all building this product build hopefully that succeeds yes build succeeded we then go to our Imports since we need to import the shared module now import shared you can see that is recognized and instead of hello world we can now print greeting. greet and if we then launch this we should hopefully see that it does not show hello world anymore but rather hello iOS version whatever there we go here's the simulator and yes hello iOS 16.4 or that is working we can access shared code in our iOS project in our IOS app let's also check if this works on Android that can of course be done directly inside of Android Studio by just um first of all synchronizing Gradle seems like and then when that is done clicking on play so we launch our Android app take a look on our device wait until Gradle build this product here and then we should hopefully see hello Android um yeah and some version and hello Android oh it seems like we're not using the greeting text here but the app is launching that is good let's go inside of our Android app module main activity and the greeting is yes it doesn't it does not yet use the greeting from our shared module of course so we can actually say hello let's just replace this with greeting just to really check if that works um greeting there's a little naming conflict here so let's just remove this composable say we have a text composable and then we need to use greeting ah it seems like we did not include the share module yet so that's of course important um in our build Gradle file of the Android app module that seems to be the last thing we need to do in our dependencies block we want to reference the shared module which we can generally do with implementation project shared and if you just created a new KP project you will notice that um they handle it a bit differently if we go inside of our Android app module you can see they just reference it with projects that shared that is I think a new feature of Gradle and how we can access such modules if we want to also reference these like this we need to scroll down to settings Gradle and copy this enable feature preview line so we just explicitly enable these types saave project accessors so copy this go in our migrated product scroll down settings Gradle and at the very first line we paste this sync this and then in Android app after the Sync has been successful instead of project shared we can also say projects. shared like that that is how we can now reference specific modules in our KMP code base back in main activity now our greeting seems to be recognized so we can Alt Enter to import that and oops we can then say greeting. greet if we relaunch this actually need to synchronize this again for some reason if we relaunch this take a look here we should now hopefully also see a running Android app that greets us with our very Android specific greeting that comes directly from the shared code base of our shared module and it seems there is a little issue let's take a look it seems like there's a compile issue because the preview isn't fully working let's remove this try it again there we go the app is launching hello Android 33 that is looking very good so we now successfully migrated our native Android code base to a KMP product so you can now also work on making that work on the iOS side as well well and of all this KMP topic here is new to you and you really want to learn how you can now build these crossplatform these multiplatform apps with um cutland then I will link my more advanced Android premium course not only Android but Android and iOS premium course using KMP down below where you will build a translator app all in Cotton multiplatform that will work on iOS that will work on Android so that's something that sounds good to you then click the first link in the description and check out the course other than that I will also link an article from jet brains where they talk about KMP being stable so if that sounds good to you you'll also find this link down in this video's description so you can check it out what that now means what is new and all that typical stuff that goes hand in hand with it awesome thank you so much for watching I will see you back in the next video have an amazing rest of your week [Music] bye-bye

Channel: Philipp Lackner

Views: 28,795

Keywords:

Id: vb-Pt8SdfEE

Length: 19min 4sec (1144 seconds)

Published: Sun Nov 19 2023