Change spinner background color but keep arrow - android

I've read several thing about it but I can't find what I need.
I want to keep the grey arrow but I want to remove the horizontal bar from the default style and have a white background. Do you have any idea of how I can do this ?
Here is what I have now (default spinner style) :
Here is what I want :


I did a little modification based on #Mansur Khan 's answer.
We don't have to add an ImageView in this case because the spinner already has a triangle arrow. So check the code below:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:background="#FFFFFF">
<Spinner
style="#style/Widget.AppCompat.DropDownItem.Spinner"
android:layout_width="match_parent"
android:layout_height="70dp"
android:id="#+id/sign_up_country"
/>
</RelativeLayout>
Here is the screenshot
Before:
After:


For the record, I found an easy solution : Wrap your spinner in a relative layout and add an image :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/borderbottom_white"<!-- white background with bottom border -->
android:layout_marginTop="15dp" >
<Spinner
android:id="#+id/postfield_category"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:background="#null"
android:minHeight="0dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/arrowspinner" />
</RelativeLayout>


A simple solution that doesn't require you to create your own drawable for the arrow is to wrap the spinner with a RelativeLayout, and set the background color in the RelativeLayout, not the spinner:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f00" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>


Use this:
yourspinner.setOnItemSelectedListener(this);
#Override
public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
((TextView) yourspinner.getSelectedView()).setBackgroundColor(getResources()
.getColor(R.color.your_color));
}
and your class should implement OnItemSelectedListener.


Hi instead of wrapping Spinner component around Parent Layouts like LinearLayout, RelativeLayout etc which increases layout parsing simply create a drawable called spinner_bg.xml under drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/icn_dropdown_arw" />
</item>
</layer-list>
Set spinner_bg as the background of your spinner and it works like charm:
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#drawable/spinner_bg" />


I think the best way without doing complex layouts is this:
Use this xml for your spinner background and you are good to go!!!
<item android:state_pressed="true">
<shape>
<solid android:color="#color/materialBlueGray600" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<solid android:color="#color/materialGray50" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<layer-list>
<item>
<shape>
<solid android:color="#color/materialGray50" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:gravity="right">
<bitmap android:antialias="true" android:gravity="right" android:src="#drawable/ic_expand_small" />
</item>
</layer-list>
</item>


Here is the code of custom spinner. Please check it out and tell me. Not yet I tested this. So please inform me after checking this whether it solves your problem.
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/spinner_background"
android:gravity="center"
android:paddingRight="10dp"
android:spinnerMode="dropdown"
android:textColor="your text color"
android:textSize="your text size" />
Here is the drawable(spinner_background.xml) to create the background of spinner.
<?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="border color" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/white" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
Edit:
please check this link which gives you an idea to do.
Customize spinner background
OR
you can do something like this.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="spinner background image">
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="arrow image" />
</RelativeLayout>


below layout will create a background in spinner with desire color drop down arrow
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6"
android:background="#drawable/edit_text_rounded_shape"
android:gravity="center|center_vertical">
<Spinner
android:id="#+id/spinerComanyName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="4dp"
android:layout_weight=".6"
android:layout_gravity="center"
android:entries="#array/spinner_item"
android:spinnerMode="dropdown"
android:theme="#style/Spinner"
/>
</LinearLayout>
<style name="Spinner">
<!-- Used for the bottom line when not selected / focused -->
<item name="colorControlNormal">#color/black</item>
<item name="colorControlActivated">#color/colorPrimary</item>
<!-- colorControlActivated & colorControlHighlight use the colorAccent color by default -->
</style>
edit_text_rounded_shape which provide background color and rounded corner
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#color/white"/>
<stroke android:color="#color/grey"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>


A good way to customise spinners and any other Android controls is to use the Android Asset Studio site and choose the Android Holo Colors Generator. This will create all the assets you might need, including the "underline". It also generates the XML files that implement the changes.
Once you download the ZIP file from that site, you just copy the images and XML files into your project.
You can then edit the required image files to remove the underline. They are 9-Patch files, called:
apptheme_spinner_default_holo_light.9.png
apptheme_spinner_disabled_holo_light.9.png
apptheme_spinner_focused_holo_light.9.png
apptheme_spinner_pressed_holo_light.9.png
For a more complete explanation of the process, and to see some of the sample XML files, please refer to my related answer:
Change colour of small triangle on spinner in android


android:layout_alignParentRight="true"
android:layout_width="#dimen/spinner_width"
android:layout_height="wrap_content"
android:id="#+id/spnLocation"
android:entries="#array/labelFamily"
android:layout_centerVertical="true"
android:backgroundTint="#color/color_gray"
this work for me


Always while working with spinners, buttons and EditTexts and also needing to insert a drawable, I often wrap the element (spinner, EditText etc.) in a FrameLayout. Check an example:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:id="#+id/spinner_component"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#drawable/your_rectangle_style"
android:textColor="#color/your_text_color" />
<ImageView
android:layout_width="11dp"
android:layout_height="9dp"
android:src="#drawable/arrow_spinner"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="7dp" />
</FrameLayout>
Another important tip is that FrameLayout allows you to set OnClick functions on the drawable, for instance.

Related

Button with 2 corners only

I have to create buttons styled like this:
Yes, strange I know. Those 2 corners should not scale if button text is shorter / longer.
Is this possible to create it using an XML ?
I tried a vector but the vector scales with the size of button.
Any other idea I have is to do it programmatically, e.g., something like in this answer
(Explanation of the design: we're experimenting with the design. Imagine button with 4 such corners. Buttons next to each other each having 2 corners close to the other one, etc. Our users love fancy design ... . :-) )

you can create customView
<LinearLayout
android:orientation="vertical"
android:layout_marginTop="100dp"
android:layout_marginLeft="100dp"
android:layout_width="100dp"
android:layout_height="wrap_content">
<View
android:layout_marginLeft="90dp"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:gravity="center"
android:textSize="13dp"
android:textColor="#000000"
android:text="Button text.."
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="50dp" />
<RelativeLayout
android:layout_width="1dp"
android:layout_height="match_parent">
<View
android:background="#000000"
android:layout_width="1dp"
android:layout_height="10dp"/>
<View
android:layout_alignParentBottom="true"
android:background="#000000"
android:layout_width="1dp"
android:layout_height="10dp"/>
</RelativeLayout>
</LinearLayout>
<View
android:layout_marginLeft="90dp"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
image like this

Okay after a little research and best practice you surely need a Layerlist as a background for your Button(though even a TextView will work i.e it is also clickable like any view).
SOLUTION:
You will have to open the drawables folder and add a drawable resource called lets say custom_button_background then use this layerlist inside it:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#000000" />
</shape>
</item>
<item android:top="20dp" android:bottom="20dp" android:left="20dp" android:right="20dp">
<shape>
<solid android:color="#ffffff" />
</shape>
</item>
<item android:right="80dp">
<shape>
<solid android:color="#ffffff" />
</shape>
</item>
<item android:top="80dp" android:bottom="80dp">
<shape>
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Then we are done! This will be our background, In my Android studio the Preview for this look like this:
You can adjust the values to reduce them to your needs. To set this as your Button or any View you simply add this attribute to it:
android:background="#drawable/custom_button_background"
Just adjust the measures to fit your Button Size!

Ripple effect over imageview

To describe my problem i created small example.
I have linearlayout with imageview and textview. For linearlayout i've set ripple drawable as background. But when i click or long click on linearlayout ripple animation shows under imageview. How show animation over imageview ?
main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linear"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/ripple"
android:clickable="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#mipmap/index" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is ripple test"
android:textColor="#FF00FF00" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
drawable-v21/ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFF0000">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
</shape>
</item>
</ripple>
drawable/ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FF000000" />
</shape>
</item>
</selector>
screenshot how it looks now:

Add the ripple like this
android:foreground="?android:attr/selectableItemBackground"
based on this answer https://stackoverflow.com/a/35753159/2736039

Add android:background="#null" for the ImageView

If your app needs to run on API < 23, you won't be able to use the foreground attribute on views other than FrameLayout, which means adding another [useless] level in the view tree hierarchy.
Another solution is to wrap your image with a <ripple>, set it as your ImageView's background, and use tint and tintMode to "hide" the src image so the background image that has the ripple over it is visible.
<!-- In your layout file -->
<ImageView
android:adjustViewBounds="true"
android:background="#drawable/image_with_ripple"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/image"
android:tint="#android:color/transparent"
android:tintMode="src_in" />
<!-- drawable/image_with_ripple.xml -->
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight">
<item android:drawable="#drawable/image" />
</ripple>
Not only this works on API 21+ but if your image has rounded corners – or is another type of non-rectangle shape, like a star or a heart icon – the ripple will remain in its bounds instead of filling the view's rectangle bounds, which gives a better look in some cases.
See this Medium article for an animated GIF to see how this technique compares to using a <FrameLayout> or the foreground attribute.

Resolve for API < 21
<ImageView
android:id="#+id/favorite_season"
style="?android:attr/borderlessButtonStyle"
android:background="?android:attr/selectableItemBackground"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_margin="22dp"
android:clickable="true"
android:focusable="true"
android:src="#drawable/ic_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

Simple use these two lines as attribute in that ImageView.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"

Android: in drawable xml, layer-list, why does the width for item not work in API 19 or lower?

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<!--width here doesn't work-->
<item
android:gravity="left"
android:width="10dp"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="0"-->
<!--/>-->
</shape>
</item>
<!--width here doesn't work-->
<item
android:width="10dp"
android:gravity="right"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="180"-->
<!--/>-->
</shape>
</item>
Here is the example.
It works in Lollipop or higher, but it doesn't work in Kitkat, the width is being ignored, the rectangle will fill the whole view.
I also tried to remove the second item, only leaves the first item, the width is still being ignored.
The ImageView uses this drawable:
<!--Width will be changed dynamically-->
<ImageView
android:id="#+id/someid"
android:layout_width="100dp"
android:layout_height="#dimen/someheight"
android:src="#drawable/the_xml_above"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false"
/>
How to solve this?

Alright, I'll answer my own question:
It seems that on Android 4.4 or below, size node or width/height attribute will be ignored.
So the best approach is: create different shapes in different drawable xml files, create a relative layout instead of ImageView, and combine them in relative layout.
<RelativeLayout
android:id="#+id/id1"
android:layout_width="30dp"
android:layout_height="#dimen/someheight"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/somesrc"/>
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:rotation="180"
android:src="#drawable/somesrc"/>
</RelativeLayout>

How can I show a label with text in the middle?

I am trying to get a TextView with white background and rounded corners and text in the middle.
Something that looks like this:
So far I have this but it is not giving me the above effect.
<TextView
android:textColor="#000000"
android:background="#FFFFFF"
android:text="0" />

First of all, I would create a custom drawable resource for easy implementation of rounded corners.
(place this in res/drawable)
my_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="ffffff" />
<corners
android:radius="15dp"/>
<stroke
android:width="1dp"
android:color="#android:color/black" />
</shape>
More info on xml drawable resources can be found right here if you want to get into more advanced drawables (gradients, layer-list, animation, etc...)
Then change your TextView in xml layout file to match this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:textColor="#000000"
<!--refer to your custom drawable from earlier-->
android:background="#drawable/my_bg"
<!--center text within TextView-->
android:gravity="center"
android:text="0" />
I hope this helps, Happy Coding!

Set the gravity
android:gravity="center"
http://developer.android.com/reference/android/widget/TextView.html#attr_android:gravity
You are missing the width and height attribute for TextView.
For the rounded corners use a Shape Drawable
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Under res/drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="#FFFFFF"/>
<corners android:radius="7dp" />
<stroke android:width="5px" />
</shape>
Then
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#drawable/background"
android:gravity="center"
android:text="0"
android:textColor="#000000" />
Snap

Vertical line using XML drawable

I'm trying to figure out how to define a vertical line (1dp thick) to be used as a drawable.
To make a horizontal one, it's pretty straightforward:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:width="1dp" android:color="#0000FF"/>
<size android:height="50dp" />
</shape>
The question is, how to make this line vertical?
Yes, there are workarounds, such as drawing a rectangle shape 1px thick, but that complicates the drawable XML, if it consists of multiple <item> elements.
Anyone had any chance with this?
UPDATE
Case is still unsolved. However,
For anyone on a Android documentation crusade - you might find this useful:
Missing Android XML Manual
UPDATE
I found no other way other than the one that I marked as correct. It does the trick though feels a bit "heavy", thus if you happen to know the answer don't forget to share ;)

Instead of a shape, you could try a View:
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#FF0000FF" />
I have only used this for horizontal lines, but I would think it would work for vertical lines as well.
Use:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#FF0000FF" />
for a horizontal line.

You can nest your shape inside a rotate tag.
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90">
<shape
android:shape="line">
<stroke
android:width="1dp"
android:color="#ff00ff"
android:dashWidth="1dp"
android:dashGap="2dp" />
</shape>
</rotate>
However, the only problem is the layout params defined in your layout xml will be the dimensions used to draw the original shape. Meaning if you want your line to be 30dp tall, you need to define a layout_width of 30dp in your layout xml. But the final width will also be 30dp in that case, which is likely undesirable for most situations. This essentially means both width and height have to be the same value, the value of your desired length for the line. I couldn't figure out how to fix this.
This seems to be the "android way" solution, but unless there's some fix or workaround for the dimensions issue I mention then this likely won't work for most people. What we really need is an orientation attribute in <shape/> or <stroke/>.
You can also try referencing another drawable in the rotate tag's attributes, such as:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:drawable="#drawable/horizontal_line" />
However I haven't tested this and expect it to have the same issues.
-- EDIT --
Oh, I actually figured out a fix. You can use a negative margin in your layout xml to get rid of the undesired extra space.
Such as:
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginLeft="-15dp"
android:layout_marginRight="-15dp"
android:src="#drawable/dashed_vertical_line" />

You can use the rotate attribute
<item>
<rotate
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:shape="line"
android:top="1dip" >
<stroke
android:width="1dip"
/>
</shape>
</rotate>
</item>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke android:width="1dp" android:color="#color/white" />
<size android:width="2dp" />
</shape>
Work's for me . Put it as background of view with fill_parent or fixed sized in dp height

I think this is the simplest solution:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<size android:width="1dp" />
<solid android:color="#0000FF" />
</shape>
</item>
</layer-list>

I came up with a different solution. The idea is to fill the drawable first with the color that you like the line to be and then fill the whole area again with the background color while using left or right padding. Obviously this only works for a vertical line in the far left or right of your drawable.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#color/divider_color" />
<item android:left="6dp" android:drawable="#color/background_color" />
</layer-list>

I needed to add my views dynamically/programmatically, so adding an extra view would have been cumbersome. My view height was WRAP_CONTENT, so I couldn't use the rectangle solution. I found a blog-post here about extending TextView, overriding onDraw() and painting in the line, so I implemented that and it works well. See my code below:
public class NoteTextView extends TextView {
public NoteTextView(Context context) {
super(context);
}
private Paint paint = new Paint();
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.parseColor("#F00000FF"));
paint.setStrokeWidth(0);
paint.setStyle(Paint.Style.FILL);
canvas.drawLine(0, 0, 0, getHeight(), paint);
}
}
I needed a vertical line on the left, but the drawline parameters are drawLine(startX, startY, stopX, stopY, paint) so you can draw any straight line in any direction across the view.
Then in my activity I have
NoteTextView note = new NoteTextView(this);
Hope this helps.

its very simple...
to add a vertical line in android xml...
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:rotation="90"
android:background="#android:color/darker_gray"/>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-3dp"
android:left="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
<stroke
android:width="2dp"
android:color="#1fc78c" />
</shape>
</item>
</layer-list>

Depends, where you want to have the vertical line, but if you want a vertical border for example, you can have the parent view have a background a custom drawable. And you can then define the drawable like this:
<?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="#000000" />
<solid android:color="#00ffffff" />
</shape>
</item>
<item android:right="1dp">
<shape android:shape="rectangle">
<solid android:color="#00ffffff" />
</shape>
</item>
</layer-list>
This example will create a 1dp thin black line on the right side of the view, that will have this drawable as an background.

It looks like no one mentioned this option:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#color/white" android:width="1dp"/>
</layer-list>

Although #CommonsWare's solution works, it can't be used e. g. in a layer-list drawable. The options combining <rotate> and <shape> cause the problems with size. Here is a solution using the Android Vector Drawable. This Drawable is a 1x10dp white line (can be adjusted by modifying the width, height and strokeColor properties):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="1"
android:viewportHeight="10"
android:width="1dp"
android:height="10dp">
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M0.5,0 V10" />
</vector>

You can use a shape but instead of a line make it rectangle.
android:shape="rectangle">
<stroke
android:width="5dp"
android:color="#ff000000"
android:dashGap="10px"
android:dashWidth="30px" />
and In your layout use this...
<ImageView
android:layout_width="7dp"
android:layout_height="match_parent"
android:src="#drawable/dashline"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layerType="software"/>
You might have to play with the width, depending on the size of the dashes, to get it into a single line.
Hope this helps
Cheers

add this in your styles.xml
<style name="Divider">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#color/divider_color</item>
</style>
<style name="Divider_invisible">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
</style>
then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table.
<TableLayout
android:id="#+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#92C94A" >
<TextView
android:id="#+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
//...................................................................
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider_invisible" />
</LinearLayout>
//...................................................................
<TextView
android:id="#+id/textView12"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/main_wo_colon"
android:textColor="#color/white"
android:textSize="16sp" />
//...............................................................
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
//...................................................................
<TextView
android:id="#+id/textView13"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/side_wo_colon"
android:textColor="#color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
<TextView
android:id="#+id/textView14"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/total"
android:textColor="#color/white"
android:textSize="16sp" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F9C33" >
<TextView
android:id="#+id/textView21"
android:padding="5dp"
android:text="#string/servings"
android:textColor="#color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
..........
.......
......

To make a vertical line, just use a rectangle with width of 1dp:
<shape>
<size
android:width="1dp"
android:height="16dp" />
<solid
android:color="#c8cdd2" />
</shape>
Don't use stroke, use solid (which is the "fill" color) to specify the color of the line.

Seems like there's a bug when using rotate drawable in Android M and above as per the thread here : stackoverflow.com/a/8716798/3849039
As per my opinion, creating a custom view is the best solution for this.
Below link save my time.
https://gist.github.com/mlagerberg/4aab34e6f8bc66b1eef7/revisions

i use this drawable for horizontal and vertical line
https://gist.github.com/UtkuGlsvn/410ffb867bef3d89e85bf6bbd57950c1
Example xml:
<ImageView
android:id="#+id/imageView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
android:src="#drawable/vertical_line"
app:layout_constraintEnd_toEndOf="#+id/imageView7"
app:layout_constraintStart_toStartOf="#+id/imageView7"
app:layout_constraintTop_toBottomOf="#+id/imageView8" />

<View
android:layout_width="2dp"
android:layout_height="40dp"
android:background="#ffffff"
android:padding="10dp" />`

Categories

Resources