Convert XML to Anko DSL

Android
1

I want to convert my XML layouts to Anko DSL, but I’m having problems with CardView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/cardview_manga"
    android:layout_margin="5dp">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/manga_cover"
            android:background="@color/placeholder_background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/cover" />

        <TextView
            android:id="@+id/manga_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:padding="5dp"
            android:background="#3f000000"
            android:textColor="#ffffff"
            android:textSize="14sp" />

    </FrameLayout>

</android.support.v7.widget.CardView>

And this is the Anko DSL I converted to:

class ItemManga : AnkoComponent<ViewGroup> {

    companion object {
        lateinit var mangaCover: ImageView
        lateinit var mangaName: TextView
    }

    override fun createView(ui: AnkoContext<ViewGroup>) = ui.apply {
        relativeLayout {
            cardView {
                frameLayout {
                    lparams {
                        height = matchParent
                        width = matchParent
                    }

                    mangaCover = imageView {
                        backgroundColor = R.color.placeholder_background
                        contentDescription = ctx.getString(R.string.cover)
                    }.lparams {
                        height = matchParent
                        width = matchParent
                    }

                    mangaName = textView {
                        textSize = sp(14).toFloat()
                        textColor = android.R.color.white
                        backgroundColor = R.color.manga_title_background
                    }.lparams {
                        height = wrapContent
                        width = matchParent
                        gravity = Gravity.BOTTOM
                        padding = dip(5)
                    }
                }
            }.lparams {
                height = wrapContent
                width = matchParent
                margin = dip(5)
            }
        }
    }.view
}

The result is not the expected:

  • The background of the CardView placeholder is purple, when it should be grey.
  • The ImageView is not matching the CardView.
  • The TextView background is purple, it’s too high and even doesn’t appear.

Here are some screenshots:

With XML layout
With Anko DSL