How to use Anko DSL inside a Fragment?

Question

The Github wiki page show this example to be used in Activity instance:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    verticalLayout {
        padding = dip(30)
        editText {
            hint = "Name"
            textSize = 24f
        }
        editText {
            hint = "Password"
            textSize = 24f
        }
        button("Login") {
            textSize = 26f
        }
    }
}

How to do the same inside a Fragment?

I tried to put that verticalLayout block in onCreateView but the method cannot be resolved. I have added anko-support-v4 dependency, but still no luck.

try to navigate to the `verticalLayout` method. My guess is that it is defined on `Activity`, so it works inside it, but not outside it. — voddan, Nov 16 '15 at 15:32
If what I said is true, than a solution would be to try assigning the layout to an appropriate property. In your example it kind of hangs in the air — voddan, Nov 16 '15 at 15:34
@voddan yes, it's only available in `Activity`. Finally, I've found a workaround, will post the answer soon — akhy, Nov 17 '15 at 03:20

score 21 · Answer 1 · answered Dec 27 '15 at 05:32

With Anko 0.8 you can also use an AnkoComponent, if you want to hold your UI in a separate class so you can reuse it elsewhere.

class FragmentUi<T>: AnkoComponent<T> {
    override fun createView(ui: AnkoContext<T>) = with(ui) {
        verticalLayout {
            // ...
        }
    }
}

You can call it in your fragment onCreateView() by

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup, savedInstanceState: Bundle?): View
        = FragmentUi<Fragment>().createView(AnkoContext.create(ctx, this))

`AnkoContext.create(ctx, this)` is deprecated. instead of `ctx` one should use `requireContext()` — LeoColman, Jan 05 '19 at 19:10

score 13 · Accepted Answer · answered Nov 17 '15 at 03:28

13

After digging up anko-support-v4 source code plus some trial and errors, I have found a workaround although I'm not sure if it's the right/recommended way. It seems a little undocumented.

A sample from my Fragment code:

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

    return UI {
        verticalLayout {
            linearLayout {
                avatar = imageView().lparams(width = dip(48), height = dip (48))
                name = textView().lparams(width = 0, weight = 1f)
            }

            linearLayout {
                // ...
            }
        }
    }.toView()
}

I'm returning layout DSL wrapped in UI { ... }.toView() in Fragment.onCreateView(...)

answered Nov 17 '15 at 03:28

akhy

5,760
6
39
60

I recommend you asking more on the intended use of API at the slack channel, #anko thread: http://kotlinslackin.herokuapp.com/. Because for me this inconsistency seems like a bug, but people there know for sure. – voddan Nov 17 '15 at 08:38
3

Yes, it is the right way for the current version of Anko (0.7.3). – yanex Nov 17 '15 at 13:08
5

@netimen just return ```UI{}.view``` – Eefret Mar 15 '16 at 20:50

score 7 · Answer 3 · answered Mar 21 '16 at 15:55

7

As of anko 0.8.1 the correct code would be:

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    return UI {
        verticalLayout {
            linearLayout {
                // ...
            }
            linearLayout {
                // ...
            }
        }
    }.view
}

answered Mar 21 '16 at 15:55

Eefret

4,724
4
30
46

it says it want it when the ? in LayoutInflater is deleted – Qube Oct 29 '18 at 04:08

How to use Anko DSL inside a Fragment?

3 Answers3