DEV Community: Jess Barrientos

Jetpack Compose: Navigation tutorial

Jess Barrientos — Sun, 12 Jun 2022 04:22:40 +0000

But, wait... What is navigation?

As the documentation says,

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app.

In simple words, Navigation helps us to go to different screens simply, and also let us do more complex things, but this time we are going to focus on just navigate between three screens, but using JetPack Compose.

So, let's start!

First, in Android studio we are going to create a new Empty Compose Activity:

Then add three kotlin files. In my case, I like to add a package for each screen, but you can add the files in the same package, it doesn't matter.

So far, our project has a MainActivity.kt and three kotlin files: DetailScreen.kt, HomeScreen.kt and LoginScreen.kt. Also, you can see I added a package called navigation, please add it too, we are going to need it in a moment.

Now, we need to add the following code to the Files we just created:

LoginScreen.kt



@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Login Screen",
                fontSize = MaterialTheme.typography.h3.fontSize,
                fontWeight = FontWeight.Bold
            )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            Button(
                shape = MaterialTheme.shapes.medium,
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.Black),
                modifier = Modifier.padding(5.dp),
                onClick = {     
                    //TODO: Navigate to Home Screen
                }
            ) {
                Text(
                    text = "Go to Home Screen",
                    modifier = Modifier.padding(5.dp),
                    style = MaterialTheme.typography.button.copy(
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                )
            }
        }
    }
}

HomeScreen.kt



@Composable
fun HomeScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
            horizontalArrangement = Arrangement.Center
        ){
            Text(
                text = "Home Screen",
                fontSize = MaterialTheme.typography.h3.fontSize,
                fontWeight = FontWeight.Bold
            )
        }
        Row( modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
            horizontalArrangement = Arrangement.Center
        ){
            Button(
                shape = MaterialTheme.shapes.medium,
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.Black),
                modifier = Modifier.padding(5.dp),
                onClick = {
                    //TODO: Navigate to Details
                }
            ) {
                Text(
                    text = "Go to Details",
                    modifier = Modifier.padding(5.dp),
                    style = MaterialTheme.typography.button.copy(
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                )
            }
        }
    }
}

DetailScreen.kt



Composable
fun DetailScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
            horizontalArrangement = Arrangement.Center
        ){
            Text(
                text = "Detail Screen",
                fontSize = MaterialTheme.typography.h3.fontSize,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

Notice the //TODO in LoginScreen and HomeScreen, we are going to need it later. And this is how they should look:

So far, so good. Now we have all that we need to start adding navigation to our screens.

First of all, add the navigation library to your build.gradle(app). Verify you add the last version, at this moment this is the last one:



implementation "androidx.navigation:navigation-compose:2.4.2"

Nice!, now go to the navigation package and add two new kotlin files: Screen.kt and NavGraph.kt

Open Screens.kt and add the next code:




sealed class Screens(val route: String) {
    object Login: Screens("login_screen")
    object Home: Screens("home_screen")
    object Detail: Screens("Detail_screen")
}

As we can see this file contains a sealed class with three objects, each object corresponds to a screen and its routes. this is going to help us to have our routes organized.

Now, open the NavGraph.kt file and add the next code:




@Composable
fun NavGraph (navController: NavHostController){
    NavHost(
        navController = navController,
        startDestination = Screens.Login.route)
    {
        composable(route = Screens.Login.route){
            LoginScreen()
        }
        composable(route = Screens.Home.route){
            HomeScreen()
        }
        composable(route = Screens.Detail.route){
            DetailScreen()
        }
    }
}

In this file we can see in the NavGraph function, that needs navController parameter. Inside this function, we define the NavHost. In simple words, The NavHost is a container for navigation.

NavHost function has some parameters that we need to send:

navController: Which is the same that we are sending to our NavGraph function.
startDestination: This parameter we define which screen is going to be shown first.
NavGraphBuilder this builder is used to construct the graph, that's why you can see our routes with its screen defined here.

Now, let's go to our MainActivity.kt, here we need to call our NavGraph inside setContent / NavigationTheme / Surface



val navController = rememberNavController()
                    NavGraph(navController = navController)

This is how our MainActivity.kt should look:




class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {

                   val navController = rememberNavController()
                    NavGraph(navController = navController)
                }
            }
        }
    }
}

Here, we need to create the navController that is going to be used in the app. So, first, we create a new variable navController by calling remeberNavController(). This remember function always returns the same object and allows us to not lose this object if we make configuration changes, like changing the screen orientation.

Now we can build the app and run the project.

Here we are seeing our Login Screen, which was defined as start destination in the NavGraph file.

So far, so good... Now we need to add the navigation to the buttons, to jump between screens. We are almost done!

Go to the NavGraph.kt file, here we need to add the parameter navController to the LoginScreen and HomeScreen, to allow them to use the navgraph when we click the button.



@Composable
fun NavGraph (navController: NavHostController){
    NavHost(
        navController = navController,
        startDestination = Screens.Login.route)
    {
        composable(route = Screens.Login.route){
            LoginScreen(navController)
        }
        composable(route = Screens.Home.route){
            HomeScreen(navController)
        }
        composable(route = Screens.Detail.route){
            DetailScreen()
        }
    }
}

Then open the LoginScreen.ktand HomeScreen.kt files and add the navController as a parameter for both of them.




@Composable
fun LoginScreen(navController: NavController)




@Composable
fun HomeScreen(navController: NavController)

Now inside LoginScreen.kt, search for the TODO comment inside the Button's onClick event:



 //TODO: Navigate to Home Screen

Add the next code:




  onClick = {
            //TODO: Navigate to Home Screen
            navController.navigate(Screens.Home.route)
            }
)

Do the same for HomeScreen.kt, but change the route to DetailScreen.kt




  onClick = {
            //TODO: Navigate to Home Screen
             navController.navigate(Screens.Detail.route)
            }

So, one more time, build your app, run the project and see how is working now!

And that's it! we have our basic navigation :)

Here is the complete code in case you need it for reference
Compose Navigation Repo

Adding Klint to my Android apps

Jess Barrientos — Fri, 04 Mar 2022 23:32:19 +0000

First of all, what is ktlint ❤️?

As it's documentation says:

ktlint is an anti-bikeshedding Kotlin linter with built-in formatter.

Basically, is a code analysis tool for Kotlin, maintain by Pinterest.

I find this tool easy to integrate to any Android project and also easy to maintain. Let's go to the point and start with the configuration.

First we need to create a new gradle file in my case I'm going to name it: ktlint.gradle, no need to overthink the name, but you can name it whatever you want. Place it at the same level of your build.gradle(:app) and paste the next content:

configurations {
    ktlint
}

dependencies {
    ktlint "com.pinterest:ktlint:0.44.0"
}
task ktlint(type: JavaExec, group: "verification") {
    description = "Check Kotlin code style."
    main = "com.pinterest.ktlint.Main"
    classpath = configurations.ktlint
    args "src/**/*.kt"
}

check.dependsOn ktlint

task ktlintFormat(type: JavaExec, group: "formatting") {
    description = "Fix Kotlin code style deviations."
    main = "com.pinterest.ktlint.Main"
    classpath = configurations.ktlint
    args "-F", "src/**/*.kt"
}

First, we can see on the dependencies section the last version available of ktlitn: as today is com.pinterest:ktlint:0.44.0.

Then, we can see two gradle tasks ktlint and ktlintFormat. The first task ktlint is going to check your kotlin code and report any style issue. The second task ktlintFormat is going to fix any kotlin code style by its own.

Now, we need to add our file to our gradle scrip modules so, let go to the build.gradle(:app) aand let's add it in the plug-in section. e.g.


plugins {
   .... 
}

apply plugin: "kotlin-kapt"
apply plugin: "dagger.hilt.android.plugin"
apply plugin: "androidx.navigation.safeargs.kotlin"
apply from: "../ktlint.gradle"


android {
....
}

And don't forget to Sync your project!

How can I run it ?

To make it work, just run the commands or tasks in the terminal.

./gradlew ktlint

./gradlew ktlintFormat

And that's it, Hope you find it helpful!

Refs.
Klint Page
Klint Github

Styling Our Android Notifications (Kotlin)

Jess Barrientos — Mon, 22 Feb 2021 02:59:48 +0000

Show notifications in our apps help us to interact in a natural way with the user. Even so, we have to be careful with the use of notifications, Android can block us if we overdo it and not show any notification to the user and believe me, that sucks.

I'm not going to paste all the code just the builder so you can use it in your own app if you already have notifications implemented. But, if you don't have them, you can check at the end of this article, there is a repo with the complete example.

Ok, lets start:

Simple text notification

val builder = NotificationCompat
    .Builder(applicationContext,CHANNELID)
    .setSmallIcon(R.drawable.rainbow)
.setContentTitle(applicationContext.getString(R.string.simple_text))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This is the basic notification with only text.

Big text notification

val builder = NotificationCompat
        .Builder(applicationContext,
                CHANNELID)
         .setStyle(bigTextStyle)
        .setSmallIcon(R.drawable.rainbow)
        .setContentTitle(applicationContext.getString(R.string.big_text))
        .setContentText(messageBody)
        .setContentIntent(contentPendingIntent)
        .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This notification is for text quite of large, you can see this notification is pretty similar to the basic one, but in this case, we are using .setStyle here we are going to send the "styles" or properties we need for our notifications

val bigTextStyle = NotificationCompat.BigTextStyle()
     .bigText(applicationContext.getString(R.string.big_string))

Big picture notification

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(bigPicStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setContentTitle(applicationContext.getString(R.string.big_picture))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This notifications as the big text notification, we are using the setStyle, but for this, we need to create an instance of BigPictureStyle, and this need, of course, the picture a bitmap picture, so we need to convert it if we have it as a drawable resource.

// create the bitmap
val rainbowImage = BitmapFactory.decodeResource(
    applicationContext.resources,
    R.drawable.rainbow
)

val bigPicStyle = NotificationCompat.BigPictureStyle()
    .bigPicture(rainbowImage)
    .bigLargeIcon(null)

Inbox notification


// create the bitmap
val rainbowImage = BitmapFactory.decodeResource(
    applicationContext.resources,
    R.drawable.rainbow
)

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(inboxStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setLargeIcon(rainbowImage)
    .setContentTitle(applicationContext.getString(R.string.inbox))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

It's not necessary to add the LargeIcon but in my opinion looks prettier

This will show:

In this case, we need to create an instance of InboxStyle(), as you can see it doesn't seem to be pretty complicated. ( I didn't add the string resource, but you can do it or pass whatever you want)

val inboxStyle = NotificationCompat.InboxStyle()
    .addLine("Thanks for subscribe")
    .addLine("Here the news for today")
    .addLine("We need you to pay ... ")
    .setBigContentTitle("You got 20 Emails")
    .setSummaryText("You got 17 more emails")

Messaging notification

This code is now deprecated but still, a lot of apps use it, so I'm going to add the updated version in the next article.

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(messagingStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setContentTitle(applicationContext.getString(R.string.messaging))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

this will show:

For this kind of notification, the first parameter of MessagingStyle is the user, in this case, the owner of the app.

val messagingStyle = NotificationCompat.MessagingStyle("Jessica")
    .setConversationTitle(applicationContext.getString(R.string.messaging))
    .addMessage("Hi! I'm hungry!",System.currentTimeMillis()-60000,"Cat")
    .addMessage("Where are you?",System.currentTimeMillis()-60000,"Cat")
    .addMessage("Lets go play",System.currentTimeMillis()-30000,"Dog")
    .addMessage("Miss you",System.currentTimeMillis(),"Dog")
    .setGroupConversation(true)

Let's see the property .addMessage, the first parameter is the message you wanted to show. Then you need to send a Long value, which could be the time when they sent the message. And finally, you need to pass the sender or the person/thing is sending the message. If you wanted to group the conversation the property setGroupConversation needs to be true so their messages won't appear in different lines.

And that's it, Here is a repo where I added the examples of the notifications we learned, so you can see them working in an app: Notifications Repo

Coroutines, key Concepts

Jess Barrientos — Fri, 18 Dec 2020 00:10:13 +0000

Basically, a coroutine is a Thread... a lightweight one, you can run a bunch of coroutines without even notice. They help us to manages our async code and their syntax is simple and easy to understand.

//Basic Example
fun main () {
    GlobalScope.launch {
        delay(2000)
        println("Hello world")
    }
    Thread.sleep(3000)
}

What is Scope?
Scope create, run, and stop Coroutines, also provides lifecycle methods.

GlobalScope.launch{}: the scope of these coroutines will be the entire application, so when the app stops the coroutine will stop.
runBlocking: it will run on the main thread. Runs a new coroutine and blocks the current thread interruptible until its completion.
CoroutineScope: it will create a new scope and will run until all the inner coroutines finish.

Examples:

fun main () {
  runBlocking {
     launch {
     println("runBlocking ")
     }
  }

  GlobalScope.launch {
     println("runBlocking")
  }

   coroutineScope {
      launch {
    println("runBlocking")
      }
  }
}

What is Context?

It's a set of variables and data associated with the coroutines.

Dispatcher: Specify the thread in which our coroutine will run
Job: Handle the coroutine lifecycle.

What is a Suspending function?

It's a function that can be run in a Coroutine. So the only difference is that we need to add the 'suspended' key-word at the beginning.

suspend fun myFunction(){
    println("Hello, I'm suspended")
}

What is a Job?

A job is the result of the '.launch()', so we can store this in a variable and use it. ( That way we can manipulate the lyfecycle of the corotutine).

   val job = GlobalScope.launch {
      // Coroutine work...
   }

What is a Dispatcher?

Manage in which thread the coroutine will run. We can specify (if we want) in which thread our coroutine will run and switch between threads with the keyword: withContext

Common dispatchers:

launch(Dispatchers.Main) { // Main -- will work with main thread (UI)
    println("Main")
}
launch(Dispatchers.IO) { // IO -- will work with IO thread, network or file work
    println("IO")
}
launch(Dispatchers.Unconfined) { // not confined -- will work with main thread
    println("Unconfined")
}
launch(Dispatchers.Default) { // will get dispatched to DefaultDispatcher 
    println("Default")
}

withContext :
Let us change the context of our coroutine.

fun main() { 
   runBlocking {
    launch(Dispatchers.Default){
        println(“Default context”)
        withContext(Dispatchers.IO){        
           println(“IO context”)
       }   
                println(“Default context”)
    }   
  }
}

What is a Deferred?

A future result of a coroutine, for example, the result for an API call. So we need to wait for this value and we are going to use async.

fun main (){
  runBlocking {
     val myDefferred = async { suspendfun() }
  }
}

suspend fun suspendfun(): Int {
    delay(50000)
    return 10
}

Analyzing my Android Apps with SonarQube + Docker

Jess Barrientos — Mon, 19 Oct 2020 00:25:44 +0000

If you are not familiar with SonarQube, let me explain to you a little bit why you should know it.

As its documentation says, SonarQube is an automatic code review tool to detect bugs, vulnerabilities, and code smells in your code.

Docker... why I need docker? The truth is, you don't need It to run SQ, you can download a .zip and run it... But remember, Docker was made to facilitate our lives, so if you already have It installed on your machine I recommend you to use it, it's free!. But, if you still want that zip, HERE you can download the boring zip, just go to the zip section and do what it says and skip the docker section.

Starting with Docker

As I said, Docker was made to facilitate our lives, and if you haven't installed docker yet, this is your time. HERE you can do it alone, it's very quick and simple.

Once Docker is running on your machine, you need to run the next command in your terminal.

$ docker run -d --name sonarqube -e -p 9000:9000 sonarqube:latest

So, basically, we are telling Docker to create (run) a new container and start it. In this case, our container --name will be sonarqube and we are running our container in the background of your terminal -d, we don't want to get anything there. Also, we are telling It that we want to run our container in the 9000 port -p. All this will be from the image sonarqube:latest, if we don't have this image locally yet, docker will download it for us.

Then we just need to start our container like this:

$ docker start sonarqube

Here an example of what you are going to get:

Once Docker is running, you can go to your localhost in the 9000 port:

http://localhost:9000/

Remember, by default user and password, is: admin

That's it from docker and SonarQube... Now it's time to set up our Android project.

Setting up my Android app

I'm going to use an app that I did a time ago named Lucky Piñata. Maybe you remembered from my Retrofit + Coroutines Post. So, in this case, I create a new branch for this SQ changes named: sonarqube-config. You can use your own project to set it up.

First, Open your Android Studio project, and install the SonarQube Plugin:

Go to: Android Studio > Preferences > Plugins

Under the Marketplace Tab, look for SonarQube Comunity Plugin

Once installed, restart your IDE.

Now, we need to add the plugin to our project. Go to Build Gradle (Project) and add it under dependencies:

  classpath "org.sonarsource.scanner.gradle:sonarqube-gradle-plugin:$version_sonarqube"

Then, let's set up our SonarQube project in the Build Gradle(app)

Add the plugin and the properties that will help us to connect our app with the SonarQube environment.

These properties need to be outside everything.

 apply plugin: "org.sonarqube"

 sonarqube {
    properties {
        property "sonar.projectName", "lucky-pinata"
        property "sonar.projectKey", "com.jbc7ag.luckypinata"
        property "sonar.host.url", "http://localhost:9000"
        property "sonar.sources", "src/main/"
        property "sonar.login", "admin"
        property "sonar.password", "admin"
    }
}

Now everything is done. We just need to run the following command in the terminal:

  ./gradlew sonarqube

If your build is successful, you can now go to your localhost:9000, login, and get the report of your project.

Theres too many things that you can do in SonarQube, start researching, improving your coding, and share your knowledge.

RecyclerView or ListView? : Pros, cons, and examples with Kotlin

Jess Barrientos — Thu, 17 Sep 2020 06:14:50 +0000

ListView is very easy to implement, but that doesn't mean we should use it on all our projects. We have more options that will help us improve our performance and make our life easier. So we must use ListView when we have a small list of items, this is because the ListView shows the items in a different and unique view, so the more items we have, the more elements we need to create when the user scrolls up/down the list.

On the other hand, we have RecyclerView that as its name says, recycles the view, this means that once the view is off the screen, RecyclerView will reuse it. To achieve that we need to add a little more code and care when we implement this type of lists.

ListView: Pros & Cons

Pros

Easy to implement
OnItemClickListener

Cons

Bad performance in huge List of items
Complicate way to use ViewHolder pattern (but can use it)
Vertical list only

RecyclerView: Pros & Cons

Pros

Animations when adding, updating, and removing items
Item decoration (borders, dividers)
We can use It as a list or grid
It let us use it together with DiffUti
Faster performance, especially if you use RecyclerView.setHasFixedSize
Mandatory ViewHolder pattern

Cons

More code and sometimes unnecessary more difficult
Not an easy way to add OnItemClickListener

RecyclerView example

These three things you need to implement a very basic RecyclerView:

First of all, add it to the dependencies

  implementation 'androidx.recyclerview:recyclerview:1.1.0'

Layout, in your XML file, add the reference to RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Adapter. We need to create an adapter to implement ViewHolder Pattern, as we said in RecyclerView is mandatory to use it.

class listAdapter(val data: List<String>): RecyclerView.Adapter<listAdapter.MyViewHolder> (){

    class MyViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val textView = LayoutInflater.from(parent.context)
            .inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
        return MyViewHolder(textView)

    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.textView.text = data[position];
    }
    override fun getItemCount() = data.size
}

Implementation, this is an example of how we can use the adapter we created and how to show our items

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val listItems = listOf("1", "2", "3", "4", "5", "6", "7");

         setContentView(R.layout.activity_main)
         val myManager: RecyclerView.LayoutManager = LinearLayoutManager(this)
         val myAdaapter: RecyclerView.Adapter<*> = listAdapter(listItems)
         val recyclerView: RecyclerView = findViewById(R.id.recyclerView);
         recyclerView.layoutManager = myManager;
         recyclerView.adapter = myAdaapter;
         recyclerView.setHasFixedSize(true);

    }
}

ListView example

For a simple listview you don't need too much code, first of all the layout should have ListView reference.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Implementation. Then we can create a simple adapter to show our items

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val listItems = listOf("1", "2", "3", "4", "5", "6", "7");

        setContentView(R.layout.list_view_layout)
        val listview : ListView = findViewById(R.id.listview)
        val myAdapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, listItems)
        listview.adapter = myAdapter


    }
}

If you want to take a look at the code in an Android Project here is a repo with these examples: RecyclerView vs ListView

Using Retrofit + Coroutines in Kotlin

Jess Barrientos — Mon, 24 Aug 2020 01:11:30 +0000

First of all, what is Retrofit?

As its web site says is A type-safe HTTP client for Android and Java ( We are going to use Kotlin...). So, basically is a REST client for Android. It helps us to get and upload data throughout a REST API.

What about coroutines?

On Android, coroutines help to manage long-running tasks that might otherwise block the main thread and cause your app to become unresponsive.

Now, let's take a look at a basic implementation

First, we need to add some dependencies to our project. Starting with adding the version variables in our build.gradle(), under build script

buildscript {
    ext {
    version_moshi = "1.8.0"
    version_retrofit = "2.5.0"
    version_retrofit_coroutines_adapter = "0.9.2"
    version_kotlin_coroutines = "1.1.0"
    version_retrofit_coroutines_adapter = "0.9.2"
    }
    …
}

Then add the next dependencies to the build.gradle(:app)

//coroutines
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$version_kotlin_coroutines"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$version_kotlin_coroutines"
implementation "com.jakewharton.retrofit:retrofit2-kotlin-coroutines-adapter:$version_retrofit_coroutines_adapter"

//Retrofit

implementation "com.squareup.retrofit2:retrofit:$version_retrofit"
implementation "com.squareup.retrofit2:converter-moshi:$version_retrofit"

//moshi
implementation "com.squareup.moshi:moshi:$version_moshi"
implementation "com.squareup.moshi:moshi-kotlin:$version_moshi"

Build your project and now we are ready to start.

In this example, I'm going to use Advice Slip JSON API. More specific https://api.adviceslip.com/advice this URL returns a random advice every time you call it.

Here the JSON we get:

{
  "slip": {
    "id": 45,
    "advice": "Build something out of LEGO."
  }
}

So first we are going to create a new package named “network” in which we are going to add two Kotlin files:

AdviceProperty.kt
AdviceApiService.kt

In AdviceProperty.kt we are going to add the properties of the JSON in a data-class structure. Like the next example:

import android.os.Parcelable
import kotlinx.android.parcel.Parcelize

@Parcelize
data class AdviceProperty(
    val slip: AdviceData
    ): Parcelable

@Parcelize
data class AdviceData (
    val id: Int,
    val advice: String
): Parcelable

As you can see, we follow our JSON structure. Our first data-class has a property called slip whose type is AdviceData, this type is another data class with two properties id and advice. This is how we can replicate our nested JSON structure.

Then in AdviceApiService.kt we are going to set up our Retrofit instance.

import com.jakewharton.retrofit2.adapter.kotlin.coroutines.CoroutineCallAdapterFactory
import com.squareup.moshi.Moshi
import com.squareup.moshi.kotlin.reflect.KotlinJsonAdapterFactory
import kotlinx.coroutines.Deferred
import retrofit2.Retrofit
import retrofit2.converter.moshi.MoshiConverterFactory
import retrofit2.http.GET


// The base URL where our API is
private const val BASE_URL = "https://api.adviceslip.com/"

/* Moshi Makes it easy to parse JSON into objects 
you can use GSON instead if you want*/

private val moshi = Moshi.Builder()
    .add(KotlinJsonAdapterFactory())
    .build()

//Here is our retrofit instance

private val retrofit = Retrofit.Builder()
    .addConverterFactory(MoshiConverterFactory.create(moshi))
    .addCallAdapterFactory(CoroutineCallAdapterFactory())
    .baseUrl(BASE_URL)
    .build()

//Then we are going to create the interface 
which is going to help to handle our GET method 
to call the API*/

interface AdviceApiService{

    @GET("advice")
    fun getProperty():
            Deferred<AdviceProperty>
}

/* Singleton to create this instance only once 
and get it ready every time we call it. */

object  AdviceApi {
    val retrofitService : AdviceApiService by lazy {
        retrofit.create(AdviceApiService::class.java)
    }
}

Alright!, we're almost done!

I'm using the MVVM Architecture, which means for each fragment/activity I have a ViewModel Class in which I manage all the data for my app, and also this API call.

So in the ViewModel (this can be your class), I have a variable named _properties which is going to store my data, you can see its type it's AdviceProperty (Remember our class in the network package)

private var _properties = MutableLiveData<AdviceProperty>()

Next, I have other two variables:

private val viewModelJob = Job()
private val coroutineScope = CoroutineScope( viewModelJob + Dispatchers.Main )

The first one is the Job which is gonna define the lifecycle of the coroutine scope. So if its children fail, its gonna notify the parent and it will cancel the other children in case we have more instances running.

The second one is our coroutineScope, here we define in which thread our coroutine is going to run.

Then the method who is going to create the coroutine, and also manage the call to the API: getAdviceProperty

private fun getAdviceProperty(){

    coroutineScope.launch { 

        var getProperty = AdviceApi.retrofitService.getProperty()

        try {
            _properties.value =  getProperty.await()

        }catch (e: Exception){
            //library to show logs
            Timber.i("EROR ${e}");
        }
    }
}

As you can see here, we have coroutineScope.launch this block of code allows us to create a new coroutine and run it in the thread we define previously.

Then we can see in the getProperty variable the word “await”, this is because our Singleton class returns a Deferred object (feature or a promise in java).

If you are using view models do not forget to cancel the Job in the onClear() method

override fun onCleared() {
    super.onCleared()
    viewModelJob.cancel()
}

And that’s it! We have now our response in a variable and we can use it wherever we want. It is much less code than we use to write with java or without coroutines.

Take a look at my repository: lucky Piñata It has a working example of this topic.

"Hello world" in Esoteric Programming Languages? (Esolangs)

Jess Barrientos — Sat, 25 Jul 2020 20:02:55 +0000

Esoteric programming languages also called Esolangs are weird programming languages with basic syntax and a restricted alphabet. Basically, these programming languages were created just for fun because their use remains dubious.

All these examples will be compared with the basic Hello World in C (Language of my nightmares when I was in school)

// Hello World in C

int main(void) {
    printf("Hello, world!");
    return 0;
}

Let's see some examples.

INTERICAL

One of the earliest and famous known Esolang

"Hello World" example:

DO ,1 <- #13
PLEASE DO ,1 SUB #1 <- #238
DO ,1 SUB #2 <- #108
DO ,1 SUB #3 <- #112
DO ,1 SUB #4 <- #0
DO ,1 SUB #5 <- #64
DO ,1 SUB #6 <- #194
DO ,1 SUB #7 <- #48
PLEASE DO ,1 SUB #8 <- #22
DO ,1 SUB #9 <- #248
DO ,1 SUB #10 <- #168
DO ,1 SUB #11 <- #24
DO ,1 SUB #12 <- #16
DO ,1 SUB #13 <- #162
PLEASE READ OUT ,1
PLEASE GIVE UP

Brainfuck

This Esolang only uses ><+-.,[] and if you use any other character it will be ignored or taken as a comment.

"Hello World" example:

++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.

Fish ><>

In this programming language, every character is an instruction.

“Hello World” example:

"hello, world"r\
          o;!?l<

Befunge

One of the oldest and the most famous two-dimensional esolang. Befunge was created as a language that would be as hard to compile as possible. Well, they did it.

"Hello World" example:

64+"!dlroW ,olleH">:#,_@

Whitespace

It uses only whitespace as syntax. Everything other than spaces, tabs, or linefeeds is just ignored.

"Hello World" example:

Hello,[Space]world![Space][Space][Tab][Space][Space][Tab][Space][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Space][Tab][Space][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Space][Space][Space][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Tab][Space][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Tab][Space][Space][Tab][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Space][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[LF][LF][LF]

Emo

Currently stands for Emoticon Memory Obfuscation. Basically is simply a programming language that is written in emoticons.

"Hello World" example:

:^) :o) :o) :o) :^) :^(   
<;^}
:^) :^) :^) :^) :^) :^) :^(
;^}       
:^) :^) :^) :^) :^) :^) :^) :^) :^) :^(   
;^}
:^) :^) :^(
;^}                                                               
:^(                                                            
;-| ;-| ;-| ;-}                                                 
:-(>                                                         
;^}                                                             
:^) :^) :( :@                                                   
;^}                                                             
:^) :@                                                          
:^) :^) :^) :^) :^) :^) :^) :@                                 
:@                                                             
:^) :^) :^) :@                                                  
:(                                                              
;^}                                                             
:^) :^) :@                                                      
:(                                                              
;-| ;-}                                                         
:^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :@  
:(                                                              
;^}                                                             
:@                                                              
:^) :^) :^) :@                                                 
:-) :-) :-) :-) :-) :-) :@                                      
:-) :-) :-) :-) :-) :-) :-) :-) :@                              
;^}                                                             
:^) :@                                                          
;^| ;@

LOLCODE

This language expressed in examples of the lolcat Internet meme. This lolcat meme is often idiosyncratic and intentionally grammatically incorrect and is known as lolspeak.

"Hello World" example:

HAI 1.3
VISIBLE "Hello world!"
KTHXBYE

This is an example of a loop, so we can see this particular syntaxis

HAI 1.3
IM IN YR loop UPPIN YR var TIL BOTH SAEM var AN 10
        VISIBLE SMOOSH var AN " " MKAY!
IM OUTTA YR loop
KTHXBYE

Omgrofl

The name comes from combining the "words" omg and rofl. And Rofl is actually one of Omgrofl's commands.

"Hello World" example:

w00t a Hello, World! program by poiuy_qwert
lol iz 72
rofl lol
lol iz 101
rofl lol
lol iz 108
rofl lol
rofl lol
lool iz 111
rofl lool
loool iz 44
rofl loool
loool iz 32
rofl loool
loool iz 87
rofl loool
rofl lool
lool iz 114
rofl lool
rofl lol
lol iz 100
rofl lol
lol iz 33
rofl lol
stfu

Pikalang

Its instructions are sounds made by Pikachu from Pokémon

"Hello World" example:

pi pi pi pi pi pi pi pi pi pi pika pipi pi pi pi pi pi pi pi pipi pi pi
pi pi pi pi pi pi pi pi pipi pi pi pi pipi pi pichu pichu pichu pichu ka
chu pipi pi pi pikachu pipi pi pikachu pi pi pi pi pi pi pi pikachu
pikachu pi pi pi pikachu pipi pi pi pikachu pichu pichu pi pi pi pi pi
pi pi pi pi pi pi pi pi pi pi pikachu pipi pikachu pi pi pi pikachu ka
ka ka ka ka ka pikachu ka ka ka ka ka ka ka ka pikachu pipi pi pikachu
pipi pikachu

Chicken

In this programming language, the word "chicken" is the only valid symbol.

So the "Hello World" example is huge!

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken
chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

You really scroll down the whole chicken “Hello World”?!

Well, to find out more about these cute and strange programming languages, I recommend you take a look at this Esolang wiki, there are so many programming languages in which you can play, get stressed and, why not, get inspired to create your own Esolang.

Understanding Null Safety in Kotlin

Jess Barrientos — Fri, 17 Jul 2020 23:47:49 +0000

Programming errors involving nulls have been the source of countless bugs.

Kotlin is fighting NullPointerException (NPE) by introducing non-nullable and nullable variables, and now we can distinguish between references that can contain null values and those that cannot, and it is done natively.

By default, variables cannot contain nulls. BUT we can indicate that a variable can contain them using just a question mark (?). Take a look at the next example:

var dinosaur: String = null
// error: null can not be a value of a non-null type String

val dinosaur: String? = null // That’s better
print(dinosaur)
//output -> null

Easy peasy ... It's important to know some operators that can help us evaluate these null assignments.

? Operator (Safe calls)

This operator helps us to evaluate a variable that was previously defined as a variable that can hold nulls like in the next example:

val dinosaur: String? = null

print(dinosaur?.length)
// output-> null

We can also do the same with a non-nullable variable but this is an unnecessary safe call:

val dinosaur: String = "I'm a dinosaur"
print(dinosaur?.length)
//output -> 14

This is another example of using it with data classes, for example:

// we define that isSpacy can hold nulls
data class Taco(var name: String, var isSpacy: Boolean?)

Then we can do something like this:

// here we set isSapacy as null
val myTaco = Taco("Pastor", null)

So we have myTaco with isSpacy as null so the next code won’t compile:

myTaco.isSpacy.equals ("false”)
// error: only safe (?.) or non-null asserted (!!.) calls are allowed on a nullable receiver of type Boolean?

Instead of that, we should do a safe call like this:

myTaco.isSpacy?.equals(false)
//output -> null

In the previous example, Kotlin will evaluate myTaco.isSpacy and if it's null it will return null, else it will continue the execution of the code.

The ?: Operator or Elvis Operator

This Kotlin operator is a simple “if” that help us to easily and clear check if a value is null.

So this odd code:

val fruitName: String? = null

val nameLength: Int = if (fruitName! = null) fruitName.length else -1

Can be written like this:

val nameLength: Int = fruitName?.length ?: -1

If fruitName is null then return -1 else return whatever fruitName.length is.

The !! Operator, Bang Bang operator or double-bang operator

So far, so good, but what happens if I really like NullPointerExceptions. Where are they? In this case, Kotlin let up to us manage the NPE. So, here is where we can use the bang-bang operator (!!)

Remainder: This is only for NPE-lovers

val size = fruitName!!.length

Here we are telling Kotlin that we want to get an NPE in case of fruitName has a null value, So we are asking for an NPE explicitly and it is well known that if we can, avoid this operator.

As we saw, Kotlin provides us an easy option to handle the pain of getting NullPointerExceptions, and almost always it does not allow us to compile our code until we fix them. So now, let's avoid them wisely.

How to use data classes in Kotlin

Jess Barrientos — Tue, 07 Jul 2020 23:17:13 +0000

Sometimes we need to create a class whose main purpose is only to hold data without any other functionality in it. Here a simple example of what we used to do in Java:

public class Song {

    private String title;
    private int minutes;

    public pojoExample(String title, int minutes){
        this.title = title;
        this.minutes = minutes;
    }

    public String getTitle(){
        return title;
    }

    public void setTitle(String title){
        this.title = title;
    }

    public int getMinutes(){
        return minutes;
    }

    public void setMinutes(int minutes){
        this.minutes = minutes;
    }
}

This is what Kotlin is offering to us:

data class Song (var title: String, var minutes: Int)

That’s it!.

So far, we can see that Kotlin helps us to not write useless code, and also looks cleaner.

Also Kotlin generate some functions automatically for us:

constructor
toString()
hashCode()
copy ()
componentN()

Nice!, Let’s take a closer look.

Imagine we have the next data class:

data class Dog (var name: String, var age: Int, var isFriendly: Boolean)

So, first of all, we define the class Dog, which has 3 properties: name, age, and isFriendly. All of them start with “var” which means that the property can be reassigned. Then, we have the name of the property and the type. Also, we can add a default value to our properties.

data class Dog (var name: String, var age: Int, var isFriendly: Boolean = true)

We set isFriendly as true by default, so is not necessary to add it in the definition of our instance:

var myDog0 = Dog("spoon", 1, false)  

var myDog1 = Dog(age = 10, isFriendly = true, name = "fork")

var myDog3 = Dog(age = 10, name = "cup")

var myDog4 = Dog("knife", 1)

Also, we can define our properties in the body of our class, so that means that we can't set the property value when we create an instance of a class, we can only set it directly in the object, once is created.

data class Cat(val name: String) {
     var age: Int = 0
 }

// how instance an object
var myCat = Cat("shampoo")
myCat.age = 10

println(myCat.age)
// output —> 10

ToString()

This method converts the data class object to a string, listing all their properties:

var myCat = Cat("shampoo")
println(myCat.toString())
// output --> Cat(name=shampoo) 

var myDog0 = Dog("spoon", 1, true)  
println(myDog.toString())
// output --> Dog(name=spoon, age=1, isFriendly=true)

We can also override this method in case we need something more customized:

data class Wine(val name: String, val age: Any, val brand: String){
     override fun toString(): String = name + " " + age + " " + brand
 }

var myWine = Wine(name = "Dicorno", age = 1, brand = "cheap")

println(myWine.toString())
// output—>  Dicorno 1 cheap

Copy

Sometimes we need to copy a data class but changing one or more of their properties and keeping the rest intact. Copy function allows us to do that. Just we need to set the property that we want to change and Kotlin will do the rest.

Here an example:

data class Dog (var name: String, var age: Int, var isFriendly: Boolean)

// instance of our class Dog
var myDog = Dog(name = "spoon", age = 1, isFriendly =  true)  

// copy our class myDog, but changing only the name
val yourDog = myDog.copy(name = "Bull")

println(yourDog.toString())

//output —> Dog(name = Bull, age = 1, isFriendly = true)

Destructuring Declarations

This is another helpful functionality that we can do with our data classes, we can get as variables the properties of one data class

var myDog = Dog(name = "spoon", age = 1)

// get the properties
 val (name, age) = myDog

 println(name + " " + age)
// output -> spoon 1

So, As we can see data classes let us get cleaner code and (sometimes) forget about the boilerplate that we used to do in Java.

(Spanish) Obtener un String separado de una lista en Kotlin: joinToString()

Jess Barrientos — Tue, 30 Jun 2020 16:01:56 +0000

joinToString() genera un String desde una colección de elementos basado en los argumentos que le pasemos, si es que le pasamos alguno.

fun <T> Array<out T>.joinToString(
    separator: CharSequence = ", ",
    prefix: CharSequence = "",
    postfix: CharSequence = "",
    limit: Int = -1,
    truncated: CharSequence = "...",
    transform: ((T) -> CharSequence)? = null
): String

Ok, podemos ver que todos los argumentos son opcionales, esto significa que podemos usar esta función sin mandarle ninguno. En este caso la función regresa un resultado similar a cuando llamamos toString() en la coleción : Un String de elementos separado por comas.

listOf("1", "2", "3", "4", "5", "6").joinToString()
// output -> "1, 2, 3, 4, 5, 6"

listOf("1", "2", "3", "4", "5", "6").toString()
// output -> [1, 2, 3, 4, 5, 6]

Ahora, vamos a cambiar cada argumento:

Separator

Este argumento nos ayuda a agregar un separador a nuestro String, su valor por default es ", " y podemos cambiar este valor por lo que queramos, siempre y cuando sea un CharSequence.

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = ".")
// output -> "1.2.3.4.5.6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "-")
// output -> "1-2-3-4-5-6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "@#€")
// output -> "1@#€2@#€3@#€4@#€5@#€6"

Prefix

Nos permite agregar un elemento al principio de la cadena.

listOf("1", "2", "3", "4", "5", "6").joinToString(prefix="$")
//output -> "$1, 2, 3, 4, 5, 6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "*", prefix="$")
//output -> "$1*2*3*4*5*6"

Postfix

Este argumento agrega un elemento al final de la cadena, al igual que prefix su valor por defautl es "", muy útil cuando necesitamos crear, por ejemplo, un query de SQL o una expresión regular.

listOf("1", "2", "3", "4", "5", "6").joinToString(postfix="$")
//output -> "1, 2, 3, 4, 5, 6$"

listOf("1", "2", "3", "4", "5", "6").joinToString(prefix = "[", postfix="]")
//output -> "[1, 2, 3, 4, 5, 6]"

Limit

A veces, nuestras colecciones pueden ser muy grandes, entonces podemos decirle a la función que solo queremos agregar unos cuantos elementos. limit toma un valor positivo ( >= 0 ). Por default, el valor es "-1", lo que significa que no hay un límite definido y tomara todos los elementos de la colección, pero, si le mandamos un 0, nada se concatena.

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4)
// output -> "1, 2, 3, 4, ..."

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 0)
// output -> ...

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = -1)
// output -> "1, 2, 3, 4, 5, 6"

Truncated

Como puedes ver, cuando limit es agregado, tres puntos aparecen al final del string, esto pasa por que los argumentos limit y truncated van juntos (o deberían). Por default su valor es "..." y podemos mandar casi cualquier cosa para customizar.

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4, truncated = "")
// output -> "1, 2, 3, 4, "

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4, truncated = "... will be continued")
// output -> "1, 2, 3, 4, ... will be continued"

Transform

Finalmente, para customizar la forma en la que nuestros elementos son mostrados: transform. Este argumento nos ayuda a cambiar cada elemento antes de agregarlo a el string resultante, su valor por default es null

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { it + 2 })
// output -> "12, 22, 32, 42, 52, 62"

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { it + " item" })
// output -> "1 item, 2 item, 3 item, 4 item, 5 item, 6 item"

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { "$"+it+".00" })

// output -> "$1.00, $2.00, $3.00, $4.00, $5.00, $6.00"

Para finalizar, Yo uso esta función cuando necesito crear un query o agregar un formato a los elementos de la lista, como en el último ejemplo de código agregandole "$" y ".00" para obtener un formato simple de precio.

¿Que otros usos le ves?

Instale IntelliJ IDEA para correr los ejemplos

Easy way to get a separated string from a list in Kotlin: joinToString()

Jess Barrientos — Mon, 29 Jun 2020 19:10:21 +0000

joinToString() builds a single string from the collection elements based on the provided arguments if we decided to add them.

fun <T> Array<out T>.joinToString(
    separator: CharSequence = ", ",
    prefix: CharSequence = "",
    postfix: CharSequence = "",
    limit: Int = -1,
    truncated: CharSequence = "...",
    transform: ((T) -> CharSequence)? = null
): String

Ok, We can see that all arguments are optional, which means that we can use this function without setting any argument. In this case, the function will return the result similar to calling toString() on the collection: a String of elements.

listOf("1", "2", "3", "4", "5", "6").joinToString()
// output -> "1, 2, 3, 4, 5, 6"

listOf("1", "2", "3", "4", "5", "6").toString()
// output -> [1, 2, 3, 4, 5, 6]

Now, let's change the value of each parameter.

Separator

This argument helps us add a separator for our string, the default value is ", " and we can change this value with whatever we want, as long as it's a CharSequence.

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = ".")
// output -> "1.2.3.4.5.6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "-")
// output -> "1-2-3-4-5-6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "@#€")
// output -> "1@#€2@#€3@#€4@#€5@#€6"

Prefix

It allows us to add an element to the beginning of the string.

listOf("1", "2", "3", "4", "5", "6").joinToString(prefix="$")
//output -> "$1, 2, 3, 4, 5, 6"

listOf("1", "2", "3", "4", "5", "6").joinToString(separator = "*", prefix="$")
//output -> "$1*2*3*4*5*6"

Postfix

This adds an element to the end, as prefix, its default value is "", very useful when we need to create, for example, an SQL query or a regular expression.

listOf("1", "2", "3", "4", "5", "6").joinToString(postfix="$")
//output -> "1, 2, 3, 4, 5, 6$"

listOf("1", "2", "3", "4", "5", "6").joinToString(prefix = "[", postfix="]")
//output -> "[1, 2, 3, 4, 5, 6]"

Limit

Sometimes, our collections could be huge, so we can tell the function that we only want to add a few elements. limit needs a non-negative value ( >= 0 ). By default, the value is "-1" which means there's no limit and all elements will be appended to the string, but if we set 0 nothing will be appended.

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4)
// output -> "1, 2, 3, 4, ..."

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 0)
// output -> ...

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = -1)
// output -> "1, 2, 3, 4, 5, 6"

Truncated

As you can see when limit is added three dots appear at the end of the string, this happens because limit and truncated arguments go together. So by default, truncated value is "..." and we can use almost anything we want to customize it.

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4, truncated = "")
// output -> "1, 2, 3, 4, "

listOf("1", "2", "3", "4", "5", "6").joinToString(limit = 4, truncated = "... will be continued")
// output -> "1, 2, 3, 4, ... will be continued"

Transform

Finally, to customize the representation of elements themselves: transform. It helps us change each element before adding it to the result string, its default value is null.

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { it + 2 })
// output -> "12, 22, 32, 42, 52, 62"

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { it + " item" })
// output -> "1 item, 2 item, 3 item, 4 item, 5 item, 6 item"

listOf("1", "2", "3", "4", "5", "6").joinToString(transform = { "$"+it+".00" })

// output -> "$1.00, $2.00, $3.00, $4.00, $5.00, $6.00"

To finish, I use this function when I need to create a SQL query or add a custom format, like the last code example adding it the "$" and ".00" to get a simple price format.

Now tell me, What other uses do you see it?

I have installed IntelliJ IDEA to run the examples.