How do I align Ti.UI.Toolbar items? (Android Appcelerator)

Question

I am using a bottom Toolbar on my Android app but I do not know how to make its Items to have the same width, so they are aligned. This is how my Toolbar looks like (all items are on the left, with no separation between them):

This is what I want to achieve (items are separated and centered):

I tried setting the width of each item/view to "33%", but that does not work.

I am using Titanium SDK 6.2.2 GA. See my code below:

Alloy xml:

<Toolbar width="Ti.UI.FILL" bottom="0" barColor="#639851" horizontalWrap="false">
    <Items> 
        <View id="addView" class="bottomBtn" onClick="addDirection">
            <ImageView class="icons" image="/icons/add.png" touchEnabled="false" />
            <Label class="label" text="Add" touchEnabled="false" />
        </View>

        <View id="mapView" class="bottomBtn" onClick="showMap">
            <ImageView class="icons" image="/icons/map.png" touchEnabled="false" />
            <Label class="label" text="See map" touchEnabled="false" />
        </View>

        <View id="routeView" class="bottomBtn" onClick="calculateRoute">
            <ImageView class="icons" image="/icons/optimize.png" touchEnabled="false" />
            <Label class="label" text="Calculate" touchEnabled="false" />
        </View>

    </Items>
</Toolbar>

tss:

".label" : {
    color: "#212121"
}

".icons" : {
    width: "24dp",
    height: "24dp"
}

".bottomBtn" : {
    layout: 'vertical',
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    backgroundColor: "#639851", 
    touchFeedback: true,
    touchFeedbackColor: "#808080"
}

Answer 1

Currently on Android I would propose this workaround - place the views in a single View that is passed as an item for the toolbar. Try the following:

index.xml

<Alloy>
    <Window>
        <!-- Add id for the toolbar to be accessed from index.js-->
        <Toolbar width="Ti.UI.FILL" bottom="0" barColor="#639851" id="bar">
            <Items>
                <!-- Add the view that acts as a container--> 
                <View class="wrapper">
                    <!-- Set a relative offset on the left since system buttons are not with exactly one third width-->
                    <View left="8%" id="addView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="Add" touchEnabled="false" />
                    </View>

                    <View id="mapView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="See map" touchEnabled="false" />
                    </View>
                    <!-- Set a relative offset on the right since system buttons are not with exactly one third width-->    
                    <View right="8%" id="routeView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="Calculate" touchEnabled="false" />
                    </View>
                </View>
            </Items>
        </Toolbar>
    </Window>
</Alloy>

Add the following line in index.js

$.bar.setContentInsetsAbsolute(0,0);

It will extend the container for custom views of the Toolbar to the full width of the component.

index.tss

".label" : {
    color: "#212121"
}

".icons" : {
    width: "24dp",
    height: "24dp"
}

".bottomBtn" : {
    layout: 'vertical',
    width: '28%',
    height: Ti.UI.SIZE,
    backgroundColor: "#639851",
    touchFeedback: true,
    touchFeedbackColor: "#808080"
}

".wrapper" : {
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE,
    layout: 'horizontal',
    horizontalWrap: false
}

You can play around with the percentage values to get a different alignment based on the system navigation buttons.

Edit: And of course add the paths to your resources.