Draw line between two Views in Android

Question

I am trying to draw line between two Views in RelativeLayout but unable to do this.

    public class CustomRelativeLayout extends RelativeLayout {

    private Context mContext;
    private ImageButtonCustom[] imageButtonCustoms = new ImageButtonCustom[3];
    private Paint paint;
    CustomRelativeLayout customRelativeLayout;

    //private LineView lineView;
    public CustomRelativeLayout(Context context) {
        super(context);
        this.mContext = context;
        init();
    }

    public CustomRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init();
    }

    public CustomRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        init();
    }

    private void init() {
        //setBackgroundColor(Color.BLACK);
        customRelativeLayout = this;
        setWillNotDraw(false);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth((float) 25);

        for(int x = 0 ; x < 3 ; x++){
            imageButtonCustoms[x] = new ImageButtonCustom(mContext,customRelativeLayout);
            imageButtonCustoms[x].setOnMoveListener(new ImageButtonCustom.OnMoveListener() {
                @Override
                public void onMove(Position positionXY) {

                }
            });
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        if(imageButtonCustoms[0] != null && imageButtonCustoms[1] != null)
            canvas.drawLine(imageButtonCustoms[0].getCenterX(),imageButtonCustoms[0].getCenterY()
        ,imageButtonCustoms[1].getCenterX(),imageButtonCustoms[1].getCenterY(),paint);

        if(imageButtonCustoms[1] != null && imageButtonCustoms[2] != null)
            canvas.drawLine(imageButtonCustoms[1].getCenterX(),imageButtonCustoms[1].getCenterY()
                    ,imageButtonCustoms[2].getCenterX(),imageButtonCustoms[2].getCenterY(),paint);

        if(imageButtonCustoms[0] != null && imageButtonCustoms[2] != null)
            canvas.drawLine(imageButtonCustoms[0].getCenterX(),imageButtonCustoms[0].getCenterY()
                    ,imageButtonCustoms[2].getCenterX(),imageButtonCustoms[2].getCenterY(),paint);


    }
}

Where ImageButtonCustom

   public class ImageButtonCustom extends ImageButton implements View.OnTouchListener{

    float dX, dY;

    private RelativeLayout rootView;
    private ImageButtonCustom imageButtonCustom;
    private OnMoveListener onMoveListener;

    public ImageButtonCustom(Context context,RelativeLayout rootView){
        super(context);
        this.rootView = rootView;
        init();

    }
    public ImageButtonCustom(Context context) {
        super(context);
        init();
    }

    public ImageButtonCustom(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ImageButtonCustom(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        imageButtonCustom = this;
        setImageResource(R.drawable.bobo2);
        setBackgroundColor(Color.TRANSPARENT);
        setOnTouchListener(this);

        /*RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        rl.addRule(RelativeLayout.ALIGN_BOTTOM);*/

        rootView.addView(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                dX = v.getX() - event.getRawX();
                dY = v.getY() - event.getRawY();
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                break;
            case MotionEvent.ACTION_POINTER_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                v.animate()
                        .x(event.getRawX() + dX)
                        .y(event.getRawY() + dY)
                        .setDuration(0)
                        .start();
                //no use of ViewPositionUtil
                onMoveListener.onMove(ViewPositionUtil.getXYPositionRelativeToRoot(imageButtonCustom));//positionXY);
                break;
        }
        rootView.invalidate();
        return true;
    }

    public void setOnMoveListener(OnMoveListener onMoveListener){
        this.onMoveListener = onMoveListener;
    }

    public float getCenterX(){
        return getX() + getWidth()  / 2;

    }
    public float getCenterY(){
        return getY() + getHeight() / 2;

    }

    public interface OnMoveListener{
        void onMove(Position positionXY);
    }
}

Edit

I want to draw line between two views from their center which can be changed and reDraw when the view changes their position.

you could have used one more view in between the 2.. having background as line color, width 1 dp (line's thickness). — Pr38y, Aug 16 '16 at 10:59
have you already debugged your onDraw()? Do getX() and getY() really contain the coordinates of the view? — Chris623, Aug 16 '16 at 11:15
https://play.google.com/store/apps/details?id=zerocode.eightballfree — Zar E Ahmer, Feb 28 '20 at 11:37
@JawadZeb: I am unable to make up ViewPositionUtil.java. Any help? — user1090751, Feb 28 '20 at 11:59
Ask a question on stack but make sure to show your effort first otherwise no one will help you — Zar E Ahmer, Feb 28 '20 at 12:21
Thanks for the reply. I want to know what Position is. Is it android core library or custom made class. Or is it related to import android.icu.text.Transliterator;? — user1090751, Feb 28 '20 at 13:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208720/discussion-between-user1090751-and-jawad-zeb). — user1090751, Feb 28 '20 at 16:22

score 2 · Answer 1 · edited Dec 06 '20 at 10:29

2

If you want horizontal separation then

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"/>

If you want vertical separation then

<View
      android:id="@+id/view"
      android:layout_width="1dp"
      android:layout_height="match_parent"
      android:background="@android:color/darker_gray"/>

If you want separation in list view then you need to add to <ListView /> tag

android:divider="5dp"

edited Dec 06 '20 at 10:29

bipll

11,747
1
18
32

answered Aug 16 '16 at 11:15

user6615010

122
1
12

getListView().setDivider(null); getListView().setDividerHeight(5); – user6615010 Aug 16 '16 at 11:41
I am generating view dynamically without xml. – Zar E Ahmer Aug 16 '16 at 11:42
so you can use above i comment. getListView().setDiv‌iderHeight(5); or you can use yourListView.setDivider(new ColorDrawable(android.R.color.transparent)); yourListView.setDividerHeight(5); – user6615010 Aug 16 '16 at 11:43
I don't want to draw a line seperater between two Views. I want to draw line between two circle's center which are able to move over the screen .And as they move from one positon to another the line also move with them – Zar E Ahmer Aug 16 '16 at 11:45
Paint fgPaintSel = new Paint(); fgPaintSel.setARGB(255, 0, 0,0); fgPaintSel.setStyle(Style.STROKE); fgPaintSel.setPathEffect(new DashPathEffect(new float[] {10,20}, 0)); – user6615010 Aug 16 '16 at 11:52
[link]http://stackoverflow.com/questions/6103713/how-do-i-make-a-dotted-dashed-line-in-android – user6615010 Aug 16 '16 at 11:53

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Saw in this response, adding a new View between the RelativeLayout with height 1dp should enough:

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"/>

Hope it helps!,

edited May 23 '17 at 12:32

Community

1
1

answered Aug 16 '16 at 11:03

jos

1,070
12
22

score 0 · Answer 3 · answered Aug 16 '16 at 11:07

You could use this!

 <TextView
            android:id="@+id/textView1"
            style="@style/behindMenuItemLabel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:text="FaceBook Feeds" />

         <View
             android:layout_width="fill_parent"
             android:layout_height="2dp"
             android:background="#d13033"/><!-- this is line -->

         <ListView
            android:id="@+id/list1"
            android:layout_width="350dp"
            android:layout_height="50dp" />

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

I think the real problem here is that your onDraw() method is not calling. Add this in your constructor. For reference see this: Own defined Layout , onDraw() method not getting called

this.setWillNotDraw(false);

edited May 23 '17 at 11:51

Community

1
1

answered Aug 16 '16 at 12:25

Abdullah Mehmood

93
9

Draw line between two Views in Android

4 Answers4