Style anomalies

[marcony]

On 12/7/2018 at 9:02 AM, flyingdutchman said:

Centered where? For small devices the track title is centered above the albumart, artist is hidden

Centered like this. Or below album art.

[flyingdutchman]

@marcony nice clean look. I notice you have hidden the 4 buttons too. Is this a mock up? 

[marcony]

8 hours ago, flyingdutchman said:

@marcony nice clean look. I notice you have hidden the 4 buttons too. Is this a mock up? 

I found this image online as a example what I was talking about. I think this was a theme for V2. 

[andrewilley]

Centred like that and with a transparent background certainly looks a lot nicer and more polished than left-justified black boxes. All we'd then need would be for Max to implement auto-scrolling for long titles.

Andre

[marcony]

On 12/13/2018 at 12:32 PM, andrewilley said:

Centred like that and with a transparent background certainly looks a lot nicer and more polished than left-justified black boxes. All we'd then need would be for Max to implement auto-scrolling for long titles.

Andre

I hope he sees this and make it happen

[flyingdutchman]

From attrs-powerui.xml

        <!-- By default, view gravitates to its parent (via standard android:layout_gravity). If layout_gravityTarget is some non-parent view id, 
             that view becomes the point of gravitaion. E.g. if android:gravity="center" and layout_gravityTarget="@id/some_view", this view
             will be centered relatively to "some_view".
             If gravity target view doesn't exist, or is GONE, view gravitates to parent.
             Cyclic references are not allowed (you'll see stack overflow exception). The referenced view will be layed out first (xml order is ignored).
             Not supported for layout_flex views
             NOTE: this disables accounting for gravity based consumed parent space, as gravityTarget view bounds become the reference bounds for this view
             Consume space still works if layout_attach*="parent" is used
        -->
 

        <attr name="layout_gravityTarget" format="reference|integer">
            <enum name="parent" value="0"/>
        </attr>

trying to center 

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

        <item name="android:textColor">@color/TextColor</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:gravity">center</item>
        <item name="com.maxmpz.audioplayer:layout_gravityTarget">@com.maxmpz.audioplayer:id/aa_bounds</item>
(also tried parent, @com.maxmpz.audioplayer:id/aa_image)
        <item name="com.maxmpz.audioplayer:lineBackground">@color/transparent</item>
        <item name="android:layout_marginLeft">@dimen/ItemTrackTextLeftMargin</item>
        <item name="android:layout_marginRight">@dimen/ItemTrackTextLeftMargin</item>
        <item name="android:layout_marginTop">0dp</item>
        <item name="android:layout_marginBottom">-25dp</item>
        <item name="com.maxmpz.audioplayer:layout_attachLeft">@null</item>
        <item name="com.maxmpz.audioplayer:layout_attachRight">@null</item>
        <item name="com.maxmpz.audioplayer:layout_attachTop">@null</item>
        <item name="com.maxmpz.audioplayer:layout_attachBottom">parent</item>
        <item name="android:visibility">visible</item>
    </style>

So, given the explanation above, I would expect the text to show centered below the album art but is does not.
I have also tried the android:gravity etc to no avail.
Anyone with suggestions on how to center the text?

[maxmp]

Remove layout_width=match_parent as view now takes whole width (use wrap_content).

[flyingdutchman]

Unfortunatley without layout_width nor layout_width wrap_content do not have any effect

[flyingdutchman]

@maxmp I believe this has regressed since the last version. My first skin showed centered text on an earlier version (812/813?)but with the latest version, it no longer does. Given the above detail, it should be centered right?

[maxmp]

Sorry, but I can't reproduce your issue. If I go to sample skin and modify AAA_ItemTrackTitle_scene_aa to:

<style name="AAA_ItemTrackTitle_scene_aa" parent="com.maxmpz.audioplayer:ItemTrackTitle_scene_aa">
   <item name="com.maxmpz.audioplayer:scale">@dimen/AAA_ItemTrackTitle_scene_aa_scale</item>
   <item name="com.maxmpz.audioplayer:layout_compensateScale">@dimen/AAA_ItemTrackTitle_scene_aa_scale</item>
   <!--<item name="com.maxmpz.audioplayer:layout_attachRight">@com.maxmpz.audioplayer:id/menu</item>-->
   <item name="android:layout_marginLeft">@dimen/AAA_ItemTrackAAImage_scene_aa_margin</item><!-- Sync margins with AA image margins -->
   <item name="android:layout_marginRight">8dp</item>
   <!-- NOTE: to make it centered, use something like: -->
   <item name="com.maxmpz.audioplayer:layout_attachRight">@null</item>
   <item name="com.maxmpz.audioplayer:layout_attachLeft">@null</item>
   <item name="android:layout_gravity">center_horizontal</item>
</style>

I'm getting it centered.

PS As all the styles are derived from some default ones, please refer to appropriate reference_resources (just search them for style in question) and disable the attributes which are not needed (in this case, layout_attachRight/Left).

[flyingdutchman]

I appreciate your continuing support. I will work through your example tomorrow as xmas dinner is coming out :).

i do look at all the details as provided which is why i expected my example to center

 

[flyingdutchman]

It appears i was over complicating things. 😄

[flyingdutchman]

Some more help needed please

As a result of previous posts by maxmp I have been able to sort most of the headers out. I have restyled the following:

<!-- first level    
<style name="ItemTopTextBackDecor" parent="com.maxmpz.audioplayer:ItemTopTextBackDecor">
<style name="ItemTopTextBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTopTextBackDecorTitle_scene_header_back_decor">

<!-- second level
<style name="ItemTextBackDecor" parent="com.maxmpz.audioplayer:ItemTextBackDecor">     
<style name="ItemTextBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTextBackDecorTitle">
<style name="ItemTextBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTextBackDecorTitle_scene_header_back_decor">

  <!-- third level header eg, artists, beatles, album -->
<style name="ItemTrackBackDecor" parent="com.maxmpz.audioplayer:ItemTrackBackDecor">    
<style name="ItemTrackBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle">
<style name="ItemTrackBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle">
<style name="ItemTrackBackDecorTitle_scene_header_1" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_1">
<style name="ItemTrackBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_back_decor">
 

As you can see from the screeshot there remain 2 fields which have none of the aboive styles defined. I have worked through each style but I have been unable to discover the srtyles for the Album and artist.

I would appreciate some further guidance on how to either set android:background or Poweramp: lineBackground

[maxmp]

That "albums" with arrow up - it's a "back decor". There are a few back decor styles, they depend on what is the parent list (top, text or "track"), so you need to redefine all of them.

They have 2 scenes, and both may define color, so you need to override all such scenes. Search for "backdecor" in reference resources styles-item.xml (ItemBackDecorTitle, ItemTextBackDecorTitle, ItemTopTextBackDecorTitle).

For example, let's override all of them to directly assigned red text color (I also added this example to Sample skin on Github): Note that if you change color or other attributes of backdecors, you may want to change appropriate attributes for just title styles to match appropriate backdecor - otherwise their animation will be broken.

Main skin theme style:

<item name="com.maxmpz.audioplayer:ItemTopTextBackDecorTitle">@style/ItemTopTextBackDecorTitle</item>
<item name="com.maxmpz.audioplayer:ItemTopTextBackDecorTitle_scene_header_back_decor">@style/ItemTopTextBackDecorTitle_scene_header_back_decor</item>

<item name="com.maxmpz.audioplayer:ItemTextBackDecorTitle">@style/ItemTextBackDecorTitle</item>
<item name="com.maxmpz.audioplayer:ItemTextBackDecorTitle_scene_header_back_decor">@style/ItemTextBackDecorTitle_scene_header_back_decor</item>

<item name="com.maxmpz.audioplayer:ItemTrackBackDecorTitle">@style/ItemTrackBackDecorTitle</item>
<item name="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_1">@style/ItemTrackBackDecorTitle_scene_header_1</item>
<item name="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_back_decor">@style/ItemTrackBackDecorTitle_scene_header_back_decor</item>

Styles:

<style name="ItemTopTextBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTopTextBackDecorTitle">
   <item name="android:textColor">#f00</item>
</style>
<style name="ItemTopTextBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTopTextBackDecorTitle_scene_header_back_decor">
   <item name="android:textColor">#f00</item>
</style>

<style name="ItemTextBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTextBackDecorTitle">
   <item name="android:textColor">#f00</item>
</style>
<style name="ItemTextBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTextBackDecorTitle_scene_header_back_decor">
   <item name="android:textColor">#f00</item>
</style>

<style name="ItemTrackBackDecorTitle" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle">
   <item name="android:textColor">#f00</item>
</style>
<style name="ItemTrackBackDecorTitle_scene_header_1" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_1">
   <item name="android:textColor">#f00</item>
</style>
<style name="ItemTrackBackDecorTitle_scene_header_back_decor" parent="com.maxmpz.audioplayer:ItemTrackBackDecorTitle_scene_header_back_decor">
   <item name="android:textColor">#f00</item>
</style>

[maxmp]

As for just titles and line2 - just search reference item-track.xml and override appropriate styles for *_scene_header and scene_header_1

[flyingdutchman]

Thanks @maxmp, this fixed the issue

  <!-- level 2 text in header part  eg Playlists, then list playlist content to display playlist title at the top -->
  <item name="com.maxmpz.audioplayer:ItemTrackTitle_scene_header_1">@style/ItemTrackTitle_scene_header_1</item>
  <!-- there is no ItemTrackLine2_scene_header_1 style as we have only 1 field to display eg playlist name-->
<!-- level 3 text in header part eg, artists, beatles, "let it be" list album content to display artist and album title at the top-->
  <item name="com.maxmpz.audioplayer:ItemTrackLine2_scene_header">@style/ItemTrackLine2_scene_header</item>
  <item name="com.maxmpz.audioplayer:ItemTrackTitle_scene_header">@style/ItemTrackTitle_scene_header</item>

[flyingdutchman]

@maxmp given that Poweramp does not install on intel based avd's  and skin developers are mainly concerned with layout, would it be possible to publish a basic layout xml against which skin developers could test different configurations on avd's?.

None of the other functionality is required. 

Not sure if this is at all possible as the styles require the Poweramp app but I thought I'll ask as perhaps you have some ideas on how to test skins for a variety of devices

thanks in advance

[flyingdutchman]

 

Before posting I have tried everything I could think of. My aim is to offer the option to hide/show the 4 buttons TopSubAAButtons. However when implementing a style based on hiding/showing seekbar,

<item name="android:enabled">false</item>
<item name="android:visibility">gone</item>
<item name="com.maxmpz.audioplayer:applyScene">false</item>

the display goes black with a small border. I have tried android:visibility:invisible so that if anything is attached to TopSubAAButtons, it would not be orphaned.

When setting it to  android:visibility:invisible and launch the skin (without the option setting in skins.xml) it does not show as expected.

I have also tried to apply the "hide" settings the following styles:

        <item name="TopSubAAButtons">@style/TopSubAAButtons</item>
        <item name="TopSubAAButtons_scenes_playing">@style/TopSubAAButtons_scenes_playing</item>
        <item name="TopSubAAButtons_scene_lib">@style/TopSubAAButtons_scene_lib</item>
        <item name="TopSubAAButtons_scenes_hidden">@style/TopSubAAButtons_scenes_hidden</item>
        <item name="TopVisButtonLayout">@style/TopVisButtonLayout</item>
        <item name="TopShuffleButtonLayout">@style/TopShuffleButtonLayout</item>
        <item name="TopRepeatButtonLayout">@style/TopRepeatButtonLayout</item>

        <item name="TopSleepTimerButtonLayout">@style/TopSleepTimerButtonLayout</item>

but all give me a black screen and small border, nothing else shows.

Unless a fellow skin designer can help me out I hope @maxmp can give me some help.

thanks in advance
 

 

 

 

 

[flyingdutchman]

As there has been no response, I will try again. I simplified the test and tried to hide 

<style name="TopMetaInfoLabel" parent="com.maxmpz.audioplayer:TopMetaInfoLabel">
    <item name="com.maxmpz.audioplayer:layout_maxWidth">260dp</item>
    <item name="android:layout_marginBottom">5dp</item>
</style>

by setting 

<style name="TopMetaInfoLabel_hide" parent="TopMetaInfoLabel">
    <item name="android:enabled">false</item>
    <item name="android:visibility">gone</item>
    <item name="com.maxmpz.audioplayer:applyScene">true</item>
</style>

but the screen goes blank.

I then replaced the 3 lines with setting the background. This results in a coloured screen with some square shapes showing.

This is clearly not the way to simply show/hide an object.

Any help @Andrew0 or @maxmp or @AndrewG or anyone else?

[maxmp]

Please refer to list_activity.xml and default-styles.xml as views are attached one to another so just making them gone will break layout - start with invisible, or try to reattach views from hidden ones.

[flyingdutchman]

On 1/21/2019 at 3:24 PM, flyingdutchman said:

I have tried android:visibility:invisible so that if anything is attached to TopSubAAButtons, it would not be orphaned.

@maxmp I have gone through the documents and have not found anything that is obvious. Even simply setting background of TopMetaInfoLabel, calling the style from skin.xml makes the screen going weird.

Hiding objects in the overall "style sheet" presents no issue.

[flyingdutchman]

I must be missing something. In my Big skin I use ripple xml drawable to set backgound (effectively drawing a circle)

    <style name="big_TopPlay" parent="com.maxmpz.audioplayer:TopPlay">
        <item name="android:drawable">@drawable/ripple_play_round_grey</item>
        <item name="android:background">@drawable/big_probuttons_circle</item>
    <item name="com.maxmpz.audioplayer:layout_maxWidth">@dimen/big_TopPlay_maxSize</item>
    <item name="com.maxmpz.audioplayer:layout_maxHeight">@dimen/big_TopPlay_maxSize</item>
    <item name="com.maxmpz.audioplayer:layout_matchDimension">widthToHeight</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:gravity">fill</item>
    <item name="com.maxmpz.audioplayer:drawableOnly">true</item>
        <item name="android:clickable">true</item>
        <item name="android:longClickable">true</item>
</style>

gives 

 

applying style in skin.xml

<option
   key="hide"
   name="Hide Circles"
   summary="Hide Circles"
   overlapStyle="@style/big_TopPlay_hide"
   checkedByDefault="false"
   />

   <style name="big_TopPlay_hide" parent="big_TopPlay">
        <item name="android:drawable">@null</item>

    </style>

results in 

so it cannot be as simple as I think it is?

ps. the same result when adding all other attributes to style and background set to null

[flyingdutchman]

@maxmp
Trying to provide background for all popup menus/dialogs . So far I have been able to style
com.maxmpz.audioplayer:ItemEqPreset
com.maxmpz.audioplayer:EqReverbPresetLabel
but I am unable to find how to apply a general style to other dialogs etc

* default_styles_dialog.xml
    <!--
    NOTE: current Theme is always applied for dialogs, no matter which parent Dialog theme extends (it can be e.g. Android or Support Library dialog theme, or nothing at all).
    Current Theme is applied without force-overriding, thus, Dialog theme values take precendence
    -->

    <!-- Concrete dialog styles -->
    <!-- NOTE: each dialog theme inheritance path is: dialog_* => *Dialog => BaseDialog => Theme.AppCompat.Light + ActivityTheme_White -->
    <!-- ^.*?E/ThemeManager\(\d+\):\s+ -->

* styles-dialogs.xml
        NOTE: dialog themes are applied in multiple steps:
        - main app theme applied
        - then dialog style, which inherits some *Dialog (e.g. BottomsheetDialog) is applied without overriding exisiting app theme values
          (meaning, only values which are missing from app theme are applied. App theme attributes take priority)
        - then ?DialogForcedStyle (==BaseDialogForcedStyle) style is applied with overriding. This applies few styles
          which always should be overriden for dialog theme, like window title, background, position, etc.

but trying to provide a style either results in
com.maxmpz.audioplayer:attr/dialog_AlertDialogActivity_list' is private.
or

com.maxmpz.audioplayer:attr/BaseDialog cannot be found

Question: how do I go about this? 

[flyingdutchman]

@maxmp 

In styles-popup.xml some styles are ok to override but some others cannot be found. 
For example:
    <style name="PopupDialogListLayoutList">
    </style>
    
    <style name="PopupListLayoutList">
    </style>
    
    <style name="PopupListLayoutLabel">
    </style>

in my style sheet
    <style name="yaps_PopupListLayoutLabel" parent="com.maxmpz.audioplayer:PopupListLayoutLabel">
        <!-- Used for separate dialogs with popup lists, e.g. for Playlist select dialog -->
        <item name="android:background">?colorMenuBgColor</item>
    </style>
error
AAPT: error: style attribute 'com.maxmpz.audioplayer:attr/PopupListLayoutLabel' not found.
Does this mean these styles no longer exist in Poweramp v830?

[flyingdutchman]

Some help requested

I have been trying to find the artifacts indicated in the screenshots by red arrows so I can apply a background

In merge_item_header.xml

        NOTE: buttons are invisible in their default style/default scene (e.g. for style ItemHeaderShuffleButton),
        visible in *_scene_header, and again invisible in *_scene_menu, but optionally positioned differently in *_scene_menu
        (attached below line2, instead of bottom of view) for better animation to/from layouts with large item size, like scene_item_menu

Within the xml the other buttons can easily be identified and applies styles found in style-item.xml
<!-- Header -->
    
    <style name="ItemHeaderButtonsBg">
        <item name="android:visibility">gone</item>
    </style>
    <style name="ItemHeaderButtonsBg_scene_header">
    </style>
    
    <style name="ItemTextHeaderButtonsBg">
        <item name="android:visibility">gone</item>
    </style>
    <style name="ItemTextHeaderButtonsBg_scene_header">
    </style>
        
    <style name="ItemHeaderShuffleButton" parent="BlackListIconOnlyHeaderButton">
        <item name="android:drawable">?shuffle_24dp</item>
    </style>
    <style name="ItemHeaderShuffleButton_scene_header" parent="BlackListIconOnlyHeaderButton_scene_header"></style>
    <style name="ItemHeaderShuffleButton_scene_menu" parent="BlackListIconOnlyHeaderButton_scene_menu"></style>
            
    <style name="ItemHeaderPlayButton" parent="BlackListIconOnlyHeaderButton">
        <item name="android:drawable">?play_24dp</item>
    </style>
    <style name="ItemHeaderPlayButton_scene_header" parent="BlackListIconOnlyHeaderButton_scene_header"></style>
    <style name="ItemHeaderPlayButton_scene_menu" parent="BlackListIconOnlyHeaderButton_scene_menu"></style>
        
    <style name="ItemHeaderSelectButton" parent="BlackListHeaderButton">
        <item name="layout_consumeSpace">reset_horizontal</item>
    </style>
    <style name="ItemHeaderSelectButton_scene_header" parent="BlackListHeaderButton_scene_header">
    </style>
    <style name="ItemHeaderSelectButton_scene_menu" parent="BlackListHeaderButton_scene_menu"></style>
    
The shuffle, play and select buttons are defined here but how about the search icon, category label such as All Songs and the menu item

Additional points:
- the search icon does not apply com.maxmpz.audioplayer:colorIconPrimary but does have "stroke" applied
- the search icon in the right hand screenshot has a different style applied (this is at the "2nd" level eg, genres and then list a genre)
- searching the toolkit for "search" lists a few drawables, where search_stroke_selector.xml is used on the navbar. No other references are found where these drawables might apply.

Can any of the other skin developers ( @Mixified ?) point me in the right direction or failing that @maxmp?