Anko Layouts Examples

Contents

• General
  • lparams
• Listeners
• Types
  • CheckBox
  • Button
  • ListView
  • EditText

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 vertialLayout 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 for reference this button.

lparams

There is an important thing, customization of every component. This works with "lparams" option. This can be in any component (Button, Layout,...)

For example, you have a listView and you want to have matchParent width and height. With lparams after definig 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 have listeners prepared to use in code. There are different for distinct components, but there is 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 tu 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 and text="Text"
• 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

EditText

A normal editText will be some like that:

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