Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

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

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-12-21T05:46:43.000+0000
Affected Version/sRelease 1.7.5, Release 1.8.0.1
Fix Version/sRelease 3.0.0
ComponentsAndroid
Labelsapi, module_scrollview, parity, qe-review, qe-testadded, training
ReporterMarshall Culpepper
AssigneeJosh Roesslein
Created2011-04-15T02:34:22.000+0000
Updated2012-12-21T05:46:43.000+0000

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

FileDateSize
transparent.png2012-02-15T12:53:48.000+0000207

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