Skip to content

Improve your UI/UX using the full power of Canvas (based on paths under the hood)

Notifications You must be signed in to change notification settings

enmanuel52/Path-Power

Repository files navigation

Path Power

1- First that all add this in the settings.gradle.kts

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url = uri("https://jitpack.io") }
    }
}

2- Second add the dependency in your build.gradle.kts

implementation("com.github.enmanuel52:Path-Power:0.0.3")

Charts

// Line Chart on video down below

val earnings = listOf(15f, 45f, 18f, 20f, 21f, 35f, 25f)

ChartGridContainer(
      chartData = ChartUiModel(
          steps = 4,
          values = earnings.mapIndexed { index, value ->
              ChartValue(
                  value = value,
                  label = index.toString(),
              )
          }
      ),
      style = ChartStyle.Line,
      modifier = Modifier
          .aspectRatio(1.4f)
          .fillMaxWidth()
          .padding(6.dp)
  )
Chart.Recorder.mp4

Waves animation

AnimatedWavesIndicator(
  progress = animatedProgress,
  modifier = Modifier
    .size(300.dp, 270.dp)
    .clip(Heart)
    .border(4.dp, MaterialTheme.colorScheme.surfaceVariant, Heart),
    color = MaterialTheme.colorScheme.primary,
    waveForce = WaveForce.Custom(waveHeightPercent, 1100)
)
Waves.mp4

Beehive Grid

    LazyBeehiveVerticalGrid(
        items = (1..120).toList(),
        gridCells = BeehiveGridCells.Adaptive(90.dp),
        spaceBetween = 8.dp,
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues),
        aspectRatio = 1.05f,
    ) { item: Int ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .drawBehind {
                    drawRect(Color(Random.nextLong(0xFFFFFFFF)))
                }
        ) {
            Text(text = "Item $item", modifier = Modifier.align(Alignment.Center))
        }
    }

Jump Bottom Bar

val ITEMS = listOf(
    JumpingItem(Icons.Rounded.Add),
    JumpingItem(Icons.Rounded.Done),
    JumpingItem(Icons.Rounded.Build),
    JumpingItem(Icons.Rounded.Phone),
    JumpingItem(Icons.Rounded.Delete),
)

@Composable
fun JumpBottomBarSample(modifier: Modifier = Modifier) {

    var selected by remember {
        mutableStateOf(ITEMS.first())
    }

    JumpingBottomBar(items = ITEMS, selected = selected, modifier) {
        selected = it
    }
}
jump.sample.mp4

🚧🚧 WORK IN PROGRESS 🚧🚧