Skip to content

Commit

Permalink
Merge pull request #7 from canopas/feature/customize-showcase-content
Browse files Browse the repository at this point in the history 
Customize showcase content
  • Loading branch information
@cp-radhika-s
cp-radhika-s authored Mar 8, 2022
2 parents 81727de + 5925fde commit 7117840
Show file tree
Hide file tree
Showing 13 changed files with 270 additions and 196 deletions.
17 changes: 0 additions & 17 deletions .idea/deploymentTargetDropDown.xml
View file

This file was deleted.

2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ An android library to highlight different features of the app built using Jetpac

The library is inspired by the [TapTargetView](https://github.com/KeepSafe/TapTargetView) that is useful for legacy views.

<img src="https://github.com/canopas/Intro-showcase-view/blob/master/docs/assets/intro1.gif" height="540" />
<img src="https://github.com/canopas/Intro-showcase-view/blob/master/docs/assets/main_intro.gif" height="540" />

## Configuration

Expand Down
165 changes: 136 additions & 29 deletions app/src/main/java/com/canopas/campose/showcase/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
Expand All @@ -38,17 +41,15 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.canopas.campose.showcase.ui.theme.JetTapTargetTheme
import com.canopas.campose.showcase.ui.theme.ThemeColor
import com.canopas.lib.showcase.IntroShowCase
import com.canopas.lib.showcase.ShowcaseProperty
import com.canopas.lib.showcase.IntroShowcaseTargets
import com.canopas.lib.showcase.ShowcaseStyle

class MainActivity : ComponentActivity() {
Expand All @@ -70,10 +71,8 @@ class MainActivity : ComponentActivity() {

@Composable
fun ShowcaseSample() {
val context = LocalContext.current

val targets = remember {
mutableStateMapOf<String, ShowcaseProperty>()
mutableStateMapOf<String, IntroShowcaseTargets>()
}
var showAppIntro by remember {
mutableStateOf(true)
Expand All @@ -90,9 +89,38 @@ fun ShowcaseSample() {
navigationIcon = {
IconButton(onClick = {},
modifier = Modifier.onGloballyPositioned { coordinates ->
targets["back"] = ShowcaseProperty(
targets["back"] = IntroShowcaseTargets(
4, coordinates,
"Go back!!", "You can go back by clicking here."
style = ShowcaseStyle.Default.copy(
backgroundColor = Color(0xFF7C99AC), // specify color of background
backgroundAlpha = 0.98f, // specify transparency of background
targetCircleColor = Color.White // specify color of target circle
),
content = {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painterResource(id = R.drawable.go_back),
contentDescription = null,
modifier = Modifier
.size(100.dp)
.padding(top = 10.dp)
)
Column {
Text(
text = "Go back!!",
color = Color.White,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "You can go back by clicking here.",
color = Color.White,
fontSize = 16.sp
)
}

}
}
)
}) {
Icon(Icons.Filled.ArrowBack, contentDescription = "Search")
Expand All @@ -102,9 +130,34 @@ fun ShowcaseSample() {
IconButton(
onClick = {},
modifier = Modifier.onGloballyPositioned { coordinates ->
targets["search"] = ShowcaseProperty(
3, coordinates,
"Search anything!!", "You can search anything by clicking here."
targets["search"] = IntroShowcaseTargets(
2, coordinates,
style = ShowcaseStyle.Default.copy(
backgroundColor = Color(0xFF9AD0EC), // specify color of background
backgroundAlpha = 0.98f, // specify transparency of background
targetCircleColor = Color.White // specify color of target circle
),
content = {
Column {
Image(
painterResource(id = R.drawable.search_example),
contentDescription = null,
modifier = Modifier.size(100.dp)
)

Text(
text = "Search anything!!",
color = Color.Black,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "You can search anything by clicking here.",
color = Color.Black,
fontSize = 16.sp
)
}
}
)
},
) {
Expand All @@ -117,9 +170,39 @@ fun ShowcaseSample() {
FloatingActionButton(
onClick = {},
modifier = Modifier.onGloballyPositioned { coordinates ->
targets["email"] = ShowcaseProperty(
targets["email"] = IntroShowcaseTargets(
1, coordinates,
"Check emails", "Click here to check/send emails"
style = ShowcaseStyle.Default.copy(
backgroundColor = Color(0xFF1C0A00), // specify color of background
backgroundAlpha = 0.98f, // specify transparency of background
targetCircleColor = Color.White // specify color of target circle
),
// specify the content to show to introduce app feature
content = {
Column {
Text(
text = "Check emails",
color = Color.White,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "Click here to check/send emails",
color = Color.White,
fontSize = 16.sp
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
painterResource(id = R.drawable.right_arrow),
contentDescription = null,
modifier = Modifier
.size(80.dp)
.align(Alignment.End),
tint = Color.White
)
}

}
)
},
backgroundColor = ThemeColor,
Expand Down Expand Up @@ -164,26 +247,35 @@ fun ShowcaseSample() {
.align(Alignment.TopCenter)
.clip(CircleShape)
.onGloballyPositioned { coordinates ->
targets["profile"] = ShowcaseProperty(
targets["profile"] = IntroShowcaseTargets(
0, // specify index to show feature in order
coordinates, // specify coordinates of target
"User profile", // specify text to show as title
"Click here to update your profile", // specify text to show as description
// ShowcaseStyle is optional
style = ShowcaseStyle.Default.copy(
titleStyle = TextStyle(
color = Color.Black,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
), // specify style for title
descriptionStyle = TextStyle(
color = Color.Black,
fontSize = 16.sp
), // specify style for description
backgroundColor = Color(0xFFFFCC80), // specify color of background
backgroundAlpha = 0.98f, // specify transparency of background
targetCircleColor = Color.White // specify color of target circle
)
),
content = {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.padding(top = 20.dp)
) {
Text(
text = "User profile",
color = Color.White,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "Click here to update your profile",
color = Color.White,
fontSize = 16.sp
)
}
}
)
}
)
Expand All @@ -195,9 +287,24 @@ fun ShowcaseSample() {
.align(Alignment.BottomStart)
.padding(start = 16.dp, bottom = 16.dp)
.onGloballyPositioned { coordinates ->
targets["follow"] = ShowcaseProperty(
2, coordinates,
"Follow me", "Click here to follow"
targets["follow"] = IntroShowcaseTargets(
3, coordinates,
content = {
Column {
Text(
text = "Follow me",
color = Color.White,
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Text(
text = "Click here to follow",
color = Color.White,
fontSize = 16.sp
)
}

}
)
}
) {
Expand Down
Binary file added app/src/main/res/drawable/go_back.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/main/res/drawable/right_arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/main/res/drawable/search_example.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/assets/intro1.gif
View file
Binary file not shown.
Binary file modified docs/assets/intro2.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/intro3.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/main_intro.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7117840

Please sign in to comment.