Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28406] ListView on a modal with a transparent background is invisible

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2021-04-08T22:43:55.000+0000
Affected Version/sRelease 9.3.0
Fix Version/sRelease 10.0.0
ComponentsAndroid
Labelsandroid, regression
ReporterJórdan Luiz Bisato
AssigneeGary Mathews
Created2021-03-19T20:26:01.000+0000
Updated2021-04-09T13:34:46.000+0000

Description

Hi all, i found a bug on Android when insert a ListView on a window modal with a transparent background. If i use SDK 9.2.1- it works fine, but using 9.3.0+ ListView disappears from the modal. XML:
<Alloy>
  <Collection src="defaultRow" id="defaultRow" instance="true" />
  <Window id="win" onClick="exit">
    <View id="container">
      <View id="vSearch" top="5" bubbleParent="false">
        <TextField id="txtSearch" onChange="search"></TextField>
      </View>

      <ListView id="list" defaultItemTemplate="defaultItem" separatorColor="transparent" onItemclick="lvClick" top="5" disableBounce="true" backgroundColor="#b3b3b3" bubbleParent="false">
        <SearchBar id="searchBar"/>
        <Templates>
          <ItemTemplate name="defaultItem" backgroundColor="transparent">
            <View width="Ti.UI.FILL" heighth="Ti.UI.SIZE" backgroundColor="white" bottom="1">
              <Label bindId="texto" class="lblItem"></Label>
            </View>
          </ItemTemplate>
        </Templates>

        <ListSection dataCollection="$.defaultRow">
          <ListItem
            texto:text="{texto}"
            searchableText="{texto}"

            cod="{id}"
            desc="{descricao}"
            sigla="{sigla}"
            />
        </ListSection>
      </ListView>
    </View>

  </Window>
</Alloy>
TSS:

'#win': {
  height: Ti.UI.FILL,
  width: Ti.UI.FILL,
  backgroundColor: "#80000000",
}

"#win[platform=android]": {
  activityExitTransition: Ti.UI.Android.TRANSITION_FADE_OUT,
  theme: "Theme.Modal",
  modal: true,
  navBarHidden: true
}

'#list': {
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
  /* backgroundColor: "#F2F2F2", */
  borderRadius: 6,
  accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
  opacity: 1
}

'#container': {
  width: "90%",
  height: "70%",
  layout: 'vertical',
  backgroundColor: "white",
  borderRadius: 8
}

'#imgSearch': {
  right: 5,
  top: 5,
  bottom: 5,
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE
}

'#vSearch': {
  height: 40,
  width: Ti.UI.FILL,
  left: 5,
  right: 5,
  borderWidth: 1,
  borderRadius: 10,
  borderColor: "gray"
}

'#txtSearch': {
  font: {
    fontSize: 14,
    fontWeight: "normal"
  },
  color: "black",
  hintText: "Pesquisar...",
  width: Ti.UI.FILL,
  right: 40,
  left: 5,
  backgroundColor: "transparent"
}

'#searchBar': {
  height: 0,
  width: 0,
  hiddenBehavior: Ti.UI.HIDDEN_BEHAVIOR_GONE,
  visible: false
}

'.lblItem': {
  font: {
    fontSize: 15,
    fontWeight: "normal"
  },
  color: "black",
  textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
  left: 10,
  right: 5,
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,
  top: 7,
  bottom: 7
}
JS:
var args = $.args;

$.defaultRow.add(
  [
    {
      "id": 888,
      "texto": "ADMINISTRADOR"
    },
    {
      "id": 555,
      "texto": "ADVOGADO"
    },
    {
      "id": 111,
      "texto": "ADVOGADO"
    },
    {
      "id": 222,
      "texto": "AGENCIADOR DE PROPAGANDA"
    },
    {
      "id": 333,
      "texto": "AGENTE ADMINISTRATIVO"
    }
  ]
)

$.win.addEventListener("postlayout", poslay);

function poslay(e) {
  $.txtSearch.focus();
  $.win.removeEventListener("postlayout", poslay);
}

function lvClick(e){
  var item = e.section.getItemAt(e.itemIndex);
}

function search(e){
  $.searchBar.value = $.txtSearch.value;
}

$.win.addEventListener("androidback", function(e) {
  $.win.close();
});

function exit(e){
  $.win.close();
}

Attachments

FileDateSize
SDK-9.2.1-.jpg2021-03-19T19:57:30.000+0000107643
SDK-9.3.0+.jpg2021-03-19T19:57:30.000+000067831

Comments

  1. Gary Mathews 2021-03-24

    I'm unable to reproduce this on master and 10_0_X
       const win = Ti.UI.createWindow({
       	backgroundColor: '#80000000',
       	modal: true
       });
       const container = Ti.UI.createView({
       	backgroundColor: 'white',
       	width: '90%',
       	height: '70%',
       	borderRadius: 8
       });
       const sections = [];
       
       for (let i = 0; i < 3; i++) {
       	const items = [];
       
       	for (let x = 0; x < 5; x++) {
       		items.push({
       			label: { text: Item #${x} }
       		});
       	}
       
       	sections.push(Ti.UI.createListSection({
       		headerTitle: Section #${i},
       		items
       	}));
       }
       const listView = Ti.UI.createListView({
       	templates: {
       		template: {
       			properties: {
       				backgroundColor: 'transparent'
       			},
       			childTemplates: [
       				{
       					type: 'Ti.UI.Label',
       					bindId: 'label',
       					properties: {
       						left: 10,
       						color: 'black'
       					}
       				}
       			]
       		}
       	},
       	defaultItemTemplate: 'template',
       	sections
       });
       
       container.add(listView);
       win.add(container);
       win.open();
       
  2. Jórdan Luiz Bisato 2021-03-25

    Hi, i tested it again with your code and my. I noted that the problem occours just when the ListView have a Searchbar enabled and a borderRadius seted. Try again with this code:
       const win = Ti.UI.createWindow({
       	backgroundColor: '#80000000',
       	modal: true
       });
       const container = Ti.UI.createView({
       	backgroundColor: 'white',
       	width: '90%',
       	height: '70%',
       	borderRadius: 8
       });
       
       var searchBar = Titanium.UI.createSearchBar({
       	height: 30,
         width: Ti.UI.FILL,
       });
       
       const sections = [];
       
       for (let i = 0; i < 3; i++) {
       	const items = [];
       
       	for (let x = 0; x < 5; x++) {
       		items.push({
       			label: { text: Item #${x} }
       		});
       	}
       
       	sections.push(Ti.UI.createListSection({
       		headerTitle: Section #${i},
       		items
       	}));
       }
       const listView = Ti.UI.createListView({
       	templates: {
       		template: {
       			properties: {
       				backgroundColor: 'transparent'
       			},
       			childTemplates: [
       				{
       					type: 'Ti.UI.Label',
       					bindId: 'label',
       					properties: {
       						left: 10,
       						color: 'black'
       					}
       				}
       			]
       		}
       	},
       	backgroundColor:"#b3b3b3",
       	defaultItemTemplate: 'template',
         borderRadius: 6,
       	searchView: searchBar,
       	sections
       });
       
       container.add(listView);
       win.add(container);
       win.open();
       
       
  3. Gary Mathews 2021-03-31

    master: https://github.com/appcelerator/titanium_mobile/pull/12678
  4. Christopher Williams 2021-04-09

    merged to master and 10_0_X branches for 10.0.0 target

JSON Source