Listview divider margin - android

I'm trying to set a margin to a listview divider.
The divider is a dashed line:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:dashGap="1dp"
android:dashWidth="1.5dp"
android:width="1dp"
android:color="#FF404040" />
<size android:height="3dp" />
</shape>
and a listview where i set the divider
<ListView
android:id="#+id/lv_news_feed_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:divider="#drawable/ch_dashed_line_divider"
/>
but I want a divider margin left and right.
I also tried to set a padding to the shape, but the listview is ignoring the padding.
<padding
android:bottom="15dp"
android:left="15dp"
android:right="15dp"
android:top="15dp" />
Is there any possibility to set a margin to the listview divider - except in the getView() of the Adapter?

Inset is the way to go
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="15dp"
android:insetRight="15dp" >
<shape
android:shape="line" >
<stroke
android:dashGap="1dp"
android:dashWidth="1.5dp"
android:width="1dp"
android:color="#FF404040" />
<size android:height="3dp" />
</shape>
</inset>

Use 'inset'.....
(list_divider.xml)
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="50dp"
android:insetRight="50dp" >
<shape>
<solid android:color="#color/orange" />
<corners android:radius="2.0dip" />
</shape>
</inset>
and in your list view add like this...
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/list_divider"
...
/>
you can set the inset value as desired...

You can use the following idea:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/table_background"/>
</shape>
</item>
<item android:left="2dp" android:right="2dp">
... your shape here ...
</item> </layer-list>
It works for me. Hope it will help.

U can use Gradient to get Right and Left margin instead of stroke.. Try this sample it starts and ends with black, in centre u'll get White.. It appears like u've given margin
<gradient android:startColor="#000000" android:centerColor="#ffffff"
android:endColor="#000000" />

I don't believe it is possible :/ Although if you add your own drawable at the bottom of each list item and remove the ListViews divider you can customize it however you want :)
Create the folder res/drawable and create a new xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#666666"></solid>
</shape>
..Then use that drawable in you list item.
Or a really quick and dirty way would ofc to create a thin LinearLayout (or some other layout) with colored background at the bottom of the list item to fake a customizable ListView divider..
Not a proper sollution, just some fixit ideas ;)

Related

View with Solid Background and Top+Bottom Inner Shadows

Essentially, I am trying to create the following background:
The traditional gradient which use in the drawable that I use for background only supports start color, middle color and end color.
However, as you can see from the mockup, I am trying to create only a slight overlay/shadow at the top and bottom of the shape, with a #50000000 color (black with 50% opacity).
If you're using this inside a Layout view, then you can simply create a View with a gradient background and place it in the beginning and in the end of the Layout.
For example:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/parent">
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#drawable/gradient" />
<!-- Your other child views -->
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#drawable/gradient" />
</LinearLayout>
And your gradient.xml file will have this:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#FFFFFF" android:endColor="#000000" android:angle="90"/>
</shape>
You can specify the blue background color to the parent layout.
You'll essentially get something like this:
[EDIT]
You can create two drawables - gradient_top.xml and gradient_bottom.xml to get the angle right
I prefer doing this than having to mess around with 9-Patches. Although, having said that, I wish Google would get on with providing built-in support for drop shadows, since they're so common.
Just to build on JoelFernandez solution with a more complete example:
The Container:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="[your_container_height]"
android:background="#drawable/container_bg_color">
<View
android:layout_width="match_parent"
android:layout_height="12dp"
android:layout_alignParentTop="true"
android:background="#drawable/container_gradient_top"/>
<View
android:layout_width="match_parent"
android:layout_height="12dp"
android:layout_alignParentBottom="true"
android:background="#drawable/container_gradient_bottom" />
<!-- Insert your content here -->
</RelativeLayout>
The Background Color (container_bg_color.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient android:startColor="#4a6fb4"
android:endColor="#color/deepBlue"
android:angle="135"/>
</shape>
The Top Gradient (container_gradient_top.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient
android:startColor="#00222222"
android:centerColor="#11111111"
android:endColor="#44000000"
android:angle="90"/>
</shape>
The Bottom Gradient (container_gradient_bottom.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient
android:startColor="#44000000"
android:centerColor="#11111111"
android:endColor="#00222222"
android:angle="90"/>
</shape>
Result:
Elaborating #ramaral's answer, build this drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF408DAA"/>
</shape>
</item>
<item android:top="0dip" android:bottom="32dip">
<shape android:shape="rectangle">
<gradient android:startColor="#00000000" android:endColor="#50000000" android:angle="90"/>
</shape>
</item>
<item android:top="32dip" android:bottom="0dip">
<shape android:shape="rectangle">
<gradient android:startColor="#50000000" android:endColor="#00000000" android:angle="90"/>
</shape>
</item>
</layer-list>
You would need to set a fixed height in the view, in order to achieve the best result. In my case I was setting the height to "36dip". Notice that the "32dip" is the amount of space from where the gradient ends to the end of the drawable, so that would leave me with a top and bottom gradients of "4dip" (36-32=4 :p)
Start with this:
Create a drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#408DAA"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#50000000"/>
</shape>
</item>
<item android:top="10dip" android:bottom="10dip">
<shape android:shape="rectangle">
<solid android:color="#408DAA"/>
</shape>
</item>
</layer-list>
Use it as background of any view.
Adjust top, bottom and color="#408DAA" according your needs

Styling the scrollbar thumb

I'm trying to change the outlook of the scrollbar thumb for a ListView.
I added the following property to the listview:
android:scrollbarThumbVertical="#drawable/scrollbar_vertical_thumb"
scrollbar_vertical_thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:angle="0" android:endColor="#FF9900" android:startColor="#FF9900"/>
<corners android:radius="1dp" />
<size android:width="3dp" />
</shape>
After applying my gradient I noticed I have tho scrollbars or scrollbar thumbs, as you can see in following picture (at the beginning of the page there's the left one and then it changes to the second one):
It seems like I didn't override the theme style for the scrollbar thumb.
Does anybody know, what could be wrong?
Update your ListView by adding 'scrollbarThumbVertical' property,
android:scrollbarThumbVertical="#drawable/scrollbar_vertical_thumb"
Then add following to 'scrollbar_vertical_thumb.xml' in drawable folder,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:angle="0" android:endColor="#6699FF" android:startColor="#3333FF" />
<corners android:radius="1dp" />
<size android:width="10dp" />
</shape>
You've override the wrong property.
You should do this instead:
<item name="android:fastScrollThumbDrawable">#drawable/scrollbar_vertical_thumb</item>

Show only left and right borders of a rectangle [duplicate]

I have a TextView and I'd like to add a black border along its top and bottom borders. I tried adding android:drawableTop and android:drawableBottom to the TextView, but that only caused the entire view to become black.
<TextView
android:background="#android:color/green"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="#android:color/black"
android:drawableBottom="#android:color/black"
android:text="la la la" />
Is there a way to easily add a top and bottom border to a View (in particular, a TextView) in Android?
In android 2.2 you could do the following.
Create an xml drawable such as /res/drawable/textlines.xml and assign this as a TextView's background property.
<TextView
android:text="My text with lines above and below"
android:background="#drawable/textlines"
/>
/res/drawable/textlines.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
The down side to this is that you have to specify an opaque background colour, as transparencies won't work. (At least i thought they did but i was mistaken). In the above example you can see that the solid colour of the first shape #FFdddddd is copied in the 2nd shapes stroke colour.
I've used a trick so that the border is displayed outside the container. With this trick only a line is drawn so the background will be shown of the underlying view.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#FF000000" />
<solid android:color="#00FFFFFF" />
<padding android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</layer-list>
To add a 1dp white border at the bottom only and to have a transparent background you can use the following which is simpler than most answers here.
For the TextView or other view add:
android:background="#drawable/borderbottom"
And in the drawable directory add the following XML, called borderbottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-2dp" android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ffffffff" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
If you want a border at the top, change the android:top="-2dp" to android:bottom="-2dp"
The colour does not need to be white and the background does not need to be transparent either.
The solid element may not be required. This will depend on your design (thanks V. Kalyuzhnyu).
Basically, this XML will create a border using the rectangle shape, but then pushes the top, right and left sides beyond the render area for the shape. This leaves just the bottom border visible.
Option 1: Shape Drawable
This is the simplest option if you want a border around a layout or view in which you can set the background. Create an XML file in the drawable folder that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#8fff93" />
<stroke
android:width="1px"
android:color="#000" />
</shape>
You can remove the solid if you don't want a fill. The set background="#drawable/your_shape_drawable" on your layout/view.
Option 2: Background View
Here's a little trick I've used in a RelativeLayout. Basically you have a black square under the view you want to give a border, and then give that view some padding (not margin!) so the black square shows through at the edges.
Obviously this only works properly if the view doesn't have any transparent areas. If it does I would recommend you write a custom BorderView which only draws the border - it should only be a few dozen lines of code.
<View
android:id="#+id/border"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:layout_alignLeft="#+id/image"
android:layout_alignRight="#+id/image"
android:layout_alignTop="#+id/main_image"
android:background="#000" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_...
android:padding="1px"
android:src="#drawable/..." />
If you're wondering, it does work with adjustViewBounds=true. However, it doesn't work if you want to have a background in an entire RelativeLayout, because there is a bug that stops you filling a RelativeLayout with a View. In that case I'd recommend the Shape drawable.
Option 3: 9-patch
A final option is to use a 9-patch drawable like this one:
You can use it on any view where you can set android:background="#drawable/...". And yes it does need to be 6x6 - I tried 5x5 and it didn't work.
The disadvantage of this method is you can't change the colours very easily, but if you want fancy borders (e.g. only a border at the top and bottom, as in this question) then you may not be able to do them with the Shape drawable, which isn't very powerful.
Option 4: Extra views
I forgot to mention this really simple option if you only want borders above and below your view. You can put your view in a vertical LinearLayout (if it isn't already) and then add empty Views above and below it like this:
<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
The currently accepted answer doesn't work. It creates thin vertical borders on the left and right sides of the view as a result of anti-aliasing.
This version works perfectly. It also allows you to set the border widths independently, and you can also add borders on the left / right sides if you want. The only drawback is that it does NOT support transparency.
Create an xml drawable named /res/drawable/top_bottom_borders.xml with the code below and assign it as a TextView's background property.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#DDDD00" /> <!-- border color -->
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp"> <!-- adjust borders width here -->
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" /> <!-- background color -->
</shape>
</item>
</layer-list>
Tested on Android KitKat through Marshmallow
So I wanted to do something slightly different: a border on the bottom ONLY, to simulate a ListView divider. I modified Piet Delport's answer and got this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/background_trans_light" />
</shape>
</item>
<!-- this mess is what we have to do to get a bottom border only. -->
<item android:top="-2dp"
android:left="-2dp"
android:right="-2dp"
android:bottom="1px">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/background_trans_mid" />
<solid android:color="#null" />
</shape>
</item>
</layer-list>
Note using px instead of dp to get exactly 1 pixel divider (some phone DPIs will make a 1dp line disappear).
Add file to res/drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
Add link on this file to background property
Just as #Nic Hubbard said, there is a very easy way to add a border line.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" >
</View>
You can change the height and background color to whatever you want.
You can also wrap the view in a FrameLayout, then set the frame's background color and padding to what you want; however, the textview, by default has a 'transparent' background, so you'd need to change the textview's background color too.
My answers is based on #Emile version but I use transparent color instead of solid.
This example will draw a 2dp bottom border.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke android:width="2dp"
android:color="#50C0E9" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<stroke android:width="2dp"
android:color="#color/bgcolor" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
#color/bgcolor is the color of the background on wich you draw your view with border.
If you want to change the position of the border change the offset with one of:
android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"
or combine them to have 2 or more borders:
android:bottom="2dp" android:top="2dp"
You can do this by this code snippet -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Minus (-) how much dp you gave in the stroke width from left right-->
<item android:left="-10dp" android:right="-10dp">
<shape
android:shape="rectangle">
<stroke android:width="10dp" android:color="#android:color/holo_red_dark" />
<!--This is the main background -->
<solid android:color="#FFDDDDDD" />
</shape>
</item>
</layer-list>
Preview -
Why not just create a 1dp high view with a background color? Then it can be easily placed where you want.
To change this:
<TextView
android:text="My text"
android:background="#drawable/top_bottom_border"/>
I prefer this approach in "drawable/top_bottom_border.xml":
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#000"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#000"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
</layer-list>
This only makes the borders, not a rectangle that will appear if your background has a color.
Simplest way to add borders to inset the borders using InsetDrawable,following will show top border only :
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-2dp"
android:insetLeft="-2dp"
android:insetRight="-2dp">
<shape android:shape="rectangle">
<solid android:color="#color/light_gray" />
<stroke
android:width=".5dp"
android:color="#color/dark_gray" />
</shape>
</inset>
Just to add my solution to the list..
I wanted a semi transparent bottom border that extends past the original shape (So the semi-transparent border was outside the parent rectangle).
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#33000000" /> <!-- Border colour -->
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<solid android:color="#164586" />
</shape>
</item>
</layer-list>
Which gives me;
First make a xml file with contents shown below and name it border.xml and place it inside the layout folder inside the res directory
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#0000" />
<padding android:left="0dp" android:top="1dp" android:right="0dp"
android:bottom="1dp" />
</shape>
After that inside the code use
TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);
This will make a black line on top and bottom of the TextView.
Simply add Views at the top and bottom of the View
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/your_color"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Testing"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/your_color"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Write down below code
<View
android:layout_width="wrap_content"
android:layout_height="2dip"
android:layout_below="#+id/topics_text"
android:layout_marginTop="7dp"
android:layout_margin="10dp"
android:background="#ffffff" />
Try wrapping the image with a linearlayout, and set it's background to the border color you want around the text. Then set the padding on the textview to be the thickness you want for your border.
You can also use a 9-path to do your job. Create it so that colored pixel do not multiply in height but only the transparent pixel.
Based on accepted answer of Pi Delport and Emile, I made it a little simpler
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item> <!--divider TOP and BOTTOM-->
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/divider" />
</shape>
</item>
<!--background surface-->
<item
android:top="1dp"
android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/background" />
</shape>
</item>
// Just simply add border around the image view or view
<ImageView
android:id="#+id/imageView2"
android:layout_width="90dp"
android:layout_height="70dp"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#+id/imageView1"
android:background="#android:color/white"
android:padding="5dip" />
// After that dynamically put color into your view or image view object
objView.setBackgroundColor(Color.GREEN);
//VinodJ/Abhishek
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/light_grey1" />
<stroke
android:width="1dip"
android:color="#color/light_grey1" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#72cdf4"
android:text=" aa" />
Just Add this TextView below the text where you want to add the border
Just to enforce #phreakhead ´s and user1051892 ´s answers, <item android:bottom|android:left|android:right|android:top> if negative, must to be greater than <stroke android:width>. If not, item´s painting will be mixed with stroke´s painting and you may think these values are not working.

Layout with different colors

I'd like to have a background color of a RelativeLayout similar to that of an image shown in the link below. Ignore the black strip in the bottom half of the image.
I don't want to use the image as a background of the layout. Can you give me an idea of how to proceed?
You can use gradient. Set different gradient in selector as you want. Done!
GradientDrawable.class
This is what you want, set your colors. Enjoy!
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="30dp">
<shape android:shape="rectangle" >
<corners
android:topRightRadius="8dip"
android:topLeftRadius="8dip" />
<gradient
android:startColor="#030303"
android:endColor="#3B3B3B"
android:angle="270" />
</shape>
</item>
<item android:top="30dp" >
<shape android:shape="rectangle" >
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip" />
<gradient
android:startColor="#4B5057"
android:endColor="#4B5059"
android:angle="270" />
<size android:height="30dp" />
</shape>
</item>
</layer-list>
just try with shape file structure. I think this may give the solution.
//save this below code as gradient and use as background of your layout as
android:background="#drawable/gradient"
//gradient.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#232323" android:endColor="#4B5059"
android:angle="270"/>
</shape>

Is there an easy way to add a border to the top and bottom of an Android View?

I have a TextView and I'd like to add a black border along its top and bottom borders. I tried adding android:drawableTop and android:drawableBottom to the TextView, but that only caused the entire view to become black.
<TextView
android:background="#android:color/green"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="#android:color/black"
android:drawableBottom="#android:color/black"
android:text="la la la" />
Is there a way to easily add a top and bottom border to a View (in particular, a TextView) in Android?
In android 2.2 you could do the following.
Create an xml drawable such as /res/drawable/textlines.xml and assign this as a TextView's background property.
<TextView
android:text="My text with lines above and below"
android:background="#drawable/textlines"
/>
/res/drawable/textlines.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
The down side to this is that you have to specify an opaque background colour, as transparencies won't work. (At least i thought they did but i was mistaken). In the above example you can see that the solid colour of the first shape #FFdddddd is copied in the 2nd shapes stroke colour.
I've used a trick so that the border is displayed outside the container. With this trick only a line is drawn so the background will be shown of the underlying view.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#FF000000" />
<solid android:color="#00FFFFFF" />
<padding android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</layer-list>
To add a 1dp white border at the bottom only and to have a transparent background you can use the following which is simpler than most answers here.
For the TextView or other view add:
android:background="#drawable/borderbottom"
And in the drawable directory add the following XML, called borderbottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-2dp" android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ffffffff" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
If you want a border at the top, change the android:top="-2dp" to android:bottom="-2dp"
The colour does not need to be white and the background does not need to be transparent either.
The solid element may not be required. This will depend on your design (thanks V. Kalyuzhnyu).
Basically, this XML will create a border using the rectangle shape, but then pushes the top, right and left sides beyond the render area for the shape. This leaves just the bottom border visible.
Option 1: Shape Drawable
This is the simplest option if you want a border around a layout or view in which you can set the background. Create an XML file in the drawable folder that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#8fff93" />
<stroke
android:width="1px"
android:color="#000" />
</shape>
You can remove the solid if you don't want a fill. The set background="#drawable/your_shape_drawable" on your layout/view.
Option 2: Background View
Here's a little trick I've used in a RelativeLayout. Basically you have a black square under the view you want to give a border, and then give that view some padding (not margin!) so the black square shows through at the edges.
Obviously this only works properly if the view doesn't have any transparent areas. If it does I would recommend you write a custom BorderView which only draws the border - it should only be a few dozen lines of code.
<View
android:id="#+id/border"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:layout_alignLeft="#+id/image"
android:layout_alignRight="#+id/image"
android:layout_alignTop="#+id/main_image"
android:background="#000" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_...
android:padding="1px"
android:src="#drawable/..." />
If you're wondering, it does work with adjustViewBounds=true. However, it doesn't work if you want to have a background in an entire RelativeLayout, because there is a bug that stops you filling a RelativeLayout with a View. In that case I'd recommend the Shape drawable.
Option 3: 9-patch
A final option is to use a 9-patch drawable like this one:
You can use it on any view where you can set android:background="#drawable/...". And yes it does need to be 6x6 - I tried 5x5 and it didn't work.
The disadvantage of this method is you can't change the colours very easily, but if you want fancy borders (e.g. only a border at the top and bottom, as in this question) then you may not be able to do them with the Shape drawable, which isn't very powerful.
Option 4: Extra views
I forgot to mention this really simple option if you only want borders above and below your view. You can put your view in a vertical LinearLayout (if it isn't already) and then add empty Views above and below it like this:
<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
The currently accepted answer doesn't work. It creates thin vertical borders on the left and right sides of the view as a result of anti-aliasing.
This version works perfectly. It also allows you to set the border widths independently, and you can also add borders on the left / right sides if you want. The only drawback is that it does NOT support transparency.
Create an xml drawable named /res/drawable/top_bottom_borders.xml with the code below and assign it as a TextView's background property.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#DDDD00" /> <!-- border color -->
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp"> <!-- adjust borders width here -->
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" /> <!-- background color -->
</shape>
</item>
</layer-list>
Tested on Android KitKat through Marshmallow
So I wanted to do something slightly different: a border on the bottom ONLY, to simulate a ListView divider. I modified Piet Delport's answer and got this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/background_trans_light" />
</shape>
</item>
<!-- this mess is what we have to do to get a bottom border only. -->
<item android:top="-2dp"
android:left="-2dp"
android:right="-2dp"
android:bottom="1px">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/background_trans_mid" />
<solid android:color="#null" />
</shape>
</item>
</layer-list>
Note using px instead of dp to get exactly 1 pixel divider (some phone DPIs will make a 1dp line disappear).
Add file to res/drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
Add link on this file to background property
Just as #Nic Hubbard said, there is a very easy way to add a border line.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" >
</View>
You can change the height and background color to whatever you want.
You can also wrap the view in a FrameLayout, then set the frame's background color and padding to what you want; however, the textview, by default has a 'transparent' background, so you'd need to change the textview's background color too.
My answers is based on #Emile version but I use transparent color instead of solid.
This example will draw a 2dp bottom border.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke android:width="2dp"
android:color="#50C0E9" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<stroke android:width="2dp"
android:color="#color/bgcolor" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
#color/bgcolor is the color of the background on wich you draw your view with border.
If you want to change the position of the border change the offset with one of:
android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"
or combine them to have 2 or more borders:
android:bottom="2dp" android:top="2dp"
You can do this by this code snippet -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Minus (-) how much dp you gave in the stroke width from left right-->
<item android:left="-10dp" android:right="-10dp">
<shape
android:shape="rectangle">
<stroke android:width="10dp" android:color="#android:color/holo_red_dark" />
<!--This is the main background -->
<solid android:color="#FFDDDDDD" />
</shape>
</item>
</layer-list>
Preview -
Why not just create a 1dp high view with a background color? Then it can be easily placed where you want.
To change this:
<TextView
android:text="My text"
android:background="#drawable/top_bottom_border"/>
I prefer this approach in "drawable/top_bottom_border.xml":
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#000"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#000"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
</layer-list>
This only makes the borders, not a rectangle that will appear if your background has a color.
Simplest way to add borders to inset the borders using InsetDrawable,following will show top border only :
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-2dp"
android:insetLeft="-2dp"
android:insetRight="-2dp">
<shape android:shape="rectangle">
<solid android:color="#color/light_gray" />
<stroke
android:width=".5dp"
android:color="#color/dark_gray" />
</shape>
</inset>
Just to add my solution to the list..
I wanted a semi transparent bottom border that extends past the original shape (So the semi-transparent border was outside the parent rectangle).
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#33000000" /> <!-- Border colour -->
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<solid android:color="#164586" />
</shape>
</item>
</layer-list>
Which gives me;
First make a xml file with contents shown below and name it border.xml and place it inside the layout folder inside the res directory
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#0000" />
<padding android:left="0dp" android:top="1dp" android:right="0dp"
android:bottom="1dp" />
</shape>
After that inside the code use
TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);
This will make a black line on top and bottom of the TextView.
Simply add Views at the top and bottom of the View
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/your_color"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Testing"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/your_color"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Write down below code
<View
android:layout_width="wrap_content"
android:layout_height="2dip"
android:layout_below="#+id/topics_text"
android:layout_marginTop="7dp"
android:layout_margin="10dp"
android:background="#ffffff" />
Try wrapping the image with a linearlayout, and set it's background to the border color you want around the text. Then set the padding on the textview to be the thickness you want for your border.
You can also use a 9-path to do your job. Create it so that colored pixel do not multiply in height but only the transparent pixel.
Based on accepted answer of Pi Delport and Emile, I made it a little simpler
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item> <!--divider TOP and BOTTOM-->
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/divider" />
</shape>
</item>
<!--background surface-->
<item
android:top="1dp"
android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/background" />
</shape>
</item>
// Just simply add border around the image view or view
<ImageView
android:id="#+id/imageView2"
android:layout_width="90dp"
android:layout_height="70dp"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#+id/imageView1"
android:background="#android:color/white"
android:padding="5dip" />
// After that dynamically put color into your view or image view object
objView.setBackgroundColor(Color.GREEN);
//VinodJ/Abhishek
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/light_grey1" />
<stroke
android:width="1dip"
android:color="#color/light_grey1" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#72cdf4"
android:text=" aa" />
Just Add this TextView below the text where you want to add the border
Just to enforce #phreakhead ´s and user1051892 ´s answers, <item android:bottom|android:left|android:right|android:top> if negative, must to be greater than <stroke android:width>. If not, item´s painting will be mixed with stroke´s painting and you may think these values are not working.

Categories

Resources