1. Use

The project encountered a requirement that the background of a text should be a dialog box with arrows, as shown in the figure below:

The initial idea was to show it through the Tooltip library, but the authors didn’t provide an entry point because the arrow positions needed to be customized. TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable TooltipTextDrawable

@RestrictTo(LIBRARY_GROUP)
public class TooltipDrawable extends MaterialShapeDrawable implements TextDrawableDelegate
Copy the code

However, the parent class of MaterialShapeDrawable of this class can be used. After querying the data, it is found that it is easy to use, and there is no need to customize the Drawable or import additional libraries. So record the usage.

 val appearanceModel = ShapeAppearanceModel.builder()
 	.setAllCornerSizes(DisplayUtils.dp2pxF(6F))
    .setBottomEdge(OffsetEdgeTreatment(
    	TriangleEdgeTreatment(DisplayUtils.dp2pxF(6F), false),
        DisplayUtils.dp2pxF(10F)))
     .build()

 val drawable = MaterialShapeDrawable(appearanceModel).apply {
 	setTint(Color.parseColor("#FA4B05"))
    paintStyle = Paint.Style.FILL
 }

 tv_tip.background = drawable
Copy the code

To create MaterialShapeDrawable object, the constructor needs to pass in the ShapeAppearanceModel parameter. Through ShapeAppearanceModel, the effects of each corner and each side can be set. These effects are realized through various treatments.

Styles 2.

The various treatments available are as follows:

  • CornerTreatment
    • RoundedCornerTreatment solution
    • CutCornerTreatment solution
  • EdgeTreatment
    • TriangleEdgeTreatment triangle
    • MarkerEdgeTreatment is similar to a map of points of interest
    • OffsetEdgeTreatment displacement
    • BottomAppBarTopEdgeTreatment should be with the effect of the suspension button in the middle

Effect of a

val shapePathModel = ShapePathModel().apply {
    setAllCorners(CutCornerTreatment(dip(5).toFloat()))
    setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true))
}
val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply {
    setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary))
    paintStyle = Paint.Style.FILL
}
textView.background = backgroundDrawable
Copy the code

Effects of two

class CutoutCornersTreatment(val size: Float) : CornerTreatment() {
    override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) {
        shapePath.reset(0.0f, size * interpolation)
        shapePath.lineTo(size * interpolation, size * interpolation)
        shapePath.lineTo(size * interpolation, 0f)
    }
}
class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() {
    override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) {
        shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f)
    }
}
Copy the code

The above two effects are cited in reference article 2

3. Problems encountered

A problem encountered in the use, the arrow to have effect, but the arrow down unexpectedly has no effect, in the application of drawable by the query requires the parent class to add the following parameters:

android:clipChildren="false"
android:clipToPadding="false"
Copy the code

4. Big guy demo

Github.com/VolodyaVech…

5. Refer to the article

  1. Medium.com/ackee/creat…
  2. Stackoverflow.com/questions/6…