Custom Spinner Images

[abdielou]

Great work. I wish all Ti modules were are polished as this one.

I am wondering how can I use custom images for the spinner.

I tried setting the following on app.tss but it won't work:

'#loadingMask': {
    images: true
}
"#loadingImages": {
  top: '0dp',
  images: [
    "/images/nl.fokkezb.loading/00.png", "/images/nl.fokkezb.loading/01.png",
        "/images/nl.fokkezb.loading/10.png", "/images/nl.fokkezb.loading/11.png"
  ]
}

[abdielou]

Nevermind... it does work

[abdielou]

Not working on Android, only on iOS

[abdielou]

Ok finally working on Android. Forgot to set "progress" as false. Now I'm having problems with the style of the text. I changed the layout to horizontal and I am trying to vertically align the text to the image. Any ideas?

[abdielou]

I could use top on ".loadingMessage" but that's not too clean.

[FokkeZB]

Thanks @abdielou.

You can override styles in two ways:

• Using the IDs (not the classes, they're lower in hierarchy) in your app.ts as described in the README.
• Using an Alloy theme, which can also override widget styles

[abdielou]

I was able to use top but not verticalAlign on ".loadingMessage". Is ".loadingMessage" applied to a Label?

[FokkeZB]

loadingMessage is a Label indeed: https://github.com/FokkeZB/nl.fokkezb.loading/blob/master/views/view.xml#L7

Please see the notes on using this property: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Label-property-verticalAlign

[abdielou]

Thanks, I was able to achieve what I needed. To give some context I basically wanted to simulate (not exactly mimic) the Android Native Progress but with a custom image. So I had to change the layout and the shape of the outer box. In case anyone needs to do this here's a screenshot, the js, and the tss (hacky). I added background colors to make it explicit.

// alloy.js
Alloy.Globals.loading = Alloy.createWidget('nl.fokkezb.loading');
Alloy.Globals.loading.progress = false;
Alloy.Globals.loadingWidth = Alloy.Globals.viewportWidth / Ti.Platform.displayCaps.logicalDensityFactor * .86;
Alloy.Globals.loadingImageSize = '35dp';
Alloy.Globals.loadingImages = [
    "/images/nl.fokkezb.loading/00.png", "/images/nl.fokkezb.loading/01.png",
    "/images/nl.fokkezb.loading/02.png", "/images/nl.fokkezb.loading/03.png",
    "/images/nl.fokkezb.loading/04.png", "/images/nl.fokkezb.loading/05.png",
    "/images/nl.fokkezb.loading/06.png", "/images/nl.fokkezb.loading/07.png",
    "/images/nl.fokkezb.loading/08.png", "/images/nl.fokkezb.loading/09.png",
    "/images/nl.fokkezb.loading/10.png", "/images/nl.fokkezb.loading/11.png"
  ];
Alloy.Globals.loadingImageDuration = 1000/Alloy.Globals.loadingImages.length;

// app.js
".loadingMask": {
  backgroundColor: "#5000",
  visible: false,
  images: true
}

".loadingOuter": {
  width: Alloy.Globals.loadingWidth,
  height: Ti.UI.SIZE,

  borderRadius: 2,
  backgroundColor: "gray"//"#C000"
}

".loadingInner": {
  backgroundColor: "green", // DEBUGGING
  top: '20dp',
  right: '20dp',
  bottom: '20dp',
  left: '20dp',

  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,

  layout: 'horizontal'
}

".loadingIndicator": {
  top: '0dp',
  style: Ti.UI.ActivityIndicatorStyle.BIG
}

"#loadingImages": {
  backgroundColor: "red", // DEBUGGING
  top: '1dp',
  bottom: '1dp',
  duration: Alloy.Globals.loadingImageDuration,
  images: Alloy.Globals.loadingImages
  ]
}

".loadingMessage": {
  backgroundColor: "blue", // DEBUGGING
  left: '20dp',
  width: Ti.UI.SIZE,
  height: Alloy.Globals.loadingImageSize,
  top: '1dp',
  bottom: '1dp',

  text: L('loadingMessage', 'Loading..'),

  color: '#fff',
  textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
  verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
  font: {
    fontSize: '16dp'
  }
}

It can be improved though.