Kotlin Multiplatform - Basic UI Creation in Android and iOS

-

 Basic UI Creation in Android and iOS using Kotlin Multiplatform



Lets create a basic registration page UI in both Android and iOS using Kotlin Multiplatform.


Download/Enable Kotlin Mutliplatform plugin and restart Android Studio.


Create Project:









   

Here, composeApp folder - for shared and Android, iOS specific code 
               -- androidMain - for Android platform specific code
               -- iOSMain - for iOS platform specific code
               -- jvmMain - for desktop specific code
               -- commonMain - for shared(all platform) code
          iosApp folder - for iOS project components to work in Xcode

Run/Install Application:

Android App:

Choose 'composeApp' from dropdown and click on 'Run' button.



                                                    



iOS App:

Choose 'iosApp' from dropdown and click on 'Run' button.


                                                        




Okay. Lets start with UI creation as below:





In this UI, we have to create three TextFields, One ImageView, One RadioGroup(2 - radio buttons), One Multi-Select Checkbox Group (3 - Checkboxes), One DropDown Menu, and a Button.
So we will cover all basic UIs in this one example. 

TextField:

First, lets create TextField: 

                             


@Composable
fun CustomTextField(
    imageVector: ImageVector? = null,
    hintText: String? = null,
    labelText: String?,
    modifier: Modifier
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text(labelText ?: "") },
        placeholder = { Text(hintText ?: "") },
        modifier = modifier,
        colors = TextFieldDefaults.colors(
            focusedContainerColor = Color.White,
            unfocusedContainerColor = Color.White
        ),
        leadingIcon = {
            imageVector?.let {
                Icon(
                    imageVector = it,
                    contentDescription = ""
                )
            }
        }
    )
}
Here,    value - text to be displayed
             onValueChange - While user types, value will be changed. That latest text
             label - TextField's label text (shown above the input area)
             placeholder - hint; which will be displayed before user inputs
             modifier - TextField's decorator
             colors - Used to customise field's colors
             leadingIcon - left drawable icon

ImageView:

                                               


Image(
    painter = painterResource(Res.drawable.profile),
    modifier = Modifier.size(150.dp).clip(CircleShape)
        .border(width = 2.dp, color = Color.LightGray, shape = CircleShape),
    contentDescription = "",
    contentScale = ContentScale.Crop
)

Here,
            painter - Image drawable file
            modifier - Image's decorator
            contentDescription - mandatory parameter; used for accessibility
            contentScale - Scale Type

Button:

There are different buttons available. In this example, we can create ElevatedButton, which have shadow and a bit of elevation.

                            


ElevatedButton(
    modifier = Modifier.fillMaxWidth(),
    onClick = { println("Registration success!!!") },
    colors = ButtonDefaults.buttonColors(
        contentColor = Color.White,
        containerColor = MaterialTheme.colorScheme.primary
    )
) {
    Text("Register", modifier = Modifier.padding(10.dp))
}

Here,
            modifier - Button's decorator
            onClick - action to be performed while user clicks button
            colors - Used to customise Button colors

RadioGroup:


Let's create single-select radio group. Here, we need 2 RadioButtons. So, lets create array of size 2. 
    val options = arrayOf("Male", "Female")

we have to iterate the array and create RadioButtons. To store the selectedValue, one variable should be created.
    var selectedOption by remember { mutableStateOf(options[0]) }

While selecting a radioButton, that particular value should be stored in that variable. Later, selectedOption will be used to mark select/unselect.
@Composable
fun RadioGroup() {
    val options = arrayOf("Male", "Female")
    var selectedOption by remember { mutableStateOf(options[0]) }
    Row(modifier = Modifier.fillMaxWidth()) {
        options.forEach { option ->
            RadioButton(
                selected = (option == selectedOption),
                onClick = { selectedOption = option }
            )
            Text(
                text = option,
                modifier = Modifier.padding(top = 10.dp)
            )
            Spacer(modifier = Modifier.padding(15.dp)) //To create space in-between
        }

    }
}

CheckBoxGroup:



Let's create multi-select checkboxes. Here we need to create 3 checkboxes. So lets create an array of size 3.
    val options = arrayOf("Books", "Travel", "Movies")
Since its multi-select, need to save states of each checkbox, so lets create mutableStateList.
    val checkedStatus = remember{mutableStateListOf(false, false, false, false, false)}
We have to iterate the array with index and use that index to read and change checked status if needed.
@Composable
fun CheckBoxGroup() {
    val options = arrayOf("Books", "Travel", "Movies")
    val checkedStatus = remember {mutableStateListOf(false, false, false, false, false) }
    options.forEachIndexed { index, option ->
        Row(modifier = Modifier.fillMaxWidth()) {
            Checkbox(
                checked = checkedStatus[index],
                onCheckedChange = { checkedStatus[index] = it })
            Text(
                text = option,
                modifier = Modifier.padding(top = 10.dp)
            )
        }

    }
}

DropDown:









To create a dropdown with options, lets create an array first:

 val options=arrayOf("India", "Singapore", "Malaysia", "China", "Korea", "SriLanka" )

One boolean to track whether the dropdown is expanded or not.

    var expanded by remember { mutableStateOf(false) }

Another variable to track which one is selected:
    var selectedOption by remember { mutableStateOf(options[0]) }

@Composable
fun DropDown(){
    val options = arrayOf("India", "Singapore", "Malaysia", "China", "Korea", "SriLanka" )
    var expanded by remember { mutableStateOf(false) }
    var selectedOption by remember { mutableStateOf(options[0]) }

    ExposedDropdownMenuBox(
        modifier = Modifier.fillMaxWidth(),
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }) {
        TextField(
            modifier = Modifier.fillMaxWidth()
                                .menuAnchor(MenuAnchorType.PrimaryNotEditable),
            value = selectedOption,
            readOnly = true,
            onValueChange = {},
            label = {
                Text(text="Country")
            },
            trailingIcon = {
                Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription="")
            },
            colors = TextFieldDefaults.colors(focusedContainerColor = Color.White,
                unfocusedContainerColor = Color.White)
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = {expanded = false},
            modifier = Modifier.fillMaxWidth().background(Color.White)
        ){
            options.forEachIndexed { index, data ->
                DropdownMenuItem(
                    onClick = {
                        selectedOption = data
                        expanded = false
                    },
                    text = {Text(data)}
                )
            }
        }
    }
}


Finally the UI will be,

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier
                .background(color = Color.White)
                .safeContentPadding()
                .fillMaxSize().
            verticalScroll(state = rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Spacer(modifier = Modifier.size(50.dp))
            Image(
                painter = painterResource(Res.drawable.profile),
                modifier = Modifier.size(150.dp).clip(CircleShape)
                    .border(width = 2.dp, color = Color.LightGray, 
                     shape = CircleShape),
                contentDescription = "",
                contentScale = ContentScale.Crop
            )
            Spacer(modifier = Modifier.size(50.dp))
            CustomTextField(
                imageVector = Icons.Default.AccountCircle,
                hintText = "Enter Name",
                labelText = "Name",
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.size(15.dp))
            CustomTextField(
                imageVector = Icons.Default.Mail,
                hintText = "Enter Email",
                labelText = "Email",
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.size(15.dp))
            CustomTextField(
                imageVector = Icons.Default.Phone,
                hintText = "Enter Mobile No.",
                labelText = "Mobile No.",
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.size(15.dp))
            DropDown()
            Spacer(modifier = Modifier.size(15.dp))
            Text("Sex:", modifier = Modifier.fillMaxWidth(), 
                         fontWeight = FontWeight.Bold)
            RadioGroup()
            Spacer(modifier = Modifier.size(15.dp))
            Text("Hobbies:", modifier = Modifier.fillMaxWidth(), 
                             fontWeight = FontWeight.Bold)
            CheckBoxGroup()
            Spacer(modifier = Modifier.size(40.dp))
            ElevatedButton(
                modifier = Modifier.fillMaxWidth(),
                onClick = { println("Registration success!!!") },
                colors = ButtonDefaults.buttonColors(
                    contentColor = Color.White,
                    containerColor = MaterialTheme.colorScheme.primary
                )
            ) {
                Text("Register", modifier = Modifier.padding(10.dp))
            }

        }
    }
}

FullCode on GitHub: KMPBasicUI

Android:

















iOS:




Comments

Post a Comment

Popular posts from this blog

SOAP Client using ksoap2 in Android - Kotlin

-
Image
Introduction: SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML. Pros: Security - SOAP provides its own security known as WS Security . Platform Independent - SOAP web services can be written in any programming language and executed in any platform Cons: Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource. WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service. Things to know: The following are the things we have to know before we proceed further:                     URL - It is the URL of WSDL file.                     NAMESPACE - It is ta...
Read more

RecyclerView with different number of columns using SpanSizeLookup

-
Image
We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image? Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.android.support:recyclerview-v7:27.0.2' implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5' recycler.xml <?xml version= "1.0" encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" xmlns:ap...
Read more

Bottom Navigation using design Library in Android - Kotlin

-
Image
Introduction: Let's implement BottomNavigationView in our layout using Design Support Library. First, we have to go through the factors like, when  and how to use that. When to use? As per Material Design specs, the following criteria is there: (a) Tabs (TabLayout) - Should be used when there are two navigations. (b) Bottom Navigation - Should be used when there are 3 to 5 navigations. (c) Navigation Drawer - Should be used when there are 6 or more navigations. Also to remember that, Viewpager shouldn't be used with BottomNavigationView. You can read the complete design specs, here . How to use? BottomNavigationView have to be added  at the bottom of the screen. Also, the following are some of the important attributes: app:itemBackground - to apply background color  app:itemTextColor - to apply the color for the text of BottomNavigation item. app:itemIconTint - to apply the color for the icon of BottomNavigation item. app...
Read more

Exploring Android Slices - JetPack

-
Image
Introduction: Slices are a new way of embedding our app's content in other surfaces, like Google Search and later in other places like Google Assistant. Slices are UI templates, which gives look and feel at home in whatever surface, they get hosts in. Also they are rich, interactive and dynamically updatable. Before jumping into that, first migrate your project to AndroidX, (Android Studio 3.2 & above), by navigating as,                                         Refactor --> Migrate  to AndroidX  Setup: build.gradle implementation 'androidx.slice:slice-core:1.0.0' implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha6' implementation 'androidx.slice:slice-builders:1.0.0' Creating Slice Provider: Slice Provider is a component that let us display the slices we are creating, on outside our application. We can create the Slice Pro...
Read more

Exploring Android Navigation Architecture Component - MVVM - Kotlin

-
Image
Navigation Architecture Component is released as a part of JetPack and androidx package. Its aim is to simplify the implementation of Navigation in our Android App. It defines a set of principles to build an in-app navigation with consistent and predictable user experience. Its main concept is to use single-activity architecture. It also has support for both Activity and Fragment. Principle of Navigation: The following are the principles of Navigation. App should have fixed starting destination A stack is used to represent the navigation state of app The 'Up' button never exits the app Up and Back are equivalent within your app's task Deep linking to a destination or navigating to the same destination should yield the same stack You can find the detailed explanation, here . Components of Navigation: (i) Navigation Graph - It's nothing but a map/blueprint of our in-app navigation. It has a list of all fragments and activities. We can also ...
Read more

Braintree Integration in Android - Kotlin

-
Image
Let’s learn how to integrate Braintree in Android app with Kotlin. Braintree is a subsidary of PayPal. It focuses in helping businesses of all size and to help maximize business growth. Braintree accepts the following payments: * Credit Cards                             * Venmo                             * Android Pay                             * Apple Pay                             * PayPal Operation Flow: 1. App have to request token from the server. 2. Server have to generate a token using Braintree’s SDK and send that to the requested App. 3. With that Token, app should allow user to pay, which will b...
Read more

AppIntro (OnBoard) Screen - Kotlin

-
Image
Introduction: App Intro/Onboard screen is mainly to display the key features of our app to users while launching it, in a sweet way. Let's do that simply with TabLayout, ViewPager and its PageTransformer.  Design: slide_page.xml  Desgin this layout with ViewPager and TabLayout to begin with. <?xml version= "1.0" encoding= "utf-8"? > <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto" android: id = "@+id/introLayout" android:layout_width= "match_parent" android:layout_height= "match_parent" > <android.support.v4.view.ViewPager android: id = "@+id/viewPager" android:layout_width= "match_parent" android:layout_height= "match_parent" android:layout_above= "@+id/tabLayout" /> <android.support....
Read more

Android JetPack - Scheduling Tasks with WorkManager

-
Image
Introduction: WorkManager is one of the Android JetPack component. It is specifically designed for scheduling and managing background tasks. If the app is running, task will be executed in a new thread. Otherwise, WorkManager automatically chooses an appropriate way to do so. It can be AlarmManager, JobScheduler or Firebase JobDispatcher, depends on device's API level and its dependencies. WorkManager Basics: Worker WorkRequest WorkManager WorkInfo (i) Worker: It specifies what task need to be performed. class SampleWorker (context: Context, workerParams: WorkerParameters) : Worker(context, workerParams) { override fun doWork (): ListenableWorker. Result { //do the work here return ListenableWorker. Result . SUCCESS } } (ii) WorkRequest: It represents which Worker should perform the task. Also we can specify any constraints/circumstances, based on which the task should be performed. Constraints can be of Net...
Read more

Android Architecture Components - Room - Kotlin

-
Image
Introduction: Google's Android Architecture components became stable now. It is nothing but a collection of libraries that ease our Android Development. Android Architecture Components: DataBinding Navigation Paging Library WorkManager LiveData & ViewModel Room Persistence Library Let's see about Room in this post.  Room is a new way to create a database in your Android Apps.  SQLite vs Room: The following are some of the advantages of Room over SQLite. (a) In SQLite, there is no compile-time verification of SQL queries, whereas Room verifies it. (b) We need to write lots of boilerplate codes to convert SQL queries to Java Objects. (c) We need to update the affected SQL queries manually, while the schema changes in SQLite. Whereas, Room will take care of it automatically. Room Architecure and Components: Three components are there in Room: (1) Database is a holder class that uses annotation to define the list of ...
Read more

Room with LiveData, ViewModel - Android Architecture Components - Kotlin

-
Image
Introduction: We have already learnt about Room in last post,  Room-Kotlin . In this post, lets learn about how to use ViewModel and LiveData with Room to improve usablity. Using LiveData with Room, allows views to be notified about data changes automatically. LiveData: LiveData is nothing but observable data holder class. It allows us to observer changes in data across multiple components of app. It is also aware of and respects lifecycle of Activities/Fragments. It also ensures that LiveData only updates app component observers that are in an active lifecycle state. The following image depicts the Lifecycle and States: Here, CREATED, STARTED, RESUMED - Active States           INTIALIZED, DESTROYED - InActive States So, LiveData will remove the updates automatically while in InActive States, i.e., INTIALIZED and DESTROYED. ViewModel: ViewModel is an entity that is free of Activity/Fragment's lifecycle. So it allows us...
Read more