Jump to content

Trying to port a skin


Recommended Posts

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

2.jpg

livwhite_preview.jpg

device-2020-06-23-170004.jpg

Link to comment
Share on other sites

  • Replies 26
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Link to comment
Share on other sites

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 😊

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Untitled-1.jpg

Edited by giannisgx89
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...

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

livdark_poweramp.jpg

bug.jpg

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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!

Untitled-2.jpg

Edited by giannisgx89
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

@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. :)

Link to comment
Share on other sites

  • 3 months later...

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)

Untitled-1.thumb.jpg.6cb94a22737db1432f54d3fbc1c54d29.jpg1564902665_Screenshot2020-10-21125625.png.e2011117a098b85c9ac93d53d5c5ac27.png

 

Edited by giannisgx89
Link to comment
Share on other sites

@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
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...