Custom Color Picker in SwiftUI

Uplift iOS Interview

"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.

To create a simple color picker in SwiftUI, you can use a Picker control and bind it to an array of Color values. Here is an example of how you might do this:

struct CustomColorPicker: View {
    @Binding var selectedColor: Color

    var body: some View {
        Picker("Color", selection: $selectedColor) {
            ForEach([Color.red, .blue, .green, .gray, .brown], id: \.self) { color in
                Text(color.description.capitalized)
                    .tag(color)
                    .foregroundColor(color)
            }
        }
        .pickerStyle(.wheel)
    }
}

This creates a picker control with a segmented style, and populates it with a list of all the available Color cases. The selectedColor binding is used to keep track of the currently selected color, and the description property of each Color is used as the label for the corresponding segment.

To use this color picker in your code, you would need to create a binding to a state variable that will hold the selected color, and pass it to the selectedColor property of the ColorPicker.

For example:

struct ContentView: View {
    @State private var selectedColor = Color.red

    var body: some View {
        VStack {
            CustomColorPicker(selectedColor: $selectedColor)
            Text("Selected color: \(selectedColor.description)")
        }
    }
}

This will create a color picker with a list of all the available Color cases, and display the selected color below the picker.

Color Picker Wheel

You can use the native SwiftUI ColorPicker control that allows the user to select a color. 

struct ContentView: View {
    @State private var selectedColor = Color.blue

    var body: some View {
        ZStack {
            ColorPicker("Select a color", selection: $selectedColor)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(selectedColor)
    }
}
Native Color Picker

Let me create another version of the custom color picker. To create a custom color picker in SwiftUI, you can use a ScrollView or VStack to lay out a list of Button or Circle views, each with a different color. Here is an example of how you might do this:

struct CustomColorPicker: View {
    @Binding var selectedColor: Color
    let colors: [Color] = [.purple,
                           .red,
                           .orange,
                           .yellow,
                           .green,
                           .blue]
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20) {
                ForEach(colors, id: \.self) { color in
                    Button(action: {
                        self.selectedColor = color
                    }) {
                        Circle()
                            .fill(color)
                            .frame(width: 50, height: 50)
                            .overlay(
                                Circle()
                                    .stroke(Color.white, lineWidth: self.selectedColor == color ? 3 : 0)
                            )
                    }
                }
            }
            .padding()
        }
    }
}

struct ContentView: View {
    @State private var selectedColor = Color.blue

    var body: some View {
        ZStack {
            CustomColorPicker(selectedColor: $selectedColor)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
Custom Color Picker With Scroll

This creates a horizontal scroll view with a row of buttons, each with a circular shape and a different color. When a button is tapped, the selectedColor binding is updated to the corresponding color. The buttons also have an overlaid circle with a black stroke that is shown or hidden based on whether the button’s color is the currently selected color.

To use this color picker in your code, you would need to create a binding to a state variable that will hold the selected color, and pass it to the selectedColor property of the ColorPicker.

However, we can create another variation of color picker with a tick mark by using image.

struct CustomColorPicker: View {
    @Binding var selectedColor: Color
    let colors: [Color] = [.purple,
                           .red,
                           .orange,
                           .yellow,
                           .green,
                           .blue]
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20) {
                ForEach(colors, id: \.self) { color in
                    Button(action: {
                        self.selectedColor = color
                    }) {
                        Image(systemName: self.selectedColor == color ? "checkmark.circle.fill" : "circle.fill")
                            .resizable()
                            .frame(width: 50, height: 50)
                    }.accentColor(color)
                }
            }
            .padding()
        }
    }
}

struct ContentView: View {
    @State private var selectedColor = Color.red

    var body: some View {
        ZStack {
            CustomColorPicker(selectedColor: $selectedColor)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
Custom color picker with tick mark

Rev Up Your iOS Skills: Take a Dynamic Learning Journey
iOS Career Boost

iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks


Get Ready to Shine: Mastering the iOS Interview


Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.


Connect with me on

Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.

If you know someone who would benefit from reading this article, please share it with them.