CODEWITHSUNDEEP
android
Shmuel
Shmuel

Reputation: 3916

Android create a triangle based on user input

I have an xml layout that has 3 input boxes and a 'generate' button. When the user puts in there values there I'd like to draw a triangle underneath it

I know how to create a new view and go to it, but I'm not sure how to draw it on the same view being that I'm working with an xml view.

Below is a screenshot of what I want to do. Thank you

https://i.sstatic.net/9oBJV.png

Upvotes: 0

Views: 590

Answers (2)

Simon
Simon

Reputation: 14472

You could create a custom view class.

class Triangle extends View {

      private int vertexA, vertexB, vertexC;

      public Triangle(Context ctx){
          this(ctx,null);
      }

      public Triangle(Context ctx, AttributeSet attrs){
          this(ctx,attrs,0);
      }


      public Triangle(Context ctx, AttributeSet attrs, int defStyle){
          super(ctx,attrs,defStyle);
      }


      public void setSides(int a, int b, int c){
          this.vertexA = a;
          this.vertexB = b;
          this.vertexC = c;
          this.invalidate();
      }

      @Override
      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

          // Try for a width based on our minimum
          int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
          int w = resolveSizeAndState(minw, widthMeasureSpec, 1);

          // Whatever the width ends up being, ask for a height that would let the triangle
         // get as big as it can
          int minh = MeasureSpec.getSize(w) - (int)mTextWidth + getPaddingBottom() + getPaddingTop();
          int h = resolveSizeAndState(MeasureSpec.getSize(w) - (int)mTextWidth, heightMeasureSpec, 0);

          setMeasuredDimension(w, h);
      }

      @Override
      protected void onDraw(Canvas canvas) {

          super.onDraw(canvas);

          Paint paint = new Paint();
          Path path = new Path();

          paint.setStyle(Paint.Style.FILL);
          paint.setColor(Color.TRANSPARENT);

          c.drawPaint(paint);

          // start the path at the "origin"
          path.MoveTo(10,10); // origin
          // add a line for side A
          path.lineTo(10,this.vertexA);
          // add a line for side B
          path.lineTo(this.vertexB,10);
          // close the path to draw the hypotenuse
          path.close();

          paint.setStrokeWidth(3);
          paint.setPathEffect(null);
          paint.setColor(Color.BLACK);
          paint.setStyle(Paint.Style.STROKE);

          c.drawPath(path, paint);

     } 

}

Note that I've hard coded the origin (the bottom left corner - the right angle) and only drawn 2 sides, since the hypotenuse is drawn by the closed path (this saves doing any extra maths). You'll want to play with onMeasure and scale your triangle as you need. Something like this:

path.lineTo(10, this.vertexA * yScale);
path.lineTo(this.vertexB * xScale ,10);

You're activity should check that the 3 values do indeed represent the sides of a right angled triangle, then call setSides(). I've added all 3 sides, although we are only using a and b. You could remove c if you prefer.

Please note that this is not copy/paste code. You will need to adapt it but it should give you a head start. Good luck.

Upvotes: 1

Henry
Henry

Reputation: 43778

Just put your custom view into the layout below the button. The exact xml to use depends on the type of your top level view container (which is probably a RelativeLayout).

To make it invisible at first you can set its visibility to INVISIBLE. When it should appear set the visibility to VISIBLE.

Upvotes: 0

Related Questions