I would like to make such background for my textView:
I managed to make only with outer semi circle:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/p_color" />
<corners android:radius="24dp" />
</shape>
which is not good for me. I also tried to work with states list but didn't succeed with it.
Hello my Friend,
What you need will not create by shape Drawable, you need a custome view
in fact you need some trick to make your desired shape by custom views and use it inside a constraintlayout as background of your TextView
I coded for you by kotlin(if you need java inform me):
first:
make a file and name it CustomeBg copy below code put in that:
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
class CustomeBg @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private var W = 0.0f
private var H = 0.0f
/////main body Rect and Paint
private var bodyRect = Rect()
private var bodyRectPaint = Paint(Paint.ANTI_ALIAS_FLAG)
//right half circle Rect and Paint
private var rightCircleRect = RectF()
private var rightCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG)
//left half circle Rect and Paint
private var leftCircleRect = RectF()
private var leftCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG)
init {
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
W = w.toFloat()
H = h.toFloat()
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// drawRect(canvas)
var left = 0
var top = 0
var right = W - RADIUS_RIGHT
var bottom = H
bodyRectPaint.apply {
color = BODY_COLOR_RECT
style = Paint.Style.FILL
}
bodyRect.set(left, top, right.toInt(), bottom.toInt())
canvas.drawRect(bodyRect, bodyRectPaint)
// Draw Left half-Circle
var left_l_circle = -RADIUS_LEFT
var top_l_circle = 0f
var right_l_circle = RADIUS_LEFT
var bottom_l_circle = H
leftCirclePaint.apply {
color = LEFT_CIRCLE_COLOR
style = Paint.Style.FILL
}
leftCircleRect = RectF(left_l_circle, top_l_circle, right_l_circle, bottom_l_circle)
canvas.drawArc(leftCircleRect, -90f, 180f, true, leftCirclePaint)
// Draw Right half-Circle
var left_r_circle = (bodyRect.right) - RADIUS_RIGHT
var top_r_circle = 0f
var right_r_circle = bodyRect.right + RADIUS_RIGHT
var bottom_r_circle = H
rightCirclePaint.apply {
color = RIGHT_CIRCLE_COLOR
style = Paint.Style.FILL
}
rightCircleRect = RectF(left_r_circle, top_r_circle, right_r_circle, bottom_r_circle)
canvas.drawArc(rightCircleRect, -90f, 180f, true, rightCirclePaint)
}
companion object {
private val BODY_COLOR_RECT = Color.parseColor("#00534b")
private val LEFT_CIRCLE_COLOR = Color.parseColor("#ffffff")
private val RIGHT_CIRCLE_COLOR = Color.parseColor("#00534b")
private val RADIUS_LEFT = 100f
private val RADIUS_RIGHT = 100f
}
}
second:
then in your main_activity layout put below XML codes:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="95dp">
<com.example.junk2.CustomeBg
android:id="@+id/itemSettingBg"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.example.junk2.CustomeBg>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo ich bin Custome"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="@+id/itemSettingBg"
app:layout_constraintEnd_toEndOf="@+id/itemSettingBg"
app:layout_constraintStart_toStartOf="@+id/itemSettingBg"
app:layout_constraintTop_toTopOf="@+id/itemSettingBg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Result is :
I need explain a little my codes for better understanding: in CustomeBg there are some value:
companion object {
private val BODY_COLOR_RECT = Color.parseColor("#00534b")
private val LEFT_CIRCLE_COLOR = Color.parseColor("#ffffff")
private val RIGHT_CIRCLE_COLOR = Color.parseColor("#00534b")
private val RADIUS_LEFT = 100f
private val RADIUS_RIGHT = 100f
}
in this file in fact we have 3 object, two half-circle(one for left and one for right) and we have one rectangular as our body, above code explain radius for every circle and their colors, you can see body color here too
Notice: you can change above value for your usage my freiend
