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+