Skip to content

Commit 086f7c6

Browse files
cp-radhika-scp-radhika-s
authored
Dismiss target fixes (#17)
* Refactoring * Refactoring * Add dismissOnClickOutside flag * Add dismiss animation
1 parent 7b4437a commit 086f7c6

File tree

5 files changed

+562
-485
lines changed

5 files changed

+562
-485
lines changed

‎app/src/main/java/com/canopas/campose/showcase/MainActivity.kt‎

Lines changed: 180 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,20 @@ import androidx.compose.ui.unit.dp
4646
import androidx.compose.ui.unit.sp
4747
import com.canopas.campose.showcase.ui.theme.JetTapTargetTheme
4848
import com.canopas.campose.showcase.ui.theme.ThemeColor
49-
import com.canopas.lib.showcase.IntroShowCaseScaffold
49+
import com.canopas.lib.showcase.IntroShowCase
50+
import com.canopas.lib.showcase.IntroShowCaseScope
5051
import com.canopas.lib.showcase.ShowcaseStyle
5152

5253
class MainActivity : ComponentActivity() {
5354
override fun onCreate(savedInstanceState: Bundle?) {
5455
super.onCreate(savedInstanceState)
56+
5557
setContent {
5658
JetTapTargetTheme {
5759
// A surface container using the 'background' color from the theme
5860
Surface(
59-
modifier = Modifier.fillMaxSize(),
61+
modifier = Modifier
62+
.fillMaxSize(),
6063
color = MaterialTheme.colors.background
6164
) {
6265
ShowcaseSample()
@@ -72,8 +75,9 @@ fun ShowcaseSample() {
7275
mutableStateOf(true)
7376
}
7477

75-
IntroShowCaseScaffold(
78+
IntroShowCase(
7679
showIntroShowCase = showAppIntro,
80+
dismissOnClickOutside = false,
7781
onShowCaseCompleted = {
7882
//App Intro finished!!
7983
showAppIntro = false
@@ -87,49 +91,13 @@ fun ShowcaseSample() {
8791
backgroundColor = Color.Transparent,
8892
elevation = 0.dp,
8993
navigationIcon = {
90-
IconButton(
91-
onClick = {},
92-
modifier = Modifier.introShowCaseTarget(
93-
index = 4,
94-
style = ShowcaseStyle.Default.copy(
95-
backgroundColor = Color(0xFF7C99AC), // specify color of background
96-
backgroundAlpha = 0.98f, // specify transparency of background
97-
targetCircleColor = Color.White // specify color of target circle
98-
),
99-
content = {
100-
Row(verticalAlignment = Alignment.CenterVertically) {
101-
Image(
102-
painterResource(id = R.drawable.go_back),
103-
contentDescription = null,
104-
modifier = Modifier
105-
.size(100.dp)
106-
.padding(top = 10.dp)
107-
)
108-
Column {
109-
Text(
110-
text = "Go back!!",
111-
color = Color.White,
112-
fontSize = 24.sp,
113-
fontWeight = FontWeight.Bold
114-
)
115-
Text(
116-
text = "You can go back by clicking here.",
117-
color = Color.White,
118-
fontSize = 16.sp
119-
)
120-
}
121-
}
122-
},
123-
)
124-
) {
125-
Icon(Icons.Filled.ArrowBack, contentDescription = "Search")
126-
}
94+
BackButton()
12795
},
12896
actions = {
12997
IconButton(
13098
onClick = {},
13199
modifier = Modifier.introShowCaseTarget(
132-
index = 2,
100+
index = 0,
133101
style = ShowcaseStyle.Default.copy(
134102
backgroundColor = Color(0xFF9AD0EC), // specify color of background
135103
backgroundAlpha = 0.98f, // specify transparency of background
@@ -164,141 +132,196 @@ fun ShowcaseSample() {
164132
)
165133
},
166134
floatingActionButton = {
167-
FloatingActionButton(
168-
onClick = {},
169-
modifier = Modifier.introShowCaseTarget(
170-
index = 1,
135+
FloatingMailButton()
136+
}
137+
) {
138+
Content(Modifier.padding(it))
139+
}
140+
}
141+
}
142+
143+
144+
@Composable
145+
fun IntroShowCaseScope.FloatingMailButton() {
146+
FloatingActionButton(
147+
onClick = {},
148+
modifier = Modifier.introShowCaseTarget(
149+
index = 1,
150+
style = ShowcaseStyle.Default.copy(
151+
backgroundColor = Color(0xFF1C0A00), // specify color of background
152+
backgroundAlpha = 0.98f, // specify transparency of background
153+
targetCircleColor = Color.White // specify color of target circle
154+
),
155+
// specify the content to show to introduce app feature
156+
content = {
157+
Column {
158+
Text(
159+
text = "Check emails",
160+
color = Color.White,
161+
fontSize = 24.sp,
162+
fontWeight = FontWeight.Bold
163+
)
164+
Text(
165+
text = "Click here to check/send emails",
166+
color = Color.White,
167+
fontSize = 16.sp
168+
)
169+
Spacer(modifier = Modifier.height(10.dp))
170+
Icon(
171+
painterResource(id = R.drawable.right_arrow),
172+
contentDescription = null,
173+
modifier = Modifier
174+
.size(80.dp)
175+
.align(Alignment.End),
176+
tint = Color.White
177+
)
178+
}
179+
}
180+
),
181+
backgroundColor = ThemeColor,
182+
contentColor = Color.White,
183+
elevation = FloatingActionButtonDefaults.elevation(6.dp)
184+
) {
185+
Icon(
186+
Icons.Filled.Email,
187+
contentDescription = "Email"
188+
)
189+
}
190+
191+
}
192+
193+
@Composable
194+
fun IntroShowCaseScope.BackButton() {
195+
IconButton(
196+
onClick = {},
197+
modifier = Modifier.introShowCaseTarget(
198+
index = 4,
199+
style = ShowcaseStyle.Default.copy(
200+
backgroundColor = Color(0xFF7C99AC), // specify color of background
201+
backgroundAlpha = 0.98f, // specify transparency of background
202+
targetCircleColor = Color.White // specify color of target circle
203+
),
204+
content = {
205+
Row(verticalAlignment = Alignment.CenterVertically) {
206+
Image(
207+
painterResource(id = R.drawable.go_back),
208+
contentDescription = null,
209+
modifier = Modifier
210+
.size(100.dp)
211+
.padding(top = 10.dp)
212+
)
213+
Column {
214+
Text(
215+
text = "Go back!!",
216+
color = Color.White,
217+
fontSize = 24.sp,
218+
fontWeight = FontWeight.Bold
219+
)
220+
Text(
221+
text = "You can go back by clicking here.",
222+
color = Color.White,
223+
fontSize = 16.sp
224+
)
225+
}
226+
}
227+
},
228+
)
229+
) {
230+
Icon(Icons.Filled.ArrowBack, contentDescription = "Search")
231+
}
232+
}
233+
234+
@Composable
235+
fun IntroShowCaseScope.Content(modifier: Modifier) {
236+
Box(modifier = modifier.fillMaxSize()) {
237+
Box(modifier = Modifier.fillMaxHeight(0.3f)) {
238+
239+
Column(
240+
Modifier
241+
.align(Alignment.BottomStart)
242+
.fillMaxWidth()
243+
.padding(16.dp)
244+
.height(90.dp),
245+
verticalArrangement = Arrangement.Center,
246+
horizontalAlignment = Alignment.CenterHorizontally
247+
) {
248+
249+
Text(
250+
text = "Intro Showcase view", fontWeight = FontWeight.Bold,
251+
fontSize = 24.sp, color = ThemeColor
252+
)
253+
Text(
254+
text = "This is an example of Intro Showcase view",
255+
fontSize = 20.sp, color = Color.Black, textAlign = TextAlign.Center
256+
)
257+
258+
}
259+
260+
Image(
261+
painter = painterResource(id = R.drawable.ic_unknown_profile),
262+
contentDescription = null,
263+
modifier = Modifier
264+
.align(Alignment.TopCenter)
265+
.clip(CircleShape)
266+
.introShowCaseTarget(
267+
index = 2, // specify index to show feature in order
268+
// ShowcaseStyle is optional
171269
style = ShowcaseStyle.Default.copy(
172-
backgroundColor = Color(0xFF1C0A00), // specify color of background
270+
backgroundColor = Color(0xFFFFCC80), // specify color of background
173271
backgroundAlpha = 0.98f, // specify transparency of background
174272
targetCircleColor = Color.White // specify color of target circle
175273
),
176-
// specify the content to show to introduce app feature
177274
content = {
178-
Column {
275+
Column(
276+
horizontalAlignment = Alignment.CenterHorizontally,
277+
modifier = Modifier
278+
.fillMaxWidth()
279+
.padding(top = 20.dp)
280+
) {
179281
Text(
180-
text = "Check emails",
282+
text = "User profile",
181283
color = Color.White,
182284
fontSize = 24.sp,
183285
fontWeight = FontWeight.Bold
184286
)
185287
Text(
186-
text = "Click here to check/send emails",
288+
text = "Click here to update your profile",
187289
color = Color.White,
188290
fontSize = 16.sp
189291
)
190-
Spacer(modifier = Modifier.height(10.dp))
191-
Icon(
192-
painterResource(id = R.drawable.right_arrow),
193-
contentDescription = null,
194-
modifier = Modifier
195-
.size(80.dp)
196-
.align(Alignment.End),
197-
tint = Color.White
198-
)
199292
}
200293
}
201-
),
202-
backgroundColor = ThemeColor,
203-
contentColor = Color.White,
204-
elevation = FloatingActionButtonDefaults.elevation(6.dp)
205-
) {
206-
Icon(
207-
Icons.Filled.Email,
208-
contentDescription = "Email"
209294
)
210-
}
211-
}
212-
) {
213-
Box(modifier = Modifier.fillMaxSize()) {
214-
Box(modifier = Modifier.fillMaxHeight(0.3f)) {
215-
216-
Column(
217-
Modifier
218-
.align(Alignment.BottomStart)
219-
.fillMaxWidth()
220-
.padding(16.dp)
221-
.height(90.dp),
222-
verticalArrangement = Arrangement.Center,
223-
horizontalAlignment = Alignment.CenterHorizontally
224-
) {
225-
226-
Text(
227-
text = "Intro Showcase view", fontWeight = FontWeight.Bold,
228-
fontSize = 24.sp, color = ThemeColor
229-
)
230-
Text(
231-
text = "This is an example of Intro Showcase view",
232-
fontSize = 20.sp, color = Color.Black, textAlign = TextAlign.Center
233-
)
234-
235-
}
295+
)
296+
}
236297

237-
Image(
238-
painter = painterResource(id = R.drawable.ic_unknown_profile),
239-
contentDescription = null,
240-
modifier = Modifier
241-
.align(Alignment.TopCenter)
242-
.clip(CircleShape)
243-
.introShowCaseTarget(
244-
index = 0, // specify index to show feature in order
245-
// ShowcaseStyle is optional
246-
style = ShowcaseStyle.Default.copy(
247-
backgroundColor = Color(0xFFFFCC80), // specify color of background
248-
backgroundAlpha = 0.98f, // specify transparency of background
249-
targetCircleColor = Color.White // specify color of target circle
250-
),
251-
content = {
252-
Column(
253-
horizontalAlignment = Alignment.CenterHorizontally,
254-
modifier = Modifier
255-
.fillMaxWidth()
256-
.padding(top = 20.dp)
257-
) {
258-
Text(
259-
text = "User profile",
260-
color = Color.White,
261-
fontSize = 24.sp,
262-
fontWeight = FontWeight.Bold
263-
)
264-
Text(
265-
text = "Click here to update your profile",
266-
color = Color.White,
267-
fontSize = 16.sp
268-
)
269-
}
270-
}
298+
Button(
299+
onClick = {},
300+
modifier = Modifier
301+
.align(Alignment.BottomStart)
302+
.padding(start = 16.dp, bottom = 16.dp)
303+
.introShowCaseTarget(
304+
index = 3,
305+
content = {
306+
Column {
307+
Text(
308+
text = "Follow me",
309+
color = Color.White,
310+
fontSize = 24.sp,
311+
fontWeight = FontWeight.Bold
271312
)
272-
)
273-
}
274-
275-
Button(
276-
onClick = {},
277-
modifier = Modifier
278-
.align(Alignment.BottomStart)
279-
.padding(start = 16.dp, bottom = 16.dp)
280-
.introShowCaseTarget(
281-
index = 3,
282-
content = {
283-
Column {
284-
Text(
285-
text = "Follow me",
286-
color = Color.White,
287-
fontSize = 24.sp,
288-
fontWeight = FontWeight.Bold
289-
)
290-
Text(
291-
text = "Click here to follow",
292-
color = Color.White,
293-
fontSize = 16.sp
294-
)
295-
}
296-
}
297-
)
298-
) {
299-
Text(text = "Follow")
300-
}
301-
}
313+
Text(
314+
text = "Click here to follow",
315+
color = Color.White,
316+
fontSize = 16.sp
317+
)
318+
}
319+
}
320+
)
321+
) {
322+
Text(text = "Follow")
302323
}
303324
}
325+
304326
}
327+

0 commit comments

Comments
 (0)