ShapedBackground

Repo for the Instagram-like shaped background on Android

Overview

ShapedBackground is an easy way to colour your backdrop as in Instagram stories

Android View

text.roundedBackground {
    backgroundColor = getColor(R.color.serenade)
    shadow {
        dx = 5f
        dy = 5f
        radius = 10f
    }
}

You can also add a gradient and set the background parameters

binding.text.roundedBackground {
    gradient = arrayListOf(Color.MAGENTA,Color.CYAN)
    cornerRadius = 40f
    paddingVertical = 5f
    paddingHorizontal = 5f
}

The ShapedBackground drawable uses View paddings to draw. You need to specify paddings to make the background drawable rendered without cropping:

android:padding="@dimen/your_padding"

In addition to TextView, you can also use the ShapedBackground for EditText

Jetpack Compose

RoundedBackgroundText(
    value = text,
    backgroundParams = BackgroundParams(
        paddingHorizontal = 15.dp,
        paddingVertical = 15.dp,
        cornerRadius = 15.dp,
        backgroundColor = Zeus,
        shadow = ShadowParams(
            dx = 2.dp,
            dy = 2.dp,
            radius = 1.dp
        )
    )
)

A gradient can be set instead of a solid background colour:

backgroundParams = BackgroundParams(
    gradient = arrayListOf(Color.Black, Color.Blue)
)

Download

1. Add the repository

repositories {
	...
	maven { url 'https://jitpack.io' }
}

2. Add the dependency:

Android View

implementation 'com.github.exyte.ShapedBackgroundAndroid:shapedbackground:1.1.1'

Jetpack Compose

implementation 'com.github.exyte.ShapedBackgroundAndroid:shapedbackgroundcompose:1.1.1'

Requirements

Android View: Min SDK 17+

Jetpack Compose: Min SDK 21+