Button styles and color changing

[DogPlanner GSS]

Dear Developers,

Could you help us please!

When we creating buttons with styles, e.g.

var buttons = [];

var btn = app.CreateButton(index, width, height, "Alum")

buttons.push(btn);

lay.AddChild(btn);

Or with using SetStyle function.

When we try to change color of the button using .SetBackColor("") function the button style is changed to the standard rectangle form also.

Is it possible to change color of the styled button without changing it style? This means if we have button with some radius, and we want to change it color - is it possible to change the color without changing of the round form?

Thank you very much in advance. Have a nice day.

Best regards

Dmitry

[Alan Hendry]

HI,

I'd try code recently posted by Marybanda on Discord

for rounded corners and other colours (and other controls)

Regards, Alan H

// Global plugin object
var br;

function OnStart() {
    // Main layout
    // Changed to "Top" alignment for better display of multiple components
    var lay = app.CreateLayout("Linear", "FillXY,Center,Top");
    lay.SetBackColor("#eeeeee");
    app.AddLayout(lay);

    // Plugin initialization
    br = app.CreateBorderRadius();

    // ------------------------------------
    // -------- 1. Rounded Button 1 --------
    // ------------------------------------
    var btn1 = app.CreateButton("Rounded Button 1");
    btn1.SetBackColor("#2196F3");
    btn1.SetTextColor("#ffffff");

    var roundedBtn1 = br.SetRadius(btn1, 24);
    roundedBtn1.SetMargins(0, 0.02, 0, 0.02);

    // ------------------------------------
    // -------- 2. Rounded Button 2 --------
    // ------------------------------------
    var btn2 = app.CreateButton("Rounded Button 2", 0.7, 0.12);
    btn2.SetBackColor("#4CAF50");
    btn2.SetTextColor("#ffffff");

    var roundedBtn2 = br.SetRadius(btn2, 4);
    roundedBtn2.SetMargins(0, 0, 0, 0.02)

    // ------------------------------------
    // -------- 3. Rounded TextView --------
    // ------------------------------------
    var txt = app.CreateText("Rounded Text View", 0.7, -1, "Multiline");
    txt.SetPadding(0.03, 0.03, 0.03, 0.03);
    txt.SetBackColor("#FF9800"); // Orange background for visibility
    txt.SetTextColor("#ffffff");
    txt.SetTextSize(20);

    var roundedTxt = br.SetRadius(txt, 10);
    roundedTxt.SetMargins(0, 0, 0, 0.02);
   
    // ------------------------------------
    // -------- 4. Rounded Image --------
    // ------------------------------------
    var img = app.CreateImage( "/Sys/Img/Droid1.png");
    img.SetBackColor("#ffffff");

    var roundedImg = br.SetRadius(img, 100);
    roundedImg.SetMargins(0, 0, 0, 0.02);
   
    //------------------------------------
    //---------5. Rounded TextEdit --------
    //------------------------------------
    var edt = app.CreateTextEdit( "",0.7,0.05 )
    edt.SetHint( "enter text here" )
    edt.SetTextColor( "white" )
    edt.SetBackColor( "#cc22cc" )
   
    var roundedEdt = br.SetRadius(edt, 12) // Slightly larger radius for the EditText
    roundedEdt.SetMargins(0, 0.02, 0, 0.02)

    // ------------------------------------
    // -------- 6. Rounded ListView --------
    // ------------------------------------
    var lst = app.CreateList( "Fred,Bill,Jim,Mary,Sue,John,Jane,Doe", 0.7, 0.3 );
    lst.SetTextColor( "#ff666666" );
    lst.SetBackColor( "#ffffffff" ); // White background for the list itself
    lst.SetOnTouch( lst_OnTouch );
    lst.SetPadding(0.01, 0.01, 0.01, 0.01); // Small padding for list

    var roundedLst = br.SetRadius(lst, 16); // Apply a 16 radius to the ListView
    roundedLst.SetMargins(0, 0.02, 0, 0.02);
 
 

    // Add all rounded components to main layout
    lay.AddChild(roundedBtn1);
    lay.AddChild(roundedBtn2);
    lay.AddChild(roundedTxt);
    lay.AddChild(roundedImg);
    lay.AddChild(roundedEdt);
    lay.AddChild(roundedLst);
}

// ListView OnTouch handler
function lst_OnTouch( title, body, type, index ) {
    app.ShowPopup( "Touched Item = " + title );
}

/* * ======= BORDER RADIUS PLUGIN =======
 * This plugin wraps any component in a Card layout to apply a border radius.
 */
app.CreateBorderRadius = function () {
    return new _BorderRadius();
}

function _BorderRadius() {

    this.GetVersion = function () {
        return "1.1";
    }

    /**
     * Wraps a component in a Card layout to apply rounded corners.
     * @param {object} component - The DroidScript control to apply the radius to (e.g., Button, TextView).
     * @param {number} radius - The corner radius value (in pixels or a large number for circle).
     * @param {number} [mL=0] - Left margin.
     * @param {number} [mT=0] - Top margin.
     * @param {number} [mR=0] - Right margin.
     * @param {number} [mB=0] - Bottom margin.
     * @returns {object} The wrapping layout (Linear) containing the Card.
     */
    this.SetRadius = function (component, radius, mL=0, mT=0, mR=0, mB=0) {

        if (!component) return null;

        // === MARGIN WRAPPER (CRITICAL FIX) ===
        // This linear layout applies margins to the whole 'rounded' component.
        var wrap = app.CreateLayout("Linear", "FillX");
        wrap.SetBackColor("#00000000"); // Transparent
        wrap.SetMargins(mL, mT, mR, mB);

        // === CARD ===
        // The Card layout is what actually provides the SetCornerRadius method.
        var card = app.CreateLayout("Card");
        card.SetCornerRadius(radius);
        // Set the Card's background to transparent, or it will be a solid square/rectangle
        card.SetBackColor("#00000000");
       
        // === CONTENT HOLDER ===
        // This Linear layout ensures the component fills the card and handles alignment.
        var content = app.CreateLayout("Linear", "FillXY,Center,VCenter");
        content.SetBackColor("#00000000"); // Transparent
        content.AddChild(component);

        card.AddChild(content);
        wrap.AddChild(card);

        // expose references for potential later use (optional)
        wrap.Box = card;
        wrap.Content = content;

        return wrap;
    }
}