JLabel with rounded border corners and background

[poce1don]

Karl, congratulations on Flatlaf, and thanks for giving the swing a new life.

This personalization

label.setOpaque(true);
label.putClientProperty(FlatClientProperties.STYLE, 
 "background: #00498C; foreground: #A9D1FF; border: 5,10,5,10, #E1FF68, 1.0f, 30;");

Results in

In the FlatLabelUI class could also have its update() method implementing it as it did in FlatPanelUI, and thus ensure that the color of the background would be rounded, as we see in a JPanel with that same personalization.

I can currently resolve through Jlabel's paintComponent(), but if there was a native feature on FlatLaf, it would be pretty cool, because JLabel with rounded corners allows us to create very stylish and modern titles.

What do you think of the idea?

Thank you, and see you soon.

[DevCharly]

Great idea 👍

This is now implemented in latest 3.5-SNAPSHOT: https://github.com/JFormDesigner/FlatLaf#snapshots

label.setOpaque(true); is no longer needed.
The rounded background is painted always if arc is greater than zero.

It is now also possible to omit color and thickness for border: style to paint
label with rounded background only. E.g.:

label.putClientProperty(FlatClientProperties.STYLE, 
    "background: #00498C; foreground: #A9D1FF; border: 5,10,5,10,,,999");

Alternatively, you can use the new arc: style. But usually it is necessary to
also specify a border: style to have some empty space around the text. E.g.:

label.putClientProperty(FlatClientProperties.STYLE, 
    "background: #00498C; foreground: #A9D1FF; arc: 999; border: 5,10,5,10");

It is also possible to use FlatLineBorder instead of styling client property.

Rounded background with line border:

label.setBorder( new FlatLineBorder( new Insets( 5, 10, 5, 10 ), new Color( 0xE1FF68 ), 1, 999 ) );
label.setBackground( new Color( 0x00498C ) );
label.setForeground( new Color( 0xA9D1FF ) );

Rounded background without line border:

label.setBorder( new FlatLineBorder( new Insets( 5, 10, 5, 10 ), 999 ) );
label.setBackground( new Color( 0x00498C ) );
label.setForeground( new Color( 0xA9D1FF ) );

See comment #367 (comment) for more tips regarding rounded border and background.

[DevCharly]

This is a nice feature because it makes it easy to create badges:

FlatLaf styling allows you to define badge style in FlatLaf properties files.

Following sample creates badges shown in above screenshot.

Create file com/badgesamples/FlatLightLaf.properties:

[style]Label.myRedBadge = \
    arc: 999; \
    border: 2,8,2,8,#f87171; \
    foreground: #dc2625; \
    background: #fef2f2

[style]Label.myYellowBadge = \
    arc: 12; \
    border: 2,8,2,8,#fbbf23; \
    foreground: #d97707; \
    background: #fffbeb

[style]Label.myGreenBadge = \
    arc: 999; \
    border: 2,8,2,8; \
    foreground: #1f9669; \
    background: #abf6d3

[style]Label.myBlueBadge = \
    arc: 999; \
    border: 2,8,2,8; \
    foreground: #fff; \
    background: #4f46e5

File com/badgesamples/BadgeSample.java:

package com.badgesamples;

import java.awt.*;
import javax.swing.*;
import com.formdev.flatlaf.*;

public class BadgeSample
{
    public static void main( String[] args ) {
        SwingUtilities.invokeLater( () -> {
            FlatLaf.registerCustomDefaultsSource( "com.badgesamples" );
            FlatLightLaf.setup();

            JFrame frame = new JFrame( "Badge Sample" );
            frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

            JLabel redBadge = new JLabel( "Label" );
            JLabel yellowBadge = new JLabel( "Label" );
            JLabel greenBadge = new JLabel( "Label" );
            JLabel blueBadge = new JLabel( "Label" );

            redBadge.putClientProperty( FlatClientProperties.STYLE_CLASS, "myRedBadge small" );
            yellowBadge.putClientProperty( FlatClientProperties.STYLE_CLASS, "myYellowBadge small" );
            greenBadge.putClientProperty( FlatClientProperties.STYLE_CLASS, "myGreenBadge small" );
            blueBadge.putClientProperty( FlatClientProperties.STYLE_CLASS, "myBlueBadge small" );

            JPanel panel = new JPanel( new FlowLayout() );
            panel.setBackground( Color.white );
            panel.add( redBadge );
            panel.add( yellowBadge );
            panel.add( greenBadge );
            panel.add( blueBadge);

            frame.add( panel );

            frame.setSize( 400, 100 );
            frame.setVisible( true );
        } );
    }
}

The style small (used in putClientProperty()) is predefined in FlatLaf and uses a smaller font.
See https://www.formdev.com/flatlaf/typography/
You can omit that, or use mini if you even need smaller text.

Of course, it is also possible to create badges without properties files:

JLabel redBadge = new JLabel( "Label" );
redBadge.putClientProperty( FlatClientProperties.STYLE, "arc: 999; border: 2,8,2,8,#f87171" );
redBadge.setForeground( new Color( 0xdc2625 ) );
redBadge.setBackground( new Color( 0xfef2f2 ) );

JLabel yellowBadge = new JLabel( "Label" );
yellowBadge.putClientProperty( FlatClientProperties.STYLE,
    "arc: 12; border: 2,8,2,8,#fbbf23; foreground: #d97707; background: #fffbeb" );
yellowBadge.putClientProperty( FlatClientProperties.STYLE_CLASS, "small" );

[poce1don]

Very nice!
Now we can create labels that will match the modern interface styles very well.