title: SwiftUI Background Colors for layers in custom control
body: <p>I'm trying to create a custom toggle button control in SwiftUI where the user can see two textual values in a rounded capsule with the selected value showing in one color and the unselected value showing in a different color. The example code I am doing this for would be on a login/join screen where the user can toggle between seeing a login screen or a join screen.  My issue is I can't figure out to get my background colors to work as shown below.  In my example below the green color around login is showing the selected value and the gray value for join is showing the unselected option.  My issue is I want the space in between the two values that looks like a white hourglass to be filled in with the same unselected color (gray).</p>
  
  <p><a href="https://i.stack.imgur.com/70FeK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/70FeK.png" alt="enter image description here"></a></p>
  
  <p>My code is as follows:</p>
  
  <pre><code>struct LoginJoinToggle : View {
  @State var showLogin: Bool = true
  
  var body: some View {
      var leftColor: Color = Color.green
      var rightColor: Color = Color.gray
      var leftForegroundColor: Color = Color.white
      var rightForegroundColor: Color = Color.black
  
      if (showLogin == false){
          leftColor = Color.gray
          rightColor = Color.green
          leftForegroundColor = Color.black
          rightForegroundColor = Color.white
      }
      return HStack{
          Text("Login")
              .font(.headline)
              .foregroundColor(leftForegroundColor)
              .padding()
              .frame(minWidth: 0, maxWidth: .infinity)
              .background(leftColor)
              .cornerRadius(40.0)
              .onTapGesture {self.showLogin = true}
          Text("Join")
              .font(.headline)
              .foregroundColor(rightForegroundColor)
              .padding()
              .frame(minWidth: 0, maxWidth: .infinity)
              .background(rightColor)
              .cornerRadius(40.0)
              .onTapGesture {self.showLogin = false}
      }.overlay(
          RoundedRectangle(cornerRadius: 40)
              .stroke(Color.green, lineWidth: 1)
      )
  }
  </code></pre>
  
  <p>I can get the hourglass area to fill in correctly by adding a background color of gray to the HStack as shown below but then it also shows the grey color for the entire hstack area, bleeding outside the rounded corners.</p>
  
  <pre><code>    }.overlay(
          RoundedRectangle(cornerRadius: 40)
              .stroke(Color.green, lineWidth: 1)
      ).background(Color.gray)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LGCtD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LGCtD.png" alt="enter image description here"></a></p>
  
  <p>I've also tried setting the background to gray for the RoundedRectangle object but then it overlays that color over everything as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/6foHn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6foHn.png" alt="enter image description here"></a></p>
  
  <p>I'm assuming/hoping there is a way for to influence that middle area (hourglass) background color with the overlay but I can't seem to figure out how to make it work.  Any suggestions would be greatly appreciated.</p>