Pemilih Foto Tersemat: 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. Kini, aplikasi Anda dapat memperoleh semua manfaat yang sama yang tersedia dengan pemilih foto, termasuk akses ke konten cloud, yang terintegrasi langsung ke dalam pengalaman aplikasi Anda.
Mengapa tersemat?
Kami memahami bahwa banyak aplikasi ingin memberikan pengalaman yang sangat terintegrasi dan lancar bagi pengguna saat memilih foto atau video. Pemilih foto tersemat dirancang untuk melakukan hal tersebut, sehingga pengguna dapat mengakses foto terbaru mereka dengan cepat tanpa harus keluar dari aplikasi Anda. Mereka juga dapat menjelajahi seluruh koleksi mereka di penyedia media cloud pilihan mereka (misalnya, Google Foto), termasuk favorit, album, dan fungsi penelusuran. Hal ini menghilangkan kebutuhan pengguna untuk beralih antar-aplikasi atau khawatir apakah foto yang mereka inginkan disimpan secara lokal atau di cloud.
Integrasi lancar, privasi ditingkatkan
Dengan pemilih foto tersemat, aplikasi Anda tidak memerlukan akses ke foto atau video pengguna hingga mereka benar-benar memilih sesuatu. Artinya, privasi yang lebih baik bagi pengguna Anda dan pengalaman yang lebih efisien. Selain itu, pemilih foto tersemat memberi pengguna akses ke seluruh koleksi media berbasis cloud mereka, sedangkan izin foto standar hanya dibatasi untuk file lokal.
Pemilih foto tersemat di Google Message
Google Message menunjukkan keunggulan pemilih foto tersemat. Berikut cara mereka mengintegrasikannya:
- Penempatan intuitif: Pemilih foto berada tepat di bawah tombol kamera, sehingga pengguna dapat memilih dengan jelas 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 untuk mengonfirmasi pilihan mereka. Jika mereka membatalkan pilihan foto, pratinjau akan menghilang, sehingga pengalaman tetap bersih dan tidak berantakan.
- Perluas untuk konten lainnya: Tampilan awal disederhanakan, sehingga memudahkan akses ke foto terbaru. Namun, pengguna dapat dengan mudah memperluas pemilih foto untuk menjelajahi dan memilih dari semua foto dan video di koleksi mereka, termasuk konten cloud dari Google Foto.
- Menghormati pilihan pengguna: Pemilih foto tersemat hanya memberikan akses ke foto atau video tertentu yang dipilih pengguna, yang berarti mereka dapat berhenti meminta izin foto dan video sepenuhnya. Hal ini juga mencegah Message menangani situasi saat pengguna hanya memberikan akses terbatas ke foto dan video.
Penerapan
Mengintegrasikan pemilih foto tersemat menjadi mudah dengan library Jetpack Pemilih Foto.
Jetpack Compose
Pertama, sertakan library Jetpack Pemilih Foto sebagai dependensi.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Fungsi composable EmbeddedPhotoPicker menyediakan mekanisme untuk menyertakan UI pemilih foto tersemat langsung di dalam layar Compose Anda. Composable ini membuat SurfaceView yang menghosting UI pemilih foto tersemat. Composable 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 Pemilih Foto sebagai dependensi.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Untuk menambahkan pemilih foto tersemat, Anda harus 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 tersemat.
// 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)
Perlu diperhatikan bahwa pengalaman pemilih foto tersemat tersedia untuk pengguna yang menjalankan Android 14 (level API 34) atau yang lebih tinggi dengan Ekstensi SDK 15+. Baca lebih lanjut ketersediaan perangkat pemilih foto.
Untuk meningkatkan privasi dan keamanan pengguna, sistem merender pemilih foto tersemat 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 halnya Anda merencanakan banner iklan.
Jika Anda memiliki 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, kami kini menghadirkan tingkat privasi, kesederhanaan, dan pengalaman pengguna yang sama untuk pemilihan kontak.
Roxanna Aliabadi Walker • Waktu baca: 4 menit
-
Berita Produk
Ekosistem seluler selalu berkembang, sehingga menghadirkan peluang dan ancaman baru. Melalui perubahan ini, Android dan Google Play tetap berkomitmen untuk memastikan bahwa miliaran pengguna dapat terus menikmati aplikasi mereka dengan percaya diri dan inovasi developer dapat berkembang.
Vijaya Kaza • Waktu baca: 3 menit
-
Berita Produk
Rilis Jetpack Compose April '26 stabil. Rilis ini berisi modul Compose inti versi 1.11 (lihat pemetaan BOM lengkap), alat debug elemen bersama, peristiwa trackpad, dan lainnya.
Meghan Mehta • Waktu baca: 5 menit
Terus dapatkan informasi
Dapatkan insight pengembangan Android terbaru yang dikirim ke kotak masuk Anda setiap minggu.