Develop Android apps elegantly with Kotlin

Preface

In the previous article, we briefly learned about the advantages of the new language Kotlin, and also touched upon some common syntax and its simple usage. I believe you will have a strong interest in it. Let's understand it as being interested in it for the time being, hahaha. So, how can we apply this new language in Android? Today's article will show you how to use Kotlin to develop Android applications, and compare it with our traditional language Java, so that you can truly feel its beauty and elegance.

Configuration

Project gradle file

 apply plugin: 'com.android.application'   
 
 apply plugin: 'kotlin-android'   
 
 apply plugin: 'kotlin-android-extensions'   
 
  
 
 dependencies { 
 
    classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.1.1'   
 
 }

app Gradle file:

 compile 'org.jetbrains.kotlin:kotlin-stdlib:1.1.1'   
 
 compile 'org.jetbrains.anko:anko-sdk25:0.10.0-beta-1' // sdk15, sdk19, sdk21, sdk23 are also available 
 
 compile 'org.jetbrains.anko:anko-appcompat-v7:0.10.0-beta-1'  

Anko

Through the above configuration, you will find that the dependency of anko is introduced. Anko is a powerful library developed by JetBrains. Speaking of JetBrains, it is awesome. Kotlin language is developed by them, and the most popular development tool Intellij idea is also developed by them. AS is also based on IDEA. Well, let's get back to the topic. Anko is a Kotlin library officially developed by Kotlin to make the development of Android applications faster and easier, and can make the code we write simpler, clearer and easier to read. It includes multiple parts, as follows

 Anko Commons: a lightweight library full   of helpers for intents, dialogs, logging and so on ; 
 
 Anko Layouts: a fast and type-safe way to write dynamic Android layouts; 
 
 Anko SQLite: a query DSL and parser collection for Android SQLite; 
 
 Anko Coroutines: utilities based on the kotlinx.coroutines library

Next, let's understand the advantages of using Kotlin language to develop Android through code.

No more findViewById

Anyone who has done Android development knows that if you write too many layout files, findViewById is also a lot of work, and you have to declare the variable first, then findViewById and then force it into your control. The usage is generally as follows

 TextView username; 
 
 username=(TextView)findViewById(R.id. user ); 
 
  
 
 username.setText( "I am a TextView" );

Sometimes I feel like vomiting when writing this. Some people may say that there are some annotation libraries now, such as butterknife. When we use annotations, we don’t need to findViewById. The usage is as follows

 @BindView(R.id. user ) 
 
 TextView username; 
 
 username.setText( "I am a TextView" );

That's true. Using annotations does save us some work, but it's still not the simplest solution. The simplest solution is to assign a value to the control with the id user. You may find this a bit unbelievable. But Kotlin does it. We can write it like this:

 user .text = "I am a TextView"  

Do you feel like you've seen it too late? It's so concise. user is the id declared in our layout file, and .text is like setText(). In Kotlin, we don't see set/get methods like in Java. It should be noted that when we want to use it like this (without findViewById, directly use the XML control, we need to add apply plugin: 'kotlin-android-extensions' in gradle), we need to add the following line of code

 //activity_login is our layout 
 
 import kotlinx.android.synthetic.main.activity_login.*

Anko Layout

Usually we use XML files to write our layouts, but it has some disadvantages such as not type-safe, not null-safe, parsing XML files consumes more CPU and power, etc. Anko Layout can use DSL to dynamically create our UI, and it is much more convenient than using Java to dynamically create layouts. It is mainly more concise, and it has a hierarchical relationship with XML to create layouts, which makes it easier for us to read.

 verticalLayout { 
 
 val textView = textView ( "I am a TextView" ) 
 
            val name = editText( "EditText" ) 
 
            button( "Button" ) { 
 
                onClick { toast( "${name.text}!" ) } 
 
 } 
 
 }

We can remove setContentView in the OnCreate method, and then add the above code to display the effect as shown below, that is, a vertical linear layout with a TextView, an EditText, and a Button. And the Button has a click event, when clicked, the content of the EditText is displayed.

Displayed as a toast.

The above code is very simple and easy to understand. Of course, the default controls cannot meet our needs. For example, we need to change the color and size of the font, set the width and height, and set the margin and padding values. So how to implement it? Of course, it is also very simple, because its logic is the same as the XML writing layout. For example, the following implementation

 val textView = textView ( "I am a TextView" ) { 
 
                textSize = sp(17).toFloat() 
 
                textColor=context.resources.getColor(R.color.red) 
 
 }.lparams{ 
 
                margin=dip(10) 
 
                height= dip(40) 
 
                width= matchParent 
 
 }

I think I don't need to explain the above code, you should be able to see the effect of the control, because its attributes correspond to the names of the attributes we set in XML.

In the process of creating the UI above, we directly wrote the code for creating the UI in the onCreate method. Of course, there is another way to write it. We create an inner class to implement the AnkoComponent interface and override the createView method, which returns a View, which is the layout we created. Modify it as follows

 inner class UI : AnkoComponent<LoginActivity> { 
 
        override fun createView(ui: AnkoContext<LoginActivity>): View { 
 
 return   with (ui){ 
 
               verticalLayout { 
 
 val textView = textView ( "I am a TextView" ) { 
 
                       textSize = sp(17).toFloat() 
 
                       textColor=context.resources.getColor(R.color.red) 
 
 }.lparams{ 
 
                       margin=dip(10) 
 
                       height= dip(40) 
 
                       width= matchParent 
 
 } 
 
                   val name = editText( "EditText" ) 
 
                   button( "Button" ) { 
 
                        onClick { view -> 
 
                            toast( "Hello, ${name.text}!" ) 
 
 } 
 
 } 
 
 } 
 
 } 
 
 } 
 
 }

Then add a line of code in the onCreate method to create our layout page.

 UI().setContentView(this@LoginActivity)

Now we compile and run, and we find that the effect is the same as the interface written in the layout file. However, its performance is advantageous, but I didn't find the performance advantage. Anyway, this DSL is indeed easy to read and easy to use. In the above code, you may have noticed dip(10), which means converting 10dp to pixels. It is an extension function of Anko. If you have read the source code of Anko, you will find that there are a lot of extension functions in it, which is also one of the advantages of the Kotlin language. It is indeed very powerful, for example, dip extension (extract View extension)

 inline fun View .dip(value: Int ): Int = context.dip(value) 
 
 fun Context.dip(value: Int ): Int = (value * resources.displayMetrics.density).toInt()

In the above, resources.displayMetrics.density has the same effect as our Java getResources().getDisplayMetrics().density, but looking at it, you may feel more comfortable than writing in Java. At least, that's how I feel.

In the above, we added a click event to Button, and we found that it supports lambda expressions. If we want to display a Toast, we only need toast("content"), which is very concise. In fact, it is also an extension function.

 inline fun AnkoContext<*>.toast(message: CharSequence) = ctx.toast(message) 
 
 fun Context.toast(message: CharSequence) = Toast.makeText(this, message, Toast.LENGTH_SHORT).show()

Of course, creating a dialog is still very simple, as follows

 alert ( "I am Dialog" ) { 
 
 yesButton { toast( "yes" )} 
 
 noButton { toast( "no" )} 
 
 }.show()

The more I read it, the more comfortable I feel, haha. Here is another powerful, simple, and concise code implementation.

 doAsync { 
 
 //Background execution code 
 
 uiThread { 
 
 //UI thread 
 
 toast( "Thread${Thread.currentThread().name}" ) } 
 
 }

This code implements the effect of AsyncTask, but you should find it much simpler than the Java implementation. Of course, unless you are color blind, you will notice the simplicity.

If you use Kotlin to develop Android for a while, you will find that it reduces a lot of code for us. Of course, more advantages and uses need to be explored by ourselves. I believe it will surprise you after exploration.

Implement a simple login interface

The interface is very simple, pseudo code

 <LinearLayout> 
 
  
 
 <ImageView/> 
 
  
 
 <LinearLayout> <ImageView/><EditText account/><LinearLayout> 
 
  
 
 <LinearLayout> <ImageView/><EditText password/><LinearLayout> 
 
  
 
 <Button Login/> 
 
  
 
 <LinearLayout> <CheckBox Remember password/><TextView Privacy Agreementxieu/><LinearLayout> 
 
  
 
 <TextView/> 
 
  
 
 </LinearLayout>

It doesn't look complicated, so I won't post the XML implementation code here. If you want to see the XML implementation, you can click to check it out. Next, let's just look at how Anko implements this layout in Kotlin code.

 lateinit var et_account: EditText 
 
    lateinit var et_password: EditText 
 
 inner class LoginUi : AnkoComponent<LoginActivity> { 
 
        override fun createView(ui: AnkoContext<LoginActivity>) = with (ui) { 
 
 verticalLayout { 
 
                backgroundColor = context.resources.getColor(android.R.color.white) 
 
                gravity = Gravity.CENTER_HORIZONTAL 
 
                imageView(R.mipmap.ic_launcher).lparams { 
 
                    width = dip(100) 
 
                    height = dip(100) 
 
                    topMargin = dip(64) 
 
 } 
 
  
 
                linearLayout { 
 
                    gravity = Gravity.CENTER_VERTICAL 
 
                    orientation=HORIZONTAL 
 
                    backgroundResource = R.drawable.bg_frame_corner 
 
                    imageView { 
 
                        image = resources.getDrawable(R.mipmap.ic_username) 
 
                    }.lparams(width = wrapContent, height = wrapContent) { 
 
                        leftMargin = dip(12) 
 
                        rightMargin = dip(15) 
 
 } 
 
                    et_account = editText { 
 
 hint = "Login account"   
 
                        hintTextColor = Color.parseColor( "#666666" ) 
 
                        textSize = 16f 
 
                        background = null   
 
 } 
 
                }.lparams(width = dip(300), height = dip(40)) { 
 
                    topMargin = dip(45) 
 
 } 
 
  
 
                linearLayout { 
 
                    orientation=HORIZONTAL 
 
                    backgroundResource = R.drawable.bg_frame_corner 
 
                    gravity = Gravity.CENTER_VERTICAL 
 
                    imageView { 
 
                        image = resources.getDrawable(R.mipmap.ic_password) 
 
                    }.lparams { 
 
                        leftMargin = dip(12) 
 
                        rightMargin = dip(15) 
 
 } 
 
                    et_password = editText { 
 
 hint = "Login password"   
 
                        hintTextColor = Color.parseColor( "#666666" ) 
 
                        textSize = 16f 
 
                        background = null   
 
 } 
 
 }.lparams { 
 
                    width = dip(300) 
 
                    height = dip(40) 
 
                    topMargin = dip(10) 
 
  
 
 } 
 
  
 
 button( "Login" ) { 
 
                    gravity = Gravity.CENTER 
 
                    background = resources.getDrawable(R.drawable.bg_login_btn) 
 
                    textColor = Color.parseColor( "#ffffff" ) 
 
 onClick { 
 
                        if (et_account.text.toString().isNotEmpty() && et_password.text.toString().isNotEmpty()) 
 
 startActivity<MainActivity>() else toast( "Please enter your account or password" ) 
 
 } 
 
                }.lparams(width = dip(300), height = dip(44)) { 
 
                    topMargin = dip(18) 
 
 } 
 
                linearLayout { 
 
                    orientation=HORIZONTAL 
 
                    gravity = Gravity.CENTER_VERTICAL 
 
 checkBox( "Remember password" ) { 
 
                        textColor = Color.parseColor( "#666666" ) 
 
                        textSize = 16f 
 
                        leftPadding = dip(5) 
 
 } 
 
 textView( "Privacy Agreement" ) { 
 
                        textColor = Color.parseColor( "#1783e3" ) 
 
                        gravity = Gravity. RIGHT   
 
                        textSize = 16f 
 
                    }.lparams(width = matchParent) 
 
                }.lparams(width = dip(300)) { 
 
                    topMargin = dip(18) 
 
 } 
 
  
 
                textView( "Copyright © Code4Android" ) { 
 
                    textSize = 14f 
 
                    gravity = Gravity.CENTER or Gravity.BOTTOM 
 
  
 
 }.lparams { 
 
                    bottomMargin = dip(35) 
 
                    weight=1f 
 
 } 
 
 } 
 
 } 
 
 }

How about the code above? It looks good, right? Even if you can't write it now, you can still understand it. In the above, we set an event for the login button to open MainActivity. The Activity we want to jump to is written in startActivity. If you want to pass parameters to the opened interface, write them directly in (). For example, if we pass the input account and password to the jump interface, it is implemented as

 startActivity<MainActivity>( "account"   to et_account.text.toString(), "password"   to et_password.text.toString())

In fact, Anko's power is far more than this, and it is worth our careful appreciation. If you want to learn more, you can go to GitHub Anko (https://github.com/Kotlin/anko). This is the end of this article. If you find any mistakes while reading, please point them out. Thank you. Have a wonderful day.