Reply to thread

Message

<blockquote data-quote="Jay Dolar" data-source="post: 740130">I want to build the iOS-like Messages chat bubble in Android using the custom view class this is the code that I use to create the rounded corner rectangle and it will be based on the height and weight it will decide the corner radius of all sides.This rounder corner rectangle refers to <a href="https://stackoverflow.com/questions/5896234/how-to-use-android-canvas-to-draw-a-rectangle-with-only-topleft-and-topright-cor/62690918#62690918">This</a>. Then I will modify some.In this I want to add the tail at the bottom right side and bottom left side based on the use requirement so can anyone help me to complete this iOS-like Messages chat bubble::[CODE]&nbsp; &nbsp; import android.content.Context;&nbsp; &nbsp; import android.graphics.Canvas;&nbsp; &nbsp; import android.graphics.Color;&nbsp; &nbsp; import android.graphics.Paint;&nbsp; &nbsp; import android.graphics.Path;&nbsp; &nbsp; import android.graphics.RectF;&nbsp; &nbsp; import android.util.AttributeSet;&nbsp; &nbsp; import android.view.View;&nbsp; &nbsp; &nbsp; &nbsp; import androidx.annotation.NonNull;&nbsp; &nbsp; import androidx.annotation.Nullable;&nbsp; &nbsp; &nbsp; &nbsp; import org.jetbrains.annotations.Contract;&nbsp; &nbsp; &nbsp; &nbsp; public class Bubble extends View {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; private Paint paint;&nbsp; &nbsp; &nbsp; &nbsp; private Path path;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public Bubble(Context context) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(context);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public Bubble(Context context, @Nullable AttributeSet attrs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(context, attrs);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(context, attrs, defStyleAttr);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(context, attrs, defStyleAttr, defStyleRes);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; private void init() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paint = new Paint();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paint.setColor(Color.DKGRAY);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paint.setStyle(Paint.Style.FILL);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paint.setAntiAlias(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RectF rect = new RectF(50f, 50f, 200f, 100f);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path = getPathOfRoundedRectF(rect, 50f);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @Override&nbsp; &nbsp; &nbsp; &nbsp; protected void onDraw(@NonNull Canvas canvas) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super.onDraw(canvas);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.drawPath(path, paint);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @NonNull&nbsp; &nbsp; &nbsp; &nbsp; public static Path getPathOfRoundedRectF(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @NonNull RectF rect,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float radius&nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float width = rect.right - rect.left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float height = rect.bottom - rect.top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float maxRadius = Math.min(width / 2, height / 2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float finalRadius = Math.min(radius, maxRadius);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Path path = new Path();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.moveTo(rect.left + finalRadius, rect.top);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Top border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.lineTo(rect.right - finalRadius, rect.top);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Top-right corner&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.arcTo(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new RectF(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.right - finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.top,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.right,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.top + finalRadius * 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ), -90f, 90f&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Right border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.lineTo(rect.right, rect.bottom - finalRadius);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Bottom-right corner&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.arcTo(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new RectF(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.right - finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.bottom - finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.right,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.bottom&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ), 0f, 90f&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Bottom border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.lineTo(rect.left + finalRadius, rect.bottom);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Bottom-left corner&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.arcTo(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new RectF(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.left,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.bottom - finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.left + finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.bottom&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ), 90f, 90f&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Left border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.lineTo(rect.left, rect.top + finalRadius);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Top-left corner&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.arcTo(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new RectF(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.left,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.top,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.left + finalRadius * 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rect.top + finalRadius * 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ), 180f, 90f&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path.close();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return path;&nbsp; &nbsp; &nbsp; &nbsp; }}[/CODE]<a href="https://solveforum.com/index.php?login/login">Login To add answer/comment</a></blockquote>

[QUOTE="Jay Dolar, post: 740130"] I want to build the iOS-like Messages chat bubble in Android using the custom view class this is the code that I use to create the rounded corner rectangle and it will be based on the height and weight it will decide the corner radius of all sides. This rounder corner rectangle refers to [URL='https://stackoverflow.com/questions/5896234/how-to-use-android-canvas-to-draw-a-rectangle-with-only-topleft-and-topright-cor/62690918#62690918']This[/URL]. Then I will modify some. In this I want to add the tail at the bottom right side and bottom left side based on the use requirement so can anyone help me to complete this iOS-like Messages chat bubble:: [CODE] import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import org.jetbrains.annotations.Contract; public class Bubble extends View { private Paint paint; private Path path; public Bubble(Context context) { super(context); init(); } public Bubble(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private void init() { paint = new Paint(); paint.setColor(Color.DKGRAY); paint.setStyle(Paint.Style.FILL); paint.setAntiAlias(true); RectF rect = new RectF(50f, 50f, 200f, 100f); path = getPathOfRoundedRectF(rect, 50f); } @Override protected void onDraw(@NonNull Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, paint); } @NonNull public static Path getPathOfRoundedRectF( @NonNull RectF rect, float radius ) { float width = rect.right - rect.left; float height = rect.bottom - rect.top; float maxRadius = Math.min(width / 2, height / 2); float finalRadius = Math.min(radius, maxRadius); Path path = new Path(); path.moveTo(rect.left + finalRadius, rect.top); // Top border path.lineTo(rect.right - finalRadius, rect.top); // Top-right corner path.arcTo( new RectF( rect.right - finalRadius * 2, rect.top, rect.right, rect.top + finalRadius * 2 ), -90f, 90f ); // Right border path.lineTo(rect.right, rect.bottom - finalRadius); // Bottom-right corner path.arcTo( new RectF( rect.right - finalRadius * 2, rect.bottom - finalRadius * 2, rect.right, rect.bottom ), 0f, 90f ); // Bottom border path.lineTo(rect.left + finalRadius, rect.bottom); // Bottom-left corner path.arcTo( new RectF( rect.left, rect.bottom - finalRadius * 2, rect.left + finalRadius * 2, rect.bottom ), 90f, 90f ); // Left border path.lineTo(rect.left, rect.top + finalRadius); // Top-left corner path.arcTo( new RectF( rect.left, rect.top, rect.left + finalRadius * 2, rect.top + finalRadius * 2 ), 180f, 90f ); path.close(); return path; } } [/CODE] [url="https://solveforum.com/index.php?login/login"]Login To add answer/comment[/url] [/QUOTE]

Name

Verification