Drawing dashed line on Android programmatically

Question

I want to draw horizontal dashed lines between programmatically generated TextViews. I tried this code :

Paint fgPaintSel = new Paint();
fgPaintSel.setARGB(255, 0, 0, 0);
fgPaintSel.setStyle(Paint.Style.STROKE);
fgPaintSel.setPathEffect(new DashPathEffect(new float[]{5, 10}, 0));

But nothing happened. I just copied and pasted this code. What should I do to draw a dashed line? Thanks.

try to call canvas.drawPath(mPath, fgPaintSel); method after this — NehaK, Dec 23 '15 at 09:53
@NKushwah I posted whole code. That's all code I have for drawing. — jason, Dec 23 '15 at 10:00
may be http://stackoverflow.com/questions/16528572/draw-dash-line-on-a-canvas can help you — NehaK, Dec 23 '15 at 10:03
@NKushwah I don't know how to use canvas, can you post an example for it? — jason, Dec 23 '15 at 10:13
if you want to add static dashed line then you can use http://stackoverflow.com/questions/6103713/how-do-i-make-a-dotted-dashed-line-in-android — NehaK, Dec 23 '15 at 10:15

score 11 · Answer 1 · 2015-12-29T14:38:23.020

Give the Activity Layout an id. I've used a button for this demonstration with an onclick handler PaintDashedLines().

In the content_main.xml layout.

<LinearLayout android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" .../>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="PaintDashedLines"
        android:text="Press Me"/>
</LinearLayout>

Used a static int to count for purposes of demo, with a separate method to create the drawable, for modularisation.

In your activity:

static int tvCount = 0;

public void PaintDashedLines(View v) {
    LinearLayout ll = (LinearLayout) findViewById(R.id.main);
    TextView tv = new TextView(MainActivity.this);
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(25);
    tv.setPadding(0, 5, 0, 5);
    ll.addView(tv);
    tv.setText("TextView " + tvCount);
    ImageView divider = new ImageView(MainActivity.this);
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
            ll.getWidth(), 2);
    lp.setMargins(0, 5, 0, 5);
    divider.setLayoutParams(lp);
    divider.setBackground(CreateDashedLined());
    ll.addView(divider);
    tvCount++;
}

public static Drawable CreateDashedLined() {
    ShapeDrawable sd = new ShapeDrawable(new RectShape());
    Paint fgPaintSel = sd.getPaint();
    fgPaintSel.setColor(Color.BLACK);
    fgPaintSel.setStyle(Paint.Style.STROKE);
    fgPaintSel.setPathEffect(new DashPathEffect(new float[]{5, 10}, 0));
    return sd;
}

-MyActivity
--int count;
--oncreate
--PaintDashedLines(View v)
--public static Drawable CreateDashedLined()

In the build.gradle (though this is not set in stone)

    minSdkVersion 18
    targetSdkVersion 23

You do not need to do anything else.

Thank you for your code. I'm using your code like this : 1. Commented out TextView lines. 2. Pasted whole Java code on top of the Activity class. 3. Call `View v = new View(this); PaintDashedLines(v);` where I want dashed lines. But Dashed lines doesn't appear. Can you tell me what I did wrong? Thanks. — jason, Dec 29 '15 at 07:49
When I don't comment TextView lines, I can see TextView and number, but I can't see dashed lines. — jason, Dec 29 '15 at 07:53

score 8 · Accepted Answer · answered Dec 30 '15 at 10:00

8

Create a dotted_line.xml file in drawable folder:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="-3px"
        android:right="-3px"
        android:top="-3px">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

            <stroke
                android:width="2px"
                android:color="@color/dark_blue"
                android:dashGap="2px"
                android:dashWidth="3px" />
        </shape>
    </item>

</layer-list>

Add this drawable as background:

view.setBackground(getResources().getDrawable(R.drawable.dotted_line));

Result:

answered Dec 30 '15 at 10:00

Mikelis Kaneps

4,576
2
34
48

Worked like charm, thanks! There is one problem. When textView is short, line is short too, I want the line to be at full length all the time. How can I achieve that? Thanks. – jason Dec 30 '15 at 10:17
1

@jason Possibilities: 1. set a fixed width of the view, 2. setMinimumWidth of the view, 3. set left and right padding of the view, 4. put it inside a layout and add the dotted line to the layout – Mikelis Kaneps Dec 30 '15 at 10:25
One last question : how can I make dots more like dashed? Thanks – jason Dec 30 '15 at 12:21
1

android:dashGap - a bigger number -> bigger space between lines, dashWidth -> a single line width. Hope that helps. – Mikelis Kaneps Dec 30 '15 at 12:27

score 1 · Answer 3 · answered Dec 29 '15 at 12:02

1

create dashed_line.xml in drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">

  <stroke
     android:color="#C7B299"
     android:dashWidth="10px"
     android:dashGap="10px"
     android:width="1dp"/>
</shape>

Programmatically add View

View v = new View(this);

and set its background

v.setBackgroundResource(R.drawable.dashed_line);

set height and width of your View according to your need.

answered Dec 29 '15 at 12:02

Ravi

34,851
21
122
183

@jason What is the problem? you dint get output or what? – Ravi Dec 30 '15 at 12:12
1

There was no output. – jason Dec 30 '15 at 12:27
I tried this one first because it was simpler, but for some reason it didn't appear. The accepted answer did. The layer-list and item position parts seem to make the difference. – arlomedia Apr 08 '23 at 01:27

Drawing dashed line on Android programmatically

3 Answers3