Orchestra

Jetpack Compose compatible libraries using Balloon, ColorPickerView, PowerSpinner.

61194943-f9d70380-a6ff-11e9-807f-ba1ca8126f8a

95007367-d58b7d80-0649-11eb-857b-9e0187be70d1

71962685-534a6600-323d-11ea-9e1e-df1f68cb2181

Balloon

Download

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:orchestra-balloon:1.0.0"
}
Gradle

95007576-3caa3180-064c-11eb-815b-b995f45bb18a

Usage

BalloonAnchor composable can be used in ConstraintLayout and it receives a constraint reference. In the below, BalloonAnchor references image composable. When clicked the image composable, balloon popup will be shown.

ConstraintLayout {
  val (image, title, content, message) = createRefs()

  // image, title, content, message //
  
  BalloonAnchor(
    reference = image,
    modifier = Modifier.aspectRatio(0.8f),
    balloon = BalloonUtils.getTitleBalloon(
      context = context,
      title = poster.name,
      lifecycle = lifecycleOwner
    ),
    onAnchorClick = { balloon, anchor -> balloon.show(anchor) },
    onClickIndication = RippleIndication(color = purple500)
  )
Kotlin

Or we can create a BalloonAnchor composable using Balloon.Factory.

BalloonAnchor(
  reference = image,
  modifier = Modifier.aspectRatio(0.8f),
  factory = MyBalloonFactory::class,
  onAnchorClick = { balloon, anchor -> balloon.show(anchor) },
  onBalloonClick = { },
  onBalloonDismiss = { },
  onBalloonInitialized = { content -> },
  onBalloonOutsideTouch = { content, event -> },
  onClickIndication = RippleIndication(color = purple500)
)
Kotlin

ColorPicker

Download

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:orchestra-colorpicker:$version"
}
Gradle

95007577-416ee580-064c-11eb-92b7-ad30c5b36da0

Usage

ColorPicker composable implements a color picker with AlphaSlideBar and BrightnessSlideBar. We can create an alpha sidebar and brightness sidebar for changing saturation and lightness by tapping on the desired color. They should be used in children inner composable in ColorPicker, and they receive a colorPickerView as a parameter.

val (selectedColor, setSelectedColor) 
      = remember { mutableStateOf(ColorEnvelope(0)) }
ColorPicker(
    modifier = Modifier.fillMaxWidth().height(400.dp),
    onColorListener = { envelope, _ ->
      setSelectedColor(envelope)
    },
    initialColor = purple500,
    children = { colorPickerView ->
      Column(modifier = Modifier.padding(top = 32.dp)) {
        Box(modifier = Modifier.padding(vertical = 6.dp)) {
          AlphaSlideBar(
            modifier = Modifier.fillMaxWidth().height(30.dp)
              .clip(RoundedCornerShape(4.dp)),
            colorPickerView = colorPickerView
          )
        }
        Box(modifier = Modifier.padding(vertical = 6.dp)) {
          BrightnessSlideBar(
            modifier = Modifier.fillMaxWidth().height(30.dp)
              .clip(RoundedCornerShape(4.dp)),
            colorPickerView = colorPickerView
          )
        }
      }
    }
  )
Kotlin

AlphaTileBox

In a normal View, it can not represent ARGB colors accurately. Because a color will be mixed with the parent's background-color. For resolving it we can use AlphaTileBox composable. AlphaTileBox composable reflects ARGB colors.

AlphaTileBox(
  modifier = modifier.constrainAs(square) {
    bottom.linkTo(parent.bottom)
    centerHorizontallyTo(parent)
  }.size(64.dp).clip(RoundedCornerShape(4.dp))
) {
  it.setBackgroundColor(selectedColor.color)
}
Kotlin

Spinner

Download

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:orchestra-spinner:$version"
}
Gradle

95007578-42a01280-064c-11eb-9081-e5567274c9ba

Usage

Spinner composable implements a lightweight dropdown popup spinner. Here is an example for creating a spinner using a sting array resource. We should use the String generic type for creating a spinner when we us a string array resource.

 val (selectedItem, setSelectedItem) 
      = remember { mutableStateOf("Choose a question") }
 Spinner<String>(
      text = selectedItem0,
      modifier = Modifier.fillMaxWidth().padding(16.dp)
        .background(blue200)
        .align(Alignment.CenterHorizontally),
       itemListRes = R.array.list_spinner,
      color = Color.White,
      style = MaterialTheme.typography.body2,
      textAlign = TextAlign.Center,
      showDivider = true,
      dividerColor = white87,
      overflow = TextOverflow.Ellipsis,
      maxLines = 1,
      spinnerPadding = 16.dp,
      spinnerBackgroundColor = MaterialTheme.colors.onBackground,
      onSpinnerItemSelected = { index, item ->
        setSelectedItem(item)
      }
    )
Kotlin

Here is an another example using a List for creating a spinner. In this case, we don't need to decide a generic type of Spinner.

 val coffeeList = remember { listOf("Americano", "Cold Brew", "Espresso", "Latte") }
 val (selectedItem1, setSelectedItem1) = remember { mutableStateOf("Choose your coffee") }
 Spinner(
      text = selectedItem1,
      modifier = Modifier.fillMaxWidth().padding(16.dp)
        .background(amber700)
        .align(Alignment.CenterHorizontally),
      itemList = coffeeList,
      color = Color.White,
      style = MaterialTheme.typography.body2,
      textAlign = TextAlign.Center,
      dividerColor = white87,
      overflow = TextOverflow.Ellipsis,
      maxLines = 1,
      spinnerPadding = 16.dp,
      spinnerBackgroundColor = MaterialTheme.colors.onBackground,
      onSpinnerItemSelected = { index, item ->
        setSelectedItem1(item)
      }
    )
Kotlin

GitHub