[TIMOB-684] Android: Border properties are broken for ImageView

Description

// In Android, the border around the image is not visible
// I tried removing borderRadius property, but the issue still remains
// It works on iPhone though

var imageView = Titanium.UI.createImageView({
    url: "/path/to/image",
    width: 280,
    height: 175,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 5
});

Titanium.UI.currentWindow.add(imageView);

// Workaround
// Wrap the image view in another view and set its border properties
// Set the width and height to be 2 pixels more than the width and height of the image view

var wrapperView = Titanium.UI.createView({
    width: 282,
    height: 177,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 5
});

var imageView = Titanium.UI.createImageView({
    url: "/path/to/image",
    width: 280,
    height: 175
});

wrapperView.add(imageView);
Titanium.UI.currentWindow.add(wrapperView);

Attachments

Comments

1. Don Thorp 2011-04-15

   WebView also suffers from the same problem.

2. Don Thorp 2011-04-15

   Also see Remove Views test. Orange WebView should respect border radius.

3. Vishal Duggal 2012-02-15 Use this code to test

      var win = Ti.UI.createWindow({
      	backgroundColor:"white",
      	title:"Window1"
      })
      
      var scrollView = Ti.UI.createScrollView({
      	backgroundColor:"white",
      });
      
      //Opaque BG
      var myView1 = Ti.UI.createView({
          width: 100,
          height: 100,
          top:10,
          backgroundColor:"#ff00",
          borderWidth: 5,
          borderColor: "green",
          borderRadius:10
      });
      
      //Semi transparent BG
      var myView2 = Ti.UI.createView({
          width: 100,
          height: 100,
          top:120,
          backgroundColor:"#af00",
          borderWidth: 5,
          borderColor: "green",
          borderRadius:10
      });
      
      //Transparent Border, Semitransparent BG
      var myView3 = Ti.UI.createView({
          width: 100,
          height: 100,
          top:230,
          backgroundColor:"#af00",
          borderWidth: 5,
          borderColor: "#0000",
          borderRadius:10
      });
      
      //NO BG
      var myView4 = Ti.UI.createView({
          width: 100,
          height: 100,
          top:340,
          borderWidth: 5,
          borderColor: "green",
          borderRadius:10
      });
      
      //Transparent BG
      var myView5 = Ti.UI.createView({
          width: 100,
          height: 100,
          top:450,
          borderWidth: 5,
          borderColor: "green",
          borderRadius:10,
          backgroundImage:"transparent.png"
      });
      //ImageView with single pixel border
      var imageView1 = Titanium.UI.createImageView({
          url: "KS_nav_ui.png",
          width: 100,
          height: 100,
          top: 560,
          borderWidth: 1,
          borderColor: "green",
          borderRadius: 5
      });
      //ImageView with fat border
      var imageView2 = Titanium.UI.createImageView({
          url: "KS_nav_ui.png",
          width: 100,
          height: 100,
          top: 670,
          borderWidth: 5,
          borderColor: "green",
          borderRadius: 5
      });
      //ImageView with transparent border
      var imageView3 = Titanium.UI.createImageView({
          url: "KS_nav_ui.png",
          width: 100,
          height: 100,
          top: 780,
          borderWidth: 5,
          borderColor: "#0000",
          borderRadius: 5
      });
      scrollView.add(myView1);
      scrollView.add(myView2);
      scrollView.add(myView3);
      scrollView.add(myView4);
      scrollView.add(myView5);
      scrollView.add(imageView1);
      scrollView.add(imageView2);
      scrollView.add(imageView3);
      
      
      win.add(scrollView);
      win.open();
      

4. Josh Roesslein 2012-02-16 TIMOB-2099 is for Labels, but this border issue affects any view type.
5. Josh Roesslein 2012-07-12 Appears to be fixed by TIMOB-9469
6. Rima Umbrasas 2012-08-14 Verified fixed with : Mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: Galaxy S III Android version 4.0.4

JSON Source