Set gradient radius at runtime and center it around a button

Question

Like many other posts listed here i struggle with radial gradient. post 1, 2, 3...

I want 2 things:

set a gradient around a button that has a selector as background drawable to get an aura effect
adjust this gradient radius to have the same feel independently of the screen resolution/size.

What I have done so far: Solution 1

I tried to implement several solutions found around. I show here my 2 best tries. I set a drawable with a gradient to the background of an enclosing layout around my button. That fulfills the point 1)

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_background"
        android:gravity="center"
        android:padding="@dimen/padding_extra_large" >

        <Button
            android:id="@+id/snap_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_button" />
</FrameLayout>

This is my @drawable/custom_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>

    <!-- Circular gradient -->
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <gradient
            android:endColor="#ffdbdbdb"
            android:gradientRadius="180"
            android:startColor="#ff000000"
            android:type="radial" 
            android:innerRadiusRatio="2"
            />
    </shape>
</item>

What I have done so far: Solution 2

The effect is good but android:gradientRadius="180" has to be adjust for each screen. Post 1 provided some solution and I tried to customize a layout and a view but I got crashes. Some configuration did not fail (with background set to root layout but in this case onDraw was never called).

Customized view :

public class GradientView extends View {

Paint paint;
RadialGradient gradient;
int maxSize;

public GradientView(Context context) {
    super(context);
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    this.setWillNotDraw(false);
    // TODO Auto-generated constructor stub
}

@Override
protected void onDraw(Canvas canvas) {
    Dbg.e("RelativeLayoutSnapBook", " -  onDraw !!!");
    maxSize = Math.max(getHeight(), getWidth());
    RadialGradient gradient = new RadialGradient(
            getWidth()/2,
            getHeight()/2,
            maxSize, 
            new int[] {Color.RED, Color.BLACK},
            new float[] {0, 1}, 
            android.graphics.Shader.TileMode.CLAMP);

    paint.setDither(true);
    paint.setShader(gradient);

    canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}
}

and this view goes here :

        <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="@dimen/padding_extra_large" >

        <com.snapcar.rider.widget.GradientView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <Button
            android:id="@+id/snap_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/snap_button" />
    </FrameLayout>

These is the fail : error when inflating the fragment with stack and stack of intern error :

10-29 18:55:25.794: E/AndroidRuntime(11828): FATAL EXCEPTION: main
10-29 18:55:25.794: E/AndroidRuntime(11828): android.view.InflateException: Binary XML file line #33: Error inflating class com.xxx.widget.GradientView
10-29 18:55:25.794: E/AndroidRuntime(11828): Caused by: java.lang.ClassNotFoundException: com.xxx.rider.widget.GradientView in loader dalvik.system.PathClassLoader[/system/framework/com.google.android.maps.jar:/data/app/com.snapcar.rider-1.apk]

Can you help me to do that please ? Thanks a lot!

Edit : someone?

score 0 · Answer 1 · edited May 23 '17 at 12:28

I solved it ! So much trouble :/ If you know Photoshop, you better go with it I think!

Thanks to this post that gave me the way to go : multiple-gradrient Only the first code extract was used but the whole post might interested you if you reached this post.

So I entirely define my gradient with code using a callback on global layout:

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    Log.v(TAG, "- onCreateView Fragment");
    root = inflater.inflate(R.layout.fragment_layout, null);
    root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            Log.e(TAG, "- On Layout Completed ! ");
            final FrameLayout frame = (FrameLayout) root.findViewById(R.id.frame_layout_gradient);
            ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
                @Override
                public Shader resize(int width, int height) {
                    Log.e(TAG, " - onGlobalLayout : getWidth = "+ frame.getWidth() +" - getHeight = "+ frame.getHeight() );
                    RadialGradient lg = new RadialGradient(frame.getWidth()/2, frame.getHeight()/2, 
                            frame.getWidth()/2, Color.BLACK, Color.parseColor("#FFdbdbdb"),  TileMode.CLAMP);
                    return lg;
                }
            };
            PaintDrawable p = new PaintDrawable();
            p.setShape(new OvalShape());
            p.setShaderFactory(sf);
            frame.setBackgroundDrawable((Drawable)p);
        }
    }
            );

This trick Color.parseColor("#FFdbdbdb") is need because the retard constructor of RadialGradient cannot read correctly the reference to your R.color.the_gray_I_want

The OvalShape does a circle in my case because my frameLayout is square.

With this solution, you have a shadowing totally independent of screen characteristics.

![the result - unvarying from SG3 to HTC wildfire!1

Set gradient radius at runtime and center it around a button

1 Answers1