Icon not highlighted when using BottomBarPage
0
I’m using the BottomBarPage package. I’m changing the Tab on the fly programmatically, however the icon at the bottom doesn’t get highlighted for Android when there’s a tab change. It works well on iOS on the hand.
I tried James Montemagno’s code, I couldn’t get it to work with the BottomBarPage package.
This is the link to his code
https://montemagno.com/dynamically-changing-xamarin-forms-tab-icons-when-select/
How do I get the Icon highlighted when there is a Tab Page happening programmatically for BottomBarPage?
Below is my code.
public AndroidMainPage(int indexPage)
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
CurrentPageChanged += MainPage_CurrentPageChanged;
CurrentPage = Children[indexPage];
CurrentPage.Appearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes_selected.png" };
CurrentPage.Disappearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes.png" };
_currentPage = CurrentPage;
}
private void MainPage_CurrentPageChanged(object sender, EventArgs e)
{
IIconChange currentBinding;
if (_currentPage != null)
{
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = false;
}
_currentPage = CurrentPage;
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = true;
UpdateIcons?.Invoke(this, EventArgs.Empty);
}
Android BottomBarPage Renderer:
[assembly: ExportRenderer(typeof(AndroidMainPage), typeof(MyTabbedPageRenderer))]
namespace TabPageDemo.Android.Renderers
{
public class MyTabbedPageRenderer : BottomBarPageRenderer
{
bool setup;
TabLayout layout;
public MyTabbedPageRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs<BottomBarPage> e)
{
if (e != null) base.OnElementChanged(e);
if (Element != null)
{
((AndroidMainPage)Element).UpdateIcons += Handle_UpdateIcons;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (layout == null && e.PropertyName == "Renderer")
{
layout = (TabLayout)ViewGroup.GetChildAt(1);
}
}
void Handle_UpdateIcons(object sender, EventArgs e)
{
TabLayout tabs = layout;
if (tabs == null)
return;
for (var i = 0; i < Element.Children.Count; i++)
{
var child = Element.Children[i].BindingContext as IIconChange;
if (child == null) continue;
var icon = child.CurrentIcon;
if (string.IsNullOrEmpty(icon))
continue;
TabLayout.Tab tab = tabs.GetTabAt(i);
SetCurrentTabIcon(tab, icon);
}
}
void SetCurrentTabIcon(TabLayout.Tab tab, string icon)
{
tab.SetIcon(IdFromTitle(icon, ResourceManager.DrawableClass));
}
int IdFromTitle(string title, Type type)
{
string name = Path.GetFileNameWithoutExtension(title);
int id = GetId(type, name);
return id;
}
int GetId(Type type, string memberName)
{
object value = type.GetFields().FirstOrDefault(p => p.Name == memberName)?.GetValue(type)
?? type.GetProperties().FirstOrDefault(p => p.Name == memberName)?.GetValue(type);
if (value is int)
return (int)value;
return 0;
}
}
}
Using the Renderer, the tab variable is always null from this TabLayout.Tab tab = tabs.GetTabAt(i);
Any suggestion?
xamarin xamarin.forms xamarin.forms-layout
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
add a comment |
0
I’m using the BottomBarPage package. I’m changing the Tab on the fly programmatically, however the icon at the bottom doesn’t get highlighted for Android when there’s a tab change. It works well on iOS on the hand.
I tried James Montemagno’s code, I couldn’t get it to work with the BottomBarPage package.
This is the link to his code
https://montemagno.com/dynamically-changing-xamarin-forms-tab-icons-when-select/
How do I get the Icon highlighted when there is a Tab Page happening programmatically for BottomBarPage?
Below is my code.
public AndroidMainPage(int indexPage)
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
CurrentPageChanged += MainPage_CurrentPageChanged;
CurrentPage = Children[indexPage];
CurrentPage.Appearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes_selected.png" };
CurrentPage.Disappearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes.png" };
_currentPage = CurrentPage;
}
private void MainPage_CurrentPageChanged(object sender, EventArgs e)
{
IIconChange currentBinding;
if (_currentPage != null)
{
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = false;
}
_currentPage = CurrentPage;
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = true;
UpdateIcons?.Invoke(this, EventArgs.Empty);
}
Android BottomBarPage Renderer:
[assembly: ExportRenderer(typeof(AndroidMainPage), typeof(MyTabbedPageRenderer))]
namespace TabPageDemo.Android.Renderers
{
public class MyTabbedPageRenderer : BottomBarPageRenderer
{
bool setup;
TabLayout layout;
public MyTabbedPageRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs<BottomBarPage> e)
{
if (e != null) base.OnElementChanged(e);
if (Element != null)
{
((AndroidMainPage)Element).UpdateIcons += Handle_UpdateIcons;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (layout == null && e.PropertyName == "Renderer")
{
layout = (TabLayout)ViewGroup.GetChildAt(1);
}
}
void Handle_UpdateIcons(object sender, EventArgs e)
{
TabLayout tabs = layout;
if (tabs == null)
return;
for (var i = 0; i < Element.Children.Count; i++)
{
var child = Element.Children[i].BindingContext as IIconChange;
if (child == null) continue;
var icon = child.CurrentIcon;
if (string.IsNullOrEmpty(icon))
continue;
TabLayout.Tab tab = tabs.GetTabAt(i);
SetCurrentTabIcon(tab, icon);
}
}
void SetCurrentTabIcon(TabLayout.Tab tab, string icon)
{
tab.SetIcon(IdFromTitle(icon, ResourceManager.DrawableClass));
}
int IdFromTitle(string title, Type type)
{
string name = Path.GetFileNameWithoutExtension(title);
int id = GetId(type, name);
return id;
}
int GetId(Type type, string memberName)
{
object value = type.GetFields().FirstOrDefault(p => p.Name == memberName)?.GetValue(type)
?? type.GetProperties().FirstOrDefault(p => p.Name == memberName)?.GetValue(type);
if (value is int)
return (int)value;
return 0;
}
}
}
Using the Renderer, the tab variable is always null from this TabLayout.Tab tab = tabs.GetTabAt(i);
Any suggestion?
xamarin xamarin.forms xamarin.forms-layout
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12
add a comment |
0
0
0
I’m using the BottomBarPage package. I’m changing the Tab on the fly programmatically, however the icon at the bottom doesn’t get highlighted for Android when there’s a tab change. It works well on iOS on the hand.
I tried James Montemagno’s code, I couldn’t get it to work with the BottomBarPage package.
This is the link to his code
https://montemagno.com/dynamically-changing-xamarin-forms-tab-icons-when-select/
How do I get the Icon highlighted when there is a Tab Page happening programmatically for BottomBarPage?
Below is my code.
public AndroidMainPage(int indexPage)
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
CurrentPageChanged += MainPage_CurrentPageChanged;
CurrentPage = Children[indexPage];
CurrentPage.Appearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes_selected.png" };
CurrentPage.Disappearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes.png" };
_currentPage = CurrentPage;
}
private void MainPage_CurrentPageChanged(object sender, EventArgs e)
{
IIconChange currentBinding;
if (_currentPage != null)
{
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = false;
}
_currentPage = CurrentPage;
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = true;
UpdateIcons?.Invoke(this, EventArgs.Empty);
}
Android BottomBarPage Renderer:
[assembly: ExportRenderer(typeof(AndroidMainPage), typeof(MyTabbedPageRenderer))]
namespace TabPageDemo.Android.Renderers
{
public class MyTabbedPageRenderer : BottomBarPageRenderer
{
bool setup;
TabLayout layout;
public MyTabbedPageRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs<BottomBarPage> e)
{
if (e != null) base.OnElementChanged(e);
if (Element != null)
{
((AndroidMainPage)Element).UpdateIcons += Handle_UpdateIcons;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (layout == null && e.PropertyName == "Renderer")
{
layout = (TabLayout)ViewGroup.GetChildAt(1);
}
}
void Handle_UpdateIcons(object sender, EventArgs e)
{
TabLayout tabs = layout;
if (tabs == null)
return;
for (var i = 0; i < Element.Children.Count; i++)
{
var child = Element.Children[i].BindingContext as IIconChange;
if (child == null) continue;
var icon = child.CurrentIcon;
if (string.IsNullOrEmpty(icon))
continue;
TabLayout.Tab tab = tabs.GetTabAt(i);
SetCurrentTabIcon(tab, icon);
}
}
void SetCurrentTabIcon(TabLayout.Tab tab, string icon)
{
tab.SetIcon(IdFromTitle(icon, ResourceManager.DrawableClass));
}
int IdFromTitle(string title, Type type)
{
string name = Path.GetFileNameWithoutExtension(title);
int id = GetId(type, name);
return id;
}
int GetId(Type type, string memberName)
{
object value = type.GetFields().FirstOrDefault(p => p.Name == memberName)?.GetValue(type)
?? type.GetProperties().FirstOrDefault(p => p.Name == memberName)?.GetValue(type);
if (value is int)
return (int)value;
return 0;
}
}
}
Using the Renderer, the tab variable is always null from this TabLayout.Tab tab = tabs.GetTabAt(i);
Any suggestion?
xamarin xamarin.forms xamarin.forms-layout
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
I’m using the BottomBarPage package. I’m changing the Tab on the fly programmatically, however the icon at the bottom doesn’t get highlighted for Android when there’s a tab change. It works well on iOS on the hand.
I tried James Montemagno’s code, I couldn’t get it to work with the BottomBarPage package.
This is the link to his code
https://montemagno.com/dynamically-changing-xamarin-forms-tab-icons-when-select/
How do I get the Icon highlighted when there is a Tab Page happening programmatically for BottomBarPage?
Below is my code.
public AndroidMainPage(int indexPage)
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
CurrentPageChanged += MainPage_CurrentPageChanged;
CurrentPage = Children[indexPage];
CurrentPage.Appearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes_selected.png" };
CurrentPage.Disappearing += (s, a) => Children[indexPage].Icon = new FileImageSource() { File = "quizzes.png" };
_currentPage = CurrentPage;
}
private void MainPage_CurrentPageChanged(object sender, EventArgs e)
{
IIconChange currentBinding;
if (_currentPage != null)
{
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = false;
}
_currentPage = CurrentPage;
currentBinding = ((NavigationPage)_currentPage).CurrentPage.BindingContext as IIconChange;
if (currentBinding != null)
currentBinding.IsSelected = true;
UpdateIcons?.Invoke(this, EventArgs.Empty);
}
Android BottomBarPage Renderer:
[assembly: ExportRenderer(typeof(AndroidMainPage), typeof(MyTabbedPageRenderer))]
namespace TabPageDemo.Android.Renderers
{
public class MyTabbedPageRenderer : BottomBarPageRenderer
{
bool setup;
TabLayout layout;
public MyTabbedPageRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs<BottomBarPage> e)
{
if (e != null) base.OnElementChanged(e);
if (Element != null)
{
((AndroidMainPage)Element).UpdateIcons += Handle_UpdateIcons;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (layout == null && e.PropertyName == "Renderer")
{
layout = (TabLayout)ViewGroup.GetChildAt(1);
}
}
void Handle_UpdateIcons(object sender, EventArgs e)
{
TabLayout tabs = layout;
if (tabs == null)
return;
for (var i = 0; i < Element.Children.Count; i++)
{
var child = Element.Children[i].BindingContext as IIconChange;
if (child == null) continue;
var icon = child.CurrentIcon;
if (string.IsNullOrEmpty(icon))
continue;
TabLayout.Tab tab = tabs.GetTabAt(i);
SetCurrentTabIcon(tab, icon);
}
}
void SetCurrentTabIcon(TabLayout.Tab tab, string icon)
{
tab.SetIcon(IdFromTitle(icon, ResourceManager.DrawableClass));
}
int IdFromTitle(string title, Type type)
{
string name = Path.GetFileNameWithoutExtension(title);
int id = GetId(type, name);
return id;
}
int GetId(Type type, string memberName)
{
object value = type.GetFields().FirstOrDefault(p => p.Name == memberName)?.GetValue(type)
?? type.GetProperties().FirstOrDefault(p => p.Name == memberName)?.GetValue(type);
if (value is int)
return (int)value;
return 0;
}
}
}
Using the Renderer, the tab variable is always null from this TabLayout.Tab tab = tabs.GetTabAt(i);
Any suggestion?
xamarin xamarin.forms xamarin.forms-layout
xamarin xamarin.forms xamarin.forms-layout
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
edited Nov 26 '18 at 15:18
Cheesebaron
17.1k64199
17.1k64199
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
asked Nov 26 '18 at 5:25
Toyin SonoikiToyin Sonoiki
242
242
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12
add a comment |
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475166%2ficon-not-highlighted-when-using-bottombarpage%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475166%2ficon-not-highlighted-when-using-bottombarpage%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can't just copy someone else's code and expect it to work with an entirely different control. When using bottom tabs, the class is a different one. You need to adopt the code from the blog post to fit.
– Cheesebaron
Nov 26 '18 at 15:22
I did, the one he had inherited from the TabbedPageRenderer, mine inherits from the BottomBarPageRenderer. Any insights?
– Toyin Sonoiki
Nov 26 '18 at 18:12