Home
Forums
New posts
Search forums
What's new
New posts
Latest activity
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
All Topics
Technology
Build the ios Messages Chat Bubble(with bottom right and left tail ) in Android
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Jay Dolar" data-source="post: 740130"><p>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.</p><p></p><p>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.</p><p></p><p>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::</p><p></p><p>[CODE] import android.content.Context;</p><p> import android.graphics.Canvas;</p><p> import android.graphics.Color;</p><p> import android.graphics.Paint;</p><p> import android.graphics.Path;</p><p> import android.graphics.RectF;</p><p> import android.util.AttributeSet;</p><p> import android.view.View;</p><p> </p><p> import androidx.annotation.NonNull;</p><p> import androidx.annotation.Nullable;</p><p> </p><p> import org.jetbrains.annotations.Contract;</p><p> </p><p> public class Bubble extends View {</p><p> </p><p> private Paint paint;</p><p> private Path path;</p><p> </p><p> public Bubble(Context context) {</p><p> super(context);</p><p> init();</p><p> }</p><p> </p><p> public Bubble(Context context, @Nullable AttributeSet attrs) {</p><p> super(context, attrs);</p><p> init();</p><p> }</p><p> </p><p> public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {</p><p> super(context, attrs, defStyleAttr);</p><p> init();</p><p> }</p><p> </p><p> public Bubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {</p><p> super(context, attrs, defStyleAttr, defStyleRes);</p><p> init();</p><p> }</p><p> </p><p> private void init() {</p><p></p><p> paint = new Paint();</p><p> paint.setColor(Color.DKGRAY);</p><p> paint.setStyle(Paint.Style.FILL);</p><p> paint.setAntiAlias(true);</p><p> </p><p> RectF rect = new RectF(50f, 50f, 200f, 100f);</p><p> path = getPathOfRoundedRectF(rect, 50f);</p><p> }</p><p> </p><p> @Override</p><p> protected void onDraw(@NonNull Canvas canvas) {</p><p> super.onDraw(canvas);</p><p> canvas.drawPath(path, paint);</p><p> }</p><p> </p><p> @NonNull</p><p> public static Path getPathOfRoundedRectF(</p><p> @NonNull RectF rect,</p><p> float radius</p><p> ) {</p><p> float width = rect.right - rect.left;</p><p> float height = rect.bottom - rect.top;</p><p> float maxRadius = Math.min(width / 2, height / 2);</p><p> </p><p> float finalRadius = Math.min(radius, maxRadius);</p><p> </p><p> Path path = new Path();</p><p> path.moveTo(rect.left + finalRadius, rect.top);</p><p> </p><p> // Top border</p><p> path.lineTo(rect.right - finalRadius, rect.top);</p><p> </p><p> // Top-right corner</p><p> path.arcTo(</p><p> new RectF(</p><p> rect.right - finalRadius * 2,</p><p> rect.top,</p><p> rect.right,</p><p> rect.top + finalRadius * 2</p><p> ), -90f, 90f</p><p> );</p><p> </p><p> // Right border</p><p> path.lineTo(rect.right, rect.bottom - finalRadius);</p><p> </p><p> // Bottom-right corner</p><p> path.arcTo(</p><p> new RectF(</p><p> rect.right - finalRadius * 2,</p><p> rect.bottom - finalRadius * 2,</p><p> rect.right,</p><p> rect.bottom</p><p> ), 0f, 90f</p><p> );</p><p> </p><p> // Bottom border</p><p> path.lineTo(rect.left + finalRadius, rect.bottom);</p><p> </p><p> // Bottom-left corner</p><p> path.arcTo(</p><p> new RectF(</p><p> rect.left,</p><p> rect.bottom - finalRadius * 2,</p><p> rect.left + finalRadius * 2,</p><p> rect.bottom</p><p> ), 90f, 90f</p><p> );</p><p> </p><p> // Left border</p><p> path.lineTo(rect.left, rect.top + finalRadius);</p><p> </p><p> // Top-left corner</p><p> path.arcTo(</p><p> new RectF(</p><p> rect.left,</p><p> rect.top,</p><p> rect.left + finalRadius * 2,</p><p> rect.top + finalRadius * 2</p><p> ), 180f, 90f</p><p> );</p><p> </p><p> path.close();</p><p> </p><p> return path;</p><p> }</p><p>}</p><p>[/CODE]</p><p></p><p><a href="https://solveforum.com/index.php?login/login">Login To add answer/comment</a></p></blockquote><p></p>
[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
Post reply
Home
Forums
All Topics
Technology
Build the ios Messages Chat Bubble(with bottom right and left tail ) in Android
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top