Div MoD
Div MoD

Reputation: 158

Inner Shadow effect like Figma in native Android

I wonder if there is a way to create a view container with an Inner Shadow like in Figma in native Android.

I have already spent the whole day trying layer-list with different items (linear, radial gradients, shapes, bitmaps) but nothing seems to be similar to what I need.

Please check the attachment, pay attention to container's inner shadow, this is what I really need:

desired inner shadow

Links or parts of code/xml will be appreciated. Thanks in advance!

Upvotes: 2

Views: 885

Answers (1)

user46915
user46915

Reputation:

Try this:

Example XML for the layer-list:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#FFFFFF"/>
      <corners android:radius="10dp"/>
    </shape>
  </item>
  <item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="10dp">
    <shape android:shape="rectangle">
      <solid android:color="#00000000"/>
      <corners android:radius="10dp"/>
      <padding
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="0dp"/>
    </shape>
  </item>
</layer-list>

You can set the above XML as the background for the CardView:

<androidx.cardview.widget.CardView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/layer_list_example">
  <!-- Add your content here -->
</androidx.cardview.widget.CardView>

Note that you may need to adjust the offset and blur radius to achieve the desired appearance.

Upvotes: 0

Related Questions