Creating faux square Android Navigation Drawer icons

The Navigation drawer widget in Android can display vector SVG icons, but if the vector icons are non-rectangular, Android will distort the dimensions to force them into squares. This can be seen in the screenshot of the Hawaii flag icon below.


It is possible to extend the drawer by code to display non-rectangular icons but I prefer to adjust the SVG icon instead. The way I did it was to change the page size to a square and then placing a transparent square box around the page. The following steps illustrate:

Change the page to a square

1. Open up the SVG icon in Inkscape.
   
   
   
2. Select File | Document Properties.
   
   
   
1. Under the Page tab, change the Width and Height to be equal e.g. 1200 x 1200 px. Close the dialog box.
   
   The page display changes to a square.
   
   
3. Using the Align and Distribute tools, align the graphics to the middle of the page.
   
   
   
   

Create a transparent square

1.  Next, click the Create rectangles and squares (F4) icon. Place a stroke only, no-fill rectangle on the page.
   
   
   
2. Change the width and height of the rectangle to match the page dimensions e.g. 1200 by 1200 px.
   
   
   
3. Change the origin to the upper left corner of the page, e.g. X=0, Y=0.
   
   
4. Open the Fill and stroke pane. Change the stroke opacity to low or zero opacity, e.g. 0.
   
   
   
5. Save the file.
   

Import the SVG vector icon into an Android drawable icon

1.  In Android Studio, right click on the /path/to/app/res/drawables folder and choose New | Vector Asset.
   
   
   
2. Toggle on Local File (PNG, SVG). Choose the new SVG icon file from the previous section.
   
3. Click Next. Click OK.
   
   The drawable is created.

Using this new icon, the Navigation drawer can now display the icon seemingly with the correct proportions, as shown below.