├── .idea
    ├── .gitignore
    ├── vcs.xml
    ├── misc.xml
    └── modules.xml
├── README.md
├── SignUpWithGoogle-Button-JetpackCompose.iml
├── ic_google_logo.xml
└── GoogleButton.kt


/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | 


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectRootManager">
4 |     <output url="file://$PROJECT_DIR$/out" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sign Up with Google Button - JetpackCompose | Kotlin
 2 | 
 3 | <p align="center">
 4 |   <a href="https://youtu.be/ZECjMRINJkk" align="center">YouTube Video Tutorial</a>
 5 | </p>
 6 | <p align="center">
 7 |   <img src="https://i.postimg.cc/HxcLCR9b/Sign-up-with-google-button.png" href="https://youtu.be/ZECjMRINJkk">
 8 | </p>
 9 | 
10 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/SignUpWithGoogle-Button-JetpackCompose.iml" filepath="$PROJECT_DIR$/SignUpWithGoogle-Button-JetpackCompose.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/SignUpWithGoogle-Button-JetpackCompose.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="JAVA_MODULE" version="4">
 3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
 4 |     <exclude-output />
 5 |     <content url="file://$MODULE_DIR$">
 6 |       <sourceFolder url="file://$MODULE_DIR$" isTestSource="false" />
 7 |     </content>
 8 |     <orderEntry type="inheritedJdk" />
 9 |     <orderEntry type="sourceFolder" forTests="false" />
10 |   </component>
11 | </module>


--------------------------------------------------------------------------------
/ic_google_logo.xml:
--------------------------------------------------------------------------------
 1 | <vector xmlns:android="http://schemas.android.com/apk/res/android"
 2 |     android:width="24dp"
 3 |     android:height="24dp"
 4 |     android:viewportWidth="24"
 5 |     android:viewportHeight="24">
 6 |   <path
 7 |       android:pathData="M21.7428,12.2242a11.534,11.534 0,0 0,-0.158 -1.883h-9.375v3.742h5.368a4.622,4.622 0,0 1,-1.991 2.97L15.5868,19.5422h3.2A9.734,9.734 0,0 0,21.7428 12.2242Z"
 8 |       android:fillColor="#4285f4"/>
 9 |   <path
10 |       android:pathData="M12.2098,21.9562A9.483,9.483 0,0 0,18.7888 19.5412l-3.2,-2.489a6.006,6.006 0,0 1,-3.377 0.962,5.946 5.946,0 0,1 -5.583,-4.115h-3.3v2.564A9.941,9.941 0,0 0,12.2098 21.9562Z"
11 |       android:fillColor="#34a853"/>
12 |   <path
13 |       android:pathData="M6.6268,13.9002a5.777,5.777 0,0 1,-0.315 -1.9,6 6,0 0,1 0.315,-1.9L6.6268,7.5372h-3.3a9.84,9.84 0,0 0,-1.07 4.463,9.84 9.84,0 0,0 1.07,4.463Z"
14 |       android:fillColor="#fbbc05"/>
15 |   <path
16 |       android:pathData="M12.2098,5.9862a5.4,5.4 0,0 1,3.816 1.493l2.837,-2.837a9.518,9.518 0,0 0,-6.654 -2.6,9.941 9.941,0 0,0 -8.885,5.492l3.3,2.564A5.946,5.946 0,0 1,12.2098 5.9862Z"
17 |       android:fillColor="#ea4335"/>
18 | </vector>
19 | 


--------------------------------------------------------------------------------
/GoogleButton.kt:
--------------------------------------------------------------------------------
 1 | import androidx.compose.animation.animateContentSize
 2 | import androidx.compose.animation.core.LinearOutSlowInEasing
 3 | import androidx.compose.animation.core.tween
 4 | import androidx.compose.foundation.BorderStroke
 5 | import androidx.compose.foundation.clickable
 6 | import androidx.compose.foundation.layout.Arrangement
 7 | import androidx.compose.foundation.layout.Row
 8 | import androidx.compose.foundation.layout.Spacer
 9 | import androidx.compose.foundation.layout.height
10 | import androidx.compose.foundation.layout.padding
11 | import androidx.compose.foundation.layout.width
12 | import androidx.compose.material3.CircularProgressIndicator
13 | import androidx.compose.material3.Icon
14 | import androidx.compose.material3.MaterialTheme
15 | import androidx.compose.material3.Surface
16 | import androidx.compose.material3.Text
17 | import androidx.compose.runtime.Composable
18 | import androidx.compose.runtime.getValue
19 | import androidx.compose.runtime.mutableStateOf
20 | import androidx.compose.runtime.remember
21 | import androidx.compose.runtime.setValue
22 | import androidx.compose.ui.Alignment
23 | import androidx.compose.ui.Modifier
24 | import androidx.compose.ui.graphics.Color
25 | import androidx.compose.ui.graphics.Shape
26 | import androidx.compose.ui.res.painterResource
27 | import androidx.compose.ui.unit.dp
28 | 
29 | @Composable
30 | fun GoogleButton(
31 |     modifier: Modifier = Modifier,
32 |     text: String = "Sign Up with Google",
33 |     loadingText: String = "Creating Account...",
34 |     icon: Int = R.drawable.ic_google_logo,
35 |     shape: Shape = MaterialTheme.shapes.medium,
36 |     borderColor: Color = Color.LightGray,
37 |     backgroundColor: Color = MaterialTheme.colorScheme.surface,
38 |     progressIndicatorColor: Color = MaterialTheme.colorScheme.primary,
39 |     onClicked: () -> Unit,
40 | ) {
41 |     var clicked by remember { mutableStateOf(false) }
42 |     Surface(
43 |         modifier = modifier
44 |             .clip(MaterialTheme.shapes.medium)
45 |             .clickable {
46 |                 clicked = !clicked
47 |                 onClicked()
48 |             },
49 |         shape = shape,
50 |         border = BorderStroke(width = 1.dp, color = borderColor),
51 |         color = backgroundColor
52 |     ) {
53 |         Row(
54 |             modifier = Modifier
55 |                 .padding(
56 |                     start = 12.dp,
57 |                     end = 16.dp,
58 |                     top = 12.dp,
59 |                     bottom = 12.dp
60 |                 )
61 |                 .animateContentSize(
62 |                     animationSpec = tween(
63 |                         durationMillis = 300,
64 |                         easing = LinearOutSlowInEasing
65 |                     )
66 |                 ),
67 |             verticalAlignment = Alignment.CenterVertically,
68 |             horizontalArrangement = Arrangement.Center
69 |         ) {
70 |             Icon(
71 |                 painter = painterResource(id = icon),
72 |                 contentDescription = "Google Button",
73 |                 tint = Color.Unspecified
74 |             )
75 |             Spacer(modifier = Modifier.width(8.dp))
76 |             Text(text = if (clicked) loadingText else text)
77 |             if (clicked) {
78 |                 Spacer(modifier = Modifier.width(16.dp))
79 |                 CircularProgressIndicator(
80 |                     modifier = Modifier
81 |                         .height(16.dp)
82 |                         .width(16.dp),
83 |                     strokeWidth = 2.dp,
84 |                     color = progressIndicatorColor
85 |                 )
86 |             }
87 |         }
88 |     }
89 | }
90 | 


--------------------------------------------------------------------------------