1

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).

enter image description here

sDev
  • 1,463
  • 9
  • 17
Suhas G
  • 45
  • 5
  • I dont think its possible to do in SwiftUI for TabBar items. As i know currently TabBar in SwiftUI its not so configurable yet – Ernist Isabekov Feb 21 '20 at 03:14
  • Not Necessarily TabBar, I wanted to use such effect for normal views. Both in Android and iOS (Swift UI) – Suhas G Feb 24 '20 at 09:23

2 Answers2

0

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

image1 image2

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.

Asperi
  • 228,894
  • 20
  • 464
  • 690
0

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.

ibrhm117
  • 387
  • 3
  • 25