Question

I’m currently working on map overlay which highlights the route along specified points and I need to implement certain line style (something like on screenshot)

What I’m trying to do – is to highlight the route with something like transparent line with black stroke lines from both sides

Playing with different fill styles and Paint settings haven’t led me to any solution so far.

Does anybody know what direction I need to look for?

Currently I managed to draw only solid line, but this is not what I’m looking for:

Paint setup:

mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(COLOR_DEFAULT);
mPaint.setPathEffect(new CornerPathEffect(10));
mPaint.setStrokeWidth(6);
mPaint.setAntiAlias(true);

Drawing routine

canvas.drawPath(mPath, mPaint);

Answer 1

I get pretty good results with PathDashPathEffect using a “dash stamp” that’s two very thin rectangles and the MORPH style option. See last and 3rd last line here:

This was drawn by modifying the PathEffects example in ApiDemos taken from the SDK:

package com.example.android.apis.graphics;

import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;

public class PathEffects extends GraphicsActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SampleView(this));
    }

    private static class SampleView extends View {
        private Paint mPaint;
        private Path mPath;
        private PathEffect[] mEffects;
        private int[] mColors;
        private float mPhase = 3;

        private static void makeEffects(PathEffect[] e, float phase) {
            e[0] = null;     // no effect
            e[1] = new CornerPathEffect(10);
            e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);
            e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
                                          PathDashPathEffect.Style.MORPH);
            e[4] = new ComposePathEffect(e[2], e[1]);
            e[5] = new ComposePathEffect(e[3], e[1]);
        }

        public SampleView(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);

            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(6);

            mPath = makeFollowPath();

            mEffects = new PathEffect[6];

            mColors = new int[] { Color.BLACK, Color.RED, Color.BLUE,
                                  Color.GREEN, Color.MAGENTA, Color.BLACK
                                };
        }

        @Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            RectF bounds = new RectF();
            mPath.computeBounds(bounds, false);
            canvas.translate(10 - bounds.left, 10 - bounds.top);

            makeEffects(mEffects, mPhase);
            invalidate();

            for (int i = 0; i < mEffects.length; i++) {
                mPaint.setPathEffect(mEffects[i]);
                mPaint.setColor(mColors[i]);
                canvas.drawPath(mPath, mPaint);
                canvas.translate(0, 28);
            }
        }

        @Override public boolean onKeyDown(int keyCode, KeyEvent event) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_DPAD_CENTER:
                    mPath = makeFollowPath();
                    return true;
            }
            return super.onKeyDown(keyCode, event);
        }

        private static Path makeFollowPath() {
            Path p = new Path();
            p.moveTo(0, 0);
            for (int i = 1; i <= 15; i++) {
                p.lineTo(i*20, (float)Math.random() * 35);
            }
            return p;
        }

        private static Path makePathDash() {
            Path p = new Path();
            p.moveTo(-6, 4);
            p.lineTo(6,4);
            p.lineTo(6,3);
            p.lineTo(-6, 3);
            p.close();
            p.moveTo(-6, -4);
            p.lineTo(6,-4);
            p.lineTo(6,-3);
            p.lineTo(-6, -3);
            return p;
        }
    }
}