Skip to content

Commit

Permalink
Slippy-Bottom-Bar released for version 1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@furkanayaz
furkanayaz committed Dec 24, 2023
1 parent eedad60 commit cc9f7ef
Show file tree
Hide file tree
Showing 12 changed files with 166 additions and 93 deletions.
44 changes: 29 additions & 15 deletions app/src/main/java/com/fa/slippybottombar/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 3,22 @@ package com.fa.slippybottombar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import com.fa.lib.SlippyBar
import com.fa.lib.SlippyBottomBar
import com.fa.lib.SlippyDividerStyle
import com.fa.lib.SlippyIconStyle
import com.fa.lib.SlippyTab
import com.fa.lib.SlippyTextStyle
import com.fa.lib.SlippyTheme
import com.fa.slippybottombar.ui.theme.SlippyBottomBarTheme

Expand All @@ -23,12 28,16 @@ class MainActivity : ComponentActivity() {
setContent {
SlippyBottomBarTheme {
// A surface container using the 'background' color from the theme
Box(
modifier = Modifier
.fillMaxSize()
.background(color = Color.Black),
contentAlignment = Alignment.BottomCenter
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween,
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier)
Text(
text = "Slippy bottom bar for the demonstration.",
textAlign = TextAlign.Center
)
SlippyDemonstration()
}
}
Expand All @@ -49,13 58,18 @@ fun SlippyDemonstration() {
)

SlippyBottomBar(
modifier = Modifier.background(color = Color.White),
theme = SlippyTheme.LINE,
bar = SlippyBar(
iconSize = R.dimen.iconSize,
disabledIconColor = R.color.disabledIconColor,
enabledIconColor = R.color.enableIconColor,
dividerColor = R.color.dividerColor
theme = SlippyTheme.LINE, bar = SlippyBar(
backgroundColor = R.color.white, textStyle = SlippyTextStyle(
textSize = R.dimen.textSize,
enabledTextColor = R.color.enabledTextColor,
disabledTextColor = R.color.disabledTextColor
), iconStyle = SlippyIconStyle(
iconSize = R.dimen.iconSize,
disabledIconColor = R.color.disabledIconColor,
enabledIconColor = R.color.enabledIconColor, // When the round style is chosen, it should be white in color.
), dividerStyle = SlippyDividerStyle(
dividerColor = R.color.dividerColor
)
)
)
}
Expand Down
3 changes: 2 additions & 1 deletion app/src/main/res/values/colors.xml
View file
Original file line number Diff line number Diff line change
@@ -1,9 1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#FFFFFFFF</color>
<color name="red">#FF0000</color>
<color name="enabledTextColor">#FF3C3C3C</color>
<color name="disabledTextColor">#B9BCBE</color>
<color name="disabledIconColor">#B9BCBE</color>
<color name="enableIconColor">#2196F3</color>
<color name="enabledIconColor">#2196F3</color>
<color name="dividerColor">#2196F3</color>
</resources>
4 changes: 4 additions & 0 deletions jtpack.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,4 @@
jdk:
- openjdk11
before_install:
- ./scripts/prepareJitpackEnvironment.sh
30 changes: 16 additions & 14 deletions lib/build.gradle.kts
View file
Original file line number Diff line number Diff line change
@@ -1,6 1,7 @@
plugins {
id("com.android.library")
id("org.jetbrains.kotlin.android")
id("maven-publish")
}

android {
Expand Down Expand Up @@ -43,20 44,21 @@ android {
}

dependencies {

implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
implementation("androidx.activity:activity-compose:1.8.2")
implementation(platform("androidx.compose:compose-bom:2023.08.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation("androidx.compose.material3:material3:1.2.0-beta01")
}

publishing {
publications {
register<MavenPublication>("release") {
groupId = "com.github.furkanayaz"
artifactId = "slippy-bottom-bar"
version = "1.0"

afterEvaluate {
from(components["release"])
}
}
}
}
16 changes: 5 additions & 11 deletions lib/src/main/java/com/fa/lib/SlippyBar.kt
View file
Original file line number Diff line number Diff line change
@@ -1,17 1,11 @@
package com.fa.lib

import androidx.annotation.ColorRes
import androidx.annotation.DimenRes
import androidx.compose.ui.text.style.TextAlign

data class SlippyBar(
@DimenRes val textSize: Int? = null,
@ColorRes val enabledTextColor: Int? = null,
@ColorRes val disabledTextColor: Int? = null,
@DimenRes val iconSize: Int,
@ColorRes val disabledIconColor: Int,
@ColorRes val enabledIconColor: Int,
@ColorRes val dividerColor: Int? = null,
val textAlign: TextAlign = TextAlign.Center,
val maxLines: Int = 1
@ColorRes val backgroundColor: Int,
val textStyle: SlippyTextStyle? = null,
val iconStyle: SlippyIconStyle? = null,
val dividerStyle: SlippyDividerStyle? = null,
val animationMillis: Int = 250
)
125 changes: 75 additions & 50 deletions lib/src/main/java/com/fa/lib/SlippyBottomBar.kt
View file
Original file line number Diff line number Diff line change
@@ -1,11 1,11 @@
package com.fa.lib

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateOffsetAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
Expand All @@ -19,7 19,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableIntState
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.State
Expand All @@ -29,7 28,7 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
Expand All @@ -45,32 44,46 @@ import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import com.fa.slippybottombar.R
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.runtime.Composable

/**
* @since Dec 25, 2023
* @author Furkan Ayaz
*
* @param [theme]
* The purpose of requesting SlippyTheme is to give special colors and
* dimension values to the bottom bar view you will create.
*
* @param [bar]
* The purpose of requesting a Slippy Bar is to give special colors, dimension values and
* animation time to the bottom bar view you will create.
* */

@Composable
fun SlippyBottomBar(
modifier: Modifier, theme: SlippyTheme, bar: SlippyBar
) {
fun SlippyBottomBar(theme: SlippyTheme, bar: SlippyBar) {
val divColor: Color = colorResource(id = bar.dividerStyle?.dividerColor ?: R.color.dividerColor)

val currentTab: MutableIntState = remember {
mutableIntStateOf(value = 0)
}

val barSize: MutableState<IntSize> = remember {
mutableStateOf(value = IntSize.Zero)
}

val barPadding = PaddingValues(
top = when (theme) {
SlippyTheme.NORMAL -> 6.4.dp
SlippyTheme.CLASSIC -> 6.4.dp
SlippyTheme.LINE -> 18.dp
SlippyTheme.ROUNDED -> 18.dp
}, bottom = when (theme) {
SlippyTheme.NORMAL -> 0.dp
SlippyTheme.CLASSIC -> 0.dp
SlippyTheme.LINE -> 18.dp
SlippyTheme.ROUNDED -> 18.dp
}
)

val divColor: Color = colorResource(id = bar.dividerColor ?: bar.enabledIconColor)

val currentTab: MutableIntState = remember {
mutableIntStateOf(value = 0)
}
val barSize: MutableState<IntSize> = remember {
mutableStateOf(value = IntSize.Zero)
}

val endOffset = Offset(
x = ((barSize.value.width / SlippyTab.getTabsSize()) * (currentTab.intValue 1)).toFloat(),
y = 0f
Expand All @@ -85,21 98,17 @@ fun SlippyBottomBar(
), label = ""
)

/*val animateEndOffset = animateOffsetAsState(
targetValue = endOffset, animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessMediumLow
), label = ""
)*/

Row(modifier = modifier.then(other = Modifier
Row(modifier = Modifier
.background(color = colorResource(id = bar.backgroundColor))
.fillMaxWidth()
.height(intrinsicSize = IntrinsicSize.Max)
.onSizeChanged {
barSize.value = it
}
.drawBehind {
.drawWithCache {
when (theme) {
SlippyTheme.LINE, SlippyTheme.ROUNDED -> {
//PerformanceTest: Runs until you draw [To perform calculations]
val divHeight: Float =
if (theme == SlippyTheme.LINE) 10.0F else size.height / 1.5F

Expand All @@ -108,32 117,42 @@ fun SlippyBottomBar(

val xPosition: Float =
if (theme == SlippyTheme.LINE) animateStartOffset.value.x divWidth / 2F else animateStartOffset.value.x

val yPosition: Float =
if (theme == SlippyTheme.LINE) size.height - divHeight else center.y - (divHeight / 2.0F)
if (theme == SlippyTheme.LINE) size.height - divHeight else size.height / 2 - (divHeight / 2.0F)

val divRadius: Float = if (theme == SlippyTheme.LINE) 5.0F else 100.0F / 1.5F

drawRoundRect(
color = divColor, topLeft = Offset(
x = xPosition, y = yPosition
), size = Size(
width = divWidth, height = divHeight
), cornerRadius = CornerRadius(x = divRadius)
)
this.onDrawBehind {
//PerformanceTest: Runs continuously

drawRoundRect(
color = divColor, topLeft = Offset(
x = xPosition, y = yPosition
), size = Size(
width = divWidth, height = divHeight
), cornerRadius = CornerRadius(x = divRadius)
)
}
}

else -> { /* NO-OP */
else -> {
this.onDrawBehind { /* NO-OP */ }
}
}
}),
},
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
SlippyTab.slippyTabs.forEachIndexed { index: Int, page: SlippyTab ->
val animateIconColor: Color by animateColorAsState(
animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing),
targetValue = colorResource(id = if (currentTab.intValue == index) bar.enabledIconColor else bar.disabledIconColor),
label = ""
animationSpec = tween(
durationMillis = bar.animationMillis, easing = FastOutLinearInEasing
), targetValue = colorResource(
id = if (currentTab.intValue == index) bar.iconStyle?.enabledIconColor
?: R.color.enabledIconColor else bar.iconStyle?.disabledIconColor
?: R.color.disabledIconColor
), label = ""
)

Column(modifier = Modifier
Expand All @@ -149,39 168,45 @@ fun SlippyBottomBar(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceAround) {
Icon(
modifier = Modifier.size(size = dimensionResource(id = bar.iconSize)),
modifier = Modifier.size(
size = dimensionResource(
id = bar.iconStyle?.iconSize ?: R.dimen.iconSize
)
),
tint = animateIconColor,
painter = painterResource(id = page.icon),
contentDescription = stringResource(
id = page.name
)
)

if (theme == SlippyTheme.NORMAL) {
if (theme == SlippyTheme.CLASSIC) {
val animateTextColor: Color by animateColorAsState(
animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing),
targetValue = colorResource(
id = if (currentTab.intValue == index) bar.enabledTextColor
?: R.color.enabledTextColor else bar.disabledTextColor
animationSpec = tween(
durationMillis = bar.animationMillis, easing = FastOutLinearInEasing
), targetValue = colorResource(
id = if (currentTab.intValue == index) bar.textStyle?.enabledTextColor
?: R.color.enabledTextColor else bar.textStyle?.disabledTextColor
?: R.color.disabledTextColor
),
label = ""
), label = ""
)

Text(
modifier = Modifier.padding(top = 4.dp),
text = stringResource(id = page.name),
maxLines = bar.maxLines,
textAlign = bar.textAlign,
maxLines = bar.textStyle?.maxLines ?: 1,
textAlign = bar.textStyle?.textAlign,
fontWeight = FontWeight.SemiBold,
color = animateTextColor,
fontSize = TextUnit(
value = dimensionResource(id = bar.textSize ?: R.dimen.textSize).value,
type = TextUnitType.Sp
value = dimensionResource(
id = bar.textStyle?.textSize ?: R.dimen.textSize
).value, type = TextUnitType.Sp
)
)
}
}

}
}

Expand Down
7 changes: 7 additions & 0 deletions lib/src/main/java/com/fa/lib/SlippyDividerStyle.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,7 @@
package com.fa.lib

import androidx.annotation.ColorRes

data class SlippyDividerStyle(
@ColorRes val dividerColor: Int? = null,
)
Loading

0 comments on commit cc9f7ef

Please sign in to comment.