Android - How to give your layout a 3D style?

user_8770853 0
Viewed 688

I was surfing the web to find a new style for the android layout and I find a pretty interesting one. Here is the Image.

enter image description here

I know more than basics about layout, but what I wanna is how can I give a 3d style look like in the above image? Especially that #7881 Code Box.

Here is Something that I have tried.

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="-25dp"
        android:top="-25dp"
        android:left="25dp"
        android:right="25dp">
        <rotate android:fromDegrees="20">
            <shape android:shape="rectangle">
                <size
                    android:width="50dp"
                    android:height="100dp"/>
                <solid android:color="#E30B3E"/>
            </shape>

        </rotate>
    </item>
</layer-list>

The output is this

enter image description here

Overall it gives the textview a 3d look but I want something like that in the image.

Any Suggestions?

android-layout android
2 Answers

Its pretty much simple just use android:rotationX property on the CardView like this

    <com.google.android.material.card.MaterialCardView
        ...
        android:rotationX="20"
        ...

android:rotationX="20"android:rotationX="10"

user_55180270

That's easy as long as the box should not be animated in its shape.

  1. Go to https://www.figma.com/ and start a new project (it's free)
  2. Export any shape you create there as svg
  3. Import this svg into Android Studio using the Resource Manager
  4. add your new drawable as background of the box.

Additional input, so your 50 points aren't wasted ;) :

  • You find several Android Presets for figma. Like UI Elements or buttons. For example here. For more just google for "Figma Android UI kit"

  • You can edit the generated SVG to your likes. Since it is only a text file, you can customize its colors (also using backgroundTint in xml), etc.

user_9901290
Related