Pemilih Foto yang Disematkan: Cara yang lebih lancar untuk meminta foto dan video secara pribadi di aplikasi Anda
Bersiaplah untuk meningkatkan pengalaman pengguna aplikasi Anda dengan cara baru yang menarik untuk menggunakan pemilih foto Android. Pemilih foto tersemat yang baru menawarkan cara yang lancar dan berfokus pada privasi bagi pengguna untuk memilih foto dan video, langsung di dalam antarmuka aplikasi Anda. Sekarang, aplikasi Anda bisa mendapatkan semua manfaat yang sama yang tersedia dengan pemilih foto, termasuk akses ke konten cloud, yang terintegrasi langsung ke dalam pengalaman aplikasi Anda.
Mengapa disematkan?
Kami memahami bahwa banyak aplikasi ingin memberikan pengalaman yang sangat terintegrasi dan lancar bagi pengguna saat memilih foto atau video. Pemilih foto yang disematkan dirancang untuk melakukan hal itu, sehingga pengguna dapat mengakses foto terbaru mereka dengan cepat tanpa perlu keluar dari aplikasi Anda. Mereka juga dapat menjelajahi seluruh library di penyedia media cloud pilihan mereka (misalnya, Google Foto), termasuk favorit, album, dan fungsi penelusuran. Dengan begitu, pengguna tidak perlu berpindah-pindah aplikasi atau khawatir apakah foto yang mereka inginkan disimpan secara lokal atau di cloud.
Integrasi yang lancar, privasi yang ditingkatkan
Dengan pemilih foto yang disematkan, aplikasi Anda tidak memerlukan akses ke foto atau video pengguna hingga mereka benar-benar memilih sesuatu. Artinya, privasi pengguna Anda akan lebih terjaga dan pengalaman mereka akan lebih lancar. Selain itu, pemilih foto yang disematkan memberi pengguna akses ke seluruh koleksi media berbasis cloud mereka, sedangkan izin foto standar hanya dibatasi untuk file lokal.
Pemilih foto yang disematkan di Google Message
Google Message menunjukkan keampuhan pemilih foto tersemat. Berikut cara mereka mengintegrasikannya:
- Penempatan yang intuitif: Pemilih foto berada tepat di bawah tombol kamera, sehingga pengguna dapat dengan jelas memilih antara mengambil foto baru atau memilih foto yang sudah ada.
- Pratinjau dinamis: Segera setelah pengguna mengetuk foto, mereka akan melihat pratinjau besar, sehingga memudahkan mereka mengonfirmasi pilihan. Jika pengguna membatalkan pilihan foto, pratinjau akan menghilang, sehingga pengalaman tetap bersih dan tidak berantakan.
- Perluas untuk melihat lebih banyak konten: Tampilan awal disederhanakan, sehingga memudahkan akses ke foto terbaru. Namun, pengguna dapat dengan mudah memperluas pemilih foto untuk menelusuri dan memilih dari semua foto dan video di galeri mereka, termasuk konten cloud dari Google Foto.
- Menghormati pilihan pengguna: Alat pilih foto yang disematkan hanya memberikan akses ke foto atau video tertentu yang dipilih pengguna, yang berarti mereka dapat berhenti meminta izin foto dan video sama sekali. Hal ini juga membuat aplikasi Pesan tidak perlu menangani situasi saat pengguna hanya memberikan akses terbatas ke foto dan video.
Penerapan
Integrasi pemilih foto sematan menjadi mudah dengan library Jetpack Pemilih Foto.
Jetpack Compose
Pertama, sertakan library Jetpack Photo Picker sebagai dependensi.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Fungsi composable EmbeddedPhotoPicker menyediakan mekanisme untuk menyertakan UI pemilih foto sematan langsung dalam layar Compose Anda. Composable ini membuat SurfaceView yang menghosting UI alat pilih foto yang disematkan. Library ini mengelola koneksi ke layanan EmbeddedPhotoPicker, menangani interaksi pengguna, dan mengomunikasikan URI media yang dipilih ke aplikasi panggilan.
@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)
}
}
)
}
}
}
}
}Tampilan
Pertama, sertakan library Jetpack Photo Picker sebagai dependensi.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Untuk menambahkan pemilih foto sematan, Anda perlu menambahkan entri ke file tata letak.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />Lalu, lakukan inisialisasi di aktivitas/fragmen Anda.
// 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()
)
}Anda dapat memanggil berbagai metode EmbeddedPhotoPickerSession untuk berinteraksi dengan pemilih yang disematkan.
// 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)
Penting untuk diperhatikan bahwa pengalaman pemilih foto yang disematkan tersedia bagi pengguna yang menjalankan Android 14 (level API 34) atau yang lebih tinggi dengan Ekstensi SDK 15+. Baca selengkapnya tentang ketersediaan perangkat pemilih foto.
Untuk meningkatkan privasi dan keamanan pengguna, sistem merender pemilih foto yang disematkan dengan cara yang mencegah gambar atau overlay apa pun. Pilihan desain yang disengaja ini berarti UX Anda harus mempertimbangkan area tampilan pemilih foto sebagai elemen yang berbeda dan khusus, seperti yang akan Anda rencanakan untuk banner iklan.
Jika ada masukan atau saran, kirimkan tiket ke pelacak masalah kami.
Lanjutkan membaca
-
Berita Produk
Privasi dan kontrol pengguna tetap menjadi inti dari pengalaman Android. Sama seperti pemilih foto yang membuat berbagi media menjadi aman dan mudah diterapkan, kini kami menghadirkan tingkat privasi, kesederhanaan, dan pengalaman pengguna yang sama baiknya untuk pemilihan kontak.
Roxanna Aliabadi Walker • Waktu baca: 4 menit
-
Berita Produk
Dengan senang hati kami mengumumkan bahwa dukungan resmi untuk Unreal Engine dan Godot telah hadir untuk Android XR. Kami juga meluncurkan alat baru yang dirancang untuk meningkatkan produktivitas Anda dan memungkinkan kemampuan XR baru: Hub Engine Android XR dan Framework Interaksi Android XR.
Luke Hopkins • Waktu baca: 4 menit
-
Berita Produk
Dengan rilis Android 17, kami bertransisi ke standar pengembangan yang mengutamakan adaptasi. Pengguna Anda tidak lagi mengandalkan satu faktor bentuk; mereka beralih antara ponsel, perangkat foldable, tablet, laptop, layar otomotif, dan lingkungan XR imersif sepanjang hari.
Fahd Imtiaz • Waktu baca: 4 menit
Terus dapatkan informasi
Dapatkan insight pengembangan Android terbaru yang dikirim ke kotak masuk Anda setiap minggu.