Hi everyone! I’m working on a custom Gum Slider for Android/mobile in MonoGame.
I currently have issue:
- More importantly: on Android touch input, tapping the slider track does NOT move the slider value directly to the tapped position (like a normal mobile slider).
Dragging the thumb works, but tap-to-position does not.
I’m using a custom Gum slider visual with:
-
TrackInstance -
ThumbInstance -
custom bitmap font
-
IsMoveToPointEnabled = true
Desktop/Windows behavior works correctly, but Android touch behavior seems different.
My Gum initialization on Android:
private void InitializeGum()
{
GumService.Default.Initialize(this, DefaultVisualsVersion.V3);
GumService.Default.ContentLoader.XnaContentManager = Core.Content;
GumService.Default.CanvasWidth =
GraphicsDevice.PresentationParameters.BackBufferWidth / 6.0f;
GumService.Default.CanvasHeight =
GraphicsDevice.PresentationParameters.BackBufferHeight / 6.0f;
GumService.Default.Renderer.Camera.Zoom = 6.0f;
}
I follow the monogame tutorial and creates custom slider TrackInstance and ThumbInstance like this:
_middleBackground = new NineSliceRuntime();
_middleBackground.Width = 179f;
_middleBackground.WidthUnits = DimensionUnitType.Absolute;
_middleBackground.Dock(Gum.Wireframe.Dock.Left);
_middleBackground.X = 27f;
innerContainer.AddChild(_middleBackground);
_trackInstance = new ContainerRuntime();
_trackInstance.Name = "TrackInstance";
_trackInstance.Dock(Gum.Wireframe.Dock.Fill);
_trackInstance.Height = -2f;
_trackInstance.Width = -2f;
_middleBackground.AddChild(_trackInstance);
_fillRectangle = new ColoredRectangleRuntime();
_fillRectangle.Dock(Gum.Wireframe.Dock.Left);
_fillRectangle.Width = 90f;
_fillRectangle.WidthUnits = DimensionUnitType.PercentageOfParent;
_trackInstance.AddChild(_fillRectangle);
ContainerRuntime thumbInstance = new ContainerRuntime();
thumbInstance.Name = "ThumbInstance";
thumbInstance.Width = 13f;
thumbInstance.Height = 13f;
thumbInstance.WidthUnits = DimensionUnitType.Absolute;
thumbInstance.HeightUnits = DimensionUnitType.Absolute;
thumbInstance.Anchor(Gum.Wireframe.Anchor.Left);
_trackInstance.AddChild(thumbInstance);
And the slider setup:
Visual = topLevelContainer;
IsMoveToPointEnabled = true;
ValueChanged += HandleValueChanged;
ValueChangedByUi += HandleValueChangedByUi;
The value update only changes the fill width:
private void HandleValueChanged(object sender, EventArgs e)
{
double ratio = (Value - Minimum) / (Maximum - Minimum);
_fillRectangle.Width = 100 * (float)ratio;
}
The sliders are created in my title/options scene like this:
OptionsSlider musicSlider = new OptionsSlider(_atlas);
musicSlider.Text = "MUSIC";
musicSlider.Anchor(Gum.Wireframe.Anchor.Top);
musicSlider.Y = 30f;
musicSlider.Minimum = 0;
musicSlider.Maximum = 1;
musicSlider.Value = Core.Audio.SongVolume;
musicSlider.SmallChange = .1;
musicSlider.LargeChange = .2;
musicSlider.ValueChanged += HandleMusicSliderValueChanged;
musicSlider.ValueChangeCompleted += HandleMusicSliderValueChangeCompleted;
_optionsPanel.AddChild(musicSlider);
Has anyone implemented a touch-friendly custom Gum slider on Android/mobile before?
Should TrackInstance / ThumbInstance be structured differently, or is my CanvasWidth / CanvasHeight / Camera.Zoom setup causing a coordinate conversion issue?
I share this question in discord FlatRedBall and Gum-General channel-Message link
While I use Android studio virtual device Pixel 6 to test my project