Give ToggleButton a style: neither native theme defined it

CodenameOne/src/com/codename1/ui/Button.java

@@ -1034,17 +1034,125 @@ public boolean isToggle() {
     /// #### Parameters
     ///
     /// - `toggle`: the toggle to set
+    /// The UIID this control carried before setToggle(true) replaced it, so
+    /// setToggle(false) can put it back. Null whenever toggle mode was not
+    /// entered from a CheckBox or RadioButton UIID.
+    private String preToggleUIID;
+
     public void setToggle(boolean toggle) {
         if (this.toggle == toggle) {
             return;
         }
         this.toggle = toggle;
         accessibilityChanged(AccessibilityManager.CHANGE_STRUCTURE | AccessibilityManager.CHANGE_STATE);
-        if (toggle && "CheckBox".equals(getUIID()) || "RadioButton".equals(getUIID())) {
-            setUIID("ToggleButton");
+        // The UIID follows the mode in both directions. Two things were wrong here
+        // for as long as no theme defined ToggleButton, which is what kept them
+        // invisible:
+        //
+        //   - && binds tighter than ||, so the old condition read
+        //     (toggle && isCheckBox) || isRadioButton. setToggle(false) on a
+        //     RadioButton therefore set its UIID to ToggleButton, the opposite of
+        //     what was asked for.
+        //   - nothing restored the UIID afterwards, so a control taken back out of
+        //     toggle mode kept the toggle's appearance while painting its state
+        //     glyph again.
+        //
+        // setUIID clears preferredSize, so the size computed without the glyph is
+        // recalculated on the next layout pass.
+        String uiid = getUIID();
+        if (toggle) {
+            if ("CheckBox".equals(uiid) || "RadioButton".equals(uiid)) {
+                preToggleUIID = uiid;
+                setUIID("ToggleButton");
+            }
+            // Grouped, the live UIID is the group's alias and says nothing about
+            // what this control is, so the name that matters is the one the group
+            // saved to restore on removal. Entering toggle mode has to move that to
+            // ToggleButton, exactly as leaving it moves it back, or a control
+            // toggled while inside a group is handed a radio UIID on the way out.
+            Object saved = getClientProperty("$origUIID");
+            if (isDefaultToggleableUIID(saved)) {
+                preToggleUIID = (String) saved;
+                putClientProperty("$origUIID", "ToggleButton");
+            }
+        } else if (preToggleUIID != null) {
+            // Two places can be holding the toggle UIID, and which ones depends on
+            // the group this control is in -- horizontal groups rename members to
+            // ToggleButton*, vertical ones to GroupElement*, and an ungrouped
+            // control keeps the name setToggle assigned. So each is corrected on
+            // its own terms rather than by guessing the group's prefix:
+            //
+            //   - the live UIID, when it is still a toggle name;
+            //   - $origUIID, which is what a ComponentGroup puts back when the
+            //     control leaves it, and which holds ToggleButton whatever prefix
+            //     the group itself uses.
+            // While the control is still in a group the live UIID belongs to the
+            // group: a horizontal one renames every member, toggle or not, to give
+            // the bar its segmented edges, and it does not re-apply that when the
+            // UIID changes under it. Resetting it here would strip the member's
+            // styling until the next structural or theme update. $origUIID is not
+            // the test for that -- ComponentGroup sets it once and never clears it,
+            // so it says "was grouped at some point" rather than "is grouped now".
+            if (!groupOwnsUIID() && isToggleUIID(uiid)) {
+                setUIID(preToggleUIID);
+            }
+            Object saved = getClientProperty("$origUIID");
+            if (saved instanceof String && isToggleUIID((String) saved)) {
+                putClientProperty("$origUIID", preToggleUIID);
+            }
+            preToggleUIID = null;
         }
     }
 
+    /// Whether a ComponentGroup is currently holding this control's UIID. Being
+    /// inside one is not enough: updateUIIDs() returns without renaming anything
+    /// when ComponentGroupBool is off and the group is not forced -- the default,
+    /// and what Android Material ships -- and in that case the live UIID is still
+    /// ours to restore. The group is asked directly rather than inferred from the
+    /// UIID it saved, because restoreUIID leaves that saved value in place when
+    /// grouping is switched off, so it outlives the ownership it recorded.
+    ///
+    /// #### Returns
+    ///
+    /// true if a group renamed this control
+    private boolean groupOwnsUIID() {
+        Container parent = getParent();
+        return parent instanceof ComponentGroup && ((ComponentGroup) parent).isGroupingActive();
+    }
+
+    /// Whether the given saved UIID is one setToggle is allowed to convert. An
+    /// application that assigned its own UIID keeps it: the original code only
+    /// ever converted the two defaults, and the guide says as much.
+    ///
+    /// #### Parameters
+    ///
+    /// - `saved`: the value recorded by a ComponentGroup
+    ///
+    /// #### Returns
+    ///
+    /// true for the default CheckBox and RadioButton UIIDs
+    private static boolean isDefaultToggleableUIID(Object saved) {
+        return "CheckBox".equals(saved) || "RadioButton".equals(saved);
+    }
+
+    /// True for the UIID setToggle assigns and for the three a horizontal
+    /// ComponentGroup renames its edge controls to. Matching only the bare name
+    /// would skip the restore for any toggle that happens to sit in a group.
+    ///
+    /// #### Parameters
+    ///
+    /// - `uiid`: the UIID to test
+    ///
+    /// #### Returns
+    ///
+    /// true if this is a toggle UIID
+    private static boolean isToggleUIID(String uiid) {
+        return "ToggleButton".equals(uiid)
+                || "ToggleButtonFirst".equals(uiid)
+                || "ToggleButtonLast".equals(uiid)
+                || "ToggleButtonOnly".equals(uiid);
+    }
+
     /// Overriden to workaround issue with caps text and different UIID's
     /// {@inheritDoc}
     @Override

CodenameOne/src/com/codename1/ui/ComponentGroup.java

@@ -183,6 +183,19 @@ private void updateUIID(String newUIID, Component c) {
         reverseRadio(c);
     }
 
+    /// Whether this group is currently renaming its members' UIIDs. updateUIIDs()
+    /// does nothing unless the theme constant is on or grouping is forced, and
+    /// Button needs the same answer to know whether a member's live UIID belongs
+    /// to the group or to itself. $origUIID cannot answer it: restoreUIID leaves
+    /// that set, so it says "was renamed once", not "is renamed now".
+    ///
+    /// #### Returns
+    ///
+    /// true when this group assigns its members' UIIDs
+    boolean isGroupingActive() {
+        return getUIManager().isThemeConstant(groupFlag, false) || forceGroup;
+    }
+
     private void restoreUIID(Component c) {
         String o = (String) c.getClientProperty("$origUIID");
         if (o != null) {

docs/demos/common/src/main/java/com/codenameone/developerguide/screenshots/GuideFigures.java

@@ -77,6 +77,10 @@ public static FigureVariant[] variants() {
             new FigureVariant(new GraphicsFontimageStyleFigure(), FigureDevice.ANDROID, false, "graphics-fontimage-style.png"),
             new FigureVariant(new GraphicsFontimageMaterialFigure(), FigureDevice.ANDROID, false, "graphics-fontimage-material.png"),
             new FigureVariant(new CsvParsingFigure(), FigureDevice.ANDROID, false, "csv-parsing.png"),
+            new FigureVariant(new ToggleButtonFigure(), FigureDevice.ANDROID, false,
+                    "components-toggle-buttons-android.png"),
+            new FigureVariant(new ToggleButtonFigure(), FigureDevice.IOS, false,
+                    "components-toggle-buttons-ios.png"),
         };
     }
 }

docs/demos/common/src/main/java/com/codenameone/developerguide/snippets/generated/TheComponentsOfCodenameOneJava156Snippet.java → docs/demos/common/src/main/java/com/codenameone/developerguide/screenshots/ToggleButtonFigure.java

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2012, Codename One and/or its affiliates. All rights reserved.
+ * Copyright (c) 2026, Codename One and/or its affiliates. All rights reserved.
  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  * This code is free software; you can redistribute it and/or modify it
  * under the terms of the GNU General Public License version 2 only, as
@@ -20,76 +20,33 @@
  * Please contact Codename One through http://www.codenameone.com/ if you
  * need additional information or have any questions.
  */
-package com.codenameone.developerguide.snippets.generated;
 
-import com.codename1.gpu.*;
-import com.codename1.ui.*;
-import com.codename1.ui.animations.*;
-import com.codename1.ui.events.*;
-import com.codename1.ui.geom.*;
-import com.codename1.ui.layouts.*;
-import com.codename1.ui.list.*;
-import com.codename1.ui.plaf.*;
-import com.codename1.ui.util.*;
-import com.codename1.components.*;
-import com.codename1.charts.models.*;
-import com.codename1.charts.renderers.*;
-import com.codename1.charts.views.*;
-import com.codename1.capture.*;
-import com.codename1.io.*;
-import com.codename1.l10n.*;
-import com.codename1.location.*;
-import com.codename1.maps.*;
-import com.codename1.media.*;
-import com.codename1.messaging.*;
-import com.codename1.payment.*;
-import com.codename1.processing.*;
-import com.codename1.properties.*;
-import com.codename1.push.*;
-import com.codename1.security.*;
-import com.codename1.social.*;
-import com.codename1.ui.spinner.*;
-import java.io.*;
-import com.codename1.components.ToastBar.Status;
-import com.codename1.maps.layers.*;
-import com.codename1.charts.*;
-import com.codename1.ui.validation.*;
-import com.codename1.xml.*;
-import com.codename1.charts.util.*;
-import com.codename1.javascript.*;
-import com.codename1.ui.tree.*;
-import com.codename1.ui.table.*;
-import com.codename1.contacts.*;
-import java.util.*;
+package com.codenameone.developerguide.screenshots;
 
+import com.codename1.ui.ButtonGroup;
+import com.codename1.ui.CheckBox;
+import com.codename1.ui.FontImage;
+import com.codename1.ui.Form;
+import com.codename1.ui.Image;
+import com.codename1.ui.RadioButton;
+import com.codename1.ui.layouts.BoxLayout;
 
-class TheComponentsOfCodenameOneJava156Snippet {
-
+/// The toggle buttons the Components chapter shows beside its `createToggle`
+/// sample.
+///
+/// Two of the seven are selected on purpose. `setToggle(true)` rewrites the
+/// UIID to `ToggleButton`, and the whole point of the figure is the difference
+/// between a selected and an unselected one, which the theme draws as a change
+/// of fill rather than of label colour alone. A figure with nothing selected
+/// would show the shape and hide the state.
+class ToggleButtonFigure implements GuideFigure {
+    @Override
+    public String id() {
+        return "components-toggle-buttons";
+    }
 
-    Object context;
-    Object url;
-    Object value;
-    Object body;
-    Object event;
-    String apiKey = "test-key";
-    String myHttpsURL = "https://example.com";
-    java.util.List<String> validKeysList = new java.util.ArrayList<>();
-    Image myImage;
-    Graphics graphics;
-    Graphics g;
-    GraphicsDevice device;
-    Form form;
-    Form hi;
-    Container cnt;
-    Container myForm;
-    Component component;
-    Button button;
-    MultiButton myMultiButton;
-    Label label;
-    BrowserComponent browserComponent;
-    Resources theme;
-
-    void snippet() throws Exception {
+    @Override
+    public Form build() {
         // tag::the-components-of-codename-one-java-156[]
         Form hi = new Form("RadioButton", new BoxLayout(BoxLayout.Y_AXIS));
         Image icon = FontImage.createMaterial(FontImage.MATERIAL_INFO, "Label", 3.0f);
@@ -108,7 +65,12 @@ void snippet() throws Exception {
         hi.add(cb1).add(cb2).add(cb3).add(cb4).add(rb1).add(rb2).add(rb3);
         hi.show();
         // end::the-components-of-codename-one-java-156[]
+        // Focus lands on the first focusable control by default, and a focused
+        // toggle resolves sel# -- the accent ring -- whether or not it is
+        // checked. That would draw the one control the sample checks as though
+        // it were not. Focus an unchecked control instead, so the two filled
+        // rows read as checked and the ring reads as focus.
+        hi.setFocused(rb1);
+        return hi;
     }
-
-
 }

docs/developer-guide/The-Components-Of-Codename-One.asciidoc

@@ -728,11 +728,18 @@ You can convert the sample above to use toggle buttons as such:
 
 [source,java]
 ----
-include::../demos/common/src/main/java/com/codenameone/developerguide/snippets/generated/TheComponentsOfCodenameOneJava156Snippet.java[tag=the-components-of-codename-one-java-156,indent=0]
+include::../demos/common/src/main/java/com/codenameone/developerguide/screenshots/ToggleButtonFigure.java[tag=the-components-of-codename-one-java-156,indent=0]
 ----
 
-.Toggle button converted sample
-image::img/components-toggle-buttons.png[Toggle button converted sample,scaledwidth=20%]
+.Toggle button converted sample, on Android Material and iOS
+image:img/generated/components-toggle-buttons-android.png[Toggle buttons under Android Material,scaledwidth=35%]
+image:img/generated/components-toggle-buttons-ios.png[Toggle buttons under the iOS theme,scaledwidth=35%]
+
+Both themes draw the selection as a change of fill rather than of label color alone, so a
+selected toggle stays readable for someone who can't separate the two hues. The outlined row in
+each figure is the one holding focus: focus is drawn as a ring precisely so it can't be mistaken
+for a value, since the framework resolves a focused toggle through the same style whether
+it's checked or not.
 
 That's half the story though: to get the full effect of some cool toggle button UI's you can use a https://www.codenameone.com/javadoc/com/codename1/ui/ComponentGroup.html[ComponentGroup]. This allows you to create a button bar effect with the toggle buttons.