0

I'm trying to give my Android app a material view. I've followed the guides here:

http://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes

http://www.appcelerator.com/blog/2015/07/understanding-the-android-material-theme/

If I place a button it is "meterialized". It has the default color and has the animation when it's clicked.

But what I want is to have a few buttons on the screen - and to each give a different color. But I still like to have them as material buttons - but once I give them a backgroundColor they are just a normal button - nothing meterialized about them.

Can I change the color of items of a material view or am I obligated to use only what's defined in the theme?

EDIT

Just to clarify - I want to have a few buttons on screen - each with it's own color - as material design button (including animations & material appearance).

EDIT 2

I found a similar question on Appcelerator jira (https://jira.appcelerator.org/browse/AC-560) where appcelerator state that it's not a bug - but a native behaviour.

So I'm revising my question - can I set custom android style per control like I can on native?

developer82
  • 13,237
  • 21
  • 88
  • 153
  • Take a look at this [question with answers](http://stackoverflow.com/questions/26346727/android-material-design-button-styles). I believe it's what you're looking for. – Max Jun 23 '16 at 09:09
  • @Aqul thanks. Thats useful information. Can I apply it to Titanium? – developer82 Jun 23 '16 at 09:15
  • Yes, in your question first link, you have all that info, platform/android/res/values/your_theme.xml – rjcpereira Jun 23 '16 at 09:18
  • I also use a View controller with a click event, instead of the Button element, you can style it as you want – rjcpereira Jun 23 '16 at 09:19
  • @RicardoPereira first link does not discuss how to change button apperance from alloy - just default button. If you use a view with click event you are missing out the material animations and have to do all styling by yourself - which defeats the purpose. – developer82 Jun 23 '16 at 09:22
  • You're right, but in most of my apps, the user interface is the same in iOS, android and Windows, and the only animation that I have is a opacity to 0.75 during 1 second after the click event – rjcpereira Jun 23 '16 at 09:25
  • @RicardoPereira I'm trying to give my android app the native app feeling (that's one reason to use titanium) and iOS it's own look & feel. Each app consistent to platform specific desig. – developer82 Jun 23 '16 at 09:31
  • @developer82, ok, but I don't know if its possible to set a style for a specific button in titanium, I've opened the Button API in appc docs, filtered only to android properties and methods and I don't see any thing about style, I think that it will affect all the buttons. If you have a controller that is a Button with a View inside it, you don't have do add the stylling, and you can change the backgroudColor of it – rjcpereira Jun 23 '16 at 09:43
  • @RicardoPereira that's exactly what I did - didn't find one either. Tried your view in button trick - didn't work :( – developer82 Jun 23 '16 at 09:56
  • I don't know if its possible to do this but, if you create, lets say, 3 widgets (3 simple buttons) each one with one theme, it's not a simple approach but I think that will solve your problem: http://www.appcelerator.com/blog/2014/07/new-in-alloy-1-4-widget-themes/ – rjcpereira Jun 23 '16 at 10:01
  • @RicardoPereira also a nice idea - but this one talks about Alloy themes - which will give the same result since it's not using the actual native themes. – developer82 Jun 23 '16 at 10:09
  • You're right, I can't think at any other option besides the View instead of the button, It's not complicated, you can reach the same layout and events as the Button element – rjcpereira Jun 23 '16 at 10:13
  • @RicardoPereira Thanks for the help. I appreciate it. I'm trying to create a native module that will inherit Ti.UI.Button and maybe add the missing capabilities to it. Will also file for feature request in Jira. If you like I can keep you posted if success or not... – developer82 Jun 23 '16 at 10:16
  • 1
    @RicardoPereira Success! I was able to implement https://github.com/traex/RippleEffect. Can you tell me how you dropped shadow on your components? – developer82 Jun 26 '16 at 03:21
  • I've posted as an answer, have you created the JIRA ticket? If yes, add it to your question or to my answer – rjcpereira Jun 27 '16 at 09:39
  • So @developer82 did you manage to apply the rippleEffect on your Titanium project? How? Could you share something?Thanks! – Carlos Zinato Oct 18 '16 at 15:15
  • Hi @CarlosHenriqueLustosa - Yes after fighting with it for a while I was able to change color, add the elevation and ripple effect. I've created 2 modules for my project - one just ripple effect and one is the material button with ripple effect. I will try to find time to upload to github. – developer82 Oct 20 '16 at 09:48
  • wow, sounds amazing, please share it with us and community can help supporting it! Looking forward to see it :) – Carlos Zinato Oct 21 '16 at 10:09

1 Answers1

0

In response to your last comment this is how I do the workaround for my buttons, I also have other button functions like inactive, enabled, pressed, setTitle, etc...

button.xml

<Alloy>
    <View id="button">
        <Label id="title"/>
        <ImageView id="icon"/>
    </View>
</Alloy>

button.js (e.g.)

var args = arguments[0] || {},
    data = {};

$.title.text = args.title;

$.icon.image = '/images/button/'+args.image+'.png';

data.select = function(status) {

    if($) {

        if($.button) $.button.backgroundColor = status ? '#fff' : Alloy.CFG.myHoverColor;

        if($.icon) $.icon.image = '/images/button/'+args.image+'_hover.png';
    }
};

data.click = function() {

    data.select(true);

    setTimeout(function() {

        if($ && $.button && data && data.select) data.select(false);
    },1000);
};

$.button.addEventListener('click',data.click);

$.button.cleanup = function() {

    $.destroy();

    $.off();

    $.button.addEventListener('click',data.click);  

    $ = data = args = null;
};

Links used in comments:

Alloy Themes

RippleEffect

rjcpereira
  • 943
  • 4
  • 17