How to place TabStrip at bottom of Android in Kendo UI Mobile

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

image

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

image

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;
}

&nbsp;

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.

image

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

Advertisements

One thought on “How to place TabStrip at bottom of Android in Kendo UI Mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s