CustomRenderer for Button background color transition - xamarin

Question

I have made a customrenderer for changing the TitleColor and BackgroundColor when an user click my button.
For some reason, when the button is focused, the TitleColor is turning more or less transparent, and my background doesn't animate like my TitleColor.
This is my code:
public class BtnRendereriOS : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Layer.CornerRadius = 0;
BackgroundNormalState(Control);
Control.TouchUpInside += (object sender, EventArgs c) =>
{
BackgroundNormalState(sender);
};
Control.TouchUpOutside += (object sender, EventArgs c) =>
{
BackgroundNormalState(sender);
};
Control.TouchDragOutside += (object sender, EventArgs c) =>
{
BackgroundNormalState(sender);
};
Control.TouchDragInside += (object sender, EventArgs c) =>
{
BackgroundChangedState(sender);
};
Control.TouchDown += (object sender, EventArgs c) =>
{
BackgroundChangedState(sender);
};
void BackgroundNormalState(object sender)
{
Action a = () => Control.SetTitleColor(UIColor.FromRGB(255,255,255), UIControlState.Normal);
UIView.PerformWithoutAnimation(a);
(sender as UIButton).BackgroundColor = UIColor.FromRGB(3, 169, 244);
}
void BackgroundChangedState(object sender)
{
Action a = () => Control.SetTitleColor(UIColor.FromRGB(0,0,0), UIControlState.Highlighted);
UIView.PerformWithoutAnimation(a);
(sender as UIButton).BackgroundColor = UIColor.FromRGB(104, 206, 253);
}
}
}
}
Currently, I have removed the animation from the TitleColor.
My questions are:
How do I add the same transition to my BackgroundColor similar to the default transition on my TitleColor?
How do I remove the "transparency" from the TitleColor when the button is being focused?

Answer 1

How do I remove the "transparency" from the TitleColor when the button
is being focused?
This is the feature of system button, if you don't like this try to use Custom style to avoid it:
UIButton btn = new UIButton(UIButtonType.Custom);
btn.SetTitle(Control.TitleLabel.Text, UIControlState.Normal);
SetNativeControl(btn);
// Pay attention to that the title color just needs to be set once
btn.SetTitleColor(UIColor.FromRGB(255, 255, 255), UIControlState.Normal);
btn.SetTitleColor(UIColor.FromRGB(0, 0, 0), UIControlState.Highlighted);
Then you can use UIView.Animate() to change your button's background color with "transition":
void BackgroundNormalState(object sender)
{
UIView.Animate(0.2, () =>
{
(sender as UIButton).BackgroundColor = UIColor.FromRGB(3, 169, 244);
});
}
void BackgroundChangedState(object sender)
{
UIView.Animate(0.2, () =>
{
(sender as UIButton).BackgroundColor = UIColor.FromRGB(104, 206, 253);
});
}

Answer 2

You can either use UIView.Animate|Async or UIView.TransitionNotify|Async depending upon the end result you are looking for. The key is to place all the changes within the same animation block so they occur at the same time via Core Animation (CA).
Here is an example using UIView.TransitionNotifyAsync using a TransitionCrossDissolve between the color changes.
// Set intial values
var normalTextColor = UIColor.FromRGB(255, 255, 255);
var normalBackgroundColor = UIColor.FromRGB(3, 169, 244);
var highlightTextColor = UIColor.Black;
var highlightBackgroundColor = UIColor.FromRGB(104, 206, 253);
Control.SetTitleColor(normalTextColor, UIControlState.Normal);
Control.BackgroundColor = normalBackgroundColor;
async Task NormalColorState(UIButton button)
{
await UIView.TransitionNotifyAsync(button, .25, UIViewAnimationOptions.TransitionCrossDissolve, () =>
{
button.BackgroundColor = normalBackgroundColor;
button.SetTitleColor(normalTextColor, UIControlState.Normal);
});
}
Control.TouchDown += async (object sender, EventArgs e) =>
{
var button = sender as UIButton;
await UIView.TransitionNotifyAsync(button, .25, UIViewAnimationOptions.TransitionCrossDissolve, () =>
{
button.BackgroundColor = highlightBackgroundColor;
button.SetTitleColor(highlightTextColor, UIControlState.Highlighted);
});
};
Control.TouchUpInside += async (object sender, EventArgs e) =>
{
await NormalColorState(sender as UIButton);
};
Control.TouchUpOutside += async (object sender, EventArgs e) =>
{
await NormalColorState(sender as UIButton);
};