views, labels or buttons above transparent view

You must Login before you can answer or comment on any questions.

Hi,

I have a container view which have opacity 0.7 it contains labels, view and buttons which should not have opacity. but thez are affected too.

for example labels should be white..they are a little gray. backgroundColor of buttons are a little transparent...

PS : this view is moved from the top to the down.

here is my code :

exports.createView = function(idAlbum, parentWindow){
 
    var start, end, hided = true;
    var viewInfosAlbum = Ti.UI.createView({
        height: 411,
        top: -371,
        backgroundColor: 'black',
        opacity: 0.7,
        zIndex: 1
    });
 
    var container = Ti.UI.createView({
        layout: 'vertical',
        top: 0
    });
 
    var nameLabel = Ti.UI.createLabel({ 
        font: {fontSize: 15, fontWeight: 'bold'},
        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
        color: '#fff',
        height: 40
    });
 
    var contenuAlbumContainer = Ti.UI.createView({
        top: 10,
        left: 10,
        height: 20,
        layout: 'horizontal'
    });
 
    var albumContentBold = Ti.UI.createLabel({
        font: {fontSize: 12, fontWeight: 'bold'},
        text: 'Contenu de l\'album :', 
        color: 'white',
        left: 0,
        zIndex: 2
    });
 
    var albumContent = Ti.UI.createLabel({
        font: {fontSize: 11},
        color: 'white',
        left: 0
    });
 
    contenuAlbumContainer.add(albumContentBold);
    contenuAlbumContainer.add(albumContent);
 
    var sizeContainer = Ti.UI.createView({
        left: 10,
        height: 20,
        layout: 'horizontal'
    });
 
    var sizeTitle = Ti.UI.createLabel({
        font: {fontSize: 12, fontWeight: 'bold'},
        text: 'Poids :', 
        color: 'white',
        left: 0,
        zIndex: 2
    });
 
    var sizeLabel = Ti.UI.createLabel({
        font: {fontSize: 11},
        color: 'white',
        left: 0
    });
 
    sizeContainer.add(sizeTitle);
    sizeContainer.add(sizeLabel);
 
    var datesContainer = Ti.UI.createView({
        left: 10,
        height: 20,
        layout: 'horizontal'
    });
 
    var datesTitle = Ti.UI.createLabel({
        font: {fontSize: 12, fontWeight: 'bold'},
        text: 'Date(s) :', 
        color: 'white',
        left: 0
    });
 
    var datesLabel = Ti.UI.createLabel({
        font: {fontSize: 11},
        color: 'white',
        left: 0
    });
 
    datesContainer.add(datesTitle);
    datesContainer.add(datesLabel);
 
    var descriptionTitle = Ti.UI.createLabel({
        font: {fontSize: 12, fontWeight: 'bold'},
        text: 'Description :', 
        color: 'white',
        left: 10,
        height: 20
    });
 
    var descriptionScrollView = Ti.UI.createScrollView({
        left: 10,
        height: 201,
        backgroundColor: 'green',
        contentHeight: 'auto'
    });
 
 
    var descriptionLabel = Ti.UI.createLabel({
        font: {fontSize: 11},
        height: Ti.UI.SIZE,
        color: 'white',
        left: 0,
        top: 10
    });
 
    descriptionScrollView.add(descriptionLabel);
 
    var operationContainer = Ti.UI.createView({
        height: 40,
        opacity: 1,
        zIndex: 2
    });
 
    var deleteButton = Ti.UI.createButton({
        title:'Delete',
        font: {fontWeight: 'bold', fontSize: 11},
        style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN,
        backgroundColor: 'red',
        width: 60,
        height: 35,
        opacity: 1,
        borderRadius: 3,
        color: 'white',
        left: 35
    });
 
    var downloadButton = Ti.UI.createButton({
        title:'Download',
        style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN,
        backgroundColor: 'black',
        color: 'white',
        opacity: 1,
        right: 35,
        zIndex: 2
    });
 
    operationContainer.add(deleteButton);
    operationContainer.add(downloadButton);
 
    var navBarContainer = Ti.UI.createView({
        height: 40,
        backgroundImage: 'images/barImage.png',
        bottom: 0,
        opacity: 1,
        zIndex: 3
    });
 
    var backButton = Ti.UI.createButton({
        title:'Back',
        height: 20,
        left: 10
    });
 
    backButton.addEventListener('click', function(e){
        parentWindow.close();
    });
 
    var moveImage = Ti.UI.createImageView({
        backgroundImage: 'images/move.png',
        width: 20, height: 20,
        bottom: 10
    });
 
    var shareButton = Ti.UI.createButton({
        title:'Share',
        height: 20,
        right: 10
    });
 
    shareButton.addEventListener('click', function(e){
 
    });
 
    navBarContainer.add(backButton);
    navBarContainer.add(moveImage);
    navBarContainer.add(shareButton);
 
    container.add(nameLabel);
    container.add(contenuAlbumContainer);
    container.add(sizeContainer);
    container.add(datesContainer);
    container.add(descriptionTitle);
    container.add(descriptionScrollView);
    container.add(operationContainer);
    container.add(navBarContainer);
 
    viewInfosAlbum.add(container);
 
    return viewInfosAlbum;
};

1 Answer

Accepted Answer

When you add child elements to any UI component then it will be effected with the parent's properties. The work around for that can be to add another View (say upper view) over the view( say lower view with opacity 0.7) and set its background color property to transparent and add the labels and buttons over the (upper view). Hope this may work.

Your Answer

Think you can help? Login to answer this question!