3

I was taking a look at the background that Apple Music uses when displaying the currently playing song, like these:

enter image description here enter image description here

I really like the way that these backgrounds echo the color of the album cover, but I'm not entirely sure how I could implement something similar, given an Image. At first I thought it was just a magnified and blurred copy of the album Image, like this:

Image("album cover")
    .resizable()
    .frame(width: 300, height: 300)
    .blur(radius: 20)

But looking at the two images above I don't think this is the case, as not all colors in the cover image are included. Instead, do they use a radial gradient? If so, how do they pick which colors to use, and how could I do something similar, given an Image?

Thanks for the help!

Nicolas Gimelli
  • 695
  • 7
  • 19
  • 1
    Python, but interesting related reading: [Python - Find dominant/most common color in an image](https://stackoverflow.com/questions/3241929/python-find-dominant-most-common-color-in-an-image). Pick a color or three and you've got your gradient. – D M Feb 24 '22 at 20:08
  • 1
    Also possibly related: [Get average color of UIImage in Swift](https://stackoverflow.com/questions/26330924/get-average-color-of-uiimage-in-swift), [Getting main colors of a UIImage in Swift](https://stackoverflow.com/questions/41552544/getting-main-colors-of-a-uiimage-in-swift), [Objective-c - Getting least used and most used color in a image](https://stackoverflow.com/questions/13694618/objective-c-getting-least-used-and-most-used-color-in-a-image), [Determine primary and secondary colors of a UIImage](/questions/15962893/determine-primary-and-secondary-colors-of-a-uiimage) – D M Feb 24 '22 at 20:10
  • 2
    [Materials](https://developer.apple.com/documentation/swiftui/material/) – lorem ipsum Feb 24 '22 at 20:17
  • 1
    Here is the [WWDC video](https://developer.apple.com/wwdc21/10021) – lorem ipsum Feb 24 '22 at 20:19

1 Answers1

1

I went through a similar exercise lately and here is what I've used

.background {
        ZStack {
            Rectangle()
                .fill(backgroundColor().gradient)
                .edgesIgnoringSafeArea(.all)

            Rectangle()
                .fill(.ultraThinMaterial)
                .edgesIgnoringSafeArea(.all)
        }
    }

Note that .gradient is available since iOS 16. The background color can be any swiftui color. In my case I'm using the average color of the song artwork available with MusicKit since iOS 15.

Cyborg101
  • 67
  • 7