8

My app shows a line chart and a custom MarkerView. One problem with the MarkerView is that the shadow doesn't work. The same code works in activity's layout. But, if I copy it to the MarkerView's layout, the shadow doesn't show when I run the app.

To show the shadow, I set elevation to 5dp and a background colour on the View. Then, for its parent view, I set padding to 5dp, set clipToBounds to false. like below:

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/line_chart_view"
    app:layout_constraintBottom_toBottomOf="parent">
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:padding="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some text"
            android:elevation="10dp"
            android:background="#FFFFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        
    </androidx.constraintlayout.widget.ConstraintLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>
Jia Li
  • 488
  • 2
  • 8

1 Answers1

0

So for my markerview this elevation wont work. Reason for it is because under the hood everything will be drawn on a canvas. So what we did was basically creating a shadow in our MarkerView XML Layout:

image

markerview.xml (drawable):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:startColor="#FF808080"
                android:endColor="#00000000"
                android:gradientRadius="11dp"
                android:type="radial" />
        </shape>
    </item>

    <item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="6dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_blue_bright" />
            <stroke
                android:width="3dp"
                android:color="@color/white" />
            <size
                android:width="20dp"
                android:height="20dp" />
        </shape>
    </item>
</layer-list>

As you can see the top, left, right, bottom is there to manipulate the shadow. I know you are working with a textview, but maybe this can give you insight on how it actually works.

Hopefully this helps others who are struggling as well with this issue.

Carlo Matulessy
  • 975
  • 1
  • 13
  • 27