Making UI with inward shadow as shown in the photo for Android and iOS (SwiftUI)

Question

I am trying to build an application and want to build a view that has inward shadow effect as shown in the picture. I wanted to do it in both Android and iOS (SwiftUI).

Answer 1

For now in SwiftUI it is possible to do only using different images for selected and non-selected states.

Here is a demo of approach to do this

struct TestSelectedTabs: View {
    @State var selectedTab = 1
    var body: some View {
        TabView(selection: $selectedTab){
            Text("One")
                .tabItem {
                    Image(systemName: selectedTab == 0 ? "printer.fill" : "printer")
                    Text("Print")
                }.tag(0)
            Text("Two")
                .tabItem {
                    Image(systemName: selectedTab == 1 ? "tv.fill" : "tv")
                    Text("Show")
                }.tag(1)
        }
    }
}

so having two set of icons (flat & pressed in) you can achieve required effect. Or, of course, you can generate image with desired "press in" effect in code, say using CoreGraphics, Layers, etc. but finally it needs to be just image.

Answer 2

Well you could just create a custom background with that particular shadow in mind and then just whenever the user presses the button change the button's background to reflect the shadow background, and since its custom you could do the shape of your liking and the depth of your liking too.

You would normally keep the icons/buttons flat right? and then when pressed/selected/active just change the background to this,so as to show emphasis on it being selected.

This is an almost similar approach to the method in the above answer.