Cookie Consent by Free Privacy Policy Generator 📌 ScreenCapture -Compose Multiplatform(KMP)


✅ ScreenCapture -Compose Multiplatform(KMP)


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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

ScreenCapture

Installation

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

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

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

Android

iOS Demo
iOS

Connect with us 👇

...

✅ KMP-102 - XCFramework para Devs KMP


📈 55.97 Punkte

✅ Trying Kotlin Multiplatform for the First Time: Step by Step Building an App with KMP


📈 47.12 Punkte

✅ Google @ KotlinConf 2024: A Look Inside Multiplatform Development with KMP and more


📈 47.12 Punkte

✅ Google @ KotlinConf 2024: A Look Inside Multiplatform Development with KMP and more


📈 47.12 Punkte

✅ heise+ | Kurztests: Screencapture-Tool, Bildverwalter und Produkt-Scanner-App


📈 34.72 Punkte

✅ ScreenCapture -Compose Multiplatform(KMP)


📈 27.99 Punkte

✅ 105 - I/O ‘24, Android 15, KMP, Compose, AndroidX, and more!


📈 27.99 Punkte

✅ Now in Android: 106 - I/O ‘24, Android 15, KMP, Compose, AndroidX, and more!


📈 27.99 Punkte

✅ Easy WheelDateTimePicker — Compose Multiplatform(KMP)


📈 27.99 Punkte

✅ "Kotlin Multiplatform Mobile" zum Entwickeln für Android und iOS erreicht Beta


📈 19.13 Punkte

✅ Multiplatform gamers now only need one headset for everything, and it's pretty darn awesome


📈 19.13 Punkte

✅ Low CVE-2020-4906: IBM Financial transaction manager for multiplatform


📈 19.13 Punkte

✅ JetBrains releases Kotlin Multiplatform stable version


📈 19.13 Punkte

✅ Announcing an Experimental Preview of Jetpack Multiplatform Libraries


📈 19.13 Punkte

✅ Building multiplatform games with Flutter


📈 19.13 Punkte

✅ Low CVE-2020-4906: IBM Financial transaction manager for multiplatform


📈 19.13 Punkte

✅ MCS2023 — Trixnity, Multiplatform and Beyond


📈 19.13 Punkte

✅ Hershell - Multiplatform Reverse Shell Generator


📈 19.13 Punkte

✅ Multiplatform scening


📈 19.13 Punkte

✅ Best practices for rendering your game multiplatform


📈 19.13 Punkte

✅ Low CVE-2020-4904: IBM Financial transaction manager for multiplatform


📈 19.13 Punkte

✅ Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development


📈 19.13 Punkte

✅ Intro to Kotlin Multiplatform


📈 19.13 Punkte

✅ Microsoft says Sony's concerns about acquisition are unfounded, will keep ABK games multiplatform


📈 19.13 Punkte

✅ Low CVE-2020-4904: IBM Financial transaction manager for multiplatform


📈 19.13 Punkte

✅ Google Play Games on PC: Multiplatform experience critical for growth


📈 19.13 Punkte

✅ MLB: The Show goes multiplatform, confirmed for additional consoles


📈 19.13 Punkte

✅ AI Show Live - Episode 62 - Multiplatform Inference with the ONNX Runtime


📈 19.13 Punkte

✅ Low CVE-2020-4905: IBM Financial transaction manager for multiplatform


📈 19.13 Punkte

✅ Netflix Games hires former Halo creative director for multiplatform AAA game


📈 19.13 Punkte

✅ Oracle Mobile Field Service up to 12.2.7 Multiplatform Based on HTML5 privilege escalation


📈 19.13 Punkte

✅ Kotlin Multiplatform Mobile: Native Apps entwickeln mit Multiplattform-Technik


📈 19.13 Punkte











matomo

Datei nicht gefunden!