question

JesseKnott-2239 avatar image
0 Votes"
JesseKnott-2239 asked JesseKnott-2239 commented

Change Kebab icon for Forms/Android/iOS

Hello,
I understand that the Secondary menu items cannot be made icons. Please ignore my assignment of icons in the Secondary menu items. I mainly have them there to serve as reminders if I decide to go to creating a mock menu using an AbsoluteLayout page that mimics an actual menu.

However, can I modify the Kebab icon? I have color themes in my app, and would like to make the Kebab match my color themes. Or do I have to go ahead and make a mock menu as I described above?

Here's my code (not sure why, it's pretty self explanatory LOL)

 <ContentPage.ToolbarItems>
        
     <ToolbarItem
         Clicked="AddItem_Clicked"
         IconImageSource="{Binding Path=AddIcon}"
         Text="Add" />

     <ToolbarItem
         Clicked="ExportLoadsAsXML"
         IconImageSource="{StaticResource Key=icoFileXML}"
         Order="Secondary"
         Text="Export XML" />

     <ToolbarItem
         Clicked="ExportExcelRecords_Clicked"
         IconImageSource="{StaticResource Key=icoFileXLS}"
         Order="Secondary"
         Text="Export Excel" />

     <ToolbarItem
         Clicked="ImportDataItem_Clicked"
         IconImageSource="{StaticResource Key=icoImport}"
         Order="Secondary"
         Text="Import Data" />

     <ToolbarItem
         Clicked="DeleteRecords_Clicked"
         IconImageSource="{StaticResource Key=icoDelete}"
         Order="Secondary"
         Text="Delete Records" />
 </ContentPage.ToolbarItems>


Cheers!

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JesseKnott-2239 commented

Hello,


Welcome to our Microsoft Q&A platform!

In android, you can change the style to achieve this.

Please refer to the following code:
Add item inside MainTheme.Base :

  <item name="actionOverflowButtonStyle">@style/OverflowButtonStyle</item>

Then adding style inside resources tag :

 <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
   <item name="android:src">@drawable/circle</item> //here set the wanted icon
 </style>

The full style.xml code is :

 <?xml version="1.0" encoding="utf-8" ?>
 <resources>
    
   <style name="MainTheme" parent="MainTheme.Base">
   </style>
   <!-- Base theme applied no matter what API -->
   <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
     <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
     <item name="windowNoTitle">true</item>
     <!--We will be using the toolbar so no need to show ActionBar-->
     <item name="windowActionBar">false</item>
     <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
     <!-- colorPrimary is used for the default action bar background -->
     <item name="colorPrimary">#2196F3</item>
     <!-- colorPrimaryDark is used for the status bar -->
     <item name="colorPrimaryDark">#1976D2</item>
     <!-- colorAccent is used as the default value for colorControlActivated
          which is used to tint widgets -->
     <item name="colorAccent">#FF4081</item>
     <!-- You can also set colorControlNormal, colorControlActivated
          colorControlHighlight and colorSwitchThumbNormal. -->
     <item name="windowActionModeOverlay">true</item>
    
     <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    
     <item name="actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
          
   </style>
    
     <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
         <item name="android:src">@drawable/image</item> //here set the wanted icon
     </style>
    
   <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
     <item name="colorAccent">#FF4081</item>
   </style>
 </resources>

The result is:
93795-image.png



Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.


Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (38.7 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Excellent, thanks!
It only occurred to me later that night that since the Kebab is an Android / iOS specific thing it would be in those projects respectively.

Thanks again for the help!

0 Votes 0 ·