xamarin forms android icons for light/dark

0
votes

How to write drawable xml´s to support different sizes and themes(dark & light)?

I downloaded my icon-packs from materialdesignicons.com.

my current xml drawable (e.g. arrow-left, from the icon pack);

<!-- drawable/arrow-left.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#000" android:pathData="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
</vector>

the folder structure;

structure

When my application changes the theme from light to dark, the icons in the drawable-night folders weren't used. So, is it even possible to implement something like that in a drawable xml or should i rename all icons to the same name?

2
c#xamlxamarinxamarin.formsxamarin.android
Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). – Jack Hua

2 Answers

1
votes

Android is actually really easy as you have to opt-in for the dark mode to apply to your application. Traditionally, you have always set a light or dark mode for your app in your app's styles. Every Xamarin app defaults to a light theme:

<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

You have to opt in by setting the theme to DayNight:

<style name="MainTheme.Base" parent="Theme.AppCompat.DayNight.DarkActionBar">

Images and icon names should be the same so they can be found under different theme.

The OS will look for these identifiers to locate resources. So, we will create a drawable-night (or any other folder that holds our drawables, images and icons, etc.). We will also create a values-night folder that will hold our dark/night theme style and colors.

You can have a look at the Android section part in this blog for more detailed steps.

0
votes

At the end, I had to rename all icons(from one icon pack) to the same. To do that i wrote a little powershell script;

<#
   This script will rename your icons from a android 5.x icon pack from https://materialdesignicons.com/ to use it in a xamarin application;
   -white icons for light (standard) theme in drawable-* folders
   -black icons for dark theme in drawable-night-* folders

   Last updated: 2020-12-02

   process;
   -delete all unnecessary icon resolutions
   -delete all grey icons
   -create night foders
   -move white icons in night folders
   -rename to the same name
#>



# !!!!EDIT THIS!!!!
$basePath = "C:\Users\Tony\Downloads\icon-packs\"
$18 = $false
$24 = $true
$36 = $false
$48 = $false
# !!!!EDIT THIS!!!!



# fileName beginn
$ic = "ic_"
$black = "_black"
$white = "_white"
$grey = "_grey600"
$18dp = "_18dp"
$24dp = "_24dp"
$36dp = "_36dp"
$48dp = "_48dp"
$iconExtension = "png"
# fileName end

# path beginn
$night_hdpi = $basePath + "drawable-night-hdpi"
$night_mdpi = $basePath + "drawable-night-mdpi"
$night_xhdpi = $basePath + "drawable-night-xhdpi"
$night_xxhdpi = $basePath + "drawable-night-xxhdpi"
$night_xxxhdpi = $basePath + "drawable-night-xxxhdpi"
$hdpi = $basePath + "drawable-hdpi"
$mdpi = $basePath + "drawable-mdpi"
$xhdpi = $basePath + "drawable-xhdpi"
$xxhdpi = $basePath + "drawable-xxhdpi"
$xxxhdpi = $basePath + "drawable-xxxhdpi"
# path end


# remove unnecessary icon resolutions
if ( $18 )
{
    # Remove-Item -Path $hdpi\*$18dp*.$iconExtension
    Remove-Item -Path $hdpi\*$24dp*.$iconExtension
    Remove-Item -Path $hdpi\*$36dp*.$iconExtension
    Remove-Item -Path $hdpi\*$48dp*.$iconExtension

     # Remove-Item -Path $mdpi\*$18dp*.$iconExtension
    Remove-Item -Path $mdpi\*$24dp*.$iconExtension
    Remove-Item -Path $mdpi\*$36dp*.$iconExtension
    Remove-Item -Path $mdpi\*$48dp*.$iconExtension

     # Remove-Item -Path $xhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$48dp*.$iconExtension

    # Remove-Item -Path $xxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$48dp*.$iconExtension

    # Remove-Item -Path $xxxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$48dp*.$iconExtension
}
elseif ( $24 )
{
    Remove-Item -Path $hdpi\*$18dp*.$iconExtension
    # Remove-Item -Path $hdpi\*$24dp*.$iconExtension
    Remove-Item -Path $hdpi\*$36dp*.$iconExtension
    Remove-Item -Path $hdpi\*$48dp*.$iconExtension

    Remove-Item -Path $mdpi\*$18dp*.$iconExtension
    # Remove-Item -Path $mdpi\*$24dp*.$iconExtension
    Remove-Item -Path $mdpi\*$36dp*.$iconExtension
    Remove-Item -Path $mdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xhdpi\*$18dp*.$iconExtension
    # Remove-Item -Path $xhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxhdpi\*$18dp*.$iconExtension
    # Remove-Item -Path $xxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxxhdpi\*$18dp*.$iconExtension
    # Remove-Item -Path $xxxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$48dp*.$iconExtension
}
elseif ( $36 )
{
    Remove-Item -Path $hdpi\*$18dp*.$iconExtension
    Remove-Item -Path $hdpi\*$24dp*.$iconExtension
    # Remove-Item -Path $hdpi\*$36dp*.$iconExtension
    Remove-Item -Path $hdpi\*$48dp*.$iconExtension

    Remove-Item -Path $mdpi\*$18dp*.$iconExtension
    Remove-Item -Path $mdpi\*$24dp*.$iconExtension
    # Remove-Item -Path $mdpi\*$36dp*.$iconExtension
    Remove-Item -Path $mdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$24dp*.$iconExtension
    # Remove-Item -Path $xhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$24dp*.$iconExtension
    # Remove-Item -Path $xxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$24dp*.$iconExtension
    # Remove-Item -Path $xxxhdpi\*$36dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$48dp*.$iconExtension
}
elseif ( $48 )
{
    Remove-Item -Path $hdpi\*$18dp*.$iconExtension
    Remove-Item -Path $hdpi\*$24dp*.$iconExtension
    Remove-Item -Path $hdpi\*$36dp*.$iconExtension
    # Remove-Item -Path $hdpi\*$48dp*.$iconExtension

    Remove-Item -Path $mdpi\*$18dp*.$iconExtension
    Remove-Item -Path $mdpi\*$24dp*.$iconExtension
    Remove-Item -Path $mdpi\*$36dp*.$iconExtension
    # Remove-Item -Path $mdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xhdpi\*$36dp*.$iconExtension
    # Remove-Item -Path $xhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxhdpi\*$36dp*.$iconExtension
    # Remove-Item -Path $xxhdpi\*$48dp*.$iconExtension

    Remove-Item -Path $xxxhdpi\*$18dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$24dp*.$iconExtension
    Remove-Item -Path $xxxhdpi\*$36dp*.$iconExtension
    # Remove-Item -Path $xxxhdpi\*$48dp*.$iconExtension
}


# delete all grey icons
Remove-Item -Path $hdpi\*$grey*.$iconExtension
Remove-Item -Path $mdpi\*$grey*.$iconExtension
Remove-Item -Path $xhdpi\*$grey*.$iconExtension
Remove-Item -Path $xxhdpi\*$grey*.$iconExtension
Remove-Item -Path $xxxhdpi\*$grey*.$iconExtension


# create night folders, if not exist
If(!(test-path $night_hdpi))
{
      New-Item -ItemType Directory -Force -Path $night_hdpi
}
If(!(test-path $night_mdpi))
{
      New-Item -ItemType Directory -Force -Path $night_mdpi
}
If(!(test-path $night_xhdpi))
{
      New-Item -ItemType Directory -Force -Path $night_xhdpi
}
If(!(test-path $night_xxhdpi))
{
      New-Item -ItemType Directory -Force -Path $night_xxhdpi
}
If(!(test-path $night_xxxhdpi))
{
      New-Item -ItemType Directory -Force -Path $night_xxxhdpi
}


# move white icons to night folder
Get-ChildItem -Path $hdpi -Filter *$white* | ForEach-Object{
    move-item -Path $_.FullName -Destination $night_hdpi 
}
Get-ChildItem -Path $mdpi -Filter *$white* | ForEach-Object{
    move-item -Path $_.FullName -Destination $night_mdpi 
}
Get-ChildItem -Path $xhdpi -Filter *$white* | ForEach-Object{
    move-item -Path $_.FullName -Destination $night_xhdpi 
}
Get-ChildItem -Path $xxhdpi -Filter *$white* | ForEach-Object{
    move-item -Path $_.FullName -Destination $night_xxhdpi 
}
Get-ChildItem -Path $xxxhdpi -Filter *$white* | ForEach-Object{
    move-item -Path $_.FullName -Destination $night_xxxhdpi 
}


#rename to standard icon name
if ( $18 )
{
    get-childitem -Path $hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.Replace($ic,"").Replace($black + $18dp,"")
    }
    get-childitem -Path $night_hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $18dp,"")
    }

    get-childitem -Path $mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $18dp,"")
    }
    get-childitem -Path $night_mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $18dp,"")
    }

    get-childitem -Path $xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $18dp,"")
    }
    get-childitem -Path $night_xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $18dp,"")
    }

    get-childitem -Path $xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $18dp,"")
    }
    get-childitem -Path $night_xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $18dp,"")
    }

    get-childitem -Path $xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $18dp,"")
    }
    get-childitem -Path $night_xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $18dp,"")
    }
}
elseif ( $24 )
{
    get-childitem -Path $hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $24dp,"")
    }
    get-childitem -Path $night_hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $24dp,"")
    }

    get-childitem -Path $mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $24dp,"")
    }
    get-childitem -Path $night_mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $24dp,"")
    }

    get-childitem -Path $xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $24dp,"")
    }
    get-childitem -Path $night_xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $24dp,"")
    }

    get-childitem -Path $xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $24dp,"")
    }
    get-childitem -Path $night_xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $24dp,"")
    }

    get-childitem -Path $xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $24dp,"")
    }
    get-childitem -Path $night_xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $24dp,"")
    }
}
elseif ( $36 )
{
   get-childitem -Path $hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $36dp,"")
    }
    get-childitem -Path $night_hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $36dp,"")
    }

    get-childitem -Path $mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $36dp,"")
    }
    get-childitem -Path $night_mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $36dp,"")
    }

    get-childitem -Path $xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $36dp,"")
    }
    get-childitem -Path $night_xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $36dp,"")
    }

    get-childitem -Path $xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $36dp,"")
    }
    get-childitem -Path $night_xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $36dp,"")
    }

    get-childitem -Path $xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $36dp,"")
    }
    get-childitem -Path $night_xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $36dp,"")
    }
}
elseif ( $48 )
{
    get-childitem -Path $hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $48dp,"")
    }
    get-childitem -Path $night_hdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $48dp,"")
    }

    get-childitem -Path $mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $48dp,"")
    }
    get-childitem -Path $night_mdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $48dp,"")
    }

    get-childitem -Path $xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $48dp,"")
    }
    get-childitem -Path $night_xhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $48dp,"")
    }

    get-childitem -Path $xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $48dp,"")
    }
    get-childitem -Path $night_xxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $48dp,"")
    }

    get-childitem -Path $xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($black + $48dp,"")
    }
    get-childitem -Path $night_xxxhdpi -Filter *.$iconExtension | foreach{
        rename-item $_.FullName $_.Name.replace($ic,"").replace($white + $48dp,"")
    }
}

enter image description here