Integrating Braintree dropin UI into Kotlin Jetpack Compose - kotlin

I'm trying to convert the android/java dropin UI code from here https://developer.paypal.com/braintree/docs/guides/drop-in/setup-and-integration#starting-drop-in into a jetpack compose app. So far I have
#Composable
fun Account(user: FinUser) {
val context = LocalContext.current
val customerToken = user.userData["customerToken"] as String
val dropInRequest = DropInRequest()
.clientToken(customerToken)
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartIntentSenderForResult()
) {
print("pause here")
}
val dropInIntent = dropInRequest.getIntent(context)
val dropInPendingIntent = PendingIntent.getBroadcast(
context, 200, dropInIntent,
PendingIntent.FLAG_UPDATE_CURRENT
)
Column(){
Column(
Modifier
.padding(top = 0.dp)
.clickable { launchDropInUi(
dropInHintLauncher=dropInHintLauncher,
dropInPendingIntent=dropInPendingIntent) }) {
Divider(color = Color.LightGray, thickness = 1.dp)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp, 10.dp)
) {
Column() {
Text("Payment", color = Color.Gray)
Text("*********9999", color = Color.Black)
}
Spacer(modifier = Modifier.fillMaxWidth())
}
Divider(color = Color.LightGray, thickness = 1.dp)
}
}
}
fun launchDropInUi(dropInHintLauncher: ManagedActivityResultLauncher<IntentSenderRequest, ActivityResult>, dropInPendingIntent: PendingIntent){
dropInHintLauncher.launch(
IntentSenderRequest.Builder(dropInPendingIntent).build()
)
}
When I click on my row there's no dropin UI popup but it does register the click and runs over the launchDropInUi function.

I found the issue. I needed to use
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartActivityForResult()
)
Giving
#Composable
fun Account(user: FinUser) {
val context = LocalContext.current
val customerToken = user.userData["customerToken"] as String
val dropInRequest = DropInRequest()
.clientToken(customerToken)
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartActivityForResult()
){ result: ActivityResult ->
if (result.resultCode == Activity.RESULT_OK) {
// you will get result here in result.data
val data: DropInResult? = result.data?.getParcelableExtra(DropInResult.EXTRA_DROP_IN_RESULT)
}else{
print("throw error popup")
}
}
val dropInIntent = dropInRequest.getIntent(context)
Column(){
Column(
Modifier
.padding(top = 0.dp)
.clickable { launchDropInUi(
dropInHintLauncher =dropInHintLauncher,
dropInIntent =dropInIntent) }) {
Divider(color = Color.LightGray, thickness = 1.dp)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp, 10.dp)
) {
Column() {
Text("Payment", color = Color.Gray)
Text("*********9999", color = Color.Black)
}
Spacer(modifier = Modifier.fillMaxWidth())
}
Divider(color = Color.LightGray, thickness = 1.dp)
}
}
}
fun launchDropInUi(dropInHintLauncher: ManagedActivityResultLauncher<Intent, ActivityResult>, dropInIntent: Intent){
dropInHintLauncher.launch(dropInIntent)
}

Related

How to load bitmap Images in a List faster, Using jetpack compose Android

I am trying to load a list of object in a column using jetpack compose.
The problem is the image is making screen lag.
Here's my code - single list item composable function.
fun SoulProfilePreviewSingleItem(
soul: Souls,
soulWinningViewModel: SoulWinningViewModel,
onClick: () -> Unit
) {
val lazyListState = rememberLazyListState()
/* val localImage = if (soul.localImage.isNotBlank())
rememberImagePainter(getBase64StringToImage(soul.localImage)) else null*/
LaunchedEffect(key1 = soulWinningViewModel.nurtureVsFollowUpTabIndex.value) {
lazyListState.animateScrollToItem(0)
// if (soul.localImage.isNotBlank()){
// }
}
val isManaging = soulWinningViewModel.isManagingList.value
var isDeleted by remember {
mutableStateOf(false)
}
val setVisibility: (Boolean) -> Unit = {
isDeleted = it
}
AnimatedVisibility(
visible = isDeleted.not() &&
if (soulWinningViewModel.userIsSearchingFor.value.isNotEmpty() && isManaging.not())
soul.name.contains(soulWinningViewModel.userIsSearchingFor.value, true) ||
soul.followUpActions.toString()
.contains(soulWinningViewModel.userIsSearchingFor.value, true) else
true
) {
with(soul) {
Column {
Box(
modifier = Modifier
.height(60.dp)
.background(MaterialTheme.colorScheme.background)
.fillMaxWidth(),
contentAlignment = Alignment.BottomEnd
) {
Row(
Modifier
.fillMaxSize(),//.clickable { onClick() },
verticalAlignment = Alignment.CenterVertically
) {
Row(
verticalAlignment = Alignment.Top,
modifier = Modifier
.padding(start = brc_DP_small)
.padding(bottom = 6.dp, top = 6.dp)
) {
/*if (soul.localImage.isNotBlank()) {
GlideImage(
model = ,
// Crop, Fit, Inside, FillHeight, FillWidth, None
contentScale = ContentScale.Crop,
// shows an image with a circular revealed animation.
)
Log.e("BITMAP","onResourceReady test")
val image = loadPicture(url = soul.localImage, defaultImage = R.drawable.ic_brc_logo).value
image?.let { img->
Image(
// Can crash this
bitmap =img.asImageBitmap(),
contentDescription = null,
modifier = Modifier
.clip(RoundedCornerShape(50))
.size(30.dp),
contentScale = ContentScale.Crop
)
}
}*/
if (soul.localImage.isNotBlank()) {
// val imageLoader = rememberImagePainter(getBase64StringToImage(soul.localImage))
Image(
// painter = imageLoader
// Can crash this
bitmap = (
getBase64StringToImage(soul.localImage).asImageBitmap()
),
contentDescription = null,
modifier = Modifier
.clip(RoundedCornerShape(50))
.size(30.dp),
contentScale = ContentScale.Crop
)
} else {
Image(
// Can crash this
painterResource(id = R.drawable.ic_brc_logo),
contentDescription = null,
modifier = Modifier
.clip(RoundedCornerShape(50))
.size(30.dp),
contentScale = ContentScale.Crop
)
}
}
Column(
modifier = Modifier
.padding(top = brc_DP_small)
.weight(1f)
.fillMaxWidth()
.fillMaxHeight()
.padding(start = brc_DP_smaller),
verticalArrangement = Arrangement.SpaceBetween
) {
Column(
modifier = Modifier
.weight(1f)
.fillMaxSize()
) {
// This is the place where signle soul is getting showed......
Text(
text = name,
style = if (isManaging.not()) MaterialTheme.typography.labelSmall.copy(
fontWeight = FontWeight(500),
letterSpacing = 0.7.sp
)
else MaterialTheme.typography.labelSmall
.copy(
fontSize = 10.sp
),
modifier = Modifier,
maxLines = 1,
)
if (isManaging.not()) {
Text(
text = SimpleDateFormat(
"dd-MMM-yyyy",
Locale.UK
).format(
createdOn
),
style = MaterialTheme.typography.bodySmall.copy(fontSize = 9.sp),
color = Color.Gray,
modifier = Modifier
)
}
}
if (isBrcMember) {
Text(
text = "BRC Member",
style = MaterialTheme.typography.labelSmall.copy(
fontSize = 7.sp,
fontStyle = FontStyle.Italic
),
color = brc_blue_color,
modifier = Modifier.padding(bottom = brc_DP_smallest)
)
}
}
}
var externClick by remember {
mutableStateOf(false)
}
Column(modifier = Modifier.padding(brc_DP_small)) {
AddSoulFollowUpActionButton(
soul = soul,
soulWinningViewModel = soulWinningViewModel,
visible = soulWinningViewModel.nurtureVsFollowUpTabIndex.value == 1,
externClick = externClick,
onFinished = { externClick = false }
) {
setVisibility(it)
}
}
//TODO:Check Click area ...
Row(modifier = Modifier.fillMaxSize()) {
Spacer(
modifier = Modifier
.fillMaxSize()
.weight(1.4f)
.clickable(
interactionSource = MutableInteractionSource(),
indication = null
) { onClick() })
if (soulWinningViewModel.nurtureVsFollowUpTabIndex.value == 1 || isManaging) {
Spacer(
modifier = Modifier
.fillMaxSize()
.weight(0.6f)
.clickable(
interactionSource = MutableInteractionSource(),
indication = null
) { externClick = !externClick })
}
}
}
Spacer(
modifier = Modifier
.padding(start = 28.dp)
.fillMaxWidth() //.then(if (isManaging.not()) Modifier.width(150.dp) else Modifier.fillMaxWidth())
.height(0.3.dp)
.background(Color.LightGray)
)
}
}
}
}
caller of list composable function.
forEach {
SoulProfilePreviewSingleItem(
soul = it,
soulWinningViewModel
) {
soulWinningViewModel.currentSoul.value = it
navController.navigate(route = SoulWinningRoutes.PROFILE)
}
}
Whenever I am trying to show Image() of my soul object I am getting glitches and my screens takes more time to load itself.
I am storing image as string in local room database and trying to retrieve it back converting it to bitmapImage.
Code for conversation.
fun getBase64StringToImage(base64String: String): Bitmap {
val decodedString: ByteArray = Base64.decode(base64String, Base64.DEFAULT)
val decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.size)
return decodedByte
// this is taking a lot of time and making my Ui performance dull.
}
Is there any way I can achieve this functionality with good performance. Like loading Image in separate scope or anything else.
I have already tried using rememberImagePainter and Glide Coil. rememberImagePainter making my performance worst.
Please feel free to give me suggestions, I am still in learning stage.
Thanks in advance.

#Update ROOM Database using Jetpack Compose

I'm am making a note app using kotlin jetpack compose. Currently, I'm working on an update feature. I'm trying to update a note in ROOM Database but it doesn't update. I already read and follow some tutorials from documentation and youtube, however, I still haven't solved it.
Here is my code:
Data
#RequiresApi(Build.VERSION_CODES.O)
#Entity(tableName = "KeepNotesTable")
data class NoteData (
#PrimaryKey
val id: String = UUID.randomUUID().toString(),
#ColumnInfo(name = "noteTitle")
var title: String,
#ColumnInfo(name = "noteDescription")
var description: String,
#ColumnInfo(name = "noteDate")
val date: Date = Date.from(Instant.now())
)
DAO
#Update(onConflict = OnConflictStrategy.REPLACE)
suspend fun updateNote(note: NoteData)
Repository
suspend fun updateNote(note: NoteData) = noteDatabaseDao.updateNote(note)
ViewModel
fun updateNote(note: NoteData) = viewModelScope.launch { repository.updateNote(note) }
Navigation
#RequiresApi(Build.VERSION_CODES.O)
#Composable
fun ScreenNavigation(noteViewModel: NoteViewModel = viewModel()) {
val noteList = noteViewModel.noteList.collectAsState().value
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Screen.MainScreen.name) {
composable(Screen.MainScreen.name){
MainScreen(navController = navController, noteList = noteList, removeNote = { noteViewModel.removeNote(it) })}
composable(Screen.AddNoteScreen.name){
AddNoteScreen(navController = navController, addNote = { noteViewModel.addNote(it) })
}
composable(Screen.UpdateNoteScreen.name + "/{noteId}",
arguments = listOf(navArgument(name = "noteId") {type = NavType.StringType})
) { backStackEntry ->
UpdateNoteScreen(
noteList = noteList,
navController = navController,
updateNote = { noteViewModel.updateNote(it) },
NoteId = backStackEntry.arguments?.getString("noteId")
)
}
}
}
UpdateNoteScreen
#RequiresApi(Build.VERSION_CODES.O)
#Composable
fun UpdateNoteScreen(
noteList: List<NoteData>,
navController: NavController,
updateNote: (NoteData) -> Unit,
NoteId: String?,
) {
val fetchNote = noteList.filter { note ->
note.id == NoteId
}
val note = fetchNote.first()
var noteTitle = note.title
var noteDescription = note.description
var newTitle = ""
var newDescription = ""
var title by remember {
mutableStateOf(noteTitle + newTitle)
}
var description by remember {
mutableStateOf(noteDescription + newDescription)
}
val context = LocalContext.current
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.primaryVariant) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
Card(
contentColor = MaterialTheme.colors.primary,
backgroundColor = MaterialTheme.colors.background,
elevation = 8.dp,
modifier = Modifier
.fillMaxWidth()
.padding(start = 10.dp, end = 10.dp, top = 20.dp, bottom = 20.dp)) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.padding(start = 15.dp, end = 15.dp, top = 10.dp, bottom = 40.dp)) {
InputText(
modifier = Modifier.fillMaxWidth(),
text = title,
label = "",
onTextChange = {
newTitle = it
title = newTitle
}
)
Spacer(modifier = Modifier.height(10.dp))
InputText(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(0.5f),
text = description,
label = "",
maxLine = 1000,
imeAction = ImeAction.None,
onTextChange = {
newDescription = it
description = newDescription
}
)
}
}
Row() {
DiscardButton(text = "Cancel", onClick = {
navController.navigate(route = Screen.MainScreen.name)
})
Spacer(modifier = Modifier.width(10.dp))
SaveButton(text = "Update", onClick = {
if (title.isNotEmpty() && description.isNotEmpty()) {
updateNote(NoteData(title = title, description = description))
navController.navigate(route = Screen.MainScreen.name)
Toast.makeText(context, "Successfully Updated", Toast.LENGTH_SHORT).show()
} else {
Toast.makeText(context, "Fill the Title and Description", Toast.LENGTH_SHORT).show()
}
})
}
}
}
}
I reviewed my code again and noticed that an id parameter is needed to pass in the updateNote() to find and update the specific note. Therefore,
updateNoteScreen
updateNote(NoteData(title = title, description = description)
should be
updateNote(NoteData(id = note.id, title = title, description = description)

How to implement Compose Navigation Arguments

I'm practicing Jetpack compose navigation, currently I'm stuck at passing arguments, so the correct information can be displayed when clicked.
I'm trying to navigate from this Destination, MenuScreen;
#Composable
fun HomeScreen(onHomeCardClick: () -> Unit) {
HomeContentScreen(onHomeCardClick = onHomeCardClick)
}
#Composable
fun HomeContentScreen(
modifier: Modifier = Modifier,
onHomeCardClick: () -> Unit
) {
Column(
modifier
.verticalScroll(rememberScrollState())
.padding(vertical = 16.dp)) {
HomeQuote()
....
}
}
To this destination, MenuInfoScreen;
#Composable
fun HomeInfoScreen(){
WelcomeText()
HomeInfoDetails()
}
#Composable
fun WelcomeText() {
Text(
text = "Welcome, to Home Information",
style = MaterialTheme.typography.h3,
modifier = Modifier.padding(horizontal = 12.dp, vertical = 18.dp)
)
}
#Composable
fun HomeInfoDetails(
homeInfo: HomeInfo
) {
Card(
modifier = Modifier
.padding(10.dp)
.clip(CircleShape),
elevation = 10.dp,
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
) {
Image(
painter = painterResource(id = homeInfo.homeInfoImageId),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(topEnd = 4.dp, bottomEnd = 4.dp)),
contentScale = ContentScale.Fit
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = homeInfo.title,
style = MaterialTheme.typography.h3
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = homeInfo.description,
style = MaterialTheme.typography.h5
)
}
}
}
Here's the model I'm trying to follow, HomeInfoModel;
object HomeInfoModel {
val homeInfoModelList = listOf(
HomeInfo(
id = 1,
title = "Monty",
sex = "Male",
age = 14,
description = "Monty enjoys chicken treats and cuddling while watching Seinfeld.",
homeInfoImageId = R.drawable.ab1_inversions
),
.....
)
}
Here's the my NavHost;
NavHost(
navController = navController,
startDestination = Home.route,
modifier = modifier
) {
// builder parameter will be defined here as the graph
composable(route = Home.route) {
HomeScreen(
onHomeCardClick = {}
)
}
....
composable(route = HomeInfoDestination.route) {
HomeInfoScreen()
}
}
}
And my Destinations file;
object Home : KetoDestination {
override val route = "home"
}
....
object HomeInfoDestination : KetoDestination{
override val route = "homeInfo"
}
I know this is a lot and I'm a bit off, but please I've been stuck here for more than a week now. Any little information willl surely come handy.
And Of Course very much appreciated.
Thanks for your help in advance.
You should extract the arguments from the NavBackStackEntry that is available in the lambda of the composable() function.
You can read more in the official android docs https://developer.android.com/jetpack/compose/navigation#nav-with-args

Jetpack compose scrollable table

I need to have a component that scrolls vertically and horizontally.
Here is what I did so far:
#Composable
fun Screen() {
val scope = rememberCoroutineScope()
val scrollOffset = remember {
mutableStateOf(value = 0F)
}
LazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(space = 16.dp)
) {
items(10) {
SimpleRow(
onScrollOffsetChange = {
scrollOffset.value = it
}
)
}
}
}
#Composable
private fun SimpleRow(
onScrollOffsetChange: (Float) -> Unit,
) {
val lazyRowState = rememberLazyListState()
LazyRow(
modifier = Modifier.fillMaxWidth(),
state = lazyRowState
) {
item {
Text(
text = "firstText"
)
}
for (i in 1..30) {
item {
Text(text = "qwerty")
}
}
}
}
When anyone of these SimpleRow is scrolled I want to scroll all of the SimpleRows together.
And I do not know how many SimpleRows I have because they came from our server.
Is there any kind of composable or trick that can do it for me?
You can use multiple rows inside a column that scrolls horizontally and vertically, like this:
#Composable
fun MainContent() {
val scrollStateHorizontal = rememberScrollState()
val scrollStateVertical = rememberScrollState()
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(state = scrollStateVertical)
.horizontalScroll(state = scrollStateHorizontal)
) {
repeat(40){ c ->
Row {
repeat(40){ r ->
Item("col: $c | row: $r")
}
}
}
}
}
#Composable
fun Item(text: String) {
Text(
modifier = Modifier
.padding(5.dp)
.background(Color.Gray),
text = text,
color = Color.White
)
}

How can select one out of 4 composabel in compose?

Suppose I have four Button or Composable in a row, I want to select one and deselect the other, not like the radio button but behave exactly like that.
#Composable
fun ButtonSet(modifier: Modifier = Modifier) {
Row(
modifier = modifier
.padding(start = 60.dp, end = 60.dp)
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly,
) {
val button1 = remember { mutableStateOf(false) }
val button2 = remember { mutableStateOf(false) }
val button3 = remember { mutableStateOf(false) }
val button4 = remember { mutableStateOf(false) }
val buttonList = listOf<Any>(button1, button2, button3, button4)
val activeButton = remember {
mutableStateOf(true)
}
if (button1.value || button2.value || button3.value || button4.value) {
activeButton.value = false
} else if (button1.value) {
button1.value = !button1.value
} else if (button2.value) {
button2.value = !button2.value
} else if (button3.value) {
button3.value = !button3.value
} else if (button4.value) {
button4.value = !button4.value
}
GoalkeeperButton(button1.value)
GoalkeeperButton(button2.value)
GoalkeeperButton(button3.value)
GoalkeeperButton(button4.value)
}
}
#Composable
fun GoalkeeperButton(
active: Boolean = false,
#SuppressLint("ModifierParameter") modifier: Modifier = Modifier,
) {
val buttonState = remember {
mutableStateOf(active)
}
if (!buttonState.value) {
ButtonUnActive() {}
} else {
ButtonActive()
}
RadioButton(selected =, onClick = { /*TODO*/ })
}
#Composable
fun ButtonActive(active: Boolean = true) {
val button = painterResource(id = R.drawable.bttn_pressed)
val gloves = painterResource(id = R.drawable.blue_hands)
val buttonState = remember {
mutableStateOf(active)
}
Column(
modifier = Modifier
.wrapContentWidth()
.height(130.dp)
) {
Image(
painter = gloves,
contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier = Modifier
.size(width = 135.dp, height = 70.dp)
)
Image(
painter = button,
contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier = Modifier
.clickable(onClick = {})
.size(width = 107.dp, height = 65.dp)
)
}
}
#Composable
fun ButtonUnActive(
state: Boolean = false,
onclick: () -> Unit,
) {
val button = painterResource(id = R.drawable.bttn)
var unActiveState by remember {
mutableStateOf(state)
}
Image(
painter = button,
contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier = Modifier
.clickable(
onClick = {
onclick()
},
)
.size(width = 107.dp, height = 65.dp)
)
}
This is what I tried, but I know it's very bad code, please suggest a better and best way.