Trying to port a skin

[giannisgx89]

Hello everyone, hope you are all doing okay and you stay safe!

I'm a long time android themer, back in the days when cyanogenmod was a thing and now with substratum theme engine. You may already know (or not) some of my themes, Flux/Flux White, Liv Dark/Liv White.
Got a lot of request to theme the Poweramp music player from my users and i finally added support for it in my themes (see screenshots below). Although many really liked the design there were a lot more users who liked it but couldn't use it because
substratum needs root to be able to work and apply theme overlays. So i got even more request to make a standalone Poweramp skin and here came the difficult part.

While making a substratum Poweramp skin took some time to theme every single icon, it was easy enough unlike Poweramp skins. I tried reading the Poweramp Sample Skin readme on github but couldn't really understand it.
Managed to import the sample skin in android studio, changed the manifest and xml names, all went well and also sample skins showed up in Poweramp skin settings page.

Replacing drawables like navbar_bg.xml, dint seem to work and i made sure the drawable is in the correct folder.
Couldn't seem to find how to add theme options like hide previous/next buttons, enable pro buttons etc.
Also how do i add multiple alternative Library icon styles?
Lastly i want to ask if skins support vector drawables? Every single icon, gradient colors you can see in the screenshots below are all vector drawables

Basically all i want is to theme the "default dark" Poweramp skin and include all the options it offers
I know i maybe asking too much here but there aren't any tutorial that could be helpful for people who want to start making Poweramp skins

I'm sorry if this post is complicated to understand. English is not my native language but i tried my best to explain what i want

Thanks a lot for your time
John

[flyingdutchman]

I guess your learning curve will be the same as mine was. I too started out with the sample skin but now i feel i have most things under control. There are currently 2 active skin developers, mixified and myself. As a lot of time and effort goes into learning how to design a new skin, i am reluctant to disclose the detail. Sorry. I am willing to answer more general questions though

[giannisgx89]

38 minutes ago, flyingdutchman said:

I guess your learning curve will be the same as mine was. I too started out with the sample skin but now i feel i have most things under control. There are currently 2 active skin developers, mixified and myself. As a lot of time and effort goes into learning how to design a new skin, i am reluctant to disclose the detail. Sorry. I am willing to answer more general questions though

Thanks for the response!

I guess i need have basic programing skills to be able to make Poweramp skin

That's too bad since my programing knowledge is very limited

Will be going back to making substratum themes and icons packs 😊

[flyingdutchman]

I would be glad to apply some of your icons. Email me if you are interested

[maxmp]

@giannisgx89 Poweamp skins do not require programming, it's a mixture of standard Android resources/styles xml and additional custom options xml. As @flyingdutchman mentioned you can just start with the sample skin which has example xmls almost for each feature available to skins.

[giannisgx89]

59 minutes ago, maxmp said:

@giannisgx89 Poweamp skins do not require programming, it's a mixture of standard Android resources/styles xml and additional custom options xml. As @flyingdutchman mentioned you can just start with the sample skin which has example xmls almost for each feature available to skins.

Hi Max ill check the sample skin again. Im familiar with styles and layout as i use them a lot in my substratum themes

Hopefully ill manage to make it work

Thanks for the tips

[flyingdutchman]

@giannisgx89, as you are giving it a go and wanted to set icons I will give you one to kick off with:

<style name="set_default_icons_library">
    <item name="com.maxmpz.audioplayer:all_songs">@drawable/library_icon_all_songs_colored</item>
    <item name="com.maxmpz.audioplayer:folders">@drawable/library_icon_folders_colored</item>
    <item name="com.maxmpz.audioplayer:folders_hier">@drawable/library_icon_folders_hier_colored</item>
    <item name="com.maxmpz.audioplayer:albums">@drawable/library_icon_albums_colored</item>
    <item name="com.maxmpz.audioplayer:artists">@drawable/library_icon_artists_colored</item>
    <item name="com.maxmpz.audioplayer:albums_by_artist">@drawable/library_icon_artist_albums_colored</item>
    <item name="com.maxmpz.audioplayer:album_artists">@drawable/library_icon_artist_albums_colored</item>
    <item name="com.maxmpz.audioplayer:genres">@drawable/library_icon_genres_colored</item>
    <item name="com.maxmpz.audioplayer:composers">@drawable/library_icon_composers_colored</item>
    <item name="com.maxmpz.audioplayer:playlists">@drawable/library_icon_playlists_colored</item>
    <item name="com.maxmpz.audioplayer:queue">@drawable/library_icon_queue_colored</item>
    <item name="com.maxmpz.audioplayer:years">@drawable/library_icon_years_colored</item>
    <item name="com.maxmpz.audioplayer:streams">@drawable/library_icon_streams_colored</item>
    <item name="com.maxmpz.audioplayer:top_rated">@drawable/library_icon_top_rated_colored</item>
    <item name="com.maxmpz.audioplayer:low_rated">@drawable/library_icon_low_rated_colored</item>
    <item name="com.maxmpz.audioplayer:most_played">@drawable/library_icon_most_played_colored</item>
    <item name="com.maxmpz.audioplayer:recently_played">@drawable/library_icon_recently_played_colored</item>
    <item name="com.maxmpz.audioplayer:recently_added">@drawable/library_icon_recently_added_colored</item>
    <item name="com.maxmpz.audioplayer:long_files">@drawable/library_icon_long_files_colored</item>
</style>

where the drawable is your icon of course

[giannisgx89]

@flyingdutchman Thanks for tip, it really helped me understand how things are working with styles!
Theming almost all ui elements can be done the hard part will come with theme options which i have no clue how to add or remove.

Also is the main settings page possible to theme?

 

[flyingdutchman]

Looks like some competition is coming 😃.

Everything that can be customised has been exposed in the skin sdk. It is very comprehensive and complete. I have not come across any references to the main settings though. You will of course have your own settings pages.

Have a look at some of my sample screenshots.

http://www.theo.klinkweb.nl/poweramp_skin.html

[giannisgx89]

Spending countless hours to understand how do i theme the parts marked with blue arrows
On the left side of the image is how the substratum version of the skin works and on the right is what i managed to achieve (almost nothing)

Even though i have added knob drawable files they dont seem to change anything and the same thing happens with many other resources.
To my understanding, if i want to change the knobs for example i have to find the style that is related to that and add it in my skinsample.xml but that doesnt seem to work in most cases were the original style is not in ActivityTheme_Black

I'm struggling to even theme the basic things i cant even imagine how hard it would be to add skin options. 😕
I would really love to finish this port from substratum theme but it seems it's not an easy task for me

Thanks everyone for trying to help!
Stay safe

[flyingdutchman]

29 minutes ago, giannisgx89 said:

I'm struggling to even theme the basic things i cant even imagine how hard it would be to add skin options. 😕
I would really love to finish this port from substratum theme but it seems it's not an easy task for me

You are too impatient. You have managed to identify the "easy" bits, Early V3 skin developers did this too but then it gets more complex.

One tip, ItemTop prefixes are use mainly on the front screen. Once into libraries you look for ItemTrack  prefixes. Use the search function on your pc to search the skin sdk eg the Treble knob search for Treble and then explore the xml files.

Good luck

[giannisgx89]

Hello everyone!

After few weeks of non stop searching i managed to theme everything i wanted and added plenty of options. I'd also like to say thanks for the tips @flyingdutchman and @maxmp!
There are some issues i encountered that i couldn't manage to and searched a lot but without any success.

The first screenshots shows how i managed to themed everything i needed and the second one shows the issues.

1. When i select Labels Layout + No Background Blur,  labels layout move on top of the album art. This also happens on the original skin sample. What i want is when i enable no background blur but keep correct labels alignment which is below album art.
2. On the second screenshot the image shows that line2 is not themed like the title background. I tried <item name="com.maxmpz.audioplayer:ItemTrackLine2_scene_aa">@style/ItemTrackLine2_scene_aa</item> with a similar style to ItemTrackTitle_scene_aa
but it dotn seem to work. I only managed to theme the line2 background when a song is playing
3. How can i make statusbar and navbar fully transparent
4. Add option to remove skin app icon from launcher

Thank you all for your time and help!
John

[flyingdutchman]

no blur, I think straight from the sample app

<style name="noBlur">
    <item name="com.maxmpz.audioplayer:TopListWidget">@style/noBlur_TopListWidget</item>
 </style>
<!-- We override own TopListWidget here, as we already changed this style and still need those changes for this option as well -->
<style name="noBlur_TopListWidget" parent="com.maxmpz.audioplayer:TopListWidget">
    <item name="com.maxmpz.audioplayer:listMilkMode">none</item>
</style>

If your text still moves position then you will have to make sure they are attached to the bottom of albumart

2. Make sure you style both

<style name="ItemTrackTitle_scene_aa_playing" parent="com.maxmpz.audioplayer:ItemTrackTitle_scene_aa_playing">

and

<style name="ItemTrackLine2_scene_aa" parent="com.maxmpz.audioplayer:ItemTrackLine2_scene_aa">

3. Navbar background I simply set color to transparent

4. from Stackoverflow

https://stackoverflow.com/questions/19114439/android-hide-unhide-app-icon-programmatically

Hide app's icon using below code:

PackageManager p = getPackageManager();
ComponentName componentName = new ComponentName(this, com.apps.MainActivity.class); // activity which is first time open in manifiest file which is declare as <category android:name="android.intent.category.LAUNCHER" />
p.setComponentEnabledSetting(componentName,PackageManager.COMPONENT_ENABLED_STATE_DISABLED, PackageManager.DONT_KILL_APP);

Here is how to bring back the app's icon.

PackageManager p = getPackageManager();
ComponentName componentName = new ComponentName(this, com.apps.MainActivity.class);
p.setComponentEnabledSetting(componentName, PackageManager.COMPONENT_ENABLED_STATE_ENABLED, PackageManager.DONT_KILL_APP);

 

personally I do not see the point as restoring it may require a reinstall which would reset all settings

 

 

[giannisgx89]

21 hours ago, flyingdutchman said:

1. no blur, I think straight from the sample app

<style name="noBlur">
    <item name="com.maxmpz.audioplayer:TopListWidget">@style/noBlur_TopListWidget</item>
 </style>
<style name="noBlur_TopListWidget" parent="com.maxmpz.audioplayer:TopListWidget">
    <item name="com.maxmpz.audioplayer:listMilkMode">none</item>
</style>

If your text still moves position then you will have to make sure they are attached to the bottom of albumart

2. Make sure you style both

<style name="ItemTrackTitle_scene_aa_playing" parent="com.maxmpz.audioplayer:ItemTrackTitle_scene_aa_playing">

<style name="ItemTrackLine2_scene_aa" parent="com.maxmpz.audioplayer:ItemTrackLine2_scene_aa">

 

 

1. I used the default style from sample skin, didn't change anything. I tried to use exactly your styles too but the text still moves on top of the album art when  i enable any option from labels layout
Which style do i need to check to make sure they are attached to the bottom?
2. I had them both in my styles and the line2 background doesn't change, although i manage to change it when using center labels layout, both title and line with almost identical styles from sample_skin_alt.xml

Thanks a lot for the help!

[flyingdutchman]

in attrs-powerui there is comprehensive details on attaching artifacts, fo example

        <attr name="layout_attachRightToRight" format="reference"/>
        <attr name="layout_attachBottomToBottom" format="reference"/>
        <attr name="layout_attachLeftToLeft" format="reference"/>
        <attr name="layout_attachTopToTop" format="reference"/>

In my skin $YAPS$ I have the track title attached to albumart and  line2 attached to track title

ItemTrackTitle_scene_aa

<item name="com.maxmpz.audioplayer:layout_attachTop">@com.maxmpz.audioplayer:id/aa_image
</item>
<item name="com.maxmpz.audioplayer:layout_attachBottom">@null</item>

and

"ItemTrackLine2_scene_aa

<item name="com.maxmpz.audioplayer:layout_attachBottom">@null</item>
<item name="com.maxmpz.audioplayer:layout_attachTop">@com.maxmpz.audioplayer:id/title</item>

[Mr. Make Believe]

Great to see you @flyingdutchman helping people out like this! 

[flyingdutchman]

@Mr. Make Believe, I only remember too well how badly I wanted some help when I was learning. Maxmp helped a lot but it was still difficult

[giannisgx89]

@flyingdutchman
Thank for the tips!
Still couldnt manage to fix the issue. Activating no blur background messes up other options as well, i just noticed that. Same happens with sample skin from github.
I ended up removing the no background blur option. Users can enable or disable it from "Settings > Background", good temporary solution.

[giannisgx89]

Hello everyone!
After the release of my Liv Dark Poweramp skin users have been asking for a light version and currently i am working on it but i need some help themeing title, line2 and meta info background.

These are the styles i used for the line2

<style name="ItemTrackLine2" parent="com.maxmpz.audioplayer:ItemTrackLine2">
        <item name="android:background">#ffff0000</item>
        <item name="com.maxmpz.audioplayer:lineBackground">@null</item>
        <item name="android:textColor">#de000000</item>
        <item name="com.maxmpz.audioplayer:layout_attachLeft">@com.maxmpz.audioplayer:id/aa_image</item>
    </style>
    
    <style name="SampleSkin" parent="com.maxmpz.audioplayer:ActivityTheme_White">

        <item name="com.maxmpz.audioplayer:TopMetaInfoLayout">@style/TopMetaInfoLayout</item>        
        
        <item name="com.maxmpz.audioplayer:ItemTrackTitle_scene_aa">@style/ItemTrackTitle_scene_aa</item>
        <item name="com.maxmpz.audioplayer:ItemTrackLine2_scene_aa">@style/ItemTrackLine2_scene_aa</item>
        <item name="com.maxmpz.audioplayer:ItemTrackLine2">@style/ItemTrackLine2</item> <!-- BG behind line2 -->
        <item name="com.maxmpz.audioplayer:ItemTrackLine2_scene_aa_playing">@style/ItemTrackLine2_scene_aa_playing</item>
        <item name="com.maxmpz.audioplayer:ItemTrackTitle_scene_header">@style/ItemTrackTitle_scene_header</item>
        <item name="com.maxmpz.audioplayer:ItemTrackLine2_scene_header">@style/ItemTrackLine2_scene_header</item>
        <item name="com.maxmpz.audioplayer:ItemTrackMeta_scene_item_menu_lu">@style/ItemTrackMeta_scene_item_menu_lu</item>
        <item name="com.maxmpz.audioplayer:ItemTrackMenu">@style/ItemTrackMenu</item> <!-- Main screen aa menu background -->
        <item name="com.maxmpz.audioplayer:ItemTrackMenu_scene_header">@style/ItemTrackMenu_scene_header</item>

Need some help with these:
1. I would like to know what's the correct style to theme the "line2" background. (i only managed to theme it while playing but on pause it is still black)
2. Meta info background is also black
3. Third screenshot shows black background too, i guess that's the @id/title

(Dont mind the long red lines, i was testing if styles work)

 

[giannisgx89]

And here is a small preview teaser

[flyingdutchman]

@giannisgx89, what is meant by a "light version"? you can simply set backgrounds and other selected artifacts  to white.

[giannisgx89]

Although that possible im sure im not gonna add too many options in a single theme. Many elements wont work on dark mode and vise versa.
Can you help on the questions i asked above? @flyingdutchman

[flyingdutchman]

In my skins I use

<item name="com.maxmpz.audioplayer:lineBackground">@drawable/rounded_text</item>

where rounded_text

<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <corners android:radius="?com.maxmpz.audioplayer:corners_large"/>
   <solid android:color="your colour"/>

</shape>

 

[giannisgx89]

I already made the drawable i need, the problem is the styles i use for the "line2" dont seem to work so my drawable doesnt show up at all, unlike "title" which works fine

[flyingdutchman]

@giannisgx89, I am afraid I cannot help here as it is getting too complicated. ActivityTheme_White has Base_ActivityTheme_Default as parent  which in turn has  _Core as parent. I think these are the areas to investigate

    <!-- NOTE: need additional level of indirection due to e.g. values-v29 overridding which should be used by skins which derive from Base_ActivityTheme_Default -->    
    <style name="Base_ActivityTheme_Default" parent="Base_ActivityTheme_Core">
    </style>
    
    <style name="ActivityTheme_White" parent="Base_ActivityTheme_Default">
    </style>

My approach to this sort of thing is to set the artifact to >invisible< to ensure it has the style applied. Once you are certain it gets easier to change attributes. You are probably already doing this though