title: How to implement TabLayout.IOnTabSelectedListener.OnTabUnselected with TabbedPage.ToolbarPlacement="Bottom" - Xamarin Forms?
body: <p>I just recently used <code>android:TabbedPage.ToolbarPlacement="Bottom"</code>. I used to have the following code:</p>
  
  <pre><code>void TabLayout.IOnTabSelectedListener.OnTabUnselected(TabLayout.Tab tab)
  {
     var playPage = Element.CurrentPage as NavigationPage;
     if (!(playPage.RootPage is PhrasesFrame))
        return;
  
     var tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
     var playTab = tabLayout.GetTabAt(4);
     tab.SetText("Play");
     tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
     App.pauseCard = true;
  }
  </code></pre>
  
  <p>Anyone knows how can I implement this with <code>ToolbarPlacement="Bottom"</code> ? I have implemented both <code>BottomNavigationView.IOnNavigationItemSelectedListener</code>, <code>BottomNavigationView.IOnNavigationItemReselectedListener</code> but can't find any reference for <code>UnselectedTab</code> if there is any.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Previous custom renderer using the default tab position and implementing <code>TabLayout</code>:</p>
  
  <pre><code>namespace Japanese.Droid
  {
      public class MyTabbedPageRenderer: TabbedPageRenderer, TabLayout.IOnTabSelectedListener
      {
          ViewPager viewPager;
          TabLayout tabLayout;
          bool setup;
  
          public MyTabbedPageRenderer(Context context): base(context){ }
  
          protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
          {
              // More codes here
          }
  
          void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
          {
              UpdateTab(tab);
          }
  
          void TabLayout.IOnTabSelectedListener.OnTabSelected(TabLayout.Tab tab)
          {
              UpdateTab(tab);
          }
  
          void TabLayout.IOnTabSelectedListener.OnTabUnselected(TabLayout.Tab tab)
          {
              var playPage = Element.CurrentPage as NavigationPage;
              if (!(playPage.RootPage is PhrasesFrame))
                  return;
  
              var tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
              var playTab = tabLayout.GetTabAt(4);
              tab.SetText("Play");
              tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
              App.pauseCard = true;
          }
  
          void UpdateTab(TabLayout.Tab tab) 
          {
              // To have the logic only on he tab on position 1
              if (tab == null || tab.Position != 4)
              {
                  return;
              }
  
              if (tab.Text == "Play")
              {
                  tab.SetText("Pause");
                  tab.SetIcon(Resource.Drawable.ionicons_2_0_1_pause_outline_22);
                  App.pauseCard = false;
              }
              else
              {
                  tab.SetText("Play");
                  tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
                  App.pauseCard = true;
              }
          }
      }
  }
  </code></pre>
  
  <p>Current custom renderer using the <code>ToolbarPlacement="Bottom"</code>:</p>
  
  <pre><code>namespace Japanese.Droid
  {
      public class BottomTabPageRenderer : TabbedPageRenderer, BottomNavigationView.IOnNavigationItemSelectedListener, BottomNavigationView.IOnNavigationItemReselectedListener
      {
          public BottomTabPageRenderer(Context context) : base(context) { }
  
          protected override void OnElementChanged(ElementChangedEventArgs&lt;TabbedPage&gt; e)
          {
              base.OnElementChanged(e);
  
              // More codes here
          }
  
          bool BottomNavigationView.IOnNavigationItemSelectedListener.OnNavigationItemSelected(IMenuItem item)
          {
              base.OnNavigationItemSelected(item);
  
              UpdateTab(item)
          }
  
          void BottomNavigationView.IOnNavigationItemReselectedListener.OnNavigationItemReselected(IMenuItem item)
          {
              UpdateTab(item);
          }
  
          void UpdateTab(IMenuItem item)
          {
              var playTabId = 4;
  
              var title = item.TitleFormatted.ToString();
              if (item == null || item.ItemId != playTabId)
              {
                  return;
              }
  
              if (item.ItemId == playTabId)
              {
                  if (title == "Play")
                  {
                      item.SetTitle("Pause");
                      item.SetIcon(Resource.Drawable.ionicons_2_0_1_pause_outline_22);
                      App.pauseCard = false;
                  }
                  else
                  {
                      item.SetTitle("Play");
                      item.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
                      App.pauseCard = true;
                  }
              }
  
          }
  
      }
  }
  </code></pre>
  
  <p>So now my problem is I don't have any idea how will I implement the <code>TabLayout.IOnTabSelectedListener.OnTabUnselected</code> in the new custom renderer.</p>