Applying a custom view to textview background in android

Question

I have created a toolTip shape-like view , basically i want to set this view as backgound to my textview in android but for some reason it shows as cut-off from bottom and not showing fully , anyone's help is appreciated it , Thank you in advance

• My Custom View

<?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="24dp" android:height="24dp" />

                <corners android:bottomRightRadius="2dp"/>

                <gradient android:type="linear"
                    android:angle="0"
                    android:endColor="@color/grey"
                    android:startColor="@color/grey" />

            </shape>

        </rotate>

    </item>

    <item android:bottom="6dp">

        <shape android:shape="rectangle">

            <size android:width="120dp" android:height="40dp" />

            <gradient android:type="linear"
                android:angle="0"
                android:endColor="@color/grey"
                android:startColor="@color/grey" />

            <corners android:radius="10dp" />

        </shape>

    </item>

</layer-list>

• My Layout where i set the view

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main"
    tools:context=".MainActivity">


    /// setting it here
    <TextView
        android:id="@+id/toolTipText"
        style="@style/TextAppearance.AppCompat.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="4dp"
        android:background="@drawable/tool_tip_shape"
        android:fontFamily="sans-serif-condensed-medium"
        android:gravity="center"
        android:text="gggggbbbb"
        android:textColor="@color/black"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
        app:layout_constraintStart_toStartOf="@+id/constraintLayout" />


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="184dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/txt"
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:text="00:00"
            android:textColor="@color/black"
            android:visibility="gone"
            app:layout_constraintBottom_toTopOf="@+id/fab"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <ProgressBar
            android:id="@+id/progress_bar"
            style="@style/CircularDeterminateProgressBar"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:progress="0"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:backgroundTint="@color/white"
            android:padding="10dp"
            android:src="@drawable/ic_baseline_mic_24"
            app:borderWidth="0dp"
            app:fabCustomSize="80dp"
            app:layout_constraintBottom_toBottomOf="@+id/progress_bar"
            app:layout_constraintEnd_toEndOf="@+id/progress_bar"
            app:layout_constraintStart_toStartOf="@+id/progress_bar"
            app:layout_constraintTop_toTopOf="@+id/progress_bar"
            app:tint="@color/black" />


    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

• Screenshot of custom view

• This is how it shows inside layout ( it shows as cut off from bottom )

Answer 1

I changed the drawable a bit. I think its happening because the size property is set to both of the layers and then Android system is scaling them to fit the views.

PS. The drawable doesn't look right, but when set as background it works fine.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="12dp"
        android:gravity="bottom|center_horizontal">
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape android:shape="rectangle">
                <size
                    android:width="60dp"
                    android:height="60dp" />
                <corners android:bottomRightRadius="2dp" />
                <solid android:color="@color/black" />
            </shape>
        </rotate>
    </item>

    <item android:bottom="14dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/black" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World! "
        android:gravity="center"
        android:paddingBottom="12dp"
        android:paddingHorizontal="12dp"
        android:textColor="@color/white"
        android:background="@drawable/background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Sample Output:

Drawable shape

Drawable applied to text view as background