Creating a Custom Look and Feel Class


Download the project

Introduction: What is Look and Feel?

One common question is how to start creating custom user interfaces (UI) when building a VST plug-in or audio application. This can be a very complicated process, and some experts estimate that creating an interesting UI can be up to 90% of development work!  

In this lesson, we will show you the first step in this process – creating your own Look and Feel class.  Look and Feel (called LNF for short) refers to how JUCE is able to render visual elements to the screen.  These visual elements, such as sliders, text boxes, and menus, are called components. JUCE has a default style in which these components are drawn, and we can use individual component LookAndFeelMethods to customize elements as we see fit.

Core Concepts

This tutorial assumes a basic understanding of C++ and the JUCE Framework.  Here are some concepts to familiarize yourself with to ensure a smooth journey through this tutorial.


First, let’s create a new JUCE project. In this instance, we’ve called this project “LookAndFeelDemo” and created this as a stand alone audio application by selecting “audio” as my template type. You can do this using the audio plug-in template as well, but we’ve done it this way for simplicity.

1. Create new source files

In the Projucer, create a new cpp and header file called “StyleSheet.”  This will be where we will write our custom Look and Feel (LNF) class. Now click “save and open in IDE” to open the project in your IDE.



2. Create a custom look and feel class

To start writing our custom LNF class, we will first need to inherit from the JUCE class LookAndFeel_V4.  Why V4?  Over the years, JUCE has updated the default look of the framework, and V4 is the latest iteration of this.  Don’t forget to add the JUCE header to your StyleSheet header to access the JUCE library and functions.  Let’s call our class CustomLNF.

#pragma once

#include <JuceHeader.h>

class CustomLNF : public juce::LookAndFeel_V4
    // Add methods later!

3. Include your custom lnf in your main component

Now we need to change the project’s LookAndFeel to our new CustomLNF.  Let’s include StyleSheet.h in MainComponent.h and create a CustomLNF object called myCustomLNF.

#pragma once

#include "StyleSheet.h"
#include <JuceHeader.h>

class MainComponent  : public juce::Component
    ~MainComponent() override;

    void paint (juce::Graphics&) override;
    void resized() override;

    CustomLNF myCustomLNF;


3. Set the look and feel to your custom lnf object

Now, in the constructor of our MainComponent.cpp, we need to set the look and feel to our custom LNF.  Since setDefaultLookAndFeel() takes a pointer as an argument (remember a pointer is just a memory address), we need to put “&” before our object, which gives the memory address of our LNF.

    juce::LookAndFeel::setDefaultLookAndFeel (&myCustomLNF);
    setSize (600, 400);

4. Important!  In the destructor, set the LNF to nullptr.

Under the rules of RAII (Resource Acquisition Is Initialization), we want to ensure we set our LookAndFeel to nullptr in our MainComponent destructor.

    juce::LookAndFeel::setDefaultLookAndFeel (nullptr);

Now we’re ready to start overriding JUCE’s default way of drawing components! In part 2, we will show how to design our own dial.

The Audio Programmer Logo

Connect with the Audio Programmer community and find out about new tutorials, jobs, and events!

You have Successfully Subscribed!