18 |
19 |
20 |
--------------------------------------------------------------------------------
/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 | # IDE (e.g. Android Studio) users:
3 | # Gradle settings configured through the IDE *will override*
4 | # any settings specified in this file.
5 | # For more details on how to configure your build environment visit
6 | # http://www.gradle.org/docs/current/userguide/build_environment.html
7 | # Specifies the JVM arguments used for the daemon process.
8 | # The setting is particularly useful for tweaking memory settings.
9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
10 | # When configured, Gradle will run in incubating parallel mode.
11 | # This option should only be used with decoupled projects. More details, visit
12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
13 | # org.gradle.parallel=true
14 | # AndroidX package structure to make it clearer which packages are bundled with the
15 | # Android operating system, and which are packaged with your app"s APK
16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
17 | android.useAndroidX=true
18 | # Automatically convert third-party libraries to use AndroidX
19 | android.enableJetifier=true
20 | # Kotlin code style for this project: "official" or "obsolete":
21 | kotlin.code.style=official
--------------------------------------------------------------------------------
/app/src/main/res/values/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/app/src/main/java/net/bradball/composebuttons/ui/theme/Theme.kt:
--------------------------------------------------------------------------------
1 | package net.bradball.composebuttons.ui.theme
2 |
3 | import androidx.compose.foundation.isSystemInDarkTheme
4 | import androidx.compose.material.MaterialTheme
5 | import androidx.compose.material.darkColors
6 | import androidx.compose.material.lightColors
7 | import androidx.compose.runtime.Composable
8 |
9 | private val DarkColorPalette = darkColors(
10 | primary = Purple200,
11 | primaryVariant = Purple700,
12 | secondary = Teal200
13 | )
14 |
15 | private val LightColorPalette = lightColors(
16 | primary = Purple500,
17 | primaryVariant = Purple700,
18 | secondary = Teal200
19 |
20 | /* Other default colors to override
21 | background = Color.White,
22 | surface = Color.White,
23 | onPrimary = Color.White,
24 | onSecondary = Color.Black,
25 | onBackground = Color.Black,
26 | onSurface = Color.Black,
27 | */
28 | )
29 |
30 | @Composable
31 | fun ComposeButtonsTheme(
32 | darkTheme: Boolean = isSystemInDarkTheme(),
33 | content: @Composable() () -> Unit
34 | ) {
35 | val colors = if (darkTheme) {
36 | DarkColorPalette
37 | } else {
38 | LightColorPalette
39 | }
40 |
41 | MaterialTheme(
42 | colors = colors,
43 | typography = Typography,
44 | shapes = Shapes,
45 | content = content
46 | )
47 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
15 |
18 |
21 |
22 |
23 |
24 |
30 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | plugins {
2 | id 'com.android.application'
3 | id 'kotlin-android'
4 | }
5 |
6 | android {
7 | compileSdk 31
8 |
9 | defaultConfig {
10 | applicationId "net.bradball.composebuttons"
11 | minSdk 23
12 | targetSdk 31
13 | versionCode 1
14 | versionName "1.0"
15 |
16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
17 | vectorDrawables {
18 | useSupportLibrary true
19 | }
20 | }
21 |
22 | buildTypes {
23 | release {
24 | minifyEnabled false
25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
26 | }
27 | }
28 | compileOptions {
29 | sourceCompatibility JavaVersion.VERSION_1_8
30 | targetCompatibility JavaVersion.VERSION_1_8
31 | }
32 | kotlinOptions {
33 | jvmTarget = '1.8'
34 | useIR = true
35 | }
36 | buildFeatures {
37 | compose true
38 | }
39 | composeOptions {
40 | kotlinCompilerExtensionVersion compose_compiler_version
41 | }
42 | packagingOptions {
43 | resources {
44 | excludes += '/META-INF/{AL2.0,LGPL2.1}'
45 | }
46 | }
47 | }
48 |
49 | dependencies {
50 |
51 | implementation 'androidx.core:core-ktx:1.7.0'
52 | implementation 'androidx.appcompat:appcompat:1.4.0'
53 | implementation 'com.google.android.material:material:1.4.0'
54 | implementation "androidx.compose.ui:ui:$compose_version"
55 | implementation "androidx.compose.material:material:$compose_version"
56 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
57 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
58 | implementation 'androidx.activity:activity-compose:1.4.0'
59 | testImplementation 'junit:junit:4.13.2'
60 | androidTestImplementation 'androidx.test.ext:junit:1.1.3'
61 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
62 | androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
63 | debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
64 | }
--------------------------------------------------------------------------------
/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/app/src/main/java/net/bradball/composebuttons/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package net.bradball.composebuttons
2 |
3 | import android.os.Bundle
4 | import androidx.activity.ComponentActivity
5 | import androidx.activity.compose.setContent
6 | import androidx.compose.foundation.layout.*
7 | import androidx.compose.material.MaterialTheme
8 | import androidx.compose.material.Surface
9 | import androidx.compose.material.Text
10 | import androidx.compose.runtime.*
11 | import androidx.compose.ui.Modifier
12 | import androidx.compose.ui.text.font.FontWeight
13 | import androidx.compose.ui.tooling.preview.Preview
14 | import androidx.compose.ui.unit.dp
15 | import androidx.compose.ui.unit.sp
16 | import kotlinx.coroutines.delay
17 | import kotlinx.coroutines.launch
18 | import net.bradball.composebuttons.ui.theme.ComposeButtonsTheme
19 |
20 | class MainActivity : ComponentActivity() {
21 | override fun onCreate(savedInstanceState: Bundle?) {
22 | super.onCreate(savedInstanceState)
23 | setContent {
24 | ComposeButtonsTheme {
25 | // A surface container using the 'background' color from the theme
26 | Surface(color = MaterialTheme.colors.background) {
27 | ButtonsDemo()
28 | }
29 | }
30 | }
31 | }
32 | }
33 |
34 |
35 | /**
36 | * The primary content.
37 | *
38 | * Renders 3 rows of buttons, one for each of the Loading Indicator types.
39 | */
40 | @Composable
41 | fun ButtonsDemo() {
42 | Column(modifier = Modifier.fillMaxWidth()) {
43 | ButtonRow(type = LoadingIndicatorTypes.Pulsing)
44 |
45 | Spacer(modifier = Modifier.height(36.dp))
46 |
47 | ButtonRow(type = LoadingIndicatorTypes.Flashing)
48 |
49 | Spacer(modifier = Modifier.height(36.dp))
50 |
51 | ButtonRow(type = LoadingIndicatorTypes.Bouncing)
52 | }
53 | }
54 |
55 | /**
56 | * Renders a single "row" of 2 buttons, one solid and one outlined,
57 | * that use the passed in loading indicator style when clicked.
58 | * It also includes a title for the row to indicate which type of
59 | * loading indicator the buttons will use.
60 | *
61 | * @param type a [LoadingIndicatorTypes] that specifies which type of
62 | * loading indicator to use on the buttons.
63 | */
64 | @Composable
65 | fun ButtonRow(type: LoadingIndicatorTypes) {
66 |
67 | // This is a very basic click handler setup for demo purposes
68 | // to show the loading dots for 5 seconds.
69 | // A real app would likely include a ViewModel
70 | // that emits a [State] that can be observed
71 | // to set the `loading` state of the button.
72 | var buttonLoading by remember { mutableStateOf(false) }
73 | val scope = rememberCoroutineScope()
74 | val onButtonClicked = {
75 | scope.launch {
76 | buttonLoading = true
77 | delay(5000)
78 | buttonLoading = false
79 | }
80 | }
81 |
82 | Text(type.name, modifier = Modifier.padding(start = 16.dp), fontWeight = FontWeight.Bold, fontSize = 18.sp)
83 | Row(
84 | horizontalArrangement = Arrangement.SpaceAround,
85 | modifier = Modifier
86 | .padding(vertical = 12.dp)
87 | .fillMaxWidth()
88 | ) {
89 | MyButton(
90 | text = "Submit",
91 | loading = buttonLoading,
92 | loadingIndicatorType = type,
93 | onClick = { onButtonClicked() })
94 |
95 | MyOutlinedButton(
96 | text = "Submit",
97 | loading = buttonLoading,
98 | loadingIndicatorType = type,
99 | onClick = { onButtonClicked() })
100 | }
101 | }
102 |
103 | @Preview
104 | @Composable
105 | fun PreviewButtons() {
106 | ComposeButtonsTheme {
107 | ButtonsDemo()
108 | }
109 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
171 |
--------------------------------------------------------------------------------
/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 |
86 | # Determine the Java command to use to start the JVM.
87 | if [ -n "$JAVA_HOME" ] ; then
88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
89 | # IBM's JDK on AIX uses strange locations for the executables
90 | JAVACMD="$JAVA_HOME/jre/sh/java"
91 | else
92 | JAVACMD="$JAVA_HOME/bin/java"
93 | fi
94 | if [ ! -x "$JAVACMD" ] ; then
95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
96 |
97 | Please set the JAVA_HOME variable in your environment to match the
98 | location of your Java installation."
99 | fi
100 | else
101 | JAVACMD="java"
102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
103 |
104 | Please set the JAVA_HOME variable in your environment to match the
105 | location of your Java installation."
106 | fi
107 |
108 | # Increase the maximum file descriptors if we can.
109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
110 | MAX_FD_LIMIT=`ulimit -H -n`
111 | if [ $? -eq 0 ] ; then
112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
113 | MAX_FD="$MAX_FD_LIMIT"
114 | fi
115 | ulimit -n $MAX_FD
116 | if [ $? -ne 0 ] ; then
117 | warn "Could not set maximum file descriptor limit: $MAX_FD"
118 | fi
119 | else
120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
121 | fi
122 | fi
123 |
124 | # For Darwin, add options to specify how the application appears in the dock
125 | if $darwin; then
126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
127 | fi
128 |
129 | # For Cygwin or MSYS, switch paths to Windows format before running java
130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
133 |
134 | JAVACMD=`cygpath --unix "$JAVACMD"`
135 |
136 | # We build the pattern for arguments to be converted via cygpath
137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
138 | SEP=""
139 | for dir in $ROOTDIRSRAW ; do
140 | ROOTDIRS="$ROOTDIRS$SEP$dir"
141 | SEP="|"
142 | done
143 | OURCYGPATTERN="(^($ROOTDIRS))"
144 | # Add a user-defined pattern to the cygpath arguments
145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
147 | fi
148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
149 | i=0
150 | for arg in "$@" ; do
151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
153 |
154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
156 | else
157 | eval `echo args$i`="\"$arg\""
158 | fi
159 | i=`expr $i + 1`
160 | done
161 | case $i in
162 | 0) set -- ;;
163 | 1) set -- "$args0" ;;
164 | 2) set -- "$args0" "$args1" ;;
165 | 3) set -- "$args0" "$args1" "$args2" ;;
166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
172 | esac
173 | fi
174 |
175 | # Escape application args
176 | save () {
177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
178 | echo " "
179 | }
180 | APP_ARGS=`save "$@"`
181 |
182 | # Collect all arguments for the java command, following the shell quoting and substitution rules
183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
184 |
185 | exec "$JAVACMD" "$@"
186 |
--------------------------------------------------------------------------------
/app/src/main/java/net/bradball/composebuttons/Buttons.kt:
--------------------------------------------------------------------------------
1 | package net.bradball.composebuttons
2 |
3 | import androidx.compose.animation.animateColorAsState
4 | import androidx.compose.foundation.BorderStroke
5 | import androidx.compose.foundation.layout.Box
6 | import androidx.compose.foundation.layout.PaddingValues
7 | import androidx.compose.foundation.shape.RoundedCornerShape
8 | import androidx.compose.material.*
9 | import androidx.compose.runtime.Composable
10 | import androidx.compose.runtime.getValue
11 | import androidx.compose.ui.Alignment
12 | import androidx.compose.ui.Modifier
13 | import androidx.compose.ui.graphics.Color
14 | import androidx.compose.ui.layout.Layout
15 | import androidx.compose.ui.layout.layoutId
16 | import androidx.compose.ui.unit.dp
17 |
18 |
19 | /**
20 | * Sets a shape to use for all My Buttons.
21 | */
22 | private val buttonShape = RoundedCornerShape(50)
23 |
24 |
25 | /**
26 | * Alpha to use for disabled buttons and disabled content
27 | */
28 | private const val DISABLED_BUTTON_ALPHA = 0.5f
29 |
30 |
31 | /**
32 | * Sets the content padding to use on all buttons
33 | */
34 | private val buttonContentPadding = PaddingValues(vertical = 16.dp, horizontal = 24.dp)
35 |
36 |
37 | /**
38 | * Renders a solid, filled in Button.
39 | * The button will have a solid background color with text on top.
40 | *
41 | * @param text The text to show on the button.
42 | * @param onClick A callback that is invoked when the button is clicked.
43 | * @param enabled Whether the button can be clicked or not.
44 | * When NOT enabled, the onClick() handler will NOT be called when the button is clicked.
45 | * When NOT enabled, the button will use the "disabled" colors in the passed in ButtonColors.
46 | * This value will be ignored (and set to false) if the loading argument is true.
47 | * Defaults to true.
48 | * @param loading A boolean indicating if the button is in the loading state. If this is
49 | * set to true, then enabled will automatically be set to false.
50 | * Defaults to false.
51 | * @param loadingIndicatorType A [LoadingIndicatorTypes] that sets the type of indicator
52 | * to use for this button.
53 | * Defaults to [LoadingIndicatorTypes.Pulsing]
54 | */
55 | @Composable
56 | fun MyButton(
57 | text: String,
58 | modifier: Modifier = Modifier,
59 | onClick: ()->Unit = {},
60 | enabled: Boolean = true,
61 | loading: Boolean = false,
62 | loadingIndicatorType: LoadingIndicatorTypes = LoadingIndicatorTypes.Pulsing,
63 | ) {
64 |
65 | // The default material button colors use a shade of gray
66 | // for the disabled state. These buttons instead use
67 | // an alpha on the primary color.
68 | // If you want to use a different overall button color, just
69 | // change the `buttonColor` variable below. Or, for even more flexibility,
70 | // allow the caller to pass in a `buttonColor`.
71 |
72 | val buttonColor = MaterialTheme.colors.primary
73 | val textColor = contentColorFor(backgroundColor = buttonColor)
74 |
75 | val colors = ButtonDefaults.buttonColors(
76 | backgroundColor = buttonColor,
77 | contentColor = textColor,
78 | disabledBackgroundColor = buttonColor.copy(alpha = DISABLED_BUTTON_ALPHA),
79 | disabledContentColor = textColor.copy(alpha = DISABLED_BUTTON_ALPHA)
80 | )
81 |
82 | Button(
83 | modifier = modifier,
84 | colors = colors,
85 | shape = buttonShape,
86 | contentPadding = buttonContentPadding,
87 | enabled = enabled && !loading,
88 | onClick = onClick) {
89 |
90 | MyButtonContent(
91 | text = text,
92 | loading = loading,
93 | loadingIndicatorType = loadingIndicatorType)
94 | }
95 | }
96 |
97 |
98 | /**
99 | * Renders a outlined Button.
100 | * The button will have a transparent background with
101 | * a colored border and text in the center.
102 | *
103 | * @param text The text to show on the button.
104 | * @param onClick A callback that is invoked when the button is clicked.
105 | * @param enabled Whether the button can be clicked or not.
106 | * When NOT enabled, the onClick() handler will NOT be called when the button is clicked.
107 | * When NOT enabled, the button will use the "disabled" colors in the passed in ButtonColors.
108 | * This value will be ignored (and set to false) if the loading argument is true.
109 | * Defaults to true.
110 | * @param loading A boolean indicating if the button is in the loading state. If this is
111 | * set to true, then enabled will automatically be set to false.
112 | * Defaults to false.
113 | * @param loadingIndicatorType A [LoadingIndicatorTypes] that sets the type of indicator
114 | * to use for this button.
115 | * Defaults to [LoadingIndicatorTypes.Pulsing]
116 | */
117 | @Composable
118 | fun MyOutlinedButton(
119 | text: String,
120 | modifier: Modifier = Modifier,
121 | onClick: ()->Unit = {},
122 | enabled: Boolean = true,
123 | loading: Boolean = false,
124 | loadingIndicatorType: LoadingIndicatorTypes = LoadingIndicatorTypes.Pulsing,
125 | ) {
126 | val colors = ButtonDefaults.outlinedButtonColors()
127 |
128 | // Set the border color using the button content color
129 | val borderColor by animateColorAsState(targetValue = colors.contentColor(enabled = enabled).value)
130 |
131 | OutlinedButton(
132 | enabled = enabled,
133 | contentPadding = buttonContentPadding,
134 | shape = buttonShape,
135 | border = BorderStroke(2.dp, borderColor),
136 | modifier = modifier,
137 | colors = colors,
138 | onClick = onClick) {
139 |
140 | MyButtonContent(
141 | text = text,
142 | loading = loading,
143 | loadingIndicatorType = loadingIndicatorType)
144 | }
145 | }
146 |
147 | /**
148 | * Renders the content in a Solid or Outlined button.
149 | *
150 | * @param text The text to show on the button.
151 | * @param loading Whether to show the loading indicator.
152 | * If true, the text will still be rendered, but will be transparent/invisible.
153 | * @param loadingIndicatorType A [LoadingIndicatorTypes] that sets the type of indicator
154 | * to use for this button.
155 | */
156 | @Composable
157 | private fun MyButtonContent(
158 | text: String,
159 | loading: Boolean,
160 | loadingIndicatorType: LoadingIndicatorTypes) {
161 |
162 | // Use a Custom Layout so that we can measure the width of both the
163 | // button text and the indicator and make sure that the resulting
164 | // layout is sized to fit either/both.
165 | // Then we can place either the text or the indicator based on the loading state.
166 | // This helps ensure that the button does not change size when switching the loading state.
167 | Layout(
168 | content = {
169 | // Content is the Text and the LoadingIndicator
170 | Text(text = text, modifier = Modifier.layoutId("buttonText"))
171 | LoadingIndicator(type = loadingIndicatorType, modifier = Modifier.layoutId("loadingIndicator"))
172 | }) { measureables, constraints ->
173 |
174 | // First, measure both the text and the indicator, with no additional contraints on their size.
175 | val textPlaceable = measureables.first { it.layoutId == "buttonText"}.measure(constraints)
176 | val indicatorPlaceable = measureables.first { it.layoutId == "loadingIndicator"}.measure(constraints)
177 |
178 | // Now calculate the layout width,
179 | // making sure it's big enough to fit the larger of the 2 placeables.
180 | val layoutWidth = textPlaceable.width.coerceAtLeast(indicatorPlaceable.width)
181 | val layoutHeight = textPlaceable.height.coerceAtLeast(indicatorPlaceable.height)
182 |
183 | // Now, create the layout at the appropriate size
184 | layout(layoutWidth,layoutHeight) {
185 | // Place EITHER the indicator or the text (but not both), based on the loading state
186 | if (loading) {
187 | // Calculate the X and Y position of the indicator so that it's centered in the layout.
188 | val indicatorX = (layoutWidth - indicatorPlaceable.width) / 2
189 | val indicatorY = (layoutHeight - indicatorPlaceable.height) / 2
190 | // Place the indicator
191 | indicatorPlaceable.placeRelative(x = indicatorX, y = indicatorY)
192 | } else {
193 | // Calculate the X and Y position of the text so that it's centered in the layout.
194 | val textX = (layoutWidth - textPlaceable.width) / 2
195 | val textY = (layoutHeight - textPlaceable.height) / 2
196 | //Place the text
197 | textPlaceable.placeRelative(x = textX, y = textY)
198 | }
199 | }
200 | }
201 | }
--------------------------------------------------------------------------------
/app/src/main/java/net/bradball/composebuttons/LoadingDots.kt:
--------------------------------------------------------------------------------
1 | package net.bradball.composebuttons
2 |
3 | import androidx.compose.animation.core.*
4 | import androidx.compose.foundation.background
5 | import androidx.compose.foundation.layout.*
6 | import androidx.compose.foundation.shape.CircleShape
7 | import androidx.compose.material.LocalContentColor
8 | import androidx.compose.runtime.*
9 | import androidx.compose.ui.Alignment
10 | import androidx.compose.ui.Modifier
11 | import androidx.compose.ui.draw.scale
12 | import androidx.compose.ui.graphics.Color
13 | import androidx.compose.ui.graphics.takeOrElse
14 | import androidx.compose.ui.tooling.preview.Preview
15 | import androidx.compose.ui.unit.*
16 | import net.bradball.composebuttons.ui.theme.ComposeButtonsTheme
17 |
18 | enum class LoadingIndicatorTypes {
19 | Pulsing,
20 | Flashing,
21 | Bouncing
22 | }
23 |
24 | /**
25 | * Renders a set of dots that are animated to indicate a "loading" state.
26 | *
27 | * @param loadingIndicatorType A [LoadingIndicatorTypes] that sets the type of indicator
28 | * to use for this button.
29 | * Defaults to [LoadingIndicatorTypes.Pulsing]
30 | * @param dotSize How big to render the dots.
31 | * Defaults to 12.dp
32 | * @param color A Color to use for the dots. If not specified, the LocalContentColor will be used.
33 | */
34 | @Composable
35 | fun LoadingIndicator(type: LoadingIndicatorTypes = LoadingIndicatorTypes.Pulsing, dotSize: Dp = 12.dp, modifier: Modifier = Modifier, color: Color = Color.Unspecified) {
36 | val numberOfDots = 3
37 | val pulseDuration = 333
38 | val bouncingDotHeight = 10f
39 |
40 | val timeBetween = pulseDuration * (numberOfDots - 1)
41 | val delay = pulseDuration / 2
42 | val transition = rememberInfiniteTransition()
43 |
44 | val minWidth = (dotSize * numberOfDots) + ((dotSize / 2) * (numberOfDots - 1))
45 | var rowModifier = modifier.widthIn(min = minWidth)
46 | if (type == LoadingIndicatorTypes.Bouncing) rowModifier = rowModifier.padding(top = bouncingDotHeight.dp)
47 |
48 | val dotColor = color.takeOrElse { LocalContentColor.current }
49 |
50 | Row(modifier = rowModifier, verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween) {
51 | for (index in 0 until numberOfDots) {
52 | when (type) {
53 | LoadingIndicatorTypes.Pulsing -> PulsingDot(
54 | dotSize = dotSize,
55 | pulseDuration = pulseDuration,
56 | timeBetweenPulses = timeBetween,
57 | delayStart = delay * index,
58 | transition = transition,
59 | color = dotColor)
60 |
61 | LoadingIndicatorTypes.Flashing -> FlashingDot(
62 | dotSize = dotSize,
63 | flashDuration = pulseDuration,
64 | timeBetweenFlashes = timeBetween,
65 | delayStart = delay * index,
66 | transition = transition,
67 | color = dotColor)
68 |
69 | LoadingIndicatorTypes.Bouncing -> BouncingDot(
70 | dotSize = dotSize,
71 | bounceHeight = bouncingDotHeight,
72 | bounceDuration = pulseDuration,
73 | timeBetweenBounces = timeBetween,
74 | delayStart = delay * index,
75 | transition = transition,
76 | color = dotColor)
77 | }
78 | }
79 | }
80 | }
81 |
82 |
83 | /**
84 | * Renders a "dot" (circle) shape with a specific color.
85 | *
86 | * @param color The Color for the dot. Defaults to the current value of LocalContentColor
87 | */
88 | @Composable
89 | fun Dot(modifier: Modifier = Modifier, color: Color = LocalContentColor.current) {
90 | Spacer(modifier.background(color = color, shape = CircleShape))
91 | }
92 |
93 | /**
94 | * Takes in a set of values and a duration, and returns a
95 | * [State] that changes the value over the course of the duration,
96 | * and then repeats indefinitely. The value will be moved from the min
97 | * to the max, and then back to the min over the course of the duration.
98 | *
99 | * This can be used to create an infinite repeatable "loop" that animates
100 | * a value over and over, and include a "pause" between cycles.
101 | *
102 | * @param minValue the starting value at the beginning (and end of the duration).
103 | * @param maxValue the value that should be output halfway through the duration.
104 | * @param duration how long (in milliseconds) the transistion from min to max and back to min should take.
105 | * @param timeBetween how long (in milliseconds) to "wait" between cycles of the duration.
106 | * The total time of the repeated loop is `duration + timeBetween`
107 | * @param delayStart how long (in milliseconds) to wait before starting the initial transition.
108 | */
109 | @Composable
110 | private fun InfiniteTransition.dotAnimator(
111 | minValue: Float = 0f,
112 | maxValue: Float = 1f,
113 | duration: Int = 333,
114 | timeBetween: Int = 0,
115 | delayStart: Int = 0): State {
116 |
117 | val totalDuration = duration + timeBetween
118 |
119 | return animateFloat (
120 | initialValue = minValue,
121 | targetValue = minValue,
122 | animationSpec = infiniteRepeatable(
123 | animation = keyframes {
124 | durationMillis = totalDuration
125 | minValue at 0 with LinearOutSlowInEasing
126 | maxValue at (duration / 2) with FastOutLinearInEasing
127 | minValue at duration
128 | },
129 | initialStartOffset = StartOffset(delayStart)
130 | )
131 | )
132 | }
133 |
134 | /**
135 | * Renders a [Dot] that "pulses". The dot will grow and shrink
136 | * as well as fade in and out in a loop.
137 | *
138 | * @param dotSize The size of the dot to be rendered.
139 | * Defaults to 12.dp
140 | * @param color The Color of the dot.
141 | * Defaults to the current value of LocalContentColor.
142 | * @param pulseDuration how long one "pulse" of the dot should take.
143 | * Defaults to 300 milliseconds.
144 | * @param timeBetweenPulses how long to "pause" between pulses.
145 | * Defaults to 0 milliseconds (no pause).
146 | * @param delayStart how long to "wait" before the initial pulse.
147 | * The dot will not be displayed during this time.
148 | * Defaults to 0 milliseconds (no delay).
149 | * @param transition an [InfiniteTransition] to use for animating the dot.
150 | * This is useful if you want to combine this animation with others
151 | */
152 | @Composable
153 | fun PulsingDot(
154 | dotSize: Dp = 12.dp,
155 | color: Color = LocalContentColor.current,
156 | pulseDuration: Int = 300,
157 | timeBetweenPulses: Int = 0,
158 | delayStart: Int = 0,
159 | transition: InfiniteTransition = rememberInfiniteTransition()) {
160 |
161 | val scale: Float by transition.dotAnimator(
162 | duration = pulseDuration,
163 | timeBetween = timeBetweenPulses,
164 | delayStart = delayStart)
165 |
166 | val alpha: Float by transition.dotAnimator(
167 | minValue = 0.25f,
168 | maxValue = 1f,
169 | duration = pulseDuration,
170 | timeBetween = timeBetweenPulses,
171 | delayStart = delayStart)
172 |
173 | Dot(modifier = Modifier
174 | .size(dotSize)
175 | .scale(scale), color = color.copy(alpha = alpha))
176 | }
177 |
178 | /**
179 | * Renders a [Dot] that "flashes". The dot will fade in and out in a loop.
180 | * The dot will always be visible somewhat (with very low alpha) even when fully
181 | * faded out.
182 | *
183 | * @param dotSize The size of the dot to be rendered.
184 | * Defaults to 12.dp
185 | * @param color The Color of the dot.
186 | * Defaults to the current value of LocalContentColor.
187 | * @param flashDuration how long one "flash" of the dot should take.
188 | * Defaults to 300 milliseconds.
189 | * @param timeBetweenFlashes how long to "pause" between flashes.
190 | * Defaults to 0 milliseconds (no pause).
191 | * @param delayStart how long to "wait" before the initial flash.
192 | * Defaults to 0 milliseconds (no delay).
193 | * @param transition an [InfiniteTransition] to use for animating the dot.
194 | * This is useful if you want to combine this animation with others
195 | */
196 | @Composable
197 | fun FlashingDot(
198 | dotSize: Dp = 12.dp,
199 | color: Color = LocalContentColor.current,
200 | flashDuration: Int = 300,
201 | timeBetweenFlashes: Int = 0,
202 | delayStart: Int = 0,
203 | transition: InfiniteTransition = rememberInfiniteTransition()) {
204 |
205 | val alpha: Float by transition.dotAnimator(
206 | minValue = 0.25f, // You could set this to 0 to fully fade out the dot
207 | maxValue = 1f,
208 | duration = flashDuration,
209 | timeBetween = timeBetweenFlashes,
210 | delayStart = delayStart)
211 |
212 | Dot(modifier = Modifier.size(dotSize), color = color.copy(alpha = alpha))
213 | }
214 |
215 | /**
216 | * Renders a [Dot] that "bounces" up and down.
217 | *
218 | * @param dotSize The size of the dot to be rendered.
219 | * Defaults to 12.dp
220 | * @param color The Color of the dot.
221 | * Defaults to the current value of LocalContentColor.
222 | * @param bounceHeight - How high (in pixels) the dot should "bounce" (move upward).
223 | * Defaults to 10.
224 | * @param bounceDuration how long one "bounce" of the dot should take.
225 | * Defaults to 300 milliseconds.
226 | * @param timeBetweenBounces how long to "pause" between bounces.
227 | * Defaults to 0 milliseconds (no pause).
228 | * @param delayStart how long to "wait" before the initial bounce.
229 | * Defaults to 0 milliseconds (no delay).
230 | * @param transition an [InfiniteTransition] to use for animating the dot.
231 | * This is useful if you want to combine this animation with others
232 | */
233 | @Composable
234 | fun BouncingDot(
235 | dotSize: Dp = 12.dp,
236 | color: Color = LocalContentColor.current,
237 | bounceHeight: Float = 10f,
238 | bounceDuration: Int = 300,
239 | timeBetweenBounces: Int = 0,
240 | delayStart: Int = 0,
241 | transition: InfiniteTransition = rememberInfiniteTransition()) {
242 |
243 | val offset: Float by transition.dotAnimator(
244 | minValue = 0f,
245 | maxValue = bounceHeight,
246 | duration = bounceDuration,
247 | timeBetween = timeBetweenBounces,
248 | delayStart = delayStart)
249 |
250 | Dot(modifier = Modifier
251 | .size(dotSize)
252 | .offset(y = -offset.dp), color = color)
253 | }
254 |
255 |
256 | @Preview()
257 | @Composable
258 | fun PulsingPreview() {
259 | ComposeButtonsTheme {
260 | LoadingIndicator()
261 | }
262 | }
263 |
264 | @Preview
265 | @Composable
266 | fun FlashingPreview() {
267 | ComposeButtonsTheme {
268 | LoadingIndicator(type = LoadingIndicatorTypes.Flashing)
269 | }
270 | }
271 |
272 | @Preview
273 | @Composable
274 | fun BouncingPreview() {
275 | ComposeButtonsTheme {
276 | LoadingIndicator(type = LoadingIndicatorTypes.Bouncing)
277 | }
278 | }
279 |
280 |
--------------------------------------------------------------------------------