Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27838] Android: Style default tableViewSection headerTitle using XML

GitHub Issuen/a
TypeNew Feature
PriorityCritical
StatusClosed
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sRelease 9.3.0
ComponentsAndroid
Labelsandroid, tableview
ReporterMichael Gangolf
AssigneeGary Mathews
Created2020-04-08T15:20:57.000+0000
Updated2020-11-20T00:25:01.000+0000

Description

If you use the normal table headerTitle you have no option to style the text or create a headerView. This PR gives you at least the option to set a background/font color, border and text style using XML ressource files.
var win = Ti.UI.createWindow({
	backgroundColor: "#fff"
});

var sectionFruit = Ti.UI.createTableViewSection({
	headerTitle: 'Fruit'
});
sectionFruit.add(Ti.UI.createTableViewRow({
	title: 'Apples',
	color: "#000"
}));
sectionFruit.add(Ti.UI.createTableViewRow({
	title: 'Bananas',
	color: "#000"
}));

var sectionVeg = Ti.UI.createTableViewSection({
	headerTitle: 'Vegetables'
});
sectionVeg.add(Ti.UI.createTableViewRow({
	title: 'Carrots',
	color: "#000"
}));
sectionVeg.add(Ti.UI.createTableViewRow({
	title: 'Potatoes',
	color: "#000"
}));

var table = Ti.UI.createTableView({
	data: [sectionFruit, sectionVeg]
});

win.add(table);
win.open();

var sectionFish = Ti.UI.createTableViewSection({
	headerTitle: 'Fish'
});
sectionFish.add(Ti.UI.createTableViewRow({
	title: 'Cod',
	color: "#000"
}));
sectionFish.add(Ti.UI.createTableViewRow({
	title: 'Haddock',
	color: "#000"
}));

table.insertSectionBefore(0, sectionFish);
app/platform/android/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="headerTitleColor">#ff000000</color>
</resources>
app/platform/android/res/values/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="headerTitleSize">16sp</dimen>
</resources>
app/platform/android/res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="headerTitleStyle">bold</string>
</resources>
app/platform/android/res/drawable/titantium_ui_header_title_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
		<shape android:shape="rectangle">
			<!-- Bottom Border -->
			<solid android:color="#33000000"/>
		</shape>
	</item>
	<item android:bottom="1dp">
		<shape android:shape="rectangle">
			<solid android:color="#ffff"/>
		</shape>
	</item>
</layer-list>

Attachments

FileDateSize
68747470733a2f2f6d6967617765622e64652f74695f74626c312e706e67.png2020-04-08T15:19:58.000+000014475
68747470733a2f2f6d6967617765622e64652f74695f74626c322e706e67.png2020-04-08T15:19:58.000+000013853

Comments

  1. Michael Gangolf 2020-04-08

    PR: https://github.com/appcelerator/titanium_mobile/pull/11592
  2. Joshua Quick 2020-06-20

    [~michael], you raise a good point. A section header's text color, background color, etc. are currently hard-coded. This is not a good thing and it ignores the custom theme that might be applied to the app. We're actually completely rewriting TableView to use the Java RecylcerView class for 9.1.0, as can be seen in [TIMOB-27077]. It has a new "titanium_ui_tableview_holder.xml" file which defines the styles for all headers, row titles, and footers. I think this will do what you want. We should double-check this when testing the PR.
  3. Michael Gangolf 2020-06-20

    Sounds great!
  4. Gary Mathews 2020-07-08

    https://github.com/appcelerator/titanium_mobile/pull/11556

JSON Source