Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19796] Android: CardView Layout property not working as expected

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-12-01T02:30:49.000+0000
Affected Version/sRelease 5.1.0
Fix Version/sRelease 5.1.2
ComponentsAndroid
Labelsn/a
ReporterFokke Zandbergen
AssigneeAshraf Abu
Created2015-10-26T15:04:02.000+0000
Updated2015-12-02T20:14:39.000+0000

Description

The new Ti.UI.CardView is [documented](https://appcelerator.github.io/appc-docs/latest/#!/api/Titanium.UI.Android.CardView-property-layout) to support the layout property - as one would expect - but it does not behave as expected. The following sample code and attached screenshot demonstrates that none of the layout values work and that whatever mechanism is used by default is not composite since the labels are aligned top left instead of the expected centre. The first card has a view to wrap the labels to show what I'd expect for the other vertical-card to be like. However, there as well is shows that thew view is not filling up the parent as it normally does. 
var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

function createCard(layout, wrap) {

	var card = Ti.UI.Android.createCardView({
		top: 20,
		width: Ti.UI.FILL,
		height: 160,

		layout: layout
	});

	var view;

	if (wrap) {

		view = Ti.UI.createView({
			layout: layout
		});

		card.add(view);

	} else {
		view = card;
	}

	view.add(Ti.UI.createLabel({
		width: 50,
		height: 100,
		backgroundColor: 'green',
		text: (wrap ? 'reference' : layout) + ' in green'
	}));

	view.add(Ti.UI.createLabel({
		top: 10,
		width: 100,
		height: 50,
		backgroundColor: 'red',
		text: (wrap ? 'reference' : layout) + ' in red'
	}));

	return card;
}

var scrollView = Ti.UI.createScrollView({
	layout: 'vertical'
});

scrollView.add(createCard('vertical', true));
scrollView.add(createCard('composite'));
scrollView.add(createCard('vertical'));
scrollView.add(createCard('horizontal'));

win.add(scrollView);
win.open();

Attachments

FileDateSize
android_20151026-160006.png2015-10-26T15:03:53.000+000057728

Comments

  1. Fokke Zandbergen 2015-10-26

    [~msamah] I see you did the CardView implementation. I have some other issues I ran into with the 5.1.0 sample app as well. Shall I assign them to you directly?
  2. Ashraf Abu 2015-10-27

    [~fokkezb] Go ahead and assign it to me.
  3. Fokke Zandbergen 2015-11-02

    [~msamah] I'm working on the 5.1.0 sample app but layout inside card views is very hard to work with atm since it doesn't work as in regular views. Any ideas how to fix this yet?
  4. Ashraf Abu 2015-11-03

    I'm currently working on this. [~fokkezb] Does putting a view inside the cardview and working with that view instead help as a workaround for now?
  5. Fokke Zandbergen 2015-11-03

    [~msamah] no, a View in a CardView is not a sufficient workaround because there is no way to make the View take up all of the content size of the card; not by setting width to 100% or Ti.UI.FILL (which is the default of course) nor by setting left and right to 0.
  6. Fokke Zandbergen 2015-11-03

    Just play with https://github.com/appcelerator-developer-relations/appc-sample-ti510 and you'll see.
  7. Fokke Zandbergen 2015-11-05

    If we can make the view take up all space and have the expected layout behaviour for its children then we have 2 options:

    Add this wrapping view ourselves and forwarding relevant properties set on the card view (backgroundColor, layout..) to the wrapping view.

    Remove the add/remove/.. methods and instead have a contentView property so it is clear it needs a single view - just like we do for [PopOver](https://appcelerator.github.io/appc-docs/latest/#!/api/Titanium.UI.iPad.Popover-property-contentView)

    I'd say nr 2.
  8. Ashraf Abu 2015-11-18

    Master PR: https://github.com/appcelerator/titanium_mobile/pull/7466 Test code in PR. [~fokkezb] Feel free to test this out. I'm using the option 1 suggested by you. The cardview will handle the view that is added to it. In this case, TiCompositeLayout is added as a child which is transparent to the user. 5.1.X PR will be added later once this is okay.
  9. Fokke Zandbergen 2015-11-18

    Verified fixed!
  10. Ashraf Abu 2015-12-01

    PR reviewed and merged. Will make 5_1_X backport.
  11. Ashraf Abu 2015-12-01

    5_1_X PR: https://github.com/appcelerator/titanium_mobile/pull/7515
  12. Ashraf Abu 2015-12-01

    Backport 5_1_X merged.
  13. Lokesh Choudhary 2015-12-02

    Verified the fix. Used the code in the description. The cardView layout property works as expected. Closing. Environment: Appc Studio : 4.4.0.201511241829 Ti SDK : 5.1.2.v20151202061227 Ti CLI : 5.0.5 Alloy : 1.7.26 MAC Yosemite : 10.10.5 Appc NPM : 4.2.2 Appc CLI : 5.1.0 Node: v0.12.27 Nexus 6P - Android 6.0

JSON Source