Die eingebettete Bildauswahl: Eine nahtlosere Möglichkeit, Fotos und Videos in Ihrer App privat anzufordern
Mit der Android-Bildauswahl können Sie die Nutzerfreundlichkeit Ihrer App verbessern. Mit der neuen eingebetteten Bildauswahl können Nutzer Fotos und Videos direkt in der Benutzeroberfläche Ihrer App auswählen – nahtlos und datenschutzfreundlich. Jetzt kann Ihre App alle Vorteile der Bildauswahl nutzen, einschließlich des Zugriffs auf Cloud-Inhalte, die direkt in die App eingebunden sind.
Warum eingebettet?
Wir wissen, dass viele Apps Nutzern eine hochgradig integrierte und nahtlose Auswahl von Fotos oder Videos bieten möchten. Die eingebettete Bildauswahl wurde genau dafür entwickelt. Nutzer können schnell auf ihre letzten Fotos zugreifen, ohne die App verlassen zu müssen. Außerdem können sie ihre gesamte Mediathek bei ihrem bevorzugten Cloud-Medienanbieter (z. B. Google Fotos) durchsuchen, einschließlich Favoriten, Alben und Suchfunktion. So müssen Nutzer nicht mehr zwischen Apps wechseln oder sich Gedanken darüber machen, ob das gewünschte Foto lokal oder in der Cloud gespeichert ist.
Nahtlose Integration, verbesserter Datenschutz
Wenn Sie die eingebettete Bildauswahl verwenden, benötigt Ihre App erst dann Zugriff auf die Fotos oder Videos des Nutzers, wenn er tatsächlich etwas auswählt. Das bedeutet mehr Datenschutz für Ihre Nutzer und eine optimierte Nutzung. Außerdem können Nutzer über die eingebettete Bildauswahl auf ihre gesamte cloudbasierte Mediathek zugreifen, während die Standardberechtigung für Fotos auf lokale Dateien beschränkt ist.
Die eingebettete Bildauswahl in Google Messages
Google Messages zeigt, wie leistungsstark die eingebettete Bildauswahl ist. So wurde die Funktion integriert:
- Intuitive Platzierung : Die Bildauswahl befindet sich direkt unter der Kamerataste. So können Nutzer ganz einfach entscheiden, ob sie ein neues Foto aufnehmen oder ein vorhandenes auswählen möchten.
- Dynamische Vorschau:Unmittelbar nachdem ein Nutzer auf ein Foto getippt hat, wird eine große Vorschau angezeigt, sodass er seine Auswahl ganz einfach bestätigen kann. Wenn sie die Auswahl des Fotos aufheben, verschwindet die Vorschau und die Ansicht bleibt übersichtlich.
- Mehr Inhalte anzeigen: Die erste Ansicht ist vereinfacht und bietet einfachen Zugriff auf aktuelle Fotos. Nutzer können die Bildauswahl jedoch ganz einfach erweitern, um alle Fotos und Videos in ihrer Galerie zu durchsuchen und auszuwählen, einschließlich Cloud-Inhalten aus Google Fotos.
- Nutzerauswahl respektieren:Die eingebettete Bildauswahl gewährt nur Zugriff auf die vom Nutzer ausgewählten Fotos oder Videos. Das bedeutet, dass die Berechtigungen für Fotos und Videos nicht mehr angefordert werden müssen. Außerdem muss Messages so nicht mit Situationen umgehen, in denen Nutzer nur eingeschränkten Zugriff auf Fotos und Videos gewähren.
Implementierung
Die Einbindung der eingebetteten Bildauswahl wird durch die Jetpack-Bibliothek für die Bildauswahl vereinfacht.
Jetpack Compose
Fügen Sie zuerst die Jetpack-Bildauswahl-Bibliothek als Abhängigkeit hinzu.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Die zusammensetzbare Funktion „EmbeddedPhotoPicker“ bietet einen Mechanismus, um die eingebettete Benutzeroberfläche der Bildauswahl direkt in Ihren Compose-Bildschirm einzufügen. Mit dieser zusammensetzbaren Funktion wird eine SurfaceView erstellt, in der die eingebettete Benutzeroberfläche der Bildauswahl gehostet wird. Sie verwaltet die Verbindung zum EmbeddedPhotoPicker-Dienst, verarbeitet Nutzerinteraktionen und kommuniziert ausgewählte Media-URIs an die aufrufende Anwendung.
@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)
}
}
)
}
}
}
}
}Aufrufe
Fügen Sie zuerst die Jetpack-Bildauswahl-Bibliothek als Abhängigkeit hinzu.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Wenn Sie die eingebettete Bildauswahl hinzufügen möchten, müssen Sie Ihrer Layoutdatei einen Eintrag hinzufügen.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />und initialisieren Sie sie in Ihrer Aktivität bzw. Ihrem 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()
)
}Sie können verschiedene Methoden von EmbeddedPhotoPickerSession aufrufen, um mit der eingebetteten Auswahl zu interagieren.
// 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)
Die eingebettete Bildauswahl ist für Nutzer mit Android 14 (API-Level 34) oder höher und SDK-Erweiterungen ab Version 15 verfügbar. Weitere Informationen zur Verfügbarkeit der Bildauswahl auf Geräten
Aus Datenschutz- und Sicherheitsgründen wird die eingebettete Bildauswahl so gerendert, dass keine Zeichnungen oder Overlays möglich sind. Diese bewusste Designentscheidung bedeutet, dass Sie den Anzeigebereich der Bildauswahl in Ihrer UX als separates und dediziertes Element berücksichtigen sollten, ähnlich wie Sie es für ein Werbebanner tun würden.
Wenn Sie Feedback oder Vorschläge haben, reichen Sie Tickets in unserem Issue Tracker ein.
-
ProduktneuigkeitenApps, die auf die kommende Android-Version ausgerichtet sind, können mit der Berechtigung WRITE_CONTACTS nicht mehr direkt in Kontakte schreiben.
Roxanna Aliabadi Walker • Lesezeit: 6 Minuten -
ProduktneuigkeitenDatenschutz und Nutzerkontrolle sind weiterhin ein zentraler Bestandteil von Android. So wie die Bildauswahl das Teilen von Medien sicher und einfach gemacht hat, bringen wir jetzt dasselbe Maß an Datenschutz, Einfachheit und Nutzerfreundlichkeit in die Kontaktauswahl.
Roxanna Aliabadi Walker • Lesezeit: 4 Minuten -
ProduktneuigkeitenDie Entwicklung von KI-Agenten schreitet rasant voran und die Android-Entwicklung erreicht einen spannenden neuen Meilenstein: von der unterstützenden Codevervollständigung hin zu KI-Agenten, die unter Ihrer Anleitung End-to-End-Aufgaben ausführen. Sie haben die volle Auswahl und Flexibilität bei den Modellen und Agents, die Sie verwenden.
Jason Buchel • Lesezeit: 3 Minuten
Lassen Sie sich Woche für Woche die neuesten Informationen zur Android-Entwicklung zusenden.