How to search for android theme properties

[beppo-ivel]

I tried to change 3 dots option menu color and search a lot to find a solution that told me to use ThemeOverlay.MaterialComponents.Toolbar.Primary instead ThemeOverlay.MaterialComponents.ActionBar.Surface. Till now I don't know how find the right parent class in general to customize my Actionbar or Toolbar. For example the property <item name="android:fontFamily">@font/...</item> change the font-familey in both classes actionbar and toolbar. But it changes also the font of the options menu-items. How can I find the information in material code reference which classes to use if I want to distinguish the font-familey for actionbar-title and option menu-items?

[m1ga]

you've lnked to the correct articles before.

<item name="actionBarTheme">@style/Theme.ActionBarTheme</item>

with

<style name="Theme.ActionBarTheme" parent="@style/Widget.AppCompat.Light.ActionBar">
	<item name="colorControlNormal">#f0f</item>
</style>

makes it look like this:

Since those parts are mainly native Android themes you have to keep searching there android theme actionbar fontfamily or so.

For fonts i would try this in your theme

<item name="actionBarStyle">@style/CustomTheme.ActionBarStyle</item>

with

<style name="CustomTheme.ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
	<!-- actionbar -->
	<item name="elevation">0dp</item>
	<item name="android:actionMenuTextColor">#f00</item>
	<item name="android:titleTextStyle">@style/CustomTheme.ActionBar.TitleTextStyle</item>
	<item name="titleTextStyle">@style/CustomTheme.ActionBar.TitleTextStyle</item>
</style>

and

<style name="CustomTheme.ActionBar.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
	<!-- actionbar font -->
	<item name="android:textColor">#00f</item>
</style>

Found it somewhere on Stackoverflow too. I've never made a native App so I'm not familiar with the themes either but there is a lot of code out there (some is very old and might not work).
If you want to see where the fonts have to be: #13060 a small tutorial for the Tabbar font

[m1ga]

Have a look at Alloy Widgets: https://titaniumsdk.com/guide/Alloy_Framework/Alloy_Guide/Alloy_Widgets.html
Those are reusablel UI components. Basically you have an own view/styles/controller group which you can use with <Widget src="foo" name="button"/>

[beppo-ivel]

Thanks, widgets answers my question if I combine it with passing custom arguments. While reading about widgets I a came across custom tags that answers my question as well. I also read that, require views and controllers into your application is an alternative to widget. And I also see the mistake that I have to put $.customTxtField.addEventListener(' in a separate controller file and not somewhere under library to provide the accessibility to that view.

[m1ga]

Sorry I don't understand it 😄 But I think you've solved it. What I do is export the addEventlistener function in my widget so I can access it from the parent. It is a normal function so you can do exports.addEventListener = function(evt, clb)[ $.widgetView.addEventListener(evt,clb);}); in your widget.

[beppo-ivel]

Let me explain it by using code snippets. When I said "...require views and controllers into your application..." I mean that an alternative to Widgets is to create controllers / views within your project and require them into your application.

views/components/textfield.xml

<Alloy>
  <TextField id="customTxtField"/>
  <Label id="customLblMoveUp" visible="false"/>
  <Label id="customLblHintText"/>
</Alloy>

controllers/components/textfield.js

(function() {
  $.customTxtField.top = $.args.customTop;
  $.customLblHintText.top = $.args.customTop + 17;
  $.customLblMoveUp.top = $.args.customTop - 7;
  $.customLblHintText.text = $.args.customHintText;
  $.customLblMoveUp.text = " " + $.args.customHintText + " ";
})();

$.customTxtField.addEventListener('focus', function(e) {
  $.customLblMoveUp.visible = true;
  $.customLblHintText.visible = false;
});

$.customLblHintText.addEventListener('click', function(e) {
  $.customTxtField.focus();
});

$.customTxtField.addEventListener('blur', function(e) {
  if($.customTxtField.value == ""){
    $.customLblMoveUp.visible = false;
    $.customLblHintText.visible = true;
  }
});

I have to combine the require-statement for the view with "passing custom arguments", because I need flexibility at least for position and hint text. <Require src="/components/textfield" customTop="10" customHintText="MyTextField"/>. And I have access in the corresponding controller to my custom textfield via Alloy.createController('createTextfield').getView()...;
There is one main thing left, what to do if you want to add this textfield multiple times in the same view/window? In this case, I think, I have to use custom tags because I don't see nice solution by using widgets or require-statement.

BTW: can u please explain me how to know the correct relative positions, e.g. that the hint text label is placed in the vertical-middle of the textfield?

[m1ga]

I still don't get it, sorry. This is exactly what a Widget is for and there are existing ones like https://github.com/NadsonFernando/input-materialdesign-widget
Perhaps look at that. You can pass data with $.args and if you want multiple you just set an ID. Add methods to them to get/valid stuff and so on. And we are way off-topic in this thread so If you have other questions please open another thread.
if you set height to Ti.UI.SIZE and don't set a top/bottom value the label will be placed in the middle. Otherwise use the postlayout to get the height of the textfield (if it doen't have a fixed height, then you can just use it right away) and set a fixed top or bottom value to the hinttext.