Android Anko Layouts With Examples

This is the second part in the series of posts on Android Anko. We had covered the Anko Commons library in the first part. In this tutorial, we’ll be discussing and implementing the Android Anko Layouts module which is a part of the Anko library. Anko is a domain specific language library developed to make Android Development faster and easier using Kotlin.

Anko Layouts

Building UI layouts through XML has always been one of the most challenging parts of Android Development.
It’s not type safe/null safe. Moreover, it takes time and battery to load the XML layouts on your device.

Of course, you can develop layouts programmatically in your Activities but even that is complex to do. Thankfully we have Anko Layouts now! You can create a much simpler UI using it. For example we can build the following UI using Anko layouts in our Activity.

We’ve created a LinearLayout that displays the elements vertically. Also, inside the Anko Layouts syntax we’ve set the button click listener as well.

Using Anko Layouts we are able to keep the layout code and the app logic together instead of linking the XML in the activity. The equivalent XML code is:

Anko Layouts are a good substitute for XML layouts since it makes the logic easy to write and maintain.
Anko Layouts has its fair share of disadvantages too:

  • They do not show a preview of the layout like XML. Though you can download the Anko Support plugin from Preferences in Android Studio:
  • androidly-anko-support-plugin
  • Lack of formatting like XML.

Having said that, Anko Layouts does allow you to include XML layouts in the Anko Layouts DSL syntax.

Let’s dive deep into the various features of Anko Layouts now.

Getting Started

Add the following dependency in your build.gradle file:

In place of sdk25 you can also place: sdk15, sdk19, sdk21, sdk23.

The above dependency contains the Anko Common module too.

Layouts and Layout Params

You can use all the major view groups we’ve discussed earlier as containers to hold the widgets.

Horizontal LinearLayout

This arranges the views horizontally. The Anko layout looks like:

androidly-anko-layout-linearlayout-horizontal

We can set the Layout Params as:

In the above code, we set the widths of the widgets inside LinearLayout by layout weight.
By default, the layoutParams for LinearLayout in the above code were matchParent only so you can get rid of that.

If you specify lparams(), but omit width and/or height for the widgets, their default values are both wrapContent

RelativeLayout

Take note that to set more than one gravity, we use + in Anko Layouts. In XML, we used |

Try building Anko Layouts with FrameLayout and ScrollView as the root of the layout yourselves!

Anko ConstraintLayout

To use ConstraintLayout in Anko Layouts add the following dependencies in your build.gradle.

Following code demonstrates an Anko Layout with a TextView and an ImageView.

In the above code, we’ve set the ImageView to the center of the screen but with a verticalBias.
We’ve added the TextView below it.

Anko CoordinatorLayout

To use a CoordinatorLayout add the following dependencies in your build.gradle.

Note: The above were the versions available at the time of writing this tutorial.

The following code demonstrates CoordinatorLayout in action using Anko Layouts.

  • horizontalMargin sets the margin to the left and right.
  • verticalMargin sets the margin to the top and bottom.
  • topMargin, bottomMargin, leftMargin and rightMargin are used to set margins to individual sides.

Alert Dialog With Custom View

android anko layout custom view

Themed Blocks

Anko DSL provides themed versions of all the UI widgets. You can set a pre-defined or custom theme on the widget as:

Include Tag

We can include XML layout files in the Anko DSL as well:

The root view of the layout file is specified in the brackets.

You can also specify the specific type properties inside the {}

Helper Functions

We can use the applyRecursively function to apply a property recursively to all the elements of the layout.

Example:

applyRecursively sets different colors to the different views(Button and TextView) in the above code.

Anko Components

Till now, we’ve added the Anko Layouts directly inside the Activity’s onCreate function.
using the AnkoComponent interface we can separate the UI part from the Activity.

Example:

MainActivityUI().setContentView(this) is used to populate the layout from AnkoComponent class in the Activity.

We can retrieve the widgets inside the Anko Layout by using find. But this is the same as findViewById of XML.

The way we retrieved the Button instance is the recommended way.

This brings an end to this tutorial on Android Anko Layouts using Kotlin.

By admin

Leave a Reply

%d bloggers like this: