Draw line between two Views in Android

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.

Upvotes: 0

Answers (4)

user6615010

Reputation: 122

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"

Upvotes: 2

Abdullah Mehmood

Reputation: 93

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);

Upvotes: 0

Smit

Reputation: 2138

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" />

Upvotes: 0

jos

Reputation: 1070

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!,

Upvotes: 0

Draw line between two Views in Android

Answers (4)

Related Questions