Style anomalies

[flyingdutchman]

Solved the menu icon However, the 

com.maxmpz.audioplayer:ItemTrackMenu

is used on the main albumart where I set background transparent BUT also in another scenes where you select a category such as genres, rock

In my view this level should also display ItemTrackMenu as in the other Library scenes where the background is set

An example is shown in the rhs screenshot

[flyingdutchman]

It turns out the icons shown above each individual library category (eg all songs, albums etc) is the same icon as the icons shown in the library top view. 

Remains

1. the search icon

- it does not have the same style applied as other icons in Poweramp ( com.maxmpz.audioplayer:colorIconPrimary)

- went through all the xml files and did not find any reference to it

- at the category level eg Genre, Rock, it changes to white but  no icon style  com.maxmpz.audioplayer:colorIconPrimary

2. the different style of the ItemTrackMenuItem also at the eg Genre, Rock level

 

@maxmp can you confirm/comment on the 2 points above

[maxmp]

@flyingdutchman Search icon style has the same definition as other (header) icons.

You can redefine its background on multiple levels:

- you can change icon style itself:

<style name="SampleSkin" parent="com.maxmpz.audioplayer:style/Base_ActivityTheme_Default">
    ...
	<item name="com.maxmpz.audioplayer:ItemHeaderSearchButton">@style/ItemHeaderSearchButton</item>
    ...
</style>
...
<style name="ItemHeaderSearchButton" parent="com.maxmpz.audioplayer:ItemHeaderSearchButton">
	<item name="android:background">@drawable/ripple_button</item>
</style>

- or you can change the color which is used in the button drawables (colorBgInverse) - this will change all the appropriate backgrounds as well:

<item name="com.maxmpz.audioplayer:colorBgInverse">#00f</item>

 

[flyingdutchman]

@maxmpsorted, as always thank you

 

[flyingdutchman]

On 9/29/2019 at 1:46 PM, maxmp said:

@flyingdutchman Search icon style has the same definition as other (header) icons.

You can redefine its background on multiple levels:

- you can change icon style itself:

<style name="SampleSkin" parent="com.maxmpz.audioplayer:style/Base_ActivityTheme_Default">
    ...
	<item name="com.maxmpz.audioplayer:ItemHeaderSearchButton">@style/ItemHeaderSearchButton</item>
    ...
</style>
...
<style name="ItemHeaderSearchButton" parent="com.maxmpz.audioplayer:ItemHeaderSearchButton">
	<item name="android:background">@drawable/ripple_button</item>
</style>

- or you can change the color which is used in the button drawables (colorBgInverse) - this will change all the appropriate backgrounds as well:

<item name="com.maxmpz.audioplayer:colorBgInverse">#00f</item>

 

 

@maxmp, still struggling to find the artifacts for the lowest level. (see screenshot with arrow) I think I understand the naming, indicating certain levels and that I am dealing with ItemText... In Itemtext.xml  you indicate the levels

    Special:    
    - header
    - scene_top_header
    - scene_search_header
    - menu
    == +4
    
    Total: 6

I have overridden 

        <item name="ItemTextMenu">@style/ItemTextMenu</item>
        <item name="ItemTextMenu_scene_menu">@style/ItemTextMenu_scene_menu</item>
        <item name="ItemTextMenu_scene_header">@style/ItemTextMenu_scene_header</item>
        <item name="ItemTextMenu_scene_search_header">@style/ItemTextMenu_scene_search_header</item>
        <item name="ItemTextMenu_scene_top_header">@style/ItemTextMenu_scene_top_header</item>
but to no avail.

I would really appreciate your help with this one.

 

[flyingdutchman]

@maxmp I checked all artifacts with Menu references but was unable to find the menu showing at the lowest level. Can you give me a hint please ?

ItemTextAAImage_scene_item_menu
ItemTextTitle_scene_item_menu
ItemTextLine2_scene_item_menu
ItemTextMenu
ItemTextMenu_scene_menu
ItemTextMenu_scene_search_header
ItemTextMenu_scene_header
ItemTextMenu_scene_top_header
ItemTextHeaderSelectButton_scene_menu

ItemTrackCatImage_scene_item_menu  ( error: resource com.maxmpz.audioplayer:style/ItemTrackCatImage_scene_item_menu not found. )

[flyingdutchman]

I believe I finally resolved it. This style had the effect of showing the default black circle with 3 dots. By removing it it seems all is now behaving as expected

<style name="yaps_ItemTrackMenu_hide" parent="com.maxmpz.audioplayer:ItemTrackMenu">
    <item name="android:visibility">invisible</item>

</style>

[maxmp]

Ok, thanks for the info.

The default theme is spread over multiple files. Usually those named like "styles-x.xml" where x is a style prefix, e.g. styles-top.xml for "TopPlay" style. But it's just easier to do a files search over (reference resource) xmls to find definition/references.

[flyingdutchman]

@maxmp, struggling with displaying a properly rounded coloured seekbar and would appreciate some help.

in attrs-powerui.xml you state:

"<!-- NOTE: barBitmap/elapsedBarBitmap/barBitmap2/elapsedBarBitmap2 are specifically crafted bitmaps. Height of the bitmap should be >= width of the bitmap.
             Bitmap is stretched in a way similar to 9-patch images, but only 3 "patches" used - top, middle, bottom.
             Top is unstretched, height=width*0.5, bottom is unstretched, height=width*0.5 and reset is stretched middle."

Question:

As 9 patch does not provide the correct png, how is "specifically crafted" achieved. Photoshop? 

Also the sentence

  Top is unstretched, height=width*0.5, bottom is unstretched, height=width*0.5 and reset is stretched middle."

I find totally confusing., if top is unstretched, what does the height=width*0.5 refer to eg for a png 32*68 px this would be 16. Neither do i understand "reset is stretched middle."

Can you provide some additional clarification please?

[maxmp]

@flyingdutchman right, 9.png were considered, but unfortunately it's very slow to draw 100x of them, so just plain png is used with the predefined proportions. The shrinking or stretching happens only for the middle part, and only vertically.

Graphical explanation:

 

[flyingdutchman]

@maxmp, many thanks for the quick response. So I guess this can be created in Photoshop. 

[flyingdutchman]

 

@maxmp there appears to be some inconsistent behaviour with regards to background in popuplists

 <style name="PopupMenuItem" parent="com.maxmpz.audioplayer:PopupMenuItem">
        <!--used lists eg library menu options,  -->
        <item name="android:background">@color/md_red_700</item>
    </style>
    <style name="ItemPopupList" parent="com.maxmpz.audioplayer:ItemPopupList">
        <!--used by ReverbPreset -->
        <item name="android:background">?colorMenuBgColor</item>
    </style>
    <style name="PopupListLayoutList" parent="com.maxmpz.audioplayer:PopupListLayoutList">
        <item name="android:background">?colorMenuBgColor</item>
    </style>

colorMenuBgColor=lime

when long clicking the Albumart, the following is the result

When clicking EqEqPreset,

and then to EqReverbPreset

 

The style applied to the EqReverb is defined in the ItemPopupList whereas the EqEqPreset uses a different style.

It appear that  EqEqPreset, takes on the value of colorBgPrimary

There appears to be a mixture of styles to popup menus where I would expect the same behaviour.

Update:

Having identified a number of artifacts (see below) , Still hunting for the background setting for the EqEqPreset

 

    <style name="ItemPopupList" parent="com.maxmpz.audioplayer:ItemPopupList">
        <!--used by ReverbPreset -->

    <style name="PopupMenuItem" parent="com.maxmpz.audioplayer:PopupMenuItem">
        <!--used lists eg library menu options, long click albumart( top 3 lines -->

    <style name="EqPresetListLayout" parent="com.maxmpz.audioplayer:EqPresetListLayout">
error message:        style attribute 'com.maxmpz.audioplayer:attr/EqPresetListLayout' not found.
    </style>

    <style name="PopupDialogListLayoutList" parent="com.maxmpz.audioplayer:PopupDialogListLayoutList">
error message:        style attribute 'com.maxmpz.audioplayer:attr/EqPresetListLayout' not found.
    </style>

 

Finally found it

ItemEqPreset

 

 

[andrewilley]

51 minutes ago, flyingdutchman said:

@maxmp there appears to be some inconsistent behaviour with regards to background in popuplists

when long clicking the Albumart, the following is the result

Actually I'd noticed that too (my normal b/g is pretty dark so it was fairly subtle) and was going to mention it.  I've changed my b/g colour a bit to show it more clearly:

It also happens in another three-dots menu somewhere, but annoyingly I can't remember where.

Andre

[flyingdutchman]

@maxmponce more I need your help.

The artifacts 

ItemTrackTitle_scene_aa

ItemTrackLine2_scene_aa

do not respond to any positioning other than staying within the aa_bounds.

I tried all possible options, layout_attachLeft to inset, parent,  id/list, id/aa_bounds,, id/container, id/waveseek and so on but the items do not move outside aa_bounds

At the moment I use a negative Left_ margin but this is not really satsifactory.

Can you help  on how to get the title and line2 to left align?

 

ListSubstyle

<item name="com.maxmpz.audioplayer:aaGravity">right</item>
<item name="com.maxmpz.audioplayer:aaItemBoundsMatchList">height</item>

and with

TopWaveseekLayout

<item name="com.maxmpz.audioplayer:layout_attachLeft">inset</item>
<item name="com.maxmpz.audioplayer:layout_attachRight">@com.maxmpz.audioplayer:id/aa_bounds</item>

and similar attributes for the other artifacts

the screenshot below is the result

[maxmp]

@flyingdutchman is this for the landscape? Default skin has 3 styles for those:

- default non-alt layout (/values/default-styles.xml)
- alt layout (/values/default-styles-alt.xml)
- landscape alt layout (/values-land/default-styles-alt.xml)

First ensure you're modifying appropriate style (by applying e.g. background or other attribute to verify style applies).
 

[flyingdutchman]

@maxmp I checked the styles as you suggested and also ran through your sample app. As you can see from my screenshot above all artifacts are displayed correctly apart from 

ItemTrackTitle_scene_aa

and 

ItemTrackLine2_scene_aa

Your sample app has the same problem, there seems to be no way to align these fields to the left hand side of the display.

The sample app, alternative layout shows as shown here (shifted the text field with a negative leftmargin)

[maxmp]

@flyingdutchman the labels are located within item, they won't align to the display side if item itself is not aligned to the appropriate side.

[flyingdutchman]

@maxmp

thank you for responding but I am not quite clear about the precise meaning of your response

I assume by "item" you mean 

ItemTrackAAImage_scene_aa (or aa_bounds)

which is aligned to the right hand side by

<style name="ListSubstyle_aaOptions_right" parent="ListSubstyle_aaOptions">
    <item name="com.maxmpz.audioplayer:aaGravity">right</item>
    <item name="com.maxmpz.audioplayer:aaItemBoundsMatchList">height</item>
    <item name="com.maxmpz.audioplayer:aaMarginLeft">0dp</item>
</style>

and ItemTrackTitle and ItemTrackLine2 are held within ItemTrackAAImage_scene_aa. 

If I understand this correctly then it is not possible to have the text aligned left hand side.

However, in the default landscape view the text fields are outside ItemTrackAAImage_scene_aa on the right hand side so clearly are able to move outside ItemTrackAAImage_scene_aa.

There must be something I do not understand or am missing.

 

 

 

[maxmp]

@flyingdutchman The item is the container view which contains cover, title, line2, meta, and few other sometimes dynamically loaded elements, such as rating. To align contents of the item view, first the item itself should be aligned to the side (you can push inner views off its parent container, but this is not recommended as touch/swipes and other interactivity won't work properly). The item layout (for track) is defined in item_track.xml with styles in styles-item.xml.

Note that scene_aa and other item scenes applied to the item child views, but not to the item container itself, as item layout is set and animated by the list. List dynamically shows any numbers of items as needed and manipulates and transitions the same item to/from list and grid layouts.

So to align title to the left you'll need:
- ensure the @id/list is aligned to the left (from your screenshot it looks it is not)
- ensure the title is aligned to the left for scene_aa (probably already done)
- ensure there is no internal padding or other large margins exists (probably already done)

Thanks!

As a side note, some devices may put navigation panel to the right/left or may not put it there in the landscape orientation. It differs a lot depending on OEM and Android version as well as system wide navigation panel setting, so you may want to always attach top level components such as @id/list to "inset".

[flyingdutchman]

@maxmp

 "The item is the container view which contains cover, title, line2, meta, and few other sometimes dynamically loaded elements, such as rating."

The way I understand this that there are 4  possible candidates to represent "the item":
        <attr name="TopContainer" format="reference"/>
        <attr name="TopMilk" format="reference"/>
        <attr name="TopListWidget" format="reference"/>
        <attr name="TopAABounds" format="reference"/>

"first the item itself should be aligned to the side "

I applied the layout_attachLeft to each of the above candidates in turn
 <item name="com.maxmpz.audioplayer:layout_attachLeft">parent</item> 
but none of the changes had the desired effect of left aligning ItemTrack_scene_aa and ItemTrackLine2_scene_aa.
Having spent a considerable time to get this to work, I have now given up and will live with the negative leftmargin in the hope that the next Github release contains a 
sample app where the alternative landscape layout has been fixed.
Thank you for your time.

[maxmp]

@flyingdutchman The style for item is in styles-iteml.xml "ItemTrack", but the layout is given by list and is dynamic (list manipulates items as needed depending on zoom level, scene, navigation, etc.). For the main screen you want to manipulate list position/dimension itself. This is "TopListWidget".

Can you please make some layout picture (e.g. in photoshop), and I will try to implement it as example layout in Sample Skin. Thanks!

[flyingdutchman]

@maxmp

this is what I am trying to achieve.. Everything is in position using normal margins etc apart from track title and artist/album. These are positioned with dimens definitions

<dimen name="ItemText_width">300dp</dimen>
<dimen name="ItemText_negative_width">-300dp</dimen>

Ideally, attaching the left side to <inset> would be preferable as the landscape width varies and the text does not always fit perfectly