Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-8772] Android: Alignment Issues on Android, layout appears broken

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionWon't Fix
Resolution Date2012-05-10T10:51:07.000+0000
Affected Version/sRelease 2.0.0, Release 1.8.2
Fix Version/sRelease 2.0.2, Release 2.1.0, Sprint 2012-09 Core
ComponentsAndroid
LabelsSupportTeam, core
ReporterDevang Gandhi
AssigneeAllen Yeung
Created2012-04-17T15:50:20.000+0000
Updated2017-03-07T18:17:07.000+0000

Description

8 Buttons are added to the window, and have a background image. When they are aligned together in a line, it appears broken. It looks continuous on iOS. I have attached images to explain this. Also have included the code sample.
var  win = Titanium.UI.createWindow({
                    backgroundColor:'white',
                    title:'window',
                    barColor:'#ff7b01',
                    top:0
                });
    var arr = ['5d', '1m', '3m', '6m', 'YTD', '1yr', '2yr', '4yr'];
    for(var i=0;i<arr.length;i++){
        win.add(createDateButtons(i,12));
    }   

  function createDateButtons(_index, _btnWidth) {
        var imageColViewOn1 = Ti.UI.createButton({
            title : arr[_index],
            width : _btnWidth + '%',
            height : 40,
            top : 14,
            left :(_btnWidth * _index ) + '%', /* 2.8% + the calculated width X index # */
            font : {
                fontSize : 13,
                fontWeight : 'bold',
                fontFamily : 'Helvetica Neue'
            },
            color : 'yellow',
            backgroundImage:'red.jpeg'
        });

        return imageColViewOn1;
    };

win.open();

Attachments

FileDateSize
red.jpeg2012-04-17T16:19:22.000+0000297
Screen Shot 2012-04-17 at 3.48.39 PM.png2012-04-17T15:50:20.000+0000263635

Comments

  1. Allen Yeung 2012-04-23

    PR ready: https://github.com/appcelerator/titanium_mobile/pull/2058
  2. Allen Yeung 2012-05-02

    After more testing, it looks like the PR does not completely resolve the issue. The PR is still valid since it does make our rounding for height/width more consistent for percentages. In terms of the original issue that we see in the emulator, there is no real way around it since using percentages for left will eventually lead to a rounding error. In the emulator scenario, the width is 320. Since the button width is 12% of the emulator width, it is 38 (rounded from 38.4). As for the left value, it is 0, 12%, 24% of the emulator width (0, 38, 77) etc. Since the buttons have been rounded down, the third value for left should be 76 instead of 77, which is the rounding error that occurs. You may be able to get around this by using static widths and horizontal layout.
  3. Natalie Huynh 2012-05-10

    Tested with 2.0.2.v20120505151714 still encounter the issue on emulator
  4. Natalie Huynh 2012-05-10

    ayeung: it's an inherent rounding issue with percentages, not something we can fix
  5. Lee Morris 2017-03-07

    Closing ticket due to time passed.

JSON Source