Search code examples
androidxml

Bottom of XML being cut off

I have the following xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="bottom|center_horizontal">
        <rotate android:fromDegrees="45" android:toDegrees="45"
            android:pivotX="50%" android:pivotY="50%" >
            <shape android:shape="rectangle">
                <size android:width="12dp" android:height="12dp" />
                <corners android:bottomRightRadius="2dp"/>
                <solid android:color="@color/white" />
            </shape>
        </rotate>
    </item>

    <item android:bottom="6dp">
        <shape android:shape="rectangle">
            <size android:width="120dp" android:height="36dp" />
            <solid android:color="@color/white" />
            <corners android:radius="6dp" />
        </shape>
    </item>
</layer-list>

Which is being shown in my xml viewer like this: XML Viewer

I'm using it in my layout like this:

<RelativeLayout
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:background="@drawable/tooltip"
    >


</RelativeLayout>

The problem is shows like this: Cropped bottom

As you can see the bottom part of the arrow is being cropped for some reason.

I tried adding both margin and padding but the issue always remains the same. Any help is appreciated.

Solution

  • Apparently it was as simple as wrapping the arrow item inside of an inset like so:

    <item android:gravity="bottom|center_horizontal">
   <inset android:insetBottom="5dp">
        <rotate android:fromDegrees="45" android:toDegrees="45"
            android:pivotX="50%" android:pivotY="50%" >
            <shape android:shape="rectangle">
                <size android:width="12dp" android:height="12dp" />
                <corners android:bottomRightRadius="2dp"/>
                <solid android:color="@color/white" />
            </shape>
        </rotate>
    </inset>
</item>