Need help with Orchestra?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

skydoves
133 Stars 4 Forks Apache License 2.0 23 Commits 0 Opened issues

Description

🎺 Orchestra is a collection of Android custom view compatible libraries for Jetpack Compose.

Services available

!
?

Need anything else?

Contributors list

# 15,153
Kotlin
Android
kotlin-...
annotat...
21 commits

Orchestra

License API Profile

🎺 Jetpack Compose compatible libraries using Balloon, ColorPickerView, PowerSpinner.

Balloon

Download
And add a dependency code to your module's

build.gradle
file.
gradle
dependencies {
    implementation "com.github.skydoves:orchestra-balloon:1.0.3"
}

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. ```kotlin 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) )

Or we can create a `BalloonAnchor` composable using [Balloon.Factory](https://github.com/skydoves/balloon#lazy-initialization).
kotlin 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) ) ```

ColorPicker

Download
And add a dependency code to your module's

build.gradle
file.
gradle
dependencies {
    implementation "com.github.skydoves:orchestra-colorpicker:$version"
}

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.
kotlin
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
          )
        }
      }
    }
  )

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.
kotlin
AlphaTileBox(
  modifier = modifier.constrainAs(square) {
    bottom.linkTo(parent.bottom)
    centerHorizontallyTo(parent)
  }.size(64.dp).clip(RoundedCornerShape(4.dp))
) {
  it.setBackgroundColor(selectedColor.color)
}

Spinner

Download
And add a dependency code to your module's

build.gradle
file.
gradle
dependencies {
    implementation "com.github.skydoves:orchestra-spinner:$version"
}

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(
      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)
      }
    )

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)
      }
    )

Find this repository useful? :heart:

Support it by joining stargazers for this repository. :star:
And follow me for my next creations! 🤩

License

Designed and developed by 2020 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.