এমবেডেড ফটো পিকার: আপনার অ্যাপে ব্যক্তিগতভাবে ফটো এবং ভিডিও অনুরোধ করার একটি আরও সহজ উপায়।
অ্যান্ড্রয়েড ফটো পিকার ব্যবহারের এক নতুন ও আকর্ষণীয় পদ্ধতির মাধ্যমে আপনার অ্যাপের ইউজার এক্সপেরিয়েন্স আরও উন্নত করতে প্রস্তুত হন! নতুন এমবেডেড ফটো পিকারটি ব্যবহারকারীদের জন্য আপনার অ্যাপের ইন্টারফেসের মধ্যেই ছবি ও ভিডিও বেছে নেওয়ার একটি সহজ এবং গোপনীয়তা-কেন্দ্রিক উপায় প্রদান করে। এখন আপনার অ্যাপ ফটো পিকারের সমস্ত সুবিধাই পেতে পারে, যার মধ্যে ক্লাউড কন্টেন্টে অ্যাক্সেসও অন্তর্ভুক্ত, যা সরাসরি আপনার অ্যাপের অভিজ্ঞতার সাথে সমন্বিত থাকবে।
কেন অন্তর্ভুক্ত?
আমরা বুঝি যে, অনেক অ্যাপই ব্যবহারকারীদের ছবি বা ভিডিও বাছাই করার ক্ষেত্রে একটি অত্যন্ত সমন্বিত এবং নির্বিঘ্ন অভিজ্ঞতা দিতে চায়। এই অন্তর্নির্মিত ফটো পিকারটি ঠিক সেই উদ্দেশ্যেই ডিজাইন করা হয়েছে, যা ব্যবহারকারীদের আপনার অ্যাপ থেকে বের না হয়েই দ্রুত তাদের সাম্প্রতিক ছবিগুলো অ্যাক্সেস করার সুযোগ দেয়। তারা তাদের পছন্দের ক্লাউড মিডিয়া প্রোভাইডারে (যেমন, গুগল ফটোস) তাদের সম্পূর্ণ লাইব্রেরিও দেখতে পারেন, যার মধ্যে ফেভারিট, অ্যালবাম এবং সার্চ করার সুবিধাও রয়েছে। এর ফলে ব্যবহারকারীদের অ্যাপ পরিবর্তন করার প্রয়োজন হয় না বা তারা যে ছবিটি খুঁজছেন তা স্থানীয়ভাবে নাকি ক্লাউডে সংরক্ষিত আছে, তা নিয়েও চিন্তা করতে হয় না।
নির্বিঘ্ন একীকরণ, উন্নত গোপনীয়তা
এমবেডেড ফটো পিকারের সাহায্যে, ব্যবহারকারী কোনো কিছু নির্বাচন না করা পর্যন্ত আপনার অ্যাপের তার ফটো বা ভিডিও অ্যাক্সেস করার প্রয়োজন হয় না। এর ফলে আপনার ব্যবহারকারীরা আরও বেশি গোপনীয়তা পান এবং একটি আরও স্বচ্ছন্দ অভিজ্ঞতা লাভ করেন। এছাড়াও, এমবেডেড ফটো পিকার ব্যবহারকারীদের তাদের সম্পূর্ণ ক্লাউড-ভিত্তিক মিডিয়া লাইব্রেরি অ্যাক্সেস করার সুযোগ দেয়, যেখানে সাধারণ ফটো পারমিশন শুধুমাত্র লোকাল ফাইলের মধ্যেই সীমাবদ্ধ থাকে।
গুগল মেসেজে এমবেড করা ফটো পিকার
গুগল মেসেজেস তাদের অন্তর্নির্মিত ফটো পিকারের কার্যকারিতা প্রদর্শন করেছে। তারা যেভাবে এটি যুক্ত করেছে তা নিচে দেওয়া হলো:
- সুবিধাজনক অবস্থান: ফটো পিকারটি ক্যামেরা বাটনের ঠিক নিচে অবস্থিত, যা ব্যবহারকারীদের নতুন ছবি তোলা বা পুরোনো কোনো ছবি বেছে নেওয়ার মধ্যে একটি সুস্পষ্ট সুযোগ দেয়।
- ডাইনামিক প্রিভিউ: ব্যবহারকারী কোনো ছবিতে ট্যাপ করার সাথে সাথেই একটি বড় প্রিভিউ দেখতে পান, যা তাদের নির্বাচন নিশ্চিত করতে সহজ করে তোলে। যদি তারা ছবিটি নির্বাচন থেকে বাদ দেন, তাহলে প্রিভিউটি অদৃশ্য হয়ে যায়, ফলে অভিজ্ঞতাটি পরিচ্ছন্ন ও ঝামেলামুক্ত থাকে।
- আরও কন্টেন্টের জন্য প্রসারিত করুন: প্রাথমিক দৃশ্যটি সরলীকৃত, যা সাম্প্রতিক ফটোগুলিতে সহজে অ্যাক্সেস দেয়। তবে, ব্যবহারকারীরা সহজেই ফটো পিকারটি প্রসারিত করে তাদের লাইব্রেরির সমস্ত ফটো এবং ভিডিও থেকে ব্রাউজ ও পছন্দ করতে পারেন, যার মধ্যে গুগল ফটোজ-এর ক্লাউড কন্টেন্টও অন্তর্ভুক্ত।
- ব্যবহারকারীর পছন্দকে সম্মান: অন্তর্নির্মিত ফটো পিকারটি শুধুমাত্র ব্যবহারকারীর নির্বাচিত নির্দিষ্ট ফটো বা ভিডিওগুলিতেই অ্যাক্সেস দেয়, যার ফলে ব্যবহারকারীরা ফটো এবং ভিডিওর জন্য অনুমতি চাওয়া পুরোপুরি বন্ধ করতে পারেন। এর ফলে, ব্যবহারকারীরা যখন ফটো এবং ভিডিওতে শুধুমাত্র সীমিত অ্যাক্সেস দেন, তখন মেসেজেস-কে সেই পরিস্থিতিগুলো সামলানোর ঝামেলা থেকেও মুক্তি দেয়।
বাস্তবায়ন
Photo Picker Jetpack লাইব্রেরির সাহায্যে এমবেডেড ফটো পিকার ইন্টিগ্রেট করা সহজ হয়ে যায়।
জেটপ্যাক কম্পোজ
প্রথমে, 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)
এটা মনে রাখা গুরুত্বপূর্ণ যে, এমবেডেড ফটো পিকার অভিজ্ঞতাটি শুধুমাত্র অ্যান্ড্রয়েড ১৪ (এপিআই লেভেল ৩৪) বা তার উচ্চতর সংস্করণ এবং এসডিকে এক্সটেনশন ১৫+ ব্যবহারকারীদের জন্য উপলব্ধ। ডিভাইসে ফটো পিকারের প্রাপ্যতা সম্পর্কে আরও পড়ুন ।
ব্যবহারকারীর উন্নততর গোপনীয়তা ও নিরাপত্তার জন্য, সিস্টেমটি এমবেডেড ফটো পিকারটিকে এমনভাবে রেন্ডার করে যাতে কোনো ধরনের ড্রয়িং বা ওভারলে করা না যায়। এই ইচ্ছাকৃত ডিজাইন সিদ্ধান্তের অর্থ হলো, আপনার ইউএক্স (UX)-কে ফটো পিকারের ডিসপ্লে এলাকাটিকে একটি স্বতন্ত্র ও নির্দিষ্ট উপাদান হিসেবে বিবেচনা করতে হবে, ঠিক যেমনভাবে আপনি একটি বিজ্ঞাপনের ব্যানারের পরিকল্পনা করেন।
আপনার কোনো মতামত বা পরামর্শ থাকলে, আমাদের ইস্যু ট্র্যাকারে টিকিট জমা দিন।
লিখেছেন:
পড়তে থাকুন
পণ্যের খবর
গোপনীয়তা এবং ব্যবহারকারীর নিয়ন্ত্রণ অ্যান্ড্রয়েড অভিজ্ঞতার কেন্দ্রবিন্দুতে রয়েছে। ঠিক যেমন ফটো পিকার মিডিয়া শেয়ারিংকে নিরাপদ এবং বাস্তবায়নে সহজ করে তুলেছিল, আমরা এখন কন্টাক্ট নির্বাচনের ক্ষেত্রেও সেই একই স্তরের গোপনীয়তা, সরলতা এবং চমৎকার ব্যবহারকারীর অভিজ্ঞতা নিয়ে আসছি।
Roxanna Aliabadi Walker • পড়তে ৪ মিনিট
পণ্যের খবর
আপনি যদি একজন অ্যান্ড্রয়েড ডেভেলপার হন এবং আপনার অ্যাপে উদ্ভাবনী এআই ফিচার যুক্ত করতে চান, তবে আমরা সম্প্রতি শক্তিশালী নতুন আপডেট চালু করেছি।
Thomas Ezan • পড়তে ৩ মিনিট
পণ্যের খবর
অ্যান্ড্রয়েড ১৭ বিটা ৪-এ পৌঁছেছে, যা এই রিলিজ চক্রের সর্বশেষ নির্ধারিত বিটা এবং অ্যাপের সামঞ্জস্যতা ও প্ল্যাটফর্মের স্থিতিশীলতার জন্য একটি অত্যন্ত গুরুত্বপূর্ণ মাইলফলক।
Daniel Galpin • পড়তে ৪ মিনিট
আপ-টু-ডেট থাকুন
অ্যান্ড্রয়েড ডেভেলপমেন্টের সর্বশেষ তথ্য প্রতি সপ্তাহে আপনার ইনবক্সে পান।
