Kotlin has become the new darling of Android after waking up [with code]

Preface

Did you watch the live broadcast of Google I/O 2017 Developer Conference in the early morning? Although Android has become the most popular operating system for mobile devices, with more than 2 billion activated devices worldwide using the Android operating system, for Google, the need to rely on Java for Android development has always been a headache, because Oracle has been exhausted by the lawsuit between Java and Google over the Android system.

Now, Google officially supports Kotlin, making it the officially recognized language for Android development, and starting with Android Studio 3.0, Kotlin will be directly integrated without installing any plug-ins.

text

Android UI development has always been done using XML files. Although in theory, UI can be implemented using Java, it is not very useful. Not long ago, JetBrains launched Kotlin, a modern language for JVM that can implement Android UI very well.

Jetbrains claims that Anko is a faster and easier development style in Android. Kotlin provides the Anko library as a DSL (domain-specific language) to design Android interfaces. A simple example:

The following interface consists of an image and a button:

Use Anko to implement it as follows:

 verticalLayout{
       imageView(R.drawable.anko_logo).
                lparams(width= matchParent) {
                    padding = dip(20)
                    margin = dip(15)
 }
        button( "Tap to Like" ) {
                onClick { toast( "Thanks for the love!" ) }
 }
 }

We define a vertical linear layout as a container to contain pictures and buttons, use lparams to define the layout's position information, and implement the button's click event using Kotlin's inline function.

Advantages of using Anko:

• We can embed the UI layout into the code, making it type-safe.
• It increases efficiency since we are not writing in XML because CPU time is wasted on parsing XML.
• After the programmatic conversion of the UI, we can put the Anko DSL snippet into a function. This facilitates code reuse.
• Obviously, the code is more concise, readable and understandable.

Now we use Anko Layout and Kotlin to build a to-do app to list the things we need to do today.

You can find the to-do app project on GitHub.

Add Anko library to Android Studio:

Learn how to add Kotlin to your Android project in streamline-android-java-code-with-kotlin. With Kotlin, we need to add Anko dependencies in app/build.gradle so that we can compile the project smoothly.

 compile [ size =1em] 'org.jetbrains.anko:anko-sdk15:0.8.3'   
 
 // sdk19,21,23 can also be used

You can add this dependency based on the minSdkVersion of your project. The example above shows that 15<=minSdkVersion<19. You can find other Anko dependency libraries you need in Anko's GitHub repository.

We are going to use the following dependencies:

 compile 'org.jetbrains.anko:anko-design:0.8.3'   
 
 compile 'org.jetbrains.anko:anko-appcompat-v7:0.8.3'  

Call Anko layout in Activity:

We no longer use XML to write layout files, so we don't need XML View, so we don't need findViewById() method. Here we assume that our Anko layout class is MainUI, and then we can start writing our activit content:

 var ui =MainUI() //MainUI class replaces XML layout 
 
 ui.setContentView(this) //this represents the Activity class

Now we create a Kotlin file MainActivity.kt and write the following code:

 class MainActivity : AppCompatActivity() { val task_list = ArrayList<String>() //Task list table
    override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       savedInstanceState?.let { val arrayList = savedInstanceState.get( "ToDoList" )
           task_list.addAll(arrayList as List<String>)
 } var adapter = TodoAdapter(task_list) //Define adapter
 var ui = MainUI(adapter) //Define the Anko UI layout to be used
 ui.setContentView(this) //Set Anko layout for Activity
   } override fun onSaveInstanceState(outState: Bundle?) {
       outState?.putStringArrayList( "ToDoList" , task_list)
       super.onSaveInstanceState(outState)
 }
 }

task_list is the ArrayList that will populate the TodoAdapter of ListView. MainUI(adapter) is our Anko UI file, which takes the TodoAdapter class as the adapter parameter. So, let's create another TodoAdapter class.

TodoAdapter adapter for ListView

The TodoAdapter class has a list of type ArrayList<String> and inherits BaseAdapter. So we need to override four methods:

public int getCount()public Object getItem(int i)public long getItemId(int i)public View getView(int i, View view, ViewGroup viewGroup)

In the getView() method we need to use Anko to design the layout of a table element.

 public   int getCount() public Object getItem( int i) public long getItemId( int i) public   View getView( int i, View   view , ViewGroup viewGroup) 
 
 In the getView() method we need to use Anko to design the layout of a table element. 
 
 override fun getView(i : Int , v : View ?, parent : ViewGroup?) : View {
 return   with (parent!!.context) { //The number of tasks starts from 1
              var taskNum: Int = i +1
 //List table element layout
 linearLayout {
                   lparams(width = matchParent, height = wrapContent)
                   padding = dip(10)
 orientation = HORIZONTAL //Task number
 textView {
                       id = R.id.taskNum
                       text= "" +taskNum
                       textSize = 16f
                       typeface = Typeface.MONOSPACE
                       padding =dip(5)
 } //Task name
 textView {
                        id = R.id.taskName
                       text=list.get(i)
                       textSize = 16f
                       typeface = DEFAULT_BOLD
                       padding =dip(5)
 }
 }
 }
 }

• In this method, we return a view that contains a horizontalListView layout of list items. This is done using Kotlin's with syntax, which allows us to call many methods on an object instance at once.
• Each list item contains two textviews for displaying the task number and task name.
• linearLayout, textView are extension functions. Extension functions give us the ability to enable any class with new functionality.
• text, textSize, typeface have getter and setter methods in android.widget.TextView, and padding is a property added by Anko.

Moving on to the next step, we need to define the list operation functions. Therefore, we need to define add(String) and delete(Int) methods in TodoAdapter. add(String) adds the task name as a parameter to the task. delete(Int) takes the task location as a parameter to delete the task. Here is the specific implementation:

 //Method to add tasks to the task list
 fun add (text: String) {
       list. add (list. size , text)
 notifyDataSetChanged() //Update data } //Method to remove tasks from the task list
 fun delete (i: Int ) {
 list.removeAt(i)
 notifyDataSetChanged() //Update data
 }

So, now that we have designed our list, we can also add and remove items to our list. Next we will complete the code for this adapter class.

 TodoAdapter(val list: ArrayList<String> = ArrayList<String>()) : BaseAdapter() {
               override fun getView(i : Int , v : View ?, parent : ViewGroup?) : View {
 return   with (parent!!.context) {
                                   //taskNum will serve as the S. No . of the list starting from 1
                                   var taskNum: Int = i +1
                                   //Layout for a list view item
                                   linearLayout {
                                          id = R.id.listItemContainer
                                          lparams(width = matchParent, height = wrapContent)
                                          padding = dip(10)
                                          orientation=HORIZONTAL
                                             textView {
                                                   id = R.id.taskNum
                                                   text= "" +taskNum
                                                   textSize = 16f
                                                   typeface = Typeface.MONOSPACE
                                                   padding =dip(5)
                                             }
                                          textView {
                                                  id = R.id.taskName
                                                  text=list.get(i)
                                                  textSize = 16f
                                                  typeface = DEFAULT_BOLD
                                                  padding =dip(5)
                                           }
                                    }
                                }
 }
           override fun getItem(position : Int ) : String {
 return list[position
 }
           override fun getCount() : Int {
 return list.size​     
 }
           override fun getItemId(position : Int ) : Long {
                     //can be used to   return the item's ID column   of   table          
 0L
 }
 // function   to   add an item to the list
           fun add (text: String) {
                   list. add (list. size , text)
                   notifyDataSetChanged()
 }
 // function   to   delete an item from list
          fun delete (i: Int ) {
                   list.removeAt(i)
                   notifyDataSetChanged()
 }
 }

Note that you must import org.jetbrains.anko.* when using Anko DSL classes.

Design the appearance of your project

Anko provides us with the convenience of using UI for Activity in a separate Kotlin class. Therefore, each screen can be considered as a UI-Activity matching pair of Kotlin class. This UI class is implemented by inheriting the functionality of AnkoComponent<T> interface defined in org.jetbrains.anko package.

In addition to this interface, JetBrains also provides a free DSL layout preview feature. Here is what the Anko DSL layout preview looks like in Android Studio:

The corresponding plugin for Anko Preview can be downloaded from here. Please note that at the time of writing this article, Anko DSL layout preview for Android Studio 2.2 is listed as an open source issue.

Back to the topic, let's design the MainUI class to display all the task lists. The MainUI class inherits the AnkoComponent<T> interface, where T refers to the owner of the UI, and the content of the activity will be this UI. In our case, the owner is the MainActivity that we have defined above. Next, during initialization, we must pass the TodAadapter object to this class, because this adapter will be used to populate the list. So, the MainUI declaration becomes:

 class MainUI(val todoAdapter : TodoAdapter) : AnkoComponent<MainActivity>

Now we need to override the createView() method to take the AnkoContext object as a parameter and return a View type:

 override fun createView(ui: AnkoContext<MainActivity>): View = with (ui) { 
 
 }

In the createView() method, we return the UI definition to the owner, the activity, which is MainActivity in this case, so let’s write the createView() method next:

Step 1-Design the homepage

Initially, the homepage is an empty list. So, we have a textView asking the user to create a Todo List for the day:

 return relativeLayout {
 //Declare ListView
                        var todoList : ListView? = null         
 //When there is no task, display the textView content "What's your Todo List for today?"          
                        val hintListView = textView( "What's your Todo List for today?" ) {
                                            textSize = 20f
                          }.lparams {
                    centerInParent()
 }
 }

centerInParent() is an auxiliary method that defines the layout of the view as vertically and horizontally relative to the center. Because it is a to-do application, its essence is to display a list of tasks. So, we define listView here:

 //listView
 verticalLayout {
               todoList=listView {
              //assign adapter
             adapter = todoAdapter
 }
 }.lparams {
 margin = dip(5)
 }

todoAdapter is a member variable we defined in the MainUI class declaration. We initialize the listView's adapter with the value of todoAdapter, which is an object of the TodoAdpater class that will be used to populate the list.

To help users add tasks, we provide a Material design style floatingActionButton at the bottom right of the main screen. So we use Anko to program the floatingActionButton as follows:

 floatingActionButton {
         imageResource = android.R.drawable.ic_input_add
 }.lparams {
 //Set the button to the bottom right of the screen
                           margin = dip(10)
                           alignParentBottom()
                           alignParentEnd()
                           alignParentRight()
                           gravity = Gravity.BOTTOM or Gravity. END         
 }

Due to space limitations, for Step 2 and Step 3, please click "Read original text" in the lower left corner to view the entire article.

***'s idea

We did not use any XML layout resources when developing this to-do app, but we were able to design the application in a similar style. Anko removes the burden of presenting data, responding to user interactions, connecting to the database, etc. from the application's activities or fragments. In addition, isolating the UI and Activity classes makes the application closer to the MVP (Model-View-Presenter) architecture. You can learn about Anko's advanced features here.

Although it has some disadvantages like slower compilation and larger application size, it packs a lot of punch in terms of code reuse, maintenance, and testing.

This is the first time I have translated such a long article. It is purely hand-typed. If there are any mistakes, please point them out and forgive me! I also found this article to translate because of my interest in Kotlin. Friends who are interested can take a look and learn from it.