Set shadow or elevation for SeriesItem about android-decoview-charting HOT 13 CLOSED

Currently it is not possible to set a series elevation or shadow for a DecoView SeriesItem. However It may be simple to modify the canvas rendering engine of DecoView to first draw a shadow. I will investigate some more when I have the time. If you could attach a couple of images showing how you would expect the shadow to look that would be helpful.

As a workaround in the current version I was able to achieve a result as shown in the attached image.

This was done by creating a second DecoView (not just another series, but creating another DecoView view on the layout.

         <com.hookedonplay.decoviewlib.DecoView
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            custom:dv_lineWidth="30dp"
            android:id="@+id/dynamicArcView2"
            android:paddingTop="6dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.hookedonplay.decoviewlib.DecoView
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            custom:dv_lineWidth="28dp"
            android:id="@+id/dynamicArcView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="6dp"/>

The shadow DecoView must be declared first in the XML so the second series is drawn on top. The shadow view has padding on the top and the main view has padding on the bottom.

Then whenever an event is triggered for the main view you need to also send the same event to the shadow.

       mDecoView1.addEvent(new DecoEvent.Builder(42.4f)
                .setIndex(mDecoView1Series1Index)
                .setDelay(3250)
                .build());

        mDecoView2.addEvent(new DecoEvent.Builder(42.4f)
                .setIndex(mDecoView2Series1Index)
                .setDelay(3250)
                .build());

from android-decoview-charting.

Some days ago I saw a prototype picture of some design in Materialup.com and I felt that I can make it with your library. The only problem is that I couldn't add some shadow to materialize my design.

from android-decoview-charting.

Thanks for the image. The shadows do look really nice in the image you posted.

I think I can add an option to DecoView to show a blur shadow for any given series.

I only worry about the performance of creating the shadow dynamically as the series are rendered. This is a two fold hit on performance. Creating the blurred shadow takes extra time and the canvas needs to be rendered every 16ms to avoid jank. The second hit is the BlurFilterMask provided by Android does not support hardware acceleration, so this would have to be turned off for the DecoView when using shadows. Having said all that, it should still be possible. If I get a chance this weekend I will implement it and let you know how it performs on low spec hardware.

from android-decoview-charting.

Is there any way to put shadow on the widget itself like elevation. I mean you don't render shadow by yourself but make android create shadow by Its libraries. Maybe if you extends some class ( I don't know which maybe looking into design support library would help)

At the I think this image can easily implemented in iOS because the logic of the views and graphic is a little bit different than android. I am not such expert in creating custom views in android

from android-decoview-charting.

I found a library that implemented shadow for Its graphs. Although he named It as progress view not chart but It can be used as an circular or ring charts. It doesn't have animations like you implemented but I thought maybe It can help your for shadow problem

https://github.com/GIGAMOLE/ArcProgressStackView

from android-decoview-charting.

I have done some testing with the shadows implemented. Like I suspected there is a bit of a performance hit, but that only becomes noticeable when animating say 5 - 10 series concurrently with the shadows applied. The good news is that for most use cases the performance will not be compromised.

I will add the ability to apply shadows into DecoView and try to find some time this week to release a beta v1.1 with this feature included.

Here is a sample snapshot, I think shadows will be a fantastic addition

from android-decoview-charting.

I have an initial basic implementation of the shadows feature for DecoView.

Here is how to use it:

Firstly you need to update your build.gradle to include this latest snapshot on the Shadow branch of DecoView.

compile 'com.github.bmarrdev:android-DecoView-charting:Shadow-SNAPSHOT'

Then in your java source code.

        mDecoView = (DecoView) findViewById(R.id.dynamicArcView);
        mDecoView.disableHardwareAccelerationForDecoView();

        final SeriesItem seriesItem = new SeriesItem.Builder(Color.parseColor("#FFFF8800"))
                .setRange(0, mSeriesMax, 0)
                .setInset(new PointF(30, 30))
                .setShadowSize(30)
                .setShadowColor(Color.DKGRAY)
                .setInitialVisibility(false)
                .build();

There are two new functions added to the SeriesItem builder.
setShadowSize(float shadowSize)

Pass the number of pixels the shadow should extend from the edge of the series item.

setShadowColor(int color)

Pass the color of the shadow. If you don't set a color then the default is Color.BLACK.

There are two other very important notes about using shadows in DecoView.

You must call DecoView.disableHardwareAccelerationForDecoView(); to disable hardware acceleration. The shadow functionality built into the Android canvas operations do not support the shadowing functionality.

If you are setting a shadow you will most likely want to also add the size of your shadow to the inset of the series item. The reason for this is the the decoView cannot draw outside of the given canvas. If you don't inset your series then at the middle edges of the view the shadow will be clipped. In the code sample about you can see I set the shadow size to 30 and also inset the series item 30 to prevent the shadow from being clipped. I was going to automatically inset any series with a shadow by the amount of the shadow, however this would result in multiple series not lining up on top of each other as expected if they have differing sized shadows.

I hope this matches your requirements and feel free to add any feedback regarding the shadows implementation.

from android-decoview-charting.

Thank you very much It is very nice.
I think i will wait for a more stable update of the whole package.

from android-decoview-charting.

No worries, I should have an update out in the next week

from android-decoview-charting.

First thank you for 1.1 update.
Yesterday I test the shadow feature but the result was not good enough. There was an obvious lag in the animation (I think because of disabling hardwareAcceleration) at last I disabled the shadow for now. May be my activity has to much progress in It.

from android-decoview-charting.

Thanks for the feedback. Yeah generating alpha shadows on dynamically changing objects is very intensive. The shadows work much better on static objects. I don't know of any quick fix to increase the rendering performance.

from android-decoview-charting.

Hi, it was a nice feature to add. I was wondering how we could update the textview with a particular value.
Example: I want to update the calorie value 2,925 by passing to the listener, how can I update the value from 0 to 2,925.

from android-decoview-charting.

If you want to animate changing the text from 0 to 2,925 probably you can use TextSwitcher in android.

from android-decoview-charting.