Recently I was in one of the event and while doing demo one question came up. Question was How to place tabstrip at bottom of Android.

Let me first explain you question in detail. While creating a Cross-Platform Mobile Application using Kendo UI Mobile and Icenium you will notice following default behavior of tabstrip and Mobile View Title.

By default in IOS, View Title will be displayed at the top and tabstrip at bottom

By default in Android, View Title would not be visible and tabstrip will be displayed at the top.

Above Layout being created with View Title, tabstrip as following,

 <div data-role="layout" data-id="applayout">
 <header data-role="header">
 <div data-role="navbar">
 <span data-role="view-title"></span>
 <a data-role="backbutton" data-align="left">Back</a>
 </div>
 </header>

<div data-role="footer">
 <div data-role="tabstrip">
 <a href="#dataview" data-icon="home">Audience</a>
 <a href="#createview" data-icon="action">Add Audience</a>
 <a href="#movieview" data-icon="download">Movies</a>
 </div>
 </div>
 </div>

Now question was how to achieve same behavior of tabstrip and view title for both IOS and Android? They wanted to achieve same behavior in Android also as of IOS. This can be very easily done by modifying some CSS. In CSS we will override default design.

.km-root .km-android .km-view {
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
}

.km-android .km-view-title
{
 visibility: visible;
}

 

Above we are changing default tabstrip behavior for Android and forcing it to be in bottom. To display view-title we are setting visibility of view-title for android as true. Now on running application you will find tab-strip in bottom and view-title visible for android.

In this way you can place tabstrip at the bottom of Android. I hope you find this post useful. Thanks for reading.