How do I avoid double borders between lists? - android

I am using a list view in which I have an xml referencing drawable/list as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
//For the borders
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
//For the background color of cells
<item android:top="1px"
android:left="0dp"
android:right="0dp"
android:bottom="1px">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
The above code is basically used to define the borders and the background color of cells. However, I want to be able to use line for the borders instead of rectangle so that the bottom border of one rectangle doesnt leave a 1 dp gap between the top border of another rectangle below it.
Please refer the image below:
As you can see from the image, the rectangular bottom border below BOK.L is a little off showing a gap between the top rectangular border of GOOG.OQ Is there a way to fix this such that both the borders either overlap on top of each other and no such double line gap appears or is there a way I can define a line shape such that it is defined above and below all the cells in the pic without a gap?
Any clue?
Thanks!
Justin
The xml file referencing the same (drawable/list) is as follows :
<?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="match_parent"
android:orientation="vertical"
android:background="#drawable/list"
android:padding="4dp"
>
<TextView
android:id="#+id/symbol"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="2dp"
android:paddingLeft="8dp"
android:textColor="#color/search_autosuggest_header_text"
foo:customFont="Roboto-Bold.ttf"
android:singleLine="true"
android:layout_toLeftOf="#+id/last_container"
android:ellipsize="end"
android:gravity="left"
android:textSize="14sp"/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
foo:customFont="Roboto-Regular.ttf"
android:layout_alignParentLeft="true"
android:layout_below="#id/symbol"
android:layout_toLeftOf="#+id/last_container"
android:paddingBottom="4dp"
android:textColor="#color/search_autosuggest_item_subtitle"
android:singleLine="true"
android:ellipsize="end"
android:textSize="11sp" />
<FrameLayout
android:id="#+id/last_container"
android:layout_width="87dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_toLeftOf="#+id/net_change_container" >
<TextView
android:id="#+id/last_back"
style="#style/TextView.ListsTextView"
android:layout_width="87dp"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/last"
style="#style/TextView.ListsTextView"
android:layout_width="87dp"
android:textSize="12sp"
android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout
android:id="#+id/net_change_container"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_toLeftOf="#+id/percent_change_container" >
<TextView
android:id="#+id/net_change_back"
style="#style/TextView.ListsTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/net_change"
style="#style/TextView.ListsTextView"
android:layout_width="80dp"
android:textSize="12sp"
android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout
android:id="#+id/percent_change_container"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="1dp" >
<TextView
android:id="#+id/percent_change_back"
style="#style/TextView.ListsTextView"
android:layout_width="65dp"
android:textSize="14sp"
foo:customFont="Roboto-Regular.ttf"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/percent_change"
style="#style/TextView.ListsTextView"
android:layout_width="65dp"
android:textSize="12sp"
android:layout_height="wrap_content"/>
</FrameLayout>
</RelativeLayout>
Also,#jboi with with your fix the screen that I get is:


In order to not have double selectors(and in proper positions like also at the top, at the bottom) you have two cases that you need to tackle, the top element(which needs the selector at the top and bottom) plus every other row which needs the selector only at the bottom(the top will be covered by the selector of the previous element). This has to be done in code, in your adapter(if you were using a simple table you could have just made one drawable for the top element and one for the other elements):
remove the properties like android:top, android:bottom etc from the layer-list(as you'll be setting those in code)
in the getView() method of the adapter retrieve the background of the row view(which will be a LayerDrawable)
based on the position you have(mainly 0 vs any oher position) use the LayerDrawable.setLayerInset() method and set the inset for the layer with index 1(if that is your complete drawable): top and bottom for the first element, top(with a value of 0) and bottom for every other position


You could play with ListView params android:divider and android:dividerHeight, to set a line separator of the color and height you want.


The reason for having two lines is, that the background (second layer) lets shine thru the white part on both ends, at the bottom and the top. Therefore every list entry gets a white line on top and on bottom. As list items have a small distance between each other you see two lines.
Two things you need to do
For each item, let only one (top or bottom) shine thru. Therefore you get only one line per item. The drawable XML for an item:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="1dp"
android:left="0dp"
android:right="0dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
For the whole list, you need the drawable that shows the one missing line. The drawable XML for this looks nearly the same. Just bottom and top is exchanged:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="0dp"
android:left="0dp"
android:right="0dp"
android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>

Related

Make a custom view that has multiple view as childs with a rounded corner border

I am trying to design a custom layout like below:
So far I have done as following image but that's not exactly like the intended one:
Here is the code that I have tried.
***et_rounded_corner*******
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="10dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/white"/>
</shape>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/et_rounded_corner"
android:padding="5dp">
<TextView
android:id="#+id/et_search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/imageView"
android:maxLines="1"
android:padding="5dp"
android:text="#string/loading"
android:textAppearance="#style/Small"
android:visibility="visible" />
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#color/red"
android:padding="5dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_search" />
</RelativeLayout>

For the record, I have fixed it by using the following background with imageview.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="20dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/red"/>
</shape>

Increase your corner radius to a big number, like 100dp.
<corners android:radius="100dp" />
Android will then create a circle at each end for you.
Apply the same trick to a red background of your `ImageView~ and make the actual image have a transparent background. That will give you the correct rounded corners on the right of the red. But the left will now be rounded.
To make the left border of the red button vertical, either overlay a white block, or better, add a negative left padding to this new red background drawable. Then the left rounded part will try to draw outside the view, so it will not show.
As stated by other answer, you also need to remove the padding from the enclosing view, because this is adding the vertical space, and the right padding on the red image.
For the same reason, remove the padding on your image.

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

EditText does not get rounded

I am trying to get a rounded EditText.
My EditText in layout is like
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<EditText
android:id="#+id/EditTextSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_round"
android:padding="5dip"
android:singleLine="true" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/searchBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
and the drawable I am using as EditText background is like
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" />
</shape>
In my XML graphical layout, my edittext looks fine and rounded, but in emulator and also in device it does not look like that?
Does anyone have any idea why could that be?
Thanks

Remove the android:padding="10dp" attribute to make the drawable look like this. I just tested it and removing the padding attribute shows the rounded corners just fine.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" />
</shape>
To add padding to the Shape Drawable, notice the padding attribute added in the code above.
The proof lies in the pudding: ;-)
Device Screenshot:
Emulator Screenshot:

You didn't provide the stroke element, so you probably just don't see the background (since it's only a white fill!). When you change the background or add a stroke, it should be visible.
Add:
<stroke android:width="2dp" android:color="#000000" />
And poof! The rectangle is visible :) BTW The padding isn't the issue - it's simply ignored.

how to add bottom border in relativelayout

<LinearLayout
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical" android:background="#drawable/settings_border" android:padding="1dp"
android:layout_marginLeft="15dip" android:layout_marginRight="15dip" android:layout_marginTop="5dip">
<RelativeLayout android:id="#+id/map_refresh"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:background="#drawable/settings_selector_up"
android:padding="15dp">
<TextView android:id="#+id/Text1"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="Map refresh period">
</TextView>
<TextView android:id="#+id/TextView09"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="1 min"
android:layout_alignParentRight="true"
android:paddingRight="5dp">
</TextView>
</RelativeLayout>
<RelativeLayout android:id="#+id/own_location"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:padding="15dp"
android:background="#drawable/settings_selector_mid">
<TextView android:id="#+id/Text1"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="Own location update period">
</TextView>
<TextView android:id="#+id/TextView09"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="1 min"
android:layout_alignParentRight="true"
android:paddingRight="5dp">
</TextView>
</RelativeLayout>
I want set only bottom border in relativelayout. I want to dispaly listview style but not using listview. Lets say each listitem is relativlayout. I want set only bottom border so its look like a listview's divider.

I hope I understood what you said.
in the res folder create a new folder (if you don't already have it) named drawable
there create an xml named "borders.xml"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="90" android:centerColor="#6da23f" android:endColor="#8bc45d" android:startColor="#2f481c" />
<stroke android:width="2dp" android:color="#999999" />
<padding android:bottom="4dp" android:left="3dp" android:right="3dp" android:top="6dp" />
<corners android:radius="10px"/>
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="90" android:centerColor="#6da23f" android:endColor="#8bc45d" android:startColor="#4c8a39" />
<stroke android:width="1dp" android:color="#FFFFFF" />
<padding android:bottom="4dp" android:left="3dp" android:right="3dp" android:top="6dp" />
<corners android:radius="10px"/>
</shape>
</item>
</selector>
You can further edit it as you like.
Then select the layout from the Outline and click Background properties, and select the borders xml that you created.
This will create borders for all 4. Alternatively, you can add a simple
<View android:layout_width="1dip"
android:layout_height="fill_parent"
android:background="#FFFFFF" />
line and add it to the bottom of your layout and change the color/size to your liking.

For some reason the other solutions didn't work for me - all borders were shown no matter how I changed it. This worked:
<?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="#color/gray" />
<solid android:color="#color/gray" />
</shape>
</item>
<item android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/white" />
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
The color of the border is gray and the background is white for the container (LinearLayout in my example). You can simply change the second item to make the border thicker or have border on the top/left/right.
This is how the layout xml looks like:
<LinearLayout
android:id="#+id/searchWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#drawable/bottom_gray_border"
android:layout_alignParentTop="true">
<EditText
android:id="#+id/searchEditText"
style="#style/EditTextSearch"
android:hint="#string/find"
android:layout_marginLeft="5dp"/>
</LinearLayout>
I got the idea from here: Is there an easy way to add a border to the top and bottom of an Android View?

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#FF8000" />
<solid
android:color="#00FFFFFF"
android:paddingLeft="10dip"
android:paddingTop="10dip"/>
<corners android:radius="10px"/>
<padding
android:left="10dip"
android:top="10dip"
android:right="10dip"
android:bottom="10dip" />
</shape>
You can save this as borderframe.xml in the res/drawable folder (create it if it doesnt exist yet), and reference it like so: android:background="#drawable/borderframe".

A simple way to display a border is to create a horizontal LinearLayout, and to set its background color and height according to the border you want.

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