Il selettore di foto incorporato: un modo più semplice per richiedere in privato foto e video nella tua app
Preparati a migliorare l'esperienza utente della tua app con un nuovo entusiasmante modo di utilizzare il selettore di foto di Android. Il nuovo selettore di foto incorporato offre agli utenti un modo semplice e incentrato sulla privacy per selezionare foto e video direttamente all'interno dell'interfaccia della tua app. Ora la tua app può ottenere tutti gli stessi vantaggi disponibili con il selettore di foto, incluso l'accesso ai contenuti cloud, integrato direttamente nell'esperienza della tua app.
Perché incorporare?
Siamo consapevoli che molte app vogliono offrire un'esperienza altamente integrata e fluida per gli utenti quando selezionano foto o video. Il selettore di foto incorporato è progettato proprio per questo, consentendo agli utenti di accedere rapidamente alle loro foto recenti senza mai uscire dalla tua app. Possono anche esplorare l'intera raccolta nel loro fornitore di contenuti multimediali cloud preferito (ad es. Google Foto), incluse le funzionalità di preferiti, album e ricerca. In questo modo, gli utenti non devono passare da un'app all'altra né preoccuparsi se la foto che vogliono è memorizzata localmente o nel cloud.
Integrazione perfetta, maggiore privacy
Con il selettore di foto incorporato, la tua app non ha bisogno di accedere alle foto o ai video dell'utente finché non seleziona effettivamente qualcosa. Ciò significa maggiore privacy per i tuoi utenti e un'esperienza più semplice. Inoltre, il selettore di foto incorporato offre agli utenti l'accesso all'intera raccolta multimediale basata sul cloud, mentre l'autorizzazione per le foto standard è limitata ai soli file locali.
Il selettore di foto incorporato in Google Messaggi
Google Messaggi mostra la potenza del selettore di foto incorporato. Ecco come l'hanno integrato:
- Posizionamento intuitivo : il selettore di foto si trova proprio sotto il pulsante della fotocamera, offrendo agli utenti una scelta chiara tra scattare una nuova foto o selezionarne una esistente.
- Anteprima dinamica:subito dopo che un utente tocca una foto, viene visualizzata un'anteprima di grandi dimensioni, che consente di confermare facilmente la selezione. Se deselezionano la foto, l'anteprima scompare, mantenendo l'esperienza pulita e ordinata.
- Espandi per visualizzare altri contenuti: la visualizzazione iniziale è semplificata e offre un facile accesso alle foto recenti. Tuttavia, gli utenti possono espandere facilmente il selettore di foto per sfogliare e scegliere tra tutte le foto e i video della propria raccolta, inclusi i contenuti cloud di Google Foto.
- Rispetto delle scelte degli utenti:il selettore di foto incorporato concede l'accesso solo alle foto o ai video specifici selezionati dall'utente, il che significa che può interrompere del tutto la richiesta delle autorizzazioni per foto e video. In questo modo, inoltre, Messaggi non deve gestire situazioni in cui gli utenti concedono solo un accesso limitato a foto e video.
Implementazione
L'integrazione del selettore di foto incorporato è semplificata dalla libreria Jetpack del selettore di foto.
Jetpack Compose
Innanzitutto, includi la libreria Jetpack Photo Picker come dipendenza.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
La funzione componibile EmbeddedPhotoPicker fornisce un meccanismo per includere l'interfaccia utente del selettore di foto incorporato direttamente nella schermata di Compose. Questo composable crea una SurfaceView che ospita l'interfaccia utente del selettore di foto incorporato. Gestisce la connessione al servizio EmbeddedPhotoPicker, gestisce le interazioni con l'utente e comunica gli URI dei contenuti multimediali selezionati all'applicazione chiamante.
@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)
}
}
)
}
}
}
}
}Visualizzazioni
Innanzitutto, includi la libreria Jetpack Photo Picker come dipendenza.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Per aggiungere il selettore di foto incorporato, devi aggiungere una voce al file di layout.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />e inizializzalo nell'attività/nel fragment.
// 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()
)
}Puoi chiamare diversi metodi di EmbeddedPhotoPickerSession per interagire con il selettore incorporato.
// 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)
È importante notare che l'esperienza del selettore di foto incorporato è disponibile per gli utenti che utilizzano Android 14 (livello API 34) o versioni successive con estensioni SDK 15+. Scopri di più sulla disponibilità del selettore di foto sui dispositivi.
Per una maggiore privacy e sicurezza degli utenti, il sistema esegue il rendering del selettore di foto incorporato in modo da impedire qualsiasi disegno o sovrapposizione. Questa scelta di progettazione intenzionale significa che la tua UX deve considerare l'area di visualizzazione del selettore di foto come un elemento distinto e dedicato, proprio come pianificheresti un banner pubblicitario.
Se hai feedback o suggerimenti, invia ticket al nostro strumento di monitoraggio dei problemi.
Continua a leggere
-
Novità sul prodotto
La privacy e il controllo dell'utente rimangono al centro dell'esperienza Android. Proprio come il selettore di foto ha reso la condivisione di contenuti multimediali sicura e facile da implementare, ora stiamo portando lo stesso livello di privacy, semplicità e ottima esperienza utente alla selezione dei contatti.
Roxanna Aliabadi Walker • Lettura: 4 minuti
-
Novità sul prodotto
Ogni anno, Google I/O presenta nuovi annunci e risorse in tutti gli ecosistemi e i prodotti, incluso lo sviluppo per Android. Man mano che lo sviluppo si sposta verso l'AI e gli strumenti di assistenza degli agenti, abbiamo ampliato le nostre offerte per supportarti al meglio, indipendentemente da come decidi di sviluppare per Android.
Simona Milanovic • Lettura di 2 minuti
-
Novità sul prodotto
A Google I/O 2026, abbiamo mostrato come gli ultimi progressi nell'ecosistema Android possono aiutarti a migliorare la qualità della tua app e massimizzare l'efficienza dello sviluppo.
Ataul Munim • Lettura di 3 minuti
Resta al passo con le novità
Ricevi gli ultimi approfondimenti sullo sviluppo per Android direttamente nella tua casella di posta ogni settimana.