Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25631] Android :Unable to position TabGroup at the bottom of the screen with tabsAtBottom

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionInvalid
Resolution Date2018-02-28T18:39:09.000+0000
Affected Version/sRelease 7.0.1
Fix Version/sn/a
ComponentsAndroid
LabelsEscalation
ReporterAminul Islam
AssigneeJoshua Quick
Created2017-12-27T12:50:12.000+0000
Updated2018-02-28T18:39:09.000+0000

Description

we have a requirement to place the TabGroup at the bottom of the screen. we are able to achieve this in iOS but coming to android, TabGroup is being displayed at the top of screen by default. By referring to the Appcelerator docs we have found an property " tabsAtBottom" for "Tabgroup" api to reposition the TabGroup to bottom, But it is not working as expected Test Steps: 1) Open studio and create a classic app 2) Paste the sample code to app.js 3) Run the app and observe that position of TabGroup is top of the screen. Test code
/**
 * Create a new Ti.UI.TabGroup.
 */
var tabGroup = Ti.UI.createTabGroup({
  tabsBackgroundColor : "#fff",
  tabsAtBottom : true,
 // tabsAtBottom : false
});

/**
 * Add the two created tabs to the tabGroup object.
 */
tabGroup.addTab(createTab("Home", "Home Page", "assets/images/home-button.png"));
tabGroup.addTab(createTab("Saved", "Saved Items Page", "assets/images/star.png"));
tabGroup.addTab(createTab("Contact", "Contact US Page", "assets/images/phone-contact.png"));
tabGroup.addTab(createTab("More", "Settings & More", "assets/images/ellipsis.png"));
/**
 * Open the tabGroup
 */
tabGroup.open();

/**
 * Creates a new Tab and configures it.
 *
 * @param  {String} title The title used in the Ti.UI.Tab and it's included Ti.UI.Window
 * @param  {String} message The title displayed in the Ti.UI.Label
 * @return {String} icon The icon used in the Ti.UI.Tab
 */
function createTab(title, message, icon) {
    var win = Ti.UI.createWindow({
        title: title,
        backgroundColor: '#333',
        navBarHidden : true
    });

    var label = Ti.UI.createLabel({
        text: message,
        color: "#fff",
        font: {
            fontSize: 20
        }
    });

    win.add(label);

    var tab = Ti.UI.createTab({
        title: title,
        icon: icon,
        window: win,
        backgroundColor : "#00AFDB",
        backgroundFocusedColor : "#333"
    });

    return tab;
}

*Test Environment*:
Appcelerator Command-Line Interface, version 7.0.1
Copyright (c) 2014-2017, Appcelerator, Inc. All Rights Reserved.
Operating System Mac OS X Version 10.13.1 
Node.js 8.9.1
npm 5.5.1
Android Device: Galaxy J7(7.0)
Appcelerator CLI
Installer = 4.2.11
Core Package = 7.0.1
Titanium CLI
CLI Version = 5.0.14
node-appc Version = 0.2.41
Titanium SDK 7.0.1.GA

Comments

  1. Mostafizur Rahman 2018-01-04

    Hello [~emerriman], Any update on this? The customer wants to know the updates from us. Best
  2. Snigdha Nooli 2018-01-12

    Hi Team, We have a similar issue. In our application, we have to show tab group at the bottom of the screen similar to iOS. But we are unable to achieve it as the "tabsAtBottom" property for TabGroup is not working as expected. Please help us in achieving this requirement. Thanks, Snigdha
  3. Joshua Quick 2018-01-12

    This is a documentation error. The "tabsAtBottom" property has never been supported on Android, iOS, or Window. This property was only supported by the deprecated "Mobile Web" platform. When we removed "Mobile Web" platform support, our documentation build system mistakenly defaulted to Android and iOS under platforms supported. https://github.com/appcelerator/titanium_mobile/pull/9236/files#diff-238ec1337a6863e5c571fbf5310188e0L656 Sorry about the confusion.
  4. Mostafizur Rahman 2018-01-15

    Thanks [~jquick]. The customer is informed about this. Will be back if there is any concern .

JSON Source