Android: Template Layout example with Anko

Francesco Stranieri
2 min readMay 20, 2018

--

Have you ever think about the possibility to create a template layout in which you can include everything? I’ll guide you to do this with Anko.

Intro
Anko is a library developed by kotlin team and in this guide I’ll use Anko-Layouts (https://github.com/Kotlin/anko/wiki/Anko-Layouts).

Template with Toolbar
Let’s start from a simple activity with a layout containing the “Hello World” text.
We have to create an AnkoComponent for the template layout. In this template layout I want to put a toolbar at top and an included layout below It.
I want to theme my toolbar and to populate my layout i’ll create an interface to get what I need.

Toolbar style is:

<style name="ToolbarStyle" parent="Base.V7.Widget.AppCompat.Toolbar">
<item name="android:id">@id/toolbarId</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:background">@color/colorPrimaryDark</item>
<item name="android:minHeight">50dp</item>
</style>

And my activity:

I WANT MORE: Template with Toolbar and Footer
Ok, let’s add a footer, so our included layout will be between toolbar and footer.
Just like before we have to create an AnkoComponent but for this time i want to use a constraintlayout!

Footer style:

<style name="FooterStyle">
<item name="android:id">@id/footerId</item>
<item name="android:background">@color/colorPrimaryDark</item> <item name="android:minHeight">50dp</item>
<item name="android:text">"FOOTER"</item>
<item name="android:gravity">center</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@android:color/white</item> </style>

I WANT MORE, MORE, MOOOOOOAAAAARRRRR!!!
What if we want to use databinding? This is my idea:

Activity:

BbbBbBb…ye

--

--