Setting a border on just one side of a View?

Question

Has anyone been able to do the equivalent of border-left: on a View? (I want to create a border on just one side of an ImageView.)

Polluted

Answer 1

The trick is to create another view with the dimensions of the border and place the imageView next to it... it is a ugly hack, but the only way I have ever seen it accompilshed

Sherrell

Thanks - yep, that's what I ended up doing, and it works fine. – Polluted

Answer 2

I know this is an old question - but thought I would add the alternative I found today.

Just as ugly.... but perhaps simpler.

I needed to create a bar of 4 icons across the screen with a separator. What I did was to create a as a container and within that 4 tags (with an within them). I set them to left: 0, 25%, 50% and 75%. Then I set the width of each embedded to 24.8% and set the background colour of the container to whatever color I wanted the bar.

Example:

<View id="tb1" bottom="0" height="45dp" width="100%" backgroundColor='#99cc33'>
    <View height="45dp" left="0" width="24.8%" backgroundColor='#363636'>
        <ImageView width="40dp" image="/images/trip1.png"/>
    </View>
    <View height="45dp" left="25%" width="24.8%" backgroundColor='#363636'>
        <ImageView width="35dp" image="/images/trip2.png"/>
    </View>
    <View height="45dp" left="50%" width="24.8%" backgroundColor='#363636'>
        <ImageView height="40dp" image="/images/trip3.png"/>
    </View>
    <View height="45dp" left="75%" width="25%" backgroundColor='#363636'>
        <ImageView height="35" image="/images/trip4.png"/>
    </View>
</View>

/John

Brueghel

Answer 3

make a "View" Upon it. And make make your "View" color as the 'backgroundColor'

Gyroscope

Answer 4

Another ugly hack. Put a background gradient across the bottom. You have to specify the height first, and the line will not be 100% solid but you don't notice it on a device.

"TextField": { height: 44, backgroundGradient: { type: "linear", startPoint: { x: 0, y: 43 }, endPoint: { x: 0, y: 44 }, colors: [ "white", "#ccc" ] } }

Longheaded