Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting a border on just one side of a View?

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.)

like image 977
Dogweather Avatar asked Mar 19 '11 00:03

Dogweather


People also ask

How do you put a border on one side?

If you want to set a border to the left and right, use three values (write none to the first and third values). Example: border-style: none solid none none; // border will be applied only to the right side. border-style: solid none; // border will be applied only to the top and bottom sides.

How do I add a border to a layout?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above code we have taken one text view with background as border so we need to create a file in drawable as boarder.

How do you give border to a view in react native?

In react native there are view's style property to set individual side width. You can use borderTopWidth for Top Border. borderBottomWidth for bottom border, borderLeftWidth for left border and borderRightWidth for right border. If you use single property borderWidth then it will apply to all four side of view.


2 Answers

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

like image 173
Aaron Saunders Avatar answered Oct 13 '22 11:10

Aaron Saunders


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

like image 32
John Dalsgaard Avatar answered Oct 13 '22 10:10

John Dalsgaard