I'm looking for a way to display a notification badge without showing a number—essentially, just an empty badge to indicate the presence of notifications. From my research, it seems like this functionality isn't available . Is there any workaround or method to achieve this?
General
RSS for tagExplore the art and science of app design. Discuss user interface (UI) design principles, user experience (UX) best practices, and share design resources and inspiration.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I’m working on a SwiftUI sheet that has a specific size 624 x 746, but I’m running into issues on certain devices like the iPad mini in landscape or when using Stage Manager. The sheet sometimes gets cut off, and the content inside isn’t fully visible.
Current Implementation:
The sheet is 624 x 746, but if there's less width or height around the sheet, I want it to scale dynamically while maintaining the aspect ratio (to ensure the content can always be shown)
Ideally, I’d love for the sheet to increase in size on larger screens to cover more of the page behind it.
The sheet contains a NavigationStack with multiple pages.
Problems I’m Facing:
iPad mini (landscape): The bottom content (like buttons) gets cut off when the sheet height is constrained.
Stage Manager: If the user resizes the window, the sheet doesn’t adjust properly, leading to UI clipping.
Ideal behavior: I want the sheet to dynamically scale its width and height while maintaining the aspect ratio.
Questions
How can I prevent content from being cut off when using the sheet in iPad mini landscape?
Is there a better approach to handle Stage Manager resizing dynamically?
Any insights or alternative approaches would be greatly appreciated! 🚀
Also, I’m a designer, and I’m doing this to help our development team—so please bear with my code 😅
Thanks in advance! 😊
Context & Issue
I am developing an iOS application.
My app icon uses colors that are relatively close to each other.
When the user enables Accessibility → Display & Text Size → Color Filters → Grayscale (or similar modes), the icon becomes harder to distinguish because it loses color and contrast is reduced.
Goal
When iOS switches to grayscale mode, I want the app icon to maintain good contrast between its elements so it remains clearly recognizable.
What I’ve tried
Redesigned the icon with more contrasting colors.
Added strokes/outlines, but it still doesn’t look much better in grayscale.
Researched how iOS renders app icons when grayscale is enabled, but couldn’t find a way to override or provide an alternative icon.
Specific questions
Is there any API or mechanism in iOS that allows providing a different version of the app icon when the user has grayscale mode enabled?
If there’s no direct API, are there any best practices for designing iOS app icons to ensure good contrast when converted to grayscale?
Do we have to design grayscale version for app icon?
Thank you!
Hi,
I want to generate some sample datas for demonstrating the functions of my app when the app launched. My codes are as followings:
func generateSampleData() {
let hasLaunchedKey = "HasLaunchedBefore"
let defaults = UserDefaults.standard
if !defaults.bool(forKey: hasLaunchedKey) {
//generate the demo data
}
defaults.set(true, forKey: hasLaunchedKey)
}
And I put the func in a view's onAppear modifier. I found every time I go the view, it generates the demo data again, which results in producing a lot of demo data. But I have set the status of the function running in the userdefault. Why did it happen?
Best Wishes,
Hi,
I was trying to use macOS-Sequoia-Production-Templates in Sketch format and when I try to export png icon file of the document template, it always includes grey nontransparent background which I am unable to delete. In contrast, exporting png app icon file from another template has transparent background and exports well.
Is it something wrong with the document icon production template? How can I export document png icon file with transparent background??
Thanks
I am developing an app that requires calling the iPhone's Face ID module to scan users' facial data. Where can I find Apple's design resources and guidelines for Face ID? The Face ID resources available in Figma are incomplete, and I need more support.
For example, in the iPhone settings, the scenario: the UI interface for scanning the user's face to collect data, specifically the circular design in the "How to Set Up Face ID" screen.
We're using StoreKit for in-app purchases on iOS, and our backend has the server notification URL configured. However, during subscription renewals, Apple's server doesn't send any requests to our endpoint. What could be causing this?
I found that unofficial apps like ChatGPT and Shadowrocket can use widgets in VisionOS 26. How is this achieved? How can I also enable widgets for apps I develop?
Dear Apple Innovation Team,
I have a game-changing iPhone concept and want Apple to explore it first.
📱 iPhone 18 – The First True Portless iPhone
No ports – MagSafe 2.0 with high-speed data transfer.
Under-display Face ID & Camera – No security compromise.
Seamless OLED Display – No interruptions, just pure screen.
📂 iPhone 20 – The Perfect Foldable
Crease-free foldable design – Apple perfects what others failed to.
Optimized iOS for foldables – Smooth UI & app integration.
Apple leads the foldable market.
🚀 Why This Matters: Apple can set a new standard & dominate both innovations.
Looking forward to your response.
Best,
Saksham Sethi
Hi Apple developer community. I have a question a lot of users don’t like the new control center and notification center. Are you guys gonna blur the background or are you guys gonna keep it the same?
Hello, I am looking to develop a relationship with a developer that has experience running through the IOS build approval process. To elaborate, my team and I have designed and built a software application which is working through the Apple Developer review process to have the app approved and released to the App Store. Unfortunately, there has been some challenges, simple challenges in my eyes with our interface preventing Apple from approving our application. Happy to elaborate further.
A primary problem and solution I have seen is the software build was testing solely on the iPhone but as recently directed it seem the application must be accessible on iPad as well. With this the case, I have experience some software platforms where on the ipad the interface is not displayed on the whole screen. I am looking for direction on how to implement this setup for the 1st IOS build. Another concern from Apples Developer Review team is the App Tracking Transparency kit may need to be implemented.
Hi everyone, I'm currently working on my own Apple TV app. So far, things are going pretty well, but right now, I'm stuck on the design of the categories or selection menus.
Here's a screenshot of how it looks right now:
The green color and the border are intentionally added for now so I can see what is where. My actual goal is to remove the gray bar (or is this the "main bar"?). The pink bar and its border are just design elements that can be removed if needed. I want it to look more "original," like this:
Here is the code:
let title: String
let isSelected: Bool
var body: some View {
HStack {
Text(title)
.foregroundColor(isSelected ? .black : .white)
.font(.system(size: 22, weight: .regular))
.padding(.leading, 20)
Spacer()
Image(systemName: "chevron.right")
.foregroundColor(isSelected ? .black : .gray)
.padding(.trailing, 20)
}
.frame(height: 50) // Einheitliche Höhe für die Kategorien
.background(Color.pink) // Innerer Hintergrund auf pink gesetzt
.cornerRadius(10) // Abrundung direkt auf den Hintergrund anwenden
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.green, lineWidth: 3) // Äußerer Rahmen auf grün gesetzt
)
.padding(.horizontal, 0) // Entferne äußere Ränder
.background(Color.clear) // Entferne alle anderen Hintergründe
}
}
struct SettingsView_Previews: PreviewProvider {
static var previews: some View {
SettingsView()
}
}
I’ve adjusted the code, but it’s still not quite right. When a category is not selected, it appears black instead of gray, like in the original design
Here is the code:
struct SettingsView: View {
@State private var selectedCategory: String?
var body: some View {
NavigationStack {
ZStack {
Color.black
.edgesIgnoringSafeArea(.all)
VStack(spacing: 0) {
// Überschrift oben in der Mitte
Text("Einstellungen")
.font(.system(size: 40, weight: .semibold))
.foregroundColor(.white)
.padding(.top, 30)
HStack {
// Linke Seite mit Logo
VStack {
Spacer()
Image(systemName: "applelogo")
.resizable()
.scaledToFit()
.frame(width: 120, height: 120)
.foregroundColor(.white)
Spacer()
}
.frame(width: UIScreen.main.bounds.width * 0.4)
// Rechte Seite mit Kategorien
VStack(spacing: 15) {
ForEach(categories, id: \.self) { category in
NavigationLink(
value: category,
label: {
SettingsCategoryView(
title: category,
isSelected: selectedCategory == category
)
}
)
.buttonStyle(PlainButtonStyle())
}
}
.frame(width: UIScreen.main.bounds.width * 0.5)
}
}
}
.navigationDestination(for: String.self) { value in
Text("\(value)-Ansicht")
.font(.title)
.foregroundColor(.white)
.navigationTitle(value)
}
}
}
private var categories: [String] {
["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"]
}
}
struct SettingsCategoryView: View {
let title: String
let isSelected: Bool
var body: some View {
HStack {
Text(title)
.foregroundColor(.white)
.font(.system(size: 22, weight: .medium))
.padding(.leading, 20)
Spacer()
Image(systemName: "chevron.right")
.foregroundColor(.gray)
.padding(.trailing, 20)
}
.frame(height: 50) // Einheitliche Höhe für die Kategorien
.background(isSelected ? Color.gray.opacity(0.3) : Color.clear) // Hervorhebung des ausgewählten Elements
.cornerRadius(8) // Abgerundete Ecken
.scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation
.animation(.easeInOut, value: isSelected)
}
}
struct SettingsView_Previews: PreviewProvider {
static var previews: some View {
SettingsView()
}
}
I've made the code in xcode for apple watch with 2 swift view (contentView.swift and interfaceController.swift).The swift for sound and haptic feedback is in InterfaceController.swift. But the the sound does not appear with haptic feedback in apple watch after complete the xcode.
the app is done but no sound appear with haptic feedback when rotate apple watch digital crown. when crown rotated but sound appear
code
import WatchKit
import AVFoundation
import WatchKit
class InterfaceController: WKInterfaceController {
// ... your UI elements
func playSelectionHapticAndSound() {
// Play a haptic feedback pattern
WKInterfaceDevice.current().play(.success)
// Load and play a selection sound effect
guard let soundURL = Bundle.main.url(forResource: "spin", withExtension: "wav") else { return }
do {
let player = try AVAudioPlayer(contentsOf: soundURL)
player.play()
} catch {
print("Error playing sound: \(error)")
}
}
}
I couldn't help noticing that the Maps and Find My apps make extensive use of "sheets stacked on top of each other" to represent its navigation hierarchy, with a "new content comes in from the bottom" orientation instead of a navigation stack with
"new content comes in from the right side" oriented transitions.
I'm interested in this topic because I have a similar navigation-hierarchy-over-a-map case in my app (with a custom map view though) and I'm torn back and forth between the approach of replicating the "stacked sheets" vs. putting a navigation stack in a sheet, esp. with the navstack approach being way more attainable with the iOS 26 glass design.
I couldn't find any guidance for this kind of UI in the Human Interface Guidelines; I'm leaning towards the navstack-approach for my app; but in terms of the behavior of the SwiftUI container views in this scenario it seems a little bit of an uphill path.
Any thoughts on what pattern should be preferred for presenting a deep navigational hierarchy on top of a map-like view?
Hi everyone,
I’m testing our SwiftUI app on both Xcode simulator and a real iPhone. On the simulator, everything looks clean and aligned. But when I run it on an actual iPhone (same build, iOS 18), the layout looks broken—fonts overlap, spacing is off, and elements are misaligned.
Both screenshots are from the exact same screen and time. First is simulator, second is iPhone.
Any idea why this difference happens? Is there something I should check in terms of rendering or layout settings?
Thanks in advance!
Hello. I've made a shape in the app which looks like the hello sign on apple products at startup. Is this considered plagiarism, or is it acceptable to use it in an app?
P.s: i've used Path for it and drawed it with curves
Hi,
I would like to make an educational app for helping my students to learn about malaria diagnosis and need to put some animal icon.
In the tabview, is it possible to use system images like monkey, bird, mouse. I cannot see these animals in SF symbol list.
Hi everyone 👋
I’ve been using the Apple Pencil Pro with my iPad Pro M4 and absolutely love it — the squeeze gesture, rotation, and haptics are amazing for creative work. But I’ve run into a little roadblock…
Right now, only one Pencil Pro can be paired at a time. So while one is charging, you can’t use another as a backup without unpairing and re-pairing, which interrupts the workflow.
I’d really love to see one of two things:
The ability to use one Pencil while another charges
or
An official external charger (or support for third-party ones)
Personally, I’d happily buy both a second Pencil and a charger if this became possible. I’ve even chatted with other creatives who feel the same — it would make a huge difference for long projects or working on the go.
Just wanted to share this idea and see if anyone else here would like this too. Thanks for reading!
Hi community,
I have a question regarding MusicKit, is it necessary to follow a design guideline to integrate this framework into my App?
Also, when no music is reproducing in MusicKit which placeholder we should show, do you provide the resource? Or can we create our own placeholder?
Thanks for all,
David.
i accidentally updated my iphone with the ios 18 and i dislike it. the emoji display were too huge and the picture gallery was kinda messy. i hope apple could fix this by bringing back the old emoji display and the gallery settings.