Scrolling the custom views - Android

Question

Below is the image of the menu I need to make.

enter image description here

I have drawn the triangles using canvas in custom views. I also need to scroll this menu, when custom views are added in the scroll view it takes each View as a rectangular item not allowing the triangles to be drawn like this.

Is there anyway to achieve this?

Thanks in advance.

GIGAMOLE · Accepted Answer

At first you must create 2 custom views, with different draws of triangles. Then in your RelativeLayout or another create those triangles and set the, negative margin_top value for correct presentation, like in my example:

enter image description here

So, now lets look at code.

Dont critic my code. It`s just example for you without true OOP structure :)

CustomShapeLeft.class:

/**
 * Created by gigamole on 07.02.15.
 */
public class CustomShapeLeft extends RelativeLayout {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

int backgroundColor;
int viewWidth; // width of parent(CustomShape layout)
int viewHeight;

public CustomShapeLeft(Context context) {
    super(context);
    this.setWillNotDraw(false);
}

public CustomShapeLeft(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.setWillNotDraw(false);

    TypedArray ta = context.obtainStyledAttributes(attrs, new int[]{android.R.attr.background});
    this.backgroundColor = ((ColorDrawable) ta.getDrawable(0)).getColor();

    this.setBackgroundColor(Color.TRANSPARENT);
}

public CustomShapeLeft(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.setWillNotDraw(false);
}

@Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
    super.onSizeChanged(xNew, yNew, xOld, yOld);

    viewWidth = xNew;
    viewHeight = yNew;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

Path path = new Path();
Point[] points = new Point[3];

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

    paint.setColor(backgroundColor);
    paint.setStyle(Paint.Style.FILL);

    points[0] = new Point(0, 0);
    points[1] = new Point(viewWidth, (viewHeight / 2));
    points[2] = new Point(0, (viewHeight));

    path.setFillType(Path.FillType.EVEN_ODD);
    path.moveTo(points[0].x, points[0].y);
    path.lineTo(points[1].x, points[1].y);
    path.lineTo(points[2].x, points[2].y);
    path.close();

    canvas.drawPath(path, paint);
}

public boolean isTouched(final float X, final float Y){
    final Polygon p = new Polygon(points);
    return p.contains(X, Y);
}

}

Method isTouched() need for know when the user tap on shape, but not on View, cause when on last, its problematic to take correct action, cause they lay down like layer-layer-layer system.

This method get the position of tap and calculate is on shape or not. In your way you will dont have onClickListener, just onTouchListener.

CustomShapeRight.class:

They are almost similar, but different draw methods:

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

        paint.setColor(backgroundColor);
        paint.setStyle(Paint.Style.FILL);

        points[0] = new Point(viewWidth, 0);
        points[1] = new Point(0, (viewHeight / 2));
        points[2] = new Point(viewWidth, (viewHeight));

        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(points[0].x, points[0].y);
        path.lineTo(points[1].x, points[1].y);
        path.lineTo(points[2].x, points[2].y);
        path.close();

        canvas.drawPath(path, paint);
    }

Layout.xml:

And in activity set them onTouchListener():

CustomShapeRight customShapeRight = (CustomShapeRight) findViewById(R.id.triangle_6);
        customShapeRight.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (((CustomShapeRight)v).isTouched(event.getX(), event.getY())) {
                    Toast.makeText(getApplicationContext(), ((TextView)((CustomShapeRight) v).getChildAt(0)).getText(), Toast.LENGTH_SHORT).show();
                }

                return false;
            }
        });

And all. I`d hope this will help you and with delete items "X" item in your layout you will deal with it alone. And thanks for cool question. Like it.

Scrolling the custom views - Android

Answers (1)

CustomShapeLeft.class:

CustomShapeRight.class:

Layout.xml:

Related Questions