8

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?

HARSH ASHRA
  • 176
  • 1
  • 4
  • 20
  • 2
    I don't think it's possible with xml drawables. It's probably possible at runtime (see link), but that's inefficient. I would just create the image/vector in some image editing software. I'm guessing that's what they did in your screenshot too. https://stackoverflow.com/questions/225548/resources-for-image-distortion-algorithms – einUsername Jul 07 '20 at 18:55
  • This could be interesting too: https://stackoverflow.com/questions/11375130/skewing-a-text-view-in-android/11381021 – einUsername Jul 07 '20 at 19:22
  • @einUsername is right. Since xml drawables can only produce basic shapes and a trapez with round corners is not a basic shape, it is not possible with this technique. See my answer for a free tool to easily create complex svg and import them using AS – muetzenflo Jul 07 '20 at 19:49

2 Answers2

10

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"

Arpan Sarkar
  • 2,301
  • 2
  • 13
  • 24
0

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.

muetzenflo
  • 5,653
  • 4
  • 41
  • 82
  • And to add .. you need to create drawables for different screen sizes – AgentP Jul 09 '20 at 08:31
  • @AgentP not when using svgs. they have a `dp` value in the xml which enables Android to scale them accordingly. To make use of that, the minimum SDK needs to be 21 as far as I remember (Lollipop) – muetzenflo Jul 09 '20 at 09:25
  • Yeah, you were right ... I got confused with the definition of dp itself for a minute – AgentP Jul 09 '20 at 13:49
  • You don't have to create multiple SVG as per device size. Simple use `sdp` instead of `dp` and it will automatically adjust the size as per the device. https://github.com/intuit/sdp – Amit Kumar Jul 11 '20 at 16:07
  • Dude, this library is centuries old. If you use SVGs, the one single xml file is all you need. no libraries, no multiple files, no scaling. – muetzenflo Jul 11 '20 at 17:48