Anko Layouts Examples

General

First, some examples of real usage.

There is a anko dsl example when you have a verticalLayout, inside a linearLayout one, with a button.

verticalLayout { //Start a Layout (verticalLayout,linearLayout,relativeLayout...)
    linearLayout { //Inside one, you can start another one
        //Content of layout, like buttons and other things
        button("Some text")
    }
}

In this other example, I use only a verticalLayout with a button:

verticalLayout { //Start the Layout
    button("Text of button")
}

You can assign a button (Or another type) to a var, for use with listeners in other code part

verticalLayout { //Start the Layout
    var buttonOne = button("Text of button")
}

And then you can use buttonOne to reference this button.

Layout Params

There is an important thing, customization of every component. This works with lparams option. This can be in any component (Button, Layout,...) at the end of it. Example textView{...}.lparams(width=matchParent){}

For example, you have a listView and you want to have matchParent width and height. With lparams after defining a component, you can specify both. The lparams normally are width and height, but in case of a RelativeLayout, there is alignParentTop(), below()...

verticalLayout {
    linearLayout {
        button("Button");
    }
    view_list = listView {
    }.lparams(width = matchParent, height = matchParent) {}
}

But if you want to specify other things, there is the { } after parenthesis to do it. Another example:

checkBox {
    text = "Checkbox text"
}.lparams(){topMargin = dip(6);bottomMargin = dip(6)}

Inside { } part you can specify:

margin = dip(N) And more specifically:
horizontalMargin = dip(N) (And vertical, top, bottom, left, right)

There are other things that can be specified inside component. We will see one by one.

Listeners

Anko has listeners prepared to use in code. These are different for distinct components, but there are some basics. Example with a checkbox. setOnClickListener works in other like buttons (Can be used onClick also in buttons instead this). setChecked is for checkboxes.

checkBox {
    text = "checkbox"
    setOnClickListener {
            //Code will run when you click in it.
    }
    setChecked(/*true/false or a bool returning funcion*/)
}

In listeners you can put values directly, or code, or a function that returns a value (Depends of type of listener)

Types

Standard assumptions

On all clickable things you can use onClick{..} and setOnClickListener{..}
On all text components you can use inside { } textSize = 16f, text="Text" and textColor = Color.BLACK
On all elements, you can assign padding in component{ } part with padding = dip(N)
Every blocks have their "themed" variant using "theme" before name and selecting theme. Example themedButton("Ok", theme = R.style.myTheme) for button.

Checkbox

checkBox {
    text = "Text for checkbox"
    textSize = 18f
    setOnClickListener {
            //Code will run when you click in it.
    }
    setChecked(/* true/false */)
}

Button

Two possible uses. First, show button and assign to a var (And use in normal kotlin code part)

var button_var = button("Text")

The other, set all in Anko DSL

button("Text") {
     onClick { /* Todo on click */ }
}

ListView

Normally, you assign listView to a var for use in code. You can do it this way:

var view_list = listView {
}.lparams(width = matchParent, height = matchParent) {  }

In this code lparams its optional

TextView

A normal textView:

textView {
    text = "This is a text"
    textSize = Nf
    textColor = Color.GREEN
    textAlignment = View.TEXT_ALIGNMENT_CENTER //CENTER can be INHERIT GRAVITY TEXT_START TEXT_END VIEW_START VIEW_END
}

EditText

A normal editText will be some like that:

editText {
    hint = "Placeholder of text"
    textSize = Nf
}

ImageView

To show an image with imageView, the easiest way:

imageView {
    setImageResource(R.drawable.image)
}

Layouts

Layouts are defined with her name, creating a hierarchical structure for other blocks Another thing has to be in consideration. If you want a "horizontalLayout", it's called "linearLayout" in DSL. In layouts, there are some elements that can be very useful to know

background =ColorDrawable(Color.parseColor("#F8F2F2")): Sets a background color (It has to be a Drawable object)

Some examples: Simple verticalLayout with a editText field and a rgb selected color background

verticalLayout {
    editText {
        hint = "Edit this text"
    }.lparams(width = matchParent){}
    background = ColorDrawable(Color.parseColor("#F8F2F2"))
}

A more complex layout created. This is a verticalLayout that has inside a "linearLayout" for showing two buttons. Then, below, a listView that has all the remaining space (matchParent).

verticalLayout {
    linearLayout {
        button("One button")
        button("Another button todos")
    }
    listView {
    }.lparams(width = matchParent, height = matchParent) {  }
}

You can use linearLayout, relativeLayout,verticalLayout,...

Styles

Some android views have different styles (Widget.AppCompat.Button.Colored, Widget.AppCompat.Button.Borderless...). For use it you can add a Theme whose extends a ThemeOverlay and add a style attribute with a view style. Different views have different style attributes (android:buttonStyle,materialButtonStyle,textInputStyle,...).

Some examples:

Outline Box Dense TextInputLayout

styles.xml

<style name="App.ThemeOverlay.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="textInputStyle">
            @style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense
        </item>
</style>

Using theme

themedTextInputLayout(R.style.App_ThemeOverlay_MaterialComponents_TextInputLayout_OutlinedBox_Dense)

Colored Button