প্রোডাক্ট সম্পর্কিত খবর

এম্বেড করা ফটো পিকার

৮ মিনিট রিডিং
Roxanna Aliabadi Walker-এর প্রোফাইল দেখুন চার্লস মানগারের প্রোফাইল দেখুন
Roxanna Aliabadi Walker & Yacine Rezgui

এম্বেড করা ফটো পিকার: আপনার অ্যাপে ব্যক্তিগতভাবে ফটো ও ভিডিও অনুরোধ করার আরও বাধাহীন উপায়

photopicker.png

Android ফটো পিকার ব্যবহার করার একটি নতুন ও উত্তেজনাপূর্ণ উপায়ে আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করার জন্য প্রস্তুত হন! নতুন এম্বেড করা ফটো পিকার ব্যবহারকারীদের জন্য আপনার অ্যাপের ইন্টারফেসের মধ্যেই ফটো ও ভিডিও বেছে নেওয়ার একটি নির্বিঘ্ন ও গোপনীয়তা-কেন্দ্রিক উপায় অফার করে। এখন আপনার অ্যাপ ফটো পিকারের সাথে উপলভ্য একই ধরনের সব সুবিধা পেতে পারে, এর মধ্যে ক্লাউড কন্টেন্ট অ্যাক্সেস করাও অন্তর্ভুক্ত, যা সরাসরি আপনার অ্যাপের অভিজ্ঞতার সাথে ইন্টিগ্রেট করা হয়।

কেন এম্বেড করা হয়?

আমরা বুঝি যে ফটো বা ভিডিও বেছে নেওয়ার সময় অনেক অ্যাপ ব্যবহারকারীদের জন্য অত্যন্ত ইন্টিগ্রেটেড ও বাধাহীন অভিজ্ঞতা প্রদান করতে চায়। এমবেড করা ফটো পিকার ঠিক এই কাজটি করার জন্য ডিজাইন করা হয়েছে, এটি ব্যবহারকারীদের আপনার অ্যাপ না ছেড়ে দিয়েই তাদের সাম্প্রতিক ফটো দ্রুত অ্যাক্সেস করতে দেয়। এছাড়াও, তারা পছন্দের ক্লাউড মিডিয়া প্রদানকারীর (যেমন, Google Photos) সম্পূর্ণ লাইব্রেরি এক্সপ্লোর করতে পারে, এর মধ্যে পছন্দসই, অ্যালবাম ও সার্চ করার সুবিধা অন্তর্ভুক্ত। এর ফলে ব্যবহারকারীদের অ্যাপ পরিবর্তন করতে হয় না বা তারা যে ফটো চান সেটি লোকাল স্টোরেজে বা ক্লাউডে সেভ করা আছে কিনা সেই বিষয়ে তাদের চিন্তা করতে হয় না।

সহজ ইন্টিগ্রেশন, উন্নত গোপনীয়তা

এম্বেড করা ফটো পিকারের সাহায্যে, ব্যবহারকারী কোনও কিছু বেছে না নেওয়া পর্যন্ত আপনার অ্যাপকে ব্যবহারকারীর ফটো বা ভিডিও অ্যাক্সেস করতে হবে না। এর অর্থ হল আপনার ব্যবহারকারীদের জন্য আরও বেশি গোপনীয়তা এবং আরও সুবিন্যস্ত অভিজ্ঞতা। এছাড়াও, এম্বেড করা ফটো পিকার ব্যবহারকারীদের তাদের সম্পূর্ণ ক্লাউড-ভিত্তিক মিডিয়া লাইব্রেরি অ্যাক্সেস করার সুবিধা দেয়, যেখানে স্ট্যান্ডার্ড ফটো অনুমতি শুধুমাত্র স্থানীয় ফাইলের মধ্যে সীমাবদ্ধ থাকে।

Google Messages-এ এম্বেড করা ফটো পিকার

Google Messages, এম্বেড করা ফটো পিকারের ক্ষমতা দেখায়। তারা কীভাবে এটি ইন্টিগ্রেট করেছে তা এখানে দেওয়া হল:

  • সহজ প্লেসমেন্ট: ফটো পিকার ক্যামেরা বোতামের ঠিক নিচে থাকে, যা ব্যবহারকারীদের নতুন ফটো তোলা বা আগে থেকে থাকা ফটো বেছে নেওয়ার মধ্যে একটি স্পষ্ট বিকল্প দেয়।
  • ডায়নামিক প্রিভিউ: কোনও ব্যবহারকারী ফটোতে ট্যাপ করার সাথে সাথেই একটি বড় প্রিভিউ দেখতে পান, এর ফলে তার বেছে নেওয়া ফটো কনফার্ম করা সহজ হয়। তারা ফটোটি বেছে নেওয়ার তালিকা থেকে সরিয়ে দিলে, প্রিভিউ আর দেখা যায় না, ফলে অভিজ্ঞতা পরিষ্কার ও অগোছালো থাকে।
  • আরও কন্টেন্ট দেখতে বড় করুন: প্রাথমিক ভিউটি সরলীকৃত, যা সাম্প্রতিক ফটোতে সহজ অ্যাক্সেস প্রদান করে। তবে, ব্যবহারকারীরা সহজেই ফটো পিকার বড় করে তাদের লাইব্রেরিতে থাকা সব ফটো ও ভিডিও ব্রাউজ করতে ও বেছে নিতে পারবেন, এর মধ্যে Google Photos থেকে ক্লাউড কন্টেন্টও অন্তর্ভুক্ত।
  • ব্যবহারকারীর পছন্দকে সম্মান জানানো: এম্বেড করা ফটো পিকার শুধুমাত্র ব্যবহারকারীর বেছে নেওয়া নির্দিষ্ট ফটো বা ভিডিওতে অ্যাক্সেস দেয়, অর্থাৎ তারা ফটো ও ভিডিওর অনুমতি চাওয়া সম্পূর্ণ বন্ধ করে দিতে পারে। এর ফলে, ব্যবহারকারী ফটো ও ভিডিওতে সীমিত অ্যাক্সেস দিলে, Messages-কে সেই পরিস্থিতি সামলাতে হয় না।
gif1.gif
gif2.gif

প্রয়োগ

ফটো পিকার Jetpack লাইব্রেরির মাধ্যমে এম্বেড করা ফটো পিকারকে ইন্টিগ্রেট করা সহজ।  

Jetpack Compose

প্রথমে, Jetpack Photo Picker লাইব্রেরি একটি ডিপেন্ডেন্সি হিসেবে যোগ করুন।

implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")

 EmbeddedPhotoPicker কম্পোজ করার উপযুক্ত ফাংশন, আপনার কম্পোজ স্ক্রিনের মধ্যে সরাসরি এম্বেড করা ফটো পিকার UI অন্তর্ভুক্ত করার একটি পদ্ধতি প্রদান করে। এই কম্পোজ করার উপযুক্ত আইটেমটি SurfaceView তৈরি করে যা এম্বেড করা ফটো পিকার UI হোস্ট করে। এটি EmbeddedPhotoPicker পরিষেবার সাথে কানেকশন ম্যানেজ করে, ব্যবহারকারীর ইন্টার‍্যাকশন হ্যান্ডেল করে এবং বেছে নেওয়া মিডিয়া URI কলিং অ্যাপ্লিকেশনে কমিউনিকেট করে।  

@Composable
fun EmbeddedPhotoPickerDemo() {
    // We keep track of the list of selected attachments
    var attachments by remember { mutableStateOf(emptyList<Uri>()) }

    val coroutineScope = rememberCoroutineScope()
    // We hide the bottom sheet by default but we show it when the user clicks on the button
    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberStandardBottomSheetState(
            initialValue = SheetValue.Hidden,
            skipHiddenState = false
        )
    )

    // Customize the embedded photo picker
    val photoPickerInfo = EmbeddedPhotoPickerFeatureInfo
        .Builder()
        // Set limit the selection to 5 items
        .setMaxSelectionLimit(5)
        // Order the items selection (each item will have an index visible in the photo picker)
        .setOrderedSelection(true)
        // Set the accent color (red in this case, otherwise it follows the device's accent color)
        .setAccentColor(0xFF0000)
        .build()

    // The embedded photo picker state will be stored in this variable
    val photoPickerState = rememberEmbeddedPhotoPickerState(
        onSelectionComplete = {
            coroutineScope.launch {
                // Hide the bottom sheet once the user has clicked on the done button inside the picker
                scaffoldState.bottomSheetState.hide()
            }
        },
        onUriPermissionGranted = {
            // We update our list of attachments with the new Uris granted
            attachments += it
        },
        onUriPermissionRevoked = {
            // We update our list of attachments with the Uris revoked
            attachments -= it
        }
    )

       SideEffect {
        val isExpanded = scaffoldState.bottomSheetState.targetValue == SheetValue.Expanded

        // We show/hide the embedded photo picker to match the bottom sheet state
        photoPickerState.setCurrentExpanded(isExpanded)
    }

    BottomSheetScaffold(
        topBar = {
            TopAppBar(title = { Text("Embedded Photo Picker demo") })
        },
        scaffoldState = scaffoldState,
        sheetPeekHeight = if (scaffoldState.bottomSheetState.isVisible) 400.dp else 0.dp,
        sheetContent = {
            Column(Modifier.fillMaxWidth()) {
                // We render the embedded photo picker inside the bottom sheet
                EmbeddedPhotoPicker(
                    state = photoPickerState,
                    embeddedPhotoPickerFeatureInfo = photoPickerInfo
                )
            }
        }
    ) { innerPadding ->
        Column(Modifier.padding(innerPadding).fillMaxSize().padding(horizontal = 16.dp)) {
            Button(onClick = {
                coroutineScope.launch {
                    // We expand the bottom sheet, which will trigger the embedded picker to be shown
                    scaffoldState.bottomSheetState.partialExpand()
                }
            }) {
                Text("Open photo picker")
            }
            LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 64.dp)) {
                // We render the image using the Coil library
                itemsIndexed(attachments) { index, uri ->
                    AsyncImage(
                        model = uri,
                        contentDescription = "Image ${index + 1}",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.clickable {
                            coroutineScope.launch {
                                // When the user clicks on the media from the app's UI, we deselect it
                                // from the embedded photo picker by calling the method deselectUri
                                photoPickerState.deselectUri(uri)
                            }
                        }
                    )
                }
            }
        }
    }
}

ভিউ

প্রথমে, Jetpack Photo Picker লাইব্রেরি একটি ডিপেন্ডেন্সি হিসেবে যোগ করুন।

implementation("androidx.photopicker:photopicker:1.0.0-alpha01")

এম্বেড করা ফটো পিকার যোগ করতে, আপনাকে লেআউট ফাইলে একটি এন্ট্রি যোগ করতে হবে।  

<view class="androidx.photopicker.EmbeddedPhotoPickerView"
    android:id="@+id/photopicker"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

এবং আপনার অ্যাক্টিভিটি/ফ্র্যাগমেন্টে এটি ইনিশিয়ালাইজ করুন।

// We keep track of the list of selected attachments
private val _attachments = MutableStateFlow(emptyList<Uri>())
val attachments = _attachments.asStateFlow()

private lateinit var picker: EmbeddedPhotoPickerView
private var openSession: EmbeddedPhotoPickerSession? = null

val pickerListener = object EmbeddedPhotoPickerStateChangeListener {
    override fun onSessionOpened (newSession: EmbeddedPhotoPickerSession) {
        openSession = newSession
    }

    override fun onSessionError (throwable: Throwable) {}

    override fun onUriPermissionGranted(uris: List<Uri>) {
        _attachments += uris
    }

    override fun onUriPermissionRevoked (uris: List<Uri>) {
        _attachments -= uris
    }

    override fun onSelectionComplete() {
        // Hide the embedded photo picker as the user is done with the photo/video selection
    }
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_view)
    
    //
    // Add the embedded photo picker to a bottom sheet to allow the dragging to display the full photo library
    //

    picker = findViewById(R.id.photopicker)
    picker.addEmbeddedPhotoPickerStateChangeListener(pickerListener)
    picker.setEmbeddedPhotoPickerFeatureInfo(
        // Set a custom accent color
        EmbeddedPhotoPickerFeatureInfo.Builder().setAccentColor(0xFF0000).build()
    )
}

এম্বেড করা পিকারের সাথে ইন্টার‍্যাক্ট করতে আপনি বিভিন্ন EmbeddedPhotoPickerSession মেথড কল করতে পারবেন।

// Notify the embedded picker of a configuration change
openSession.notifyConfigurationChanged(newConfig)

// Update the embedded picker to expand following a user interaction
openSession.notifyPhotoPickerExpanded(/* expanded: */ true)

// Resize the embedded picker
openSession.notifyResized(/* width: */ 512, /* height: */ 256)

// Show/hide the embedded picker (after a form has been submitted)
openSession.notifyVisibilityChanged(/* visible: */ false)

// Remove unselected media from the embedded picker after they have been
// unselected from the host app's UI
openSession.requestRevokeUriPermission(removedUris)

মনে রাখা গুরুত্বপূর্ণ যে, SDK Extensions 15+ সহ Android 14 (API লেভেল 34) বা তার পরবর্তী যেকোনও ভার্সন ব্যবহারকারীদের জন্য এম্বেড করা ফটো পিকার অভিজ্ঞতা উপলভ্য। ফটো পিকার ডিভাইসের উপলভ্যতা সম্পর্কে আরও জানুন।

ব্যবহারকারীর গোপনীয়তা ও নিরাপত্তা আরও উন্নত করতে, সিস্টেম এম্বেড করা ফটো পিকারকে এমনভাবে রেন্ডার করে যাতে কোনও ড্রয়িং বা ওভারলেয়িং প্রতিরোধ করা যায়। ইচ্ছাকৃতভাবে এই ডিজাইন বেছে নেওয়ার অর্থ হল, আপনার UX-কে ফটো পিকারের ডিসপ্লে এরিয়াকে একটি আলাদা ও নির্দিষ্ট এলিমেন্ট হিসেবে বিবেচনা করতে হবে, ঠিক যেমন আপনি কোনও বিজ্ঞাপন ব্যানারের জন্য পরিকল্পনা করেন।

আপনার কোনও মতামত বা সাজেশন থাকলে, আমাদের ইস্যু ট্র্যাকার টুলে টিকিট জমা দিন।

এর লেখা:
পড়া চালিয়ে যান