Android, how to create software triangle and rectangle?

Question

How can we create a ball shape as shown below. where we can change the color of it dynamically.

Answer 1

Here is the XML for triangle and rectangle . save it inside an accessible folder.

triangle.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item > <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="-40%" android:pivotY="87%" > <shape android:shape="rectangle" > <stroke android:color="@android:color/transparent" android:width="10dp"/> <solid android:color="#000000" /> </shape> </rotate> </item> </layer-list> 

rectangle.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <solid android:color="#B2E3FA" /> </shape> </item> </layer-list> 

and layout for the desired shape.

 <RelativeLayout android:id="@+id/rlv1" android:layout_width="150dp" android:layout_height="50dp" android:background="@drawable/rectangle" /> <RelativeLayout android:id="@+id/rlv2" android:layout_width="50dp" android:layout_height="50dp" android:layout_below="@+id/rlv1" android:background="@drawable/triangle" android:rotation="180" /> 

set the margin as required.

Source

Answer 2

If you need a frame for the layout

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linear_root" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/text_message" android:layout_width="100dp" android:layout_height="wrap_content" android:background="@drawable/bg_rectangle" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="20dp" android:padding="8dp" android:text="Abc" /> <ImageView android:id="@+id/image_arrow" android:layout_marginTop="-1.5dp" android:layout_width="16dp" android:layout_height="16dp" android:layout_gravity="center_horizontal" android:background="@drawable/icon_arrow_down" /> </LinearLayout> 

bg_rectangle

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#eaeaea" /> <stroke android:width="1dp" android:color="#f00" /> <corners android:radius="8dp" /> </shape> 

icon_arrow_down , or you can create a triangle by vector, for example here

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="45" android:pivotX="135%" android:pivotY="15%" android:toDegrees="45" > <shape android:shape="rectangle"> <solid android:color="#eaeaea"/> <stroke android:width="1dp" android:color="#f00" /> </shape> </rotate> </item> </layer-list> 

Answer 3

A clean and correct way to do this while keeping it dynamic is to extend the view class.

Then in onDraw you would do something like this:

 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawBackground(canvas); } private void drawBackground(Canvas canvas) { int width = (int) mWidth; int height = (int) mHeight; Point a = new Point(0, 0); Point b = new Point(width, 0); Point c = new Point(width, height - mPointHeight);//mPointedHeight is the length of the triangle... in this case we have it dynamic and can be changed. Point d = new Point((width/2)+(mPointedHeight/2), height - mPointHeight); Point e = new Point((width/2), height);// this is the sharp point of the triangle Point f = new Point((width/2)-(mPointedHeight/2), height - mPointHeight); Point g = new Point(0, height - mPointHeight); Path path = new Path(); path.moveTo(ax, ay); path.lineTo(bx, by); path.lineTo(cx, cy); path.lineTo(dx, dy); path.lineTo(ex, ey); path.lineTo(fx, fy); path.lineTo(gx, gy); canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill. } 

There you go, there is no unnecessary layer or code that is not dynamic or clean. You can also add text to the field.

Answer 4

Use a triangular image and a rectangular image and mathematically align them in the above format. Use color filtering to dynamically change color.

You can even draw them on a user view using vector graphics using custom colors, and this will be another way to solve this problem.

Answer 5

Use Canvas in the onDraw method inside the custom View class.

Another way is to use the Path class.

Answer 6

First you can create one xml inside drawable folder

That xml will be responsible for the color of the border of the shape of the rectangle

You can create this border shape below the code

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#B2E3FA" /> </shape> </item> <item android:left="5dp" android:bottom="5dp" android:top="5dp" > <shape android:shape="rectangle"> <solid android:color="#D8D8D8" /> </shape> </item> </layer-list> 

Well, this will create the necessary border for the rectangular shape, you need to assign a background to this rectangle shape so that it is done as

 android:background="@drawable/bg" 

where bg is the name of the xml file that was saved in the transfer folder

After that, you need to place this triangle exactly under the rectangle.

I hope you understand my logic

Answer 7

Creating a custom view and drawing a kiss with a canvas

 package com.example.dickbutt; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.View; public class TriangleShapeView extends View { public int colorCode = Color.MAGENTA; public int getColorCode() { return colorCode; } public void setColorCode(int colorCode) { this.colorCode = colorCode; } public TriangleShapeView(Context context) { super(context); } public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TriangleShapeView(Context context, AttributeSet attrs) { super(context, attrs); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth() / 2; int h = getHeight() / 2; Path path = new Path(); path.moveTo(0, 0); path.lineTo(w, 2 * h); path.lineTo(2 * w, 0); path.lineTo(0, 0); path.close(); Paint p = new Paint(); p.setColor(colorCode); p.setAntiAlias(true); canvas.drawPath(path, p); } } 

Result

Using

 <TextView android:id="@+id/progress_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:background="@android:color/holo_purple" android:gravity="center_horizontal" android:text="200,0000000" android:textColor="#fff" /> <com.example.dickbutt.TriangleShapeView android:id="@+id/textView1" android:layout_width="10dp" android:layout_height="20dp" android:layout_below="@+id/progress_value" android:layout_centerHorizontal="true" android:background="@drawable/rectangle" android:gravity="center_horizontal" android:textSize="10sp" /> 

<strong> Benefits

• Change the shape according to the width and height of the view.
• Perhaps a high setting.
• Look cleaner