xamarin-range-slider icon indicating copy to clipboard operation
xamarin-range-slider copied to clipboard

Adjust image size on thumb images?

Open Trevor266 opened this issue 6 years ago • 4 comments

By default on tablet, the thumb images are laughably large, see attachment 1, this is a 400 pixel wide control: uglyimages

If I then try to adjust the bitmap size as the documentation states, say 20x20 pixels, this is the result:

image

Which somehow looks even worse and completely and utterly breaks the controls UI, am I doing wrong here? See code below for how I'm setting the dimensions:

            var img = new BitmapDrawable(seeker.ThumbImage);

            seeker.ThumbImage = ConvertToBitmap(img, 20, 20);
            seeker.ThumbPressedImage = ConvertToBitmap(img, 20, 20);
            seeker.ThumbDisabledImage = ConvertToBitmap(img, 20, 20);
        }

        private static Bitmap ConvertToBitmap(Drawable drawable, int widthPixels, int heightPixels)
        {
            var mutableBitmap = Bitmap.CreateBitmap(widthPixels, heightPixels, Bitmap.Config.Argb8888);
            var canvas = new Canvas(mutableBitmap);
            drawable.SetBounds(0, 0, widthPixels, heightPixels);
            drawable.Draw(canvas);
            return mutableBitmap;
        }

Trevor266 avatar May 09 '18 21:05 Trevor266

Sample code, please.

halkar avatar May 10 '18 21:05 halkar

The above code is my sample code, other than that it's just an axml attribute:

                <xamarin.rangeslider.RangeSliderControl
                    android:id="@+id/BathroomSeeker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/seeker_margin"
                    android:layout_marginRight="@dimen/seeker_margin"
                    android:layout_marginBottom="@dimen/seeker_margin"
                    app:activateOnDefaultValues="true"
                    app:thumbShadow="true"
                    app:absoluteMinValue="1"
                    app:absoluteMaxValue="6"
                    app:barHeight="@dimen/seeker_height" />

Trevor266 avatar May 11 '18 19:05 Trevor266

Can you provide a minimal solution reproducing the problem?

halkar avatar Jun 13 '18 10:06 halkar

I change the image and size from RangeSliderEffect and is work fine with me

`
public class RangeSliderEffect : PlatformEffect { protected override void OnAttached() { var ctrl = (RangeSliderControl)Control;

        Context context = Forms.Context;
        Bitmap icon = GetResizedBitmap(BitmapFactory.DecodeResource(context.Resources, Resource.Drawable.scrubber_control_normal_holo), 120, 120);

        ctrl.SetCustomThumbImage(icon);
        ctrl.ThumbDisabledImage = icon;
        ctrl.ThumbPressedImage = icon;
    }
    public Bitmap GetResizedBitmap(Bitmap bm, int newWidth, int newHeight)
    {
        int width = bm.Width;
        int height = bm.Height;
        float scaleWidth = ((float)newWidth) / width;
        float scaleHeight = ((float)newHeight) / height;
        // CREATE A MATRIX FOR THE MANIPULATION
        Matrix matrix = new Matrix();
        // RESIZE THE BIT MAP
        matrix.PostScale(scaleWidth, scaleHeight);

        // "RECREATE" THE NEW BITMAP
        Bitmap resizedBitmap = Bitmap.CreateBitmap(
            bm, 0, 0, width, height, matrix, false);
        bm.Recycle();
        return resizedBitmap;
    }
    protected override void OnDetached()
    {
    }
}

} `

ThaerM avatar Mar 02 '20 10:03 ThaerM