Music Control change icon?


#1

In the Docs about Music Control there are comments above the icons saying

// All icons default to their built-in android equivalent
// The supplied drawable name, e.g. 'media_play', is the name of a drawable found under android/res/drawable* folders

I cant find the android/res/drawable folder tho? Also why cant I just use the normal icons like this:

playIcon: 'play',
pauseIcon: 'pause',
prevIcon: 'ios-arrow-back',
nextIcon: 'ios-arrow-forward',
closeIcon: 'media_close',
notificationIcon: 'notification'

#2

And you are talking about what exactly? Ionic Native Music Control?


#3

Yes… Here are the docs . Thought it was pretty obvious what I meant so I didnt mention it.


#4

Well, posting in the Ionic Native category of the forum would probably have helped.


#5

I assume this refers to native resources that are present on all Android devices.

Becuase this has nothing to do with Ionic at all, but is handled in the native Android code. Sure you could access Ionicons there as well, but that would have to be implemented in the Cordova Plugin that this Ionic Native wrapper uses.


#6

It’s not looking for a drawable folder, but rather it’s looking for the given icon in the proper size folder. So you’d take your icon and generate multiple sizes of it, and put it in its respective size folder e.g. drawable-xxxhdpi, drawable-ldpi, etc.

I’ve used this tool in the past with success:
https://romannurik.github.io/AndroidAssetStudio/icons-notification.html


#7

So you definitely have to create those resources yourself manually?


#8

I believe you can create a drawable folder and just stick a single icon in there. The downside is that it likely won’t scale nicely on different android screens.

The nice thing about the tool I linked to is that it’ll generate the different sizes for you, and generate a zip with all of the folders already created for you. So you just need to copy and paste the folders into platforms/android/res.


#9

I dont have a platform/android/res folder. The res is missing


#10

Yeah, but my assumption was that the plugin did use OS level icons that are present by default.


#11

Oh! I see.

By default it will use the, well, default icons in the OS, but that’s the only support as far as that goes.

So if you want to change it yes you need to create those resources yourself.

I didn’t think about the use case of people using other default OS icons :man_shrugging:


#12

Hmmm. It should create that by default. Have you built an apk for the app yet?


#13

Yes I have built many apks already


#14

Note that the Android project structure changed with Cordova-Android 7.x - the path is slighty different there.


#15

I am using version 8.0

ionic info

cli packages: (C:\Users\xxxxx\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.10.3
npm               : 3.10.10
OS                : Windows 10

#16

I think you might have an additional app folder where you have to look.

Unrelated: Your Cordova tooling seems to be out of date, which might be causing all kinds of problems (current cordova-android is 7.1.x).
You can read about how to figure out the current Cordova versions and how to update CLI, platforms and plugins here: https://ionic.zone/cordova/update


#17

Found the app folder, but didnt find the Icons that the Native Music Control uses.

Thanks for the hint - what type of problems are you speaking of? Because till now everything works totally fine.


#18

In this case, see the changelog here: https://cordova.apache.org/announcements/2018/02/26/cordova-android-7.1.0.html


#19

Thanks. Apparently I hadn’t updated to Cordova 7 in any of my projects (probably because of the whole Ionic keyboard plugin issue).

So yes the correct new path is /Users/briarbowser/projects/Tienect/platforms/android/app/src/main/res.

You won’t find the media_play icons and the like, as they’re built into Android.

So to set a custom play icon you’d pass the option to the plugin:

{
  ...
  playIcon: 'my-slick-play-icon.png'
  ...
}

Then you’d go and generate the various sized images for it and put them in the aforementioned folder.


#20

Did it exactly as you said:

  1. Chose one item from the site (ic_stat_navigate_before)
  2. Downloaded it
  3. Put it in my res folder
  4. Setting the icon to ic_stat_navigate_before.png
  5. But it doesnt change anything - it still uses the old icon.

Testing with the DevApp btw if that makes any difference?