Forem: Mobile innovation Network

CMPToast: Toasts for Compose Multiplatform Projects

Mobile innovation Network — Mon, 30 Sep 2024 10:45:52 +0000

🍞️ CMPToast is a Compose Multiplatform library that simplifies the creation of toasts in your mobile applications. CMPToast stands out for a number of reasons:

Cross-platform support: Works on both Android and iOS, making it perfect for Compose Multiplatform projects.
Customization: Easily tailor toasts with properties like background color, text size, and position.
Lightweight: CMPToast is designed to be light and efficient, so it won't affect your app's performance.
Simple integration: Just add the dependency, and you're good to go!

🚀 Getting Started with CMPToast

To get started with CMPToast, simply add the following dependency to your project's build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:cmptoast:1.0.1")
}

🖥️ Platforms Supported

Android 🤖
iOS 🍎

🎨 Customizing CMPToast

Let's dive into some practical examples of how to customize your toasts in CMPToast.

⏳ Short Toast
To show a toast with a short duration, you can use the following:

showToast(
    message = "This is Short Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    duration = ToastDuration.Short
)

⏳ Long Toast
If you need the toast to stay on the screen longer, here's how to show a long-duration toast:

showToast(
    message = "This is Long Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    duration = ToastDuration.Long
)

📍 Top Toast
To position the toast at the top of the screen, use the gravity property:

showToast(
    message = "This is Top Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    gravity = ToastGravity.Top
)

🎯 Center Toast
To center the toast on the screen:

showToast(
    message = "This is Center Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    gravity = ToastGravity.Center
)

🎨 Colored Toast
If you want to give your toast a custom color, you can easily do so:

showToast(
    message = "This is Colored Toast",
    backgroundColor = Color(0xFF27AD9D)
)

⚙️ Customizable Properties

CMPToast provides several properties that allow you to fully customize your toast notifications.

message (String): The message text that will be displayed in the toast.
gravity (ToastGravity): Specifies where the toast will appear on the screen. You can position it at the top, center, or bottom using values like ToastGravity.Top, ToastGravity.Center, and ToastGravity.Bottom.
backgroundColor (Color): Allows you to customize the background color of the toast.
textColor (Color): Lets you change the color of the message text.
duration (ToastDuration): Controls how long the toast will be displayed. You can choose between ToastDuration.Short and ToastDuration.Long.
padding (ToastPadding?): Optional padding for the toast content to adjust the spacing.
textSize (TextUnit): Sets the size of the message text.
topPadding (Int): Adds extra padding to the top of the toast for further positioning customization.
bottomPadding (Int): Adds extra padding to the bottom of the toast.
cornerRadius (Int?): Optionally rounds the corners of the toast by specifying a corner radius.

Checkout the complete code on Github:
[https://github.com/Chaintech-Network/CMPToast]

Head over to the repository to try it out and contribute to the project!

Feel free to give it a star ⭐ and explore how CMPToast can elevate your user experience with customizable toast notifications in Compose Multiplatform projects.

Connect with us 👇

[https://www.linkedin.com/showcase/mobile-innovation-network/]

[https://github.com/Chaintech-Network]

CountryCodePicker in Compose Multiplatform for Android and iOS

Mobile innovation Network — Thu, 20 Jun 2024 11:06:03 +0000

A CMPCountryCodePicker is country picker library for Compose Multiplatform for Android and iOS.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:cmp-country-code-picker:1.0.0")
}

Usage

@Composable
fun CountryPickerBasicTextField(
    mobileNumber: String,
    defaultCountryCode: String,
    onMobileNumberChange: (String) -> Unit,
    onCountrySelected: (country: CountryDetails) -> Unit,
    modifier: Modifier = Modifier,
    defaultPaddingValues: PaddingValues = PaddingValues(4.dp, 6.dp),
    showCountryFlag: Boolean = true,
    showCountryPhoneCode: Boolean = true,
    showCountryName: Boolean = false,
    showCountryCode: Boolean = false,
    showArrowDropDown: Boolean = true,
    spaceAfterCountryFlag: Dp = 8.dp,
    spaceAfterCountryPhoneCode: Dp = 6.dp,
    spaceAfterCountryName: Dp = 6.dp,
    spaceAfterCountryCode: Dp = 6.dp,
    countryFlagSize: Dp = 26.dp,
    showVerticalDivider: Boolean = true,
    spaceAfterVerticalDivider: Dp = 4.dp,
    verticalDividerColor: Color = MaterialTheme.colorScheme.onSurface,
    verticalDividerHeight: Dp = 26.dp,
    countryPhoneCodeTextStyle: TextStyle = TextStyle(),
    countryNameTextStyle: TextStyle = TextStyle(),
    countryCodeTextStyle: TextStyle = TextStyle(),
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable() (() -> Unit)? = null,
    placeholder: @Composable() (() -> Unit)? = null,
    trailingIcon: @Composable() (() -> Unit)? = null,
    prefix: @Composable() (() -> Unit)? = null,
    suffix: @Composable() (() -> Unit)? = null,
    supportingText: @Composable() (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = RoundedCornerShape(12.dp),
    colors: TextFieldColors = OutlinedTextFieldDefaults.colors(),
    focusedBorderThickness: Dp = 2.dp,
    unfocusedBorderThickness: Dp = 1.dp,
    onDone: () -> Unit = {},
)

mobileNumber: The mobile number to be shown in the text field.
onMobileNumberChange: The callback that is triggered when the input service updates the mobile number. An updated mobile number comes as a parameter of the callback.
onCountrySelected: The callback function is triggered each time a country is selected within the picker. Additionally, it is also invoked when the picker is first displayed on the screen with the default selected country.
modifier: The Modifier to be applied to this text field.
defaultPaddingValues: The spacing values to apply internally between the container and the content
showCountryFlag: Determines whether to show the country flag within the picker.
showCountryPhoneCode: Determines whether to show the country phone code within the picker.
showCountryName: Determines whether to show the country name within the picker.
showCountryCode: Determines whether to show the country code within the picker.
showArrowDropDown: Determines whether to show the arrow drop-down icon within the picker.
spaceAfterCountryFlag: The space to add after the country flag.
spaceAfterCountryPhoneCode: The space to add after the country phone code.
spaceAfterCountryName: The space to add after the country name.
spaceAfterCountryCode: The space to add after the country code.
countryFlagSize: The size of the country flag.
showVerticalDivider: Determines whether to show the vertical divider within the picker.
spaceAfterVerticalDivider: The space to add after the vertical divider.
verticalDividerColor: The color of the vertical divider.
verticalDividerHeight: The height of the vertical divider.
countryPhoneCodeTextStyle: The text style for the country phone code.
countryNameTextStyle: The text style for the country name.
countryCodeTextStyle: The text style for the country code.
enabled: Controls the enabled state of this text field. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
readOnly: Controls the editable state of the text field. When true, the text field cannot be modified. However, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that a user cannot edit.
textStyle: The style to be applied to the input text. Defaults to LocalTextStyle.
label: The optional label to be displayed inside the text field container.
placeholder: The optional placeholder to be displayed when the text field is in focus and the input text is empty.
trailingIcon: The optional trailing icon to be displayed at the end of the text field container.
prefix: The optional prefix to be displayed before the input text in the text field.
suffix: The optional suffix to be displayed after the input text in the text field.
supportingText: The optional supporting text to be displayed below the text field.
isError: Indicates if the text field’s current value is in error.
visualTransformation: Transforms the visual representation of the input value.
singleLine: When true, this text field becomes a single - horizontally scrolling text field instead of wrapping onto multiple lines.
maxLines: The maximum height in terms of maximum number of visible lines.
minLines: The minimum height in terms of minimum number of visible lines.
interactionSource: The MutableInteractionSource representing the stream of Interactions for this text field.
shape: Defines the shape of this text field’s border.
colors: TextFieldColors that will be used to resolve the colors used for this text field in different
focusedBorderThickness: Represents the border thickness for focused state.
unfocusedBorderThickness: Represents the border thickness for unfocused state.
onDone: The callback is triggered when the user clicks the Done button on the keyboard, as the default IME action is set to Done.

Example

@Composable
fun CountryPickerBasicText() {
    val selectedCountryState: MutableState<CountryDetails?> = remember {
        mutableStateOf(null)
    }
    var mobileNumber by remember {
        mutableStateOf("")
    }

    CountryPickerBasicTextField(
        mobileNumber = mobileNumber,
        defaultCountryCode = "ad",
        onMobileNumberChange = {
            mobileNumber = it
        },
        onCountrySelected = {
            selectedCountryState.value = it
        },
        modifier = Modifier.fillMaxWidth(),
        defaultPaddingValues = PaddingValues(6.dp),
        showCountryFlag = true,
        showCountryPhoneCode = true,
        showCountryName = false,
        showCountryCode = false,
        showArrowDropDown = true,
        spaceAfterCountryFlag = 8.dp,
        spaceAfterCountryPhoneCode = 6.dp,
        spaceAfterCountryName = 6.dp,
        spaceAfterCountryCode = 6.dp,
        label = {
            Text(text = "Mobile Number")
        },
        focusedBorderThickness = 2.dp,
        unfocusedBorderThickness = 1.dp,
        shape = RoundedCornerShape(10.dp),
        verticalDividerColor = Color(0XFFDDDDDD),
        colors = OutlinedTextFieldDefaults.colors(
            focusedBorderColor = Color(0XFFDDDDDD),
            unfocusedBorderColor = Color(0XFFDDDDDD)
        )
    )
}

Screenshot

Conclusion

CMPCountryCodePicker is a versatile and user-friendly tool designed to simplify the selection of country codes in Android and iOS applications. Its customizable options and robust performance make it an ideal solution for developers seeking to streamline their application’s country code selection process. Whether for a small project or a large-scale application, CMPCountryCodePicker stands out as a reliable and efficient choice.

https://github.com/ChainTechNetwork/CMPCountryCodePicker.git

Happy coding ❤

Connect with us 👇

GitHub

Introducing Compose Multiplatform Media Player: Your Go-To Solution for Seamless Media Playback

Mobile innovation Network — Mon, 20 May 2024 12:02:41 +0000

In today’s digital age, media consumption is an integral part of our lives. Whether it’s watching videos or browsing through reels, users expect a seamless and immersive experience. However, building a media player that works seamlessly across different platforms can be a daunting task. That’s where Compose Multiplatform Media Player comes to the rescue!

What is Compose Multiplatform Media Player?
Compose Multiplatform Media Player is a powerful media player library designed specifically for Compose Multiplatform projects. It provides developers with the tools they need to effortlessly integrate video playback and reel viewing into their applications, all while maintaining a consistent experience across both iOS and Android platforms.

Key Features

Cross-Platform Compatibility
With Compose Multiplatform Media Player, you can rest assured that your media player will work flawlessly on both iOS and Android platforms within Compose Multiplatform projects. Say goodbye to platform-specific headaches and hello to a seamless development experience.

Video Playback
Easily incorporate video playback functionality into your app with high performance and reliability.

Reel Viewing
Experience reel viewing like never before with support for both horizontal and vertical scrolling. Whether your users prefer to swipe through content or scroll vertically, our media player ensures a smooth and intuitive experience.

Customizable Controls
Take control of your media player’s behavior with extensive customization options. Enable or disable pause/resume functionality, toggle the visibility of the seek bar, and display playback time duration according to your app’s requirements.

Getting Started

Getting started with Compose Multiplatform Media Player is easy! Simply add the library as a dependency in your project’s build.gradle.kts file, and you’re good to go:



commonMain.dependencies {
   implementation("network.chaintech:compose-multiplatform-media-player:1.0.5")
}

Once you’ve added the dependency, you can start using the library’s composable functions to integrate video playback and reel viewing into your app:



// Video Playback
VideoPlayerView(
 modifier = Modifier.fillMaxSize(),
 url = videoUrl
)

// Reel Viewing
ReelsPlayerView(
 modifier = Modifier.fillMaxSize(),
 urls = videoUrlArray
)

Customization Options
Our media player library offers a wide range of customization options to suit your app’s needs:

modifier: Modify the layout and appearance of the media player.
url: Provide the URL of the video to be played.
urls: Pass an array of URLs for reel viewing.
playerConfig: You can configure various aspects of the player appearance and behavior.
enablePauseResume: Enable or disable pause/resume functionality.
showSeekBar: Toggle the visibility of the seek bar.
showDuration: Control the display of playback time duration.
thumbColor: Customize color of the seek bar thumb.
activeTrackColor: Customize the color of the seek bar’s active track, representing the portion of the media content that has already been played.
inactiveTrackColor: Customize the color of the seek bar’s inactive track, representing the remaining portion of the media content yet to be played.
textColor: Customization of the color of the duration text displayed alongside the seek bar.
seekBarBottomPadding: Allows configuring the bottom padding for the seek bar control, ensuring proper alignment within the UI layout.
playIcon & pauseIcon: Customize the play and pause button icons.
reelVerticalScrolling: Manage vertical and horizontal scrolling in reel viewing.
autoHideControl & controlHideInterval: Enable the automatic hiding of controls after a specified time interval, enhancing user experience by reducing clutter on the interface when controls are not in use.



VideoPlayerView(modifier = Modifier.fillMaxSize(),
                url = videoUrl,
                playerConfig = PlayerConfig(
                    enablePauseResume = true,
                    showSeekBar = true,
                    showDuration = true,
                    thumbColor = Color.Red,
                    activeTrackColor = Color.Red,
                    inactiveTrackColor = Color.White,
                    textColor = Color.White,
                    seekBarBottomPadding = 10.dp,
                    playIcon = Res.drawable.icn_play,
                    pauseIcon = Res.drawable.icn_pause,
                    pauseResumeIconSize = 40.dp,
                    autoHideControl = true,
                    controlHideInterval = 5
                )
            )



VideoPlayerView(modifier = Modifier.fillMaxSize(),
                url = videoUrl,
                playerConfig = PlayerConfig(
                    enablePauseResume = false,
                    showSeekBar = false,
                    showDuration = false
                )
            )



ReelsPlayerView(modifier = Modifier.fillMaxSize(),

                url = videoUrlArray,

                playerConfig = PlayerConfig(

                    enablePauseResume = true,

                    showSeekBar = true,

                    reelVerticalScrolling = true

                )

            )



ReelsPlayerView(modifier = Modifier.fillMaxSize(),

                url = videoUrlArray,

                playerConfig = PlayerConfig(

                    enablePauseResume = false,

                    showSeekBar = false,

                    reelVerticalScrolling = false

                )

            )

Conclusion

With Compose Multiplatform Media Player, building a seamless media playback experience for your app has never been easier. Whether you’re a seasoned developer or just getting started with Compose Multiplatform, our library empowers you to create engaging and immersive media experiences that delight your users.
So why wait? Give Compose Multiplatform Media Player a try today and take your app’s media playback to the next level!

https://github.com/ChainTechNetwork/ComposeMultiplatformMediaPlayer.git

Happy coding ❤

Connect with us 👇

Easy WheelDateTimePicker — Compose Multiplatform(KMP)

Mobile innovation Network — Mon, 20 May 2024 11:32:35 +0000

Easy Date Picker is a Kotlin Multiplatform library for selecting date and time in your Android, iOS & Desktop App. It offers a customizable UI to use in your multiplatform projects.

Installation

Add the dependency to your build.gradle.kts file:



commonMain.dependencies {

    implementation("network.chaintech:kmp-date-time-picker:1.0.3")

}

WheelDatePickerView



@Composable

fun WheelDatePickerBottomSheet() {

    var showDatePicker by remember { mutableStateOf(false) }

    var selectedDate by remember { mutableStateOf("") }

if (showDatePicker) {
    WheelDatePickerView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 22.dp, bottom = 26.dp),
        showDatePicker = showDatePicker,
        title = "DUE DATE",
        doneLabel = "Done",
        titleStyle = TextStyle(
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF333333),
        ),
        doneLabelStyle = TextStyle(
            fontSize = 16.sp,
            fontWeight = FontWeight(600),
            color = Color(0xFF007AFF),
        ),
        dateTextColor = Color(0xff007AFF),
        selectorProperties = WheelPickerDefaults.selectorProperties(
            borderColor = Color.LightGray,
        ),
        rowCount = 5,
        height = 180.dp,
        dateTextStyle = TextStyle(
            fontWeight = FontWeight(600),
        ),
        dragHandle = {
            HorizontalDivider(
                modifier = Modifier.padding(top = 8.dp).width(50.dp).clip(CircleShape),
                thickness = 4.dp,
                color = Color(0xFFE8E4E4)
            )
        },
        shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp),
        dateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
        onDoneClick = {
            selectedDate = it.toString()
            showDatePicker = false
        },
        onDismiss = {
            showDatePicker = false
        }
    )
}

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Column(
        modifier = Modifier
            .height(200.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = {
                showDatePicker = true
            },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
        ) {
            Text(
                text = "Show Date Picker",
                modifier = Modifier.background(Color.Transparent)
                    .padding(horizontal = 12.dp, vertical = 12.dp),
                fontSize = 16.sp
            )
        }
        Text(
            text = selectedDate,
            modifier = Modifier
                .padding(top = 10.dp)
                .fillMaxWidth(),
            textAlign = TextAlign.Center
        )
    }
}



}

WheelDateTimePickerView



@Composable

fun WheelDateTimePickerDialog() {

    var showDatePicker by remember { mutableStateOf(false) }

    var selectedDate by remember { mutableStateOf("") }

if (showDatePicker) {
    WheelDateTimePickerView(
        modifier = Modifier.padding(top = 18.dp, bottom = 10.dp).fillMaxWidth(),
        showDatePicker = showDatePicker,
        titleStyle = TextStyle(
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF333333),
        ),
        doneLabelStyle = TextStyle(
            fontSize = 16.sp,
            fontWeight = FontWeight(600),
            color = Color(0xFF007AFF),
        ),
        selectorProperties = WheelPickerDefaults.selectorProperties(
            borderColor = Color.LightGray,
        ),
        timeFormat = TimeFormat.AM_PM,
        dateTextColor = Color(0xff007AFF),
        rowCount = 5,
        height = 170.dp,
        dateTextStyle = TextStyle(
            fontWeight = FontWeight(600),
        ),
        onDoneClick = {
            selectedDate = dateTimeToString(it, "yyyy-MM-dd hh:mm a")
            showDatePicker = false
        },
        dateTimePickerView = DateTimePickerView.DIALOG_VIEW,
        onDismiss = {
            showDatePicker = false
        }
    )
}

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Column(
        modifier = Modifier
            .height(200.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = {
                showDatePicker = true
            },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
        ) {
            Text(
                text = "Show Date Time Picker",
                modifier = Modifier.background(Color.Transparent)
                    .padding(horizontal = 12.dp, vertical = 12.dp),
                fontSize = 16.sp
            )
        }
        Text(
            text = selectedDate,
            modifier = Modifier
                .padding(top = 10.dp)
                .fillMaxWidth(),
            textAlign = TextAlign.Center
        )
    }
}



}

WheelTimePickerView



@Composable

fun WheelTimePickerBottomSheet() {

    var showTimePicker by remember { mutableStateOf(false) }

    var selectedTime by remember { mutableStateOf("") }

if (showTimePicker) {
    WheelTimePickerView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 22.dp, bottom = 26.dp),
        showTimePicker = showTimePicker,
        titleStyle = TextStyle(
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF333333),
        ),
        doneLabelStyle = TextStyle(
            fontSize = 16.sp,
            fontWeight = FontWeight(600),
            color = Color(0xFF007AFF),
        ),
        textColor = Color(0xff007AFF),
        timeFormat = TimeFormat.AM_PM,
        selectorProperties = WheelPickerDefaults.selectorProperties(
            borderColor = Color.LightGray,
        ),
        rowCount = 5,
        height = 170.dp,
        textStyle = TextStyle(
            fontWeight = FontWeight(600),
        ),
        dateTimePickerView = DateTimePickerView.BOTTOM_SHEET_VIEW,
        dragHandle = {
            HorizontalDivider(
                modifier = Modifier.padding(top = 8.dp).width(50.dp).clip(CircleShape),
                thickness = 4.dp,
                color = Color(0xFFE8E4E4)
            )
        },
        shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp),
        onDoneClick = {
            selectedTime = timeToString(it, "hh:mm a")
            showTimePicker = false
        },
        onDismiss = {
            showTimePicker = false
        }
    )
}

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Column(
        modifier = Modifier.fillMaxSize().height(200.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = {
                showTimePicker = true
            },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
        ) {
            Text(
                text = "Show Time Picker",
                modifier = Modifier.background(Color.Transparent)
                    .padding(horizontal = 12.dp, vertical = 12.dp),
                fontSize = 16.sp
            )
        }
        Text(
            text = selectedTime,
            style = MaterialTheme.typography.titleMedium,
            color = Color.Black,
            textAlign = TextAlign.Center,
            modifier = Modifier
        )
    }
}



}

Conclusion

Efficient and user-friendly, Easy Wheel Date Time Picker simplifies date and time selection with intuitive controls, enhancing user experience and productivity seamlessly.

https://github.com/ChainTechNetwork/compose_multiplatform_date_time_picker.git

Happy coding ❤

Connect with us 👇

QRKit — QRCode Scanning in Compose Multiplatform for Android and iOS

Mobile innovation Network — Mon, 20 May 2024 11:16:11 +0000

QRKit is a Kotlin Multiplatform library for Qr Scan in your Android or iOS App.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:qr-kit:1.0.2")
}

QrScanner :- Add Permissions in Android and iOS

Android : Include this at root level in your AndroidManifest.xml:

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>

iOS : Add below key to the Info.plist in your xcode project:

<key>NSCameraUsageDescription</key><string>$(PRODUCT_NAME) camera description.</string>
<key>NSPhotoLibraryUsageDescription</key><string>$(PRODUCT_NAME)photos description.</string>

Example

QrScanner(
    modifier: Modifier,
    flashlightOn: Boolean,
    launchGallery: Boolean,
    onCompletion: (String) -> Unit,
    onGalleryCallBackHandler: (Boolean) -> Unit,
    onFailure: (String) -> Unit
)

modifier: Modifier for modifying the layout of the QR scanner.
flashlightOn: Boolean indicating whether the flashlight is turned on.
launchGallery: Boolean indicating whether to launch the gallery for selecting images.
onCompletion: Callback invoked when a QR code is successfully scanned.
onGalleryCallBackHandler: Callback invoked to indicate the status of the gallery, whether it's open or closed.
onFailure: Callback invoked when there's a failure during QR code scanning.

Usage

@Composable
fun QrScannerCompose() {
    var qrCodeURL by remember { mutableStateOf("") }
    var startBarCodeScan by remember { mutableStateOf(false) }
    var flashlightOn by remember { mutableStateOf(false) }
    var launchGallery by remember { mutableStateOf(value = false) }
    val snackBarHostState = LocalSnackBarHostState.current
    val coroutineScope = rememberCoroutineScope()

    Box(modifier = Modifier.fillMaxSize().statusBarsPadding()) {
        Column(
            modifier = Modifier
                .background(color = Color.White)
                .windowInsetsPadding(WindowInsets.safeDrawing)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            if (qrCodeURL.isEmpty() && startBarCodeScan) {
                Column(
                    modifier = Modifier
                        .background(color = Color.Black)
                        .fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Box(
                        modifier = Modifier
                            .size(250.dp)
                            .clip(shape = RoundedCornerShape(size = 14.dp))
                            .clipToBounds()
                            .border(2.dp, Color.Gray, RoundedCornerShape(size = 14.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        QrScanner(
                            modifier = Modifier
                                .clipToBounds()
                                .clip(shape = RoundedCornerShape(size = 14.dp)),
                            flashlightOn = flashlightOn,
                            launchGallery = launchGallery,
                            onCompletion = {
                                qrCodeURL = it
                                startBarCodeScan = false
                            },
                            onGalleryCallBackHandler = {
                                launchGallery = it
                            },
                            onFailure = {
                                coroutineScope.launch {
                                    if (it.isEmpty()) {
                                        snackBarHostState.showSnackbar("Invalid qr code")
                                    } else {
                                        snackBarHostState.showSnackbar(it)
                                    }
                                }
                            }
                        )
                    }

                    Box(
                        modifier = Modifier
                            .padding(start = 20.dp, end = 20.dp, top = 30.dp)
                            .background(
                                color = Color(0xFFF9F9F9),
                                shape = RoundedCornerShape(25.dp)
                            )
                            .height(35.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        Row(
                            modifier = Modifier
                                .padding(vertical = 5.dp, horizontal = 18.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.spacedBy(11.dp)
                        ) {
                            Icon(imageVector = if (flashlightOn) Icons.Filled.FlashOn else Icons.Filled.FlashOff,
                                "flash",
                                modifier = Modifier
                                    .size(24.dp)
                                    .clickable {
                                        flashlightOn = !flashlightOn
                                    })

                            VerticalDivider(
                                modifier = Modifier,
                                thickness = 1.dp,
                                color = Color(0xFFD8D8D8)
                            )

                            Image(
                                painter = painterResource(Res.drawable.ic_gallery_icon),
                                contentDescription = "gallery",
                                contentScale = ContentScale.Fit,
                                modifier = Modifier
                                    .size(24.dp)
                                    .clickable {
                                        launchGallery = true
                                    }
                            )
                        }
                    }
                }
            } else {
                Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Button(
                        onClick = {
                            startBarCodeScan = true
                            qrCodeURL = ""
                        },
                        colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
                    ) {
                        Text(
                            text = "Scan Qr",
                            modifier = Modifier.background(Color.Transparent)
                                .padding(horizontal = 12.dp, vertical = 12.dp),
                            fontSize = 16.sp
                        )
                    }

                    Text(
                        text = qrCodeURL,
                        color = Color.Black,
                        modifier = Modifier.padding(top = 12.dp)
                    )
                }
            }
        }
        if (startBarCodeScan) {
            Icon(
                imageVector = Icons.Filled.Close,
                "Close",
                modifier = Modifier
                    .padding(top = 12.dp, end = 12.dp)
                    .size(24.dp)
                    .clickable {
                        startBarCodeScan = false
                    }.align(Alignment.TopEnd),
                tint = Color.White
            )
        }
    }

}

Tech Stack

Compose Multiplatform
CameraX Jetpack library
ML Kit

Conclusion

Integrating a QR code scanner library enhances functionality, streamlines processes, and improves user experience in your application.

https://github.com/ChainTechNetwork/QRKitComposeMultiplatform.git

Happy coding ❤

Connect with us 👇

QRKit — QRCode Generator in Compose Multiplatform for Android and iOS

Mobile innovation Network — Mon, 20 May 2024 10:51:34 +0000

QRKit is a Kotlin Multiplatform library for Qr Generator in your Android or iOS App.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:qr-kit:1.0.2")
}

Example

QRCodeImage(
    url: String,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DrawScope.DefaultFilterQuality,
    onSuccess: (ImageBitmap) -> Unit = { qrImage -> },
    onFailure: (String) -> Unit = { message -> }
)

url: The URL of the QR code image to be displayed.
contentDescription: A textual description of the image content for accessibility purposes. It's optional.
modifier: Modifier for modifying the layout of the QR code image.
alignment: Alignment of the QR code image within its layout bounds. Default is Alignment.Center.
contentScale: The scale strategy for fitting the QR code image content within its layout bounds. Default is ContentScale.Fit.
alpha: The opacity of the QR code image, ranging from 0.0 (fully transparent) to 1.0 (fully opaque). Default is DefaultAlpha.
colorFilter: A color filter to apply to the QR code image. Default is null.
filterQuality: The quality of the filtering applied to the QR code image. Default is DrawScope.DefaultFilterQuality.
onSuccess: Callback invoked when the QR code image is successfully loaded and decoded, passing the decoded ImageBitmap as a parameter.
onFailure: Callback invoked when there's a failure during loading or decoding the QR code image, passing an error message as a parameter.

Usage

@Composable
fun QrGeneratorCompose(paddingValues: PaddingValues) {
    val scope = rememberCoroutineScope()
    var inputText by rememberSaveable { mutableStateOf("") }
    var isInputTextError by rememberSaveable { mutableStateOf(false) }
    val generatedQRCode = remember { mutableStateOf<ImageBitmap?>(null) }
    val focusManager = LocalFocusManager.current
    val snackBarHostState = LocalSnackBarHostState.current

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
            .padding(horizontal = 16.dp)
            .padding(top = 22.dp)
            .verticalScroll(rememberScrollState())
    ) {
        QRCodeImage(
            url = "https://www.google.com/",
            contentScale = ContentScale.Fit,
            contentDescription = "QR Code",
            modifier = Modifier
                .size(150.dp),
            onSuccess = { qrImage ->

            },
            onFailure = {
                scope.launch {
                    snackBarHostState.showSnackbar("Something went wrong")
                }
            }
        )

        OutlinedTextField(
            value = inputText,
            onValueChange = {
                inputText = it
                isInputTextError = inputText.isBlank()
            },
            label = { Text("Please enter text", style = MaterialTheme.typography.titleMedium) },
            textStyle = MaterialTheme.typography.bodyLarge,
            singleLine = false,
            isError = isInputTextError,
            modifier = Modifier.padding(top = 14.dp).fillMaxWidth(),
            shape = RoundedCornerShape(10),
            trailingIcon = {
                if (isInputTextError) {
                    Icon(
                        imageVector = Icons.Default.Error,
                        contentDescription = "Error",
                        tint = Color.Red
                    )
                }
            }
        )
        Spacer(modifier = Modifier.height(22.dp))
        Button(
            onClick = {
                if (inputText.isBlank()) {
                    isInputTextError = true
                    return@Button
                } else {
                    focusManager.clearFocus()
                    generateQrCode(
                        inputText,
                        onSuccess = { info, qrCode ->
                            generatedQRCode.value = qrCode
                        },
                        onFailure = {
                            scope.launch {
                                snackBarHostState.showSnackbar("Something went wrong")
                            }
                        }
                    )
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(54.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF007AFF)),
            shape = RoundedCornerShape(25)
        ) {
            Text(
                text = "Generate code",
                style = MaterialTheme.typography.bodyLarge,
                color = Color.White
            )
        }
        generatedQRCode.value?.let { qrCode ->
            QRCodeViewer(qrCode)
        }
    }
}

@Composable
fun QRCodeViewer(qrCode: ImageBitmap) {
    var isLoading by rememberSaveable { mutableStateOf(true) }
    LaunchedEffect(Unit) {
        delay(500)
        isLoading = false
    }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
            .padding(vertical = 22.dp),
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(Color.White)
                .border(BorderStroke(3.dp, Color.Black))
                .size(250.dp)
        ) {
            if (isLoading) {
                QRCodeShimmer()
                return@Column
            }

            Image(
                bitmap = qrCode,
                contentScale = ContentScale.Fit,
                contentDescription = "QR Code",
                modifier = Modifier
                    .fillMaxSize(1f)
            )
        }
    }
}

@Composable
fun QRCodeShimmer() {
    val shimmerColorShades = listOf(
        Color.Gray.copy(0.5f),
        Color.LightGray.copy(0.2f),
        Color.Gray.copy(0.5f),
    )

    val transition = rememberInfiniteTransition()
    val transitionAnim by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(
            tween(durationMillis = 1200, easing = FastOutSlowInEasing),
            RepeatMode.Reverse
        )
    )

    val brush = Brush.linearGradient(
        colors = shimmerColorShades,
        start = Offset(10f, 10f),
        end = Offset(transitionAnim, transitionAnim)
    )

    Surface(
        color = Color.Transparent,
        modifier = Modifier.alpha(.3f)
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.size(300.dp)
        ) {
            Spacer(
                modifier = Modifier
                    .fillMaxSize()
                    .background(brush = brush)
            )
            Spacer(
                modifier = Modifier
                    .fillMaxSize(.8f)
                    .background(brush = brush)
            )
        }
    }
}

Final Demo:

Conclusion

Integrating a QR code generator library enhances functionality, streamlines processes, and improves user experience in your application.

https://github.com/ChainTechNetwork/QRKitComposeMultiplatform.git

Happy coding ❤

Connect with us 👇

CMPPreference - Compose Multiplatform

Mobile innovation Network — Mon, 20 May 2024 10:32:44 +0000

A CMPPreference enables shared preference management in Android and iOS apps using Compose Multiplatform, ensuring seamless cross-platform functionality.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:cmp-preference:1.0.0")
}

Usage

Add the following line in onCreate of your Activity class in Android:

class AppActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        AppContext.apply { set(this@AppActivity) }
        ...
    }
}

Example

@Composable
fun App() = AppTheme {
    LocalPreferenceProvider {
        val preference = LocalPreference.current
        var value by remember { mutableStateOf("---") }
        var text by remember { mutableStateOf("") }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .windowInsetsPadding(WindowInsets.safeDrawing)
                .padding(top = 36.dp, start = 16.dp, end = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            TextField(
                value = text,
                onValueChange = { text = it },
                label = { Text("Enter text") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.dp),
            )

            Row(
                modifier = Modifier
                    .padding(top = 30.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Button(
                    modifier = Modifier
                        .height(54.dp)
                        .weight(1f),
                    onClick = {
                        if (text.isNotEmpty())
                            preference.put("ENTER_YOUR_KEY", text)
                    },
                    colors = ButtonDefaults.buttonColors(Color(0xFF007AFF)),
                ) {
                    Text(
                        "Store value",
                        style = MaterialTheme.typography.bodyLarge,
                        fontSize = 17.sp
                    )
                }

                Button(
                    modifier = Modifier
                        .height(54.dp)
                        .weight(1f),
                    onClick = {
                        value = preference.getString("ENTER_YOUR_KEY") ?: "---"
                    },
                    colors = ButtonDefaults.buttonColors(Color(0xFF007AFF)),
                ) {
                    Text(
                        "Get value",
                        style = MaterialTheme.typography.bodyLarge,
                        fontSize = 17.sp
                    )
                }
            }

            Text(
                text = "Stored value: $value",
                style = MaterialTheme.typography.titleLarge,
                textAlign = TextAlign.Center,
                fontSize = 20.sp,
                modifier = Modifier
                    .padding(top = 30.dp)
                    .fillMaxWidth()
            )
        }
    }
}

Screenshot

Github Repo Link

Conlusion

A CMPPreference enables shared preference management in Android and iOS apps using Compose Multiplatform, ensuring seamless cross-platform functionality. By unifying preference handling, developers can deliver a cohesive user experience and streamline app maintenance across both platforms.

Happy coding ❤

Connect with us 👇

SDP-SSP-Compose-Multiplatform

Mobile innovation Network — Wed, 15 May 2024 09:55:09 +0000

A scalable size unit for Compose Multiplatform for Android & iOS App

Installation

Add the dependency to your build.gradle.kts file:



commonMain.dependencies {

    implementation("network.chaintech:sdp-ssp-compose-multiplatform:1.0.4")

}

Usage



@Composable

fun App() = AppTheme {

    Box(

        modifier = Modifier

            .statusBarsPadding()

            .fillMaxSize()

            .background(Color.White),

        contentAlignment = Alignment.Center

    ) {

        Card(

            modifier = Modifier.fillMaxWidth(0.82f),

            shape = RoundedCornerShape(16.sdp),

            colors = CardDefaults.cardColors(Color(0xFFFBF3E8)),

        ) {

            Column(

                modifier = Modifier.fillMaxWidth(),

                horizontalAlignment = Alignment.CenterHorizontally,

            ) {

                Column(

                    modifier = Modifier

                        .fillMaxWidth()

                        .background(Color(0xFF585DDB))

                        .padding(vertical = 16.sdp),

                    horizontalAlignment = Alignment.CenterHorizontally,

                ) {

                    Image(

                        modifier = Modifier

                            .size(80.sdp),

                        painter = painterResource(Res.drawable.ic_user),

                        contentDescription = null,

                        contentScale = ContentScale.FillBounds

                    )

                Text(
                    text = "Emily Dounger",
                    fontSize = 16.ssp,
                    color = Color.White,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(top = 12.sdp)
                )
            }

            Text(
                text = "Hi there \uD83D\uDC4B , We are Boards to share initital Goals and ideas.",
                fontSize = 14.ssp,
                textAlign = TextAlign.Center,
                color = Color.Black,
                lineHeight = 18.ssp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(top = 30.sdp).padding(horizontal = 20.sdp)
            )

            Button(
                onClick = {},
                colors = ButtonDefaults.buttonColors(Color(0xFF007AFF)),
                modifier = Modifier.padding(top = 24.sdp, bottom = 20.sdp)
                    .padding(horizontal = 20.sdp).fillMaxWidth().height(40.sdp)
            ) {
                Text(text = "Say Hello", fontSize = 16.ssp)
            }
        }
    }
}



}

Android

with using dp

with using sdp

iOS

with using dp

with using sdp

Desktop

with using sdp

https://github.com/ChainTechNetwork/sdp-ssp-compose-multiplatform.git

Happy coding ❤

Connect with us 👇

Navigation in Compose Multiplatform with Animations

Mobile innovation Network — Fri, 26 Apr 2024 10:43:29 +0000

Greetings developers! Today, I’ll guide you through designing a bottom navigation bar in Compose Multiplatform using the Navigation component, which includes the Nav Controller and Nav Host.

Let’s get started by adding the following dependency to your Gradle file and rebuilding your app:

implementation "org.jetbrains.androidx.navigation:navigation-compose:2.8.0-alpha02"

Create Navigation.kt class

import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
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.layout.windowInsetsPadding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.NavDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import composemultiplatformmediaplayer.composeapp.generated.resources.Res
import composemultiplatformmediaplayer.composeapp.generated.resources.ic_camera_reels_fill
import composemultiplatformmediaplayer.composeapp.generated.resources.ic_home
import composemultiplatformmediaplayer.composeapp.generated.resources.ic_profile_circle
import network.chaintech.cmpmediaplayer.ui.DetailsView
import network.chaintech.cmpmediaplayer.ui.HomeView
import network.chaintech.cmpmediaplayer.ui.ProfileView
import network.chaintech.cmpmediaplayer.ui.ReelsView
import network.chaintech.cmpmediaplayer.utils.AppConstants
import org.jetbrains.compose.resources.DrawableResource
import org.jetbrains.compose.resources.painterResource

sealed class AppScreen(val route: String) {
    data object Detail : AppScreen("nav_detail")
}

sealed class BottomBarScreen(
    val route: String,
    var title: String,
    val defaultIcon: DrawableResource
) {
    data object Home : BottomBarScreen(
        route = "HOME",
        title = "Home",
        defaultIcon = Res.drawable.ic_home,
    )

    data object Reels : BottomBarScreen(
        route = "REELS",
        title = "Reels",
        defaultIcon = Res.drawable.ic_camera_reels_fill,
    )

    data object Profile : BottomBarScreen(
        route = "PROFILE",
        title = "Profile",
        defaultIcon = Res.drawable.ic_profile_circle,
    )
}

@Composable
fun HomeNav() {
    val navController = rememberNavController()

    NavHostMain(
        navController = navController,
        onNavigate = { routeName ->
            navigateTo(routeName, navController)
        }
    )
}

@Composable
fun NavHostMain(
    navController: NavHostController = rememberNavController(),
    onNavigate: (rootName: String) -> Unit,
) {
    val backStackEntry by navController.currentBackStackEntryAsState()
    val currentScreen = backStackEntry?.destination

    Scaffold(
        topBar = {
            val title = getTitle(currentScreen)
            TopBar(
                title = title,
                canNavigateBack = currentScreen?.route == AppScreen.Detail.route,
                navigateUp = { navController.navigateUp() }
            )
        },
        bottomBar = {
            BottomNavigationBar(navController)
        }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = BottomBarScreen.Home.route,
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding),
            enterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(500)
                )
            },
            exitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(500)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Right,
                    animationSpec = tween(500)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Right,
                    animationSpec = tween(500)
                )
            }
        ) {
            composable(route = BottomBarScreen.Home.route) {
                HomeView(onNavigate = onNavigate)
            }
            composable(route = BottomBarScreen.Reels.route) {
                ReelsView(onNavigate = onNavigate)
            }
            composable(route = BottomBarScreen.Profile.route) {
                ProfileView(onNavigate = onNavigate)
            }
            composable(route = AppScreen.Detail.route) {
                DetailsView(onNavigate = onNavigate)
            }
        }
    }
}

fun getTitle(currentScreen: NavDestination?): String {
    return when (currentScreen?.route) {
        BottomBarScreen.Home.route -> {
            "Home"
        }

        BottomBarScreen.Reels.route -> {
            "Reels"
        }

        BottomBarScreen.Profile.route -> {
            "Profile"
        }

        AppScreen.Detail.route -> {
            "Detail"
        }

        else -> {
            ""
        }
    }
}

fun navigateTo(
    routeName: String,
    navController: NavController
) {
    when (routeName) {
        AppConstants.BACK_CLICK_ROUTE -> {
            navController.popBackStack()
        }

        else -> {
            navController.navigate(routeName)
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(
    title: String,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    modifier: Modifier = Modifier
) {
    TopAppBar(
        title = { Text(title) },
        colors = TopAppBarDefaults.mediumTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer
        ),
        modifier = modifier,
        navigationIcon = {
            if (canNavigateBack) {
                IconButton(onClick = navigateUp) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = "back_button"
                    )
                }
            }
        }
    )
}

@Composable
fun BottomNavigationBar(
    navController: NavHostController,
) {
    val homeItem = BottomBarScreen.Home
    val reelsItem = BottomBarScreen.Reels
    val profileItem = BottomBarScreen.Profile

    val screens = listOf(
        homeItem,
        reelsItem,
        profileItem
    )

    AppBottomNavigationBar(show = navController.shouldShowBottomBar) {
        screens.forEach { item ->
            AppBottomNavigationBarItem(
                icon = item.defaultIcon,
                label = item.title,
                onClick = {
                    navigateBottomBar(navController, item.route)
                },
                selected = navController.currentBackStackEntry?.destination?.route == item.route
            )
        }
    }
}

@Composable
fun AppBottomNavigationBar(
    modifier: Modifier = Modifier,
    show: Boolean,
    content: @Composable (RowScope.() -> Unit),
) {
    Surface(
        color = MaterialTheme.colorScheme.background,
        contentColor = MaterialTheme.colorScheme.onBackground,
        modifier = modifier.windowInsetsPadding(BottomAppBarDefaults.windowInsets)
    ) {
        if (show) {
            Column {
                HorizontalDivider(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(1.dp),
                    color = MaterialTheme.colorScheme.outline.copy(alpha = 0.2f)
                )

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(65.dp)
                        .selectableGroup(),
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

@Composable
fun RowScope.AppBottomNavigationBarItem(
    modifier: Modifier = Modifier,
    icon: DrawableResource,
    label: String,
    onClick: () -> Unit,
    selected: Boolean,
) {
    Column(
        modifier = modifier
            .weight(1f)
            .clickable(
                onClick = onClick,
            ),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        Image(
            painter = painterResource(icon),
            contentDescription = icon.toString(),
            contentScale = ContentScale.Crop,
            colorFilter = if (selected) {
                ColorFilter.tint(MaterialTheme.colorScheme.primary)
            } else {
                ColorFilter.tint(MaterialTheme.colorScheme.outline)
            },
            modifier = modifier.then(
                Modifier.clickable {
                    onClick()
                }
                    .size(24.dp)
            )
        )

        Text(
            text = label,
            style = MaterialTheme.typography.bodyMedium,
            fontWeight = if (selected) {
                FontWeight.SemiBold
            } else {
                FontWeight.Normal
            },
            color = if (selected) {
                MaterialTheme.colorScheme.primary
            } else {
                MaterialTheme.colorScheme.outline
            }
        )
    }
}

private fun navigateBottomBar(navController: NavController, destination: String) {
    navController.navigate(destination) {
        navController.graph.startDestinationRoute?.let { route ->
            popUpTo(BottomBarScreen.Home.route) {
                saveState = true
            }
        }
        launchSingleTop = true
        restoreState = true
    }
}

private val NavController.shouldShowBottomBar
    get() = when (this.currentBackStackEntry?.destination?.route) {
        BottomBarScreen.Home.route,
        BottomBarScreen.Reels.route,
        BottomBarScreen.Profile.route,
        -> true

        else -> false
    }

For Screens create ScreenView.kt

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import network.chaintech.cmpmediaplayer.navigation.AppScreen
import network.chaintech.cmpmediaplayer.utils.AppConstants

@Composable
fun HomeView(onNavigate: (String) -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Home")

        Spacer(modifier = Modifier.height(50.dp))

        Text(
            text = "Go to Detail screen",
            modifier = Modifier.clickable {
                onNavigate(AppScreen.Detail.route)
            }
        )
    }
}

@Composable
fun ReelsView(onNavigate: (String) -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Reels")

        Spacer(modifier = Modifier.height(50.dp))

        Text(
            text = "Go to Detail screen",
            modifier = Modifier.clickable {
                onNavigate(AppScreen.Detail.route)
            }
        )
    }
}

@Composable
fun ProfileView(onNavigate: (String) -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Profile")

        Spacer(modifier = Modifier.height(50.dp))

        Text(
            text = "Go to Detail screen",
            modifier = Modifier.clickable {
                onNavigate(AppScreen.Detail.route)
            }
        )
    }
}

@Composable
fun DetailsView(onNavigate: (String) -> Unit) {
    Column(
        modifier = Modifier
            .clickable {

            }
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Details")

        Text(
            text = "Back",
            modifier = Modifier.clickable {
                onNavigate(AppConstants.BACK_CLICK_ROUTE)
            }
        )
    }
}

Usage

@Composable internal fun App() = AppTheme { HomeNav() }

Code Structure

Finally the output:
Android Demo

iOS Demo

Happy coding ❤

Connect with us 👇

ScreenCapture -Compose Multiplatform(KMP)

Mobile innovation Network — Thu, 25 Apr 2024 12:11:51 +0000

ScreenCapture is a Compose Multiplatform library for capturing screens in your Android or iOS App.

Installation

Add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:compose-multiplatform-screen-capture:1.0.2")
}

Usage

Android

Include this in your AndroidManifest.xml:

<provider
    android:name="androidx.core.content.FileProvider"
    android:authorities="network.chaintech.cmp.screenshot.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/file_paths" />
</provider>

Create file_paths.xml in androidMain->res->xml and add the following code:

<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <files-path
        name="screen_shots"
        path="share_images" />
    <external-path
        name="external_files"
        path="." />
</paths>

Add the following line in onCreate of your Activity class:

class AppActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        AppContext.apply { set(this@AppActivity) }
        ...
    }
}

Composable Usage

@Composable
internal fun App() = AppTheme {
    PaymentReceived()
}

@Composable
fun PaymentReceived() {
    val captureController = rememberScreenCaptureController()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFF004DEF))
    ) {
        Row(
            modifier = Modifier.padding(top = 20.dp).statusBarsPadding(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Spacer(modifier = Modifier.weight(1f))
            Icon(
                Icons.Filled.Share,
                "Share",
                modifier = Modifier.padding(end = 12.dp).size(28.dp)
                    .clickable { captureController.capture() },
                tint = Color.White
            )
        }

        ScreenCaptureComposable(
            modifier = Modifier,
            screenCaptureController = captureController,
            shareImage = true,
            onCaptured = { img, throwable ->

            }
        ) {
            AppTheme {
                Column(modifier = Modifier.background(Color.White)) {
                    PaymentReceivedView()
                }
            }
        }
    }
}

@Composable
fun ColumnScope.PaymentReceivedView() {
    Box(modifier = Modifier.fillMaxWidth()) {
        Box(modifier = Modifier.height(200.dp).fillMaxWidth().background(Color(0xFF004DEF))) {
            Text(
                text = "Invoice",
                style = TextStyle(fontSize = 20.sp, color = Color.White),
                fontWeight = FontWeight.Medium,
                modifier = Modifier.padding(top = 18.dp).align(Alignment.TopCenter)
            )
        }
        Card(
            modifier = Modifier
                .padding(top = 96.dp, start = 16.dp, end = 16.dp, bottom = 30.dp)
                .fillMaxWidth(),
            colors = CardDefaults.cardColors(Color.White),
            shape = RoundedCornerShape(6.dp),
            elevation = CardDefaults.cardElevation(2.dp)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Text(
                    text = "Money Transfer",
                    style = TextStyle(fontSize = 20.sp, color = Color.Black),
                    fontWeight = FontWeight.Medium,
                    modifier = Modifier.padding(top = 50.dp).align(Alignment.CenterHorizontally)
                )
                Text(
                    text = "Powered by MobiKwik",
                    style = TextStyle(fontSize = 20.sp, color = Color.Black),
                    fontWeight = FontWeight.Medium,
                    modifier = Modifier.padding(top = 4.dp).align(Alignment.CenterHorizontally)
                )

                Column(
                    modifier = Modifier
                        .fillMaxWidth(0.8f)
                        .padding(top = 16.dp)
                        .background(Color(0xFFF7F7F7), RoundedCornerShape(8.dp))
                        .padding(bottom = 10.dp).align(Alignment.CenterHorizontally),
                ) {
                    Text(
                        text = "Order ID: OMK25e9ef4ed5005544",
                        style = TextStyle(fontSize = 14.sp, color = Color.Gray),
                        modifier = Modifier.padding(top = 10.dp, start = 16.dp, end = 16.dp)
                    )

                    DashedLine(modifier = Modifier.padding(top = 10.dp).height(2.dp).fillMaxWidth())

                    Text(
                        text = "UPI Transaction ID: 4320692331397",
                        style = TextStyle(fontSize = 14.sp, color = Color.Gray),
                        modifier = Modifier.padding(top = 10.dp, start = 16.dp, end = 16.dp)
                    )
                }
                Text(
                    text = "Fri, 04 Feb 2024, 8:12 pm",
                    style = TextStyle(fontSize = 14.sp, color = Color.Gray),
                    modifier = Modifier.padding(top = 16.dp, bottom = 16.dp)
                        .align(Alignment.CenterHorizontally)
                )
            }
        }
        Column(modifier = Modifier.fillMaxWidth()) {
            Card(
                modifier = Modifier
                    .padding(top = 66.dp)
                    .size(60.dp)
                    .align(Alignment.CenterHorizontally),
                colors = CardDefaults.cardColors(Color.White),
                shape = CircleShape,
                elevation = CardDefaults.cardElevation(0.dp)
            ) {
                Box(
                    modifier = Modifier
                        .padding(3.dp)
                        .fillMaxSize()
                        .border(2.dp, Color(0xFF004DEF), CircleShape)
                        .clip(CircleShape)
                        .align(Alignment.CenterHorizontally)
                ) {
                    Icon(
                        Icons.Filled.Done,
                        "Share",
                        modifier = Modifier.size(36.dp).align(Alignment.Center),
                        tint = Color.Green
                    )
                }
            }
        }
    }
    Column(
        modifier = Modifier.background(Color(0xFFE6EBE5))
            .padding(horizontal = 14.dp, vertical = 18.dp)
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            Text(
                text = "Total Amount Paid",
                style = TextStyle(fontSize = 20.sp, color = Color.Black),
                fontWeight = FontWeight.Medium,
                modifier = Modifier
            )
            Spacer(modifier = Modifier.width(1.dp).weight(1f))
            Text(
                text = "₹395",
                style = TextStyle(fontSize = 20.sp, color = Color.Black),
                fontWeight = FontWeight.Medium,
                modifier = Modifier
            )
        }
        Text(
            text = "Paid from UPI: ₹395",
            style = TextStyle(fontSize = 14.sp, color = Color.Gray),
            modifier = Modifier.padding(top = 8.dp)
        )
    }

    Text(
        text = "Billed To",
        style = TextStyle(fontSize = 16.sp, color = Color.Black),
        modifier = Modifier.padding(top = 20.dp, start = 14.dp, end = 14.dp)
    )

    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "Name",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "Robert Jhon Castillo",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }
    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "Mobile No.",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "7896554456",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }
    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "VPA",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "7896554456@ikwik",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }

    Text(
        text = "Received By",
        style = TextStyle(fontSize = 16.sp, color = Color.Black),
        modifier = Modifier.padding(top = 20.dp, start = 14.dp, end = 14.dp)
    )

    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "Name",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "Robert Jhon Castillo",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }
    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "Mobile No.",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "NA",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }
    Row(modifier = Modifier.padding(top = 8.dp, start = 14.dp, end = 14.dp).fillMaxWidth()) {
        Text(
            text = "VPA",
            style = TextStyle(fontSize = 16.sp, color = Color.Gray),
            modifier = Modifier
        )
        Spacer(modifier = Modifier.width(1.dp).weight(1f))
        Text(
            text = "paytm-jiomobility@paytm",
            style = TextStyle(fontSize = 16.sp, color = Color.Black),
            modifier = Modifier
        )
    }
    Image(
        modifier = Modifier
            .padding(top = 26.dp, bottom = 40.dp)
            .size(90.dp)
            .align(Alignment.CenterHorizontally),
        painter = painterResource(Res.drawable.qr_code),
        contentDescription = null,
        contentScale = ContentScale.Crop
    )
}

@Composable
private fun DashedLine(modifier: Modifier) {
    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
    Canvas(modifier) {

        drawLine(
            color = Color.Gray,
            start = Offset(0f, 0f),
            end = Offset(size.width, 0f),
            pathEffect = pathEffect
        )
    }
}

Explanation

modifier: Modifier for modifying the layout of the screen capture component.
screenCaptureController: Controller for managing the screen capture functionality.
shareImage: Boolean indicating whether the user intends to share the captured image.
onCaptured: Callback invoked when an image is successfully captured or when there's a failure during the capture process. It provides an ImageBitmap representing the captured image and a Throwable in case of any errors.
content: A composable function that defines the content to be displayed within the screen capture component. This could include buttons, text, or any other UI elements related to screen capture functionality.

Repository link

Android Demo

iOS Demo

Connect with us 👇