Introduction to Anko for Android  (3/4) | eMan

Introduction to Anko for Android  (3/4)

In the third article of the Anko library series we are going to improve the design of our demo application so it looks a bit better. We will also get to know other extension functions of Anko, e.g. how to set the app layout to portrait or landscape mode.

In the first article we learned how to create the UI which we defined as separate components (AnkoComponent). We also tried to use them inside the Activity classes. In the previous article we added more logic into our demo application. Now it is time to go back a bit and focus on improving our UI.

List of all parts of the series:

1. Setting up the Android Studio, project, and creating your first view in Anko
2. Buttons, Toasts, Alert Dialogs, Intents, UI & Background Threads
3. View Enhancements
4. Fragments

Let’s start by adding the padding into the root UI element (vertical layout) in the SignInView component:

 

SignInView.kt – without padding

 

 

SignInView.kt – padding added

 

DSL written above is equal to XML definition:

 

 

Notice that the font size is set as the same for both components in the SignInView component. The textSize is equal to 24f.

 

 

Anko has another useful extension function; applying parameters into the view recursively, meaning applyRecursively{}. It allows us to set the TextSize parameter recursively to all UI components, e.g. to the EditText type:

 

 

In the next step we will add the scroll component to SignInView and align the form to center. After completing these steps, the UI will look like this:

 

 

I will not describe every little change I made step-by-step, but we will discuss the most important ones. Please copy the following code, use it in your demo app, and try running the application.

 

 

Line 26: we added new a gravity parameter aligned to center
Line 28: we added a scrollView component including verticalLayout wrapping Sign in form
Line 32: here we can see our original verticalLayout to which we added the gravity parameter with center alignment
Line 37: 300dp setting for form size

Note: You may wonder why we have a definition of lparams on line number 37 within the verticalLayout component instead of after the layout termination as is usually recommended. That is because the layout length setting in 0.9 works only with the definition I provided you. Additionally, it will work only if we move the code to the apply function:

 

 

Let’s go back to the original code without using the apply function. At line 40, you may notice the following code:

 

 

Using the View#setBackground requires API ≥ 16. Anko contains several functions for these purposes and for different portrait and landscape settings:

 

 

So in our case, when we do not distinguish the rotation of the device, we may also use the following entry:

 


Summary

In this article we learnt how to add more parameters such as padding and gravity to the UI components and we also added the component scroll view. We also tried applying those parameters recursively (e.g. textSize).
Finally, we now understand the way Anko library handles portrait/landscape mode and how to distinguish the Android API applicable for the code.
The next article describes the work with Fragments. You’ll see that Anko contains many improvements for writing fragments.

Václav Souhrada
Kotlin & Android Developer at eMan, Czech Kotlin User Group Founder and Organizer

Follow us

Contact

+420 222 202 222
info@eman.cz

Company Headquarters:
U Pergamenky 1145/12
170 00 Praha 7
Czech Republic

Branch office Hradec Králové:
Simkova 1224/2B
500 03 Hradec Kralove
Czech Republic

Branch office Pilsen:
Teslova 1266/7
301 00 Pilsen
Czech Republic

Branch office Mlada Boleslav:
Palackeho 267
293 01 Mlada Boleslav
Czech Republic

Shares