These Beauty and the Beast themes will bring some magic to your Android phone

Beauty and the Beast themes
Beauty and the Beast themes (Image credit: Ara Wagoner / Android Central)

Beauty and the Beast is coming back to theaters with a big, bold, live-action telling of our favorite bookworm princess. As a diehard Disney fan, this means breaking out the Nova Launcher and the KWGT to get my theme on. There's a lot of iconic characters to cover in Beauty and the Beast, and without further ado, here they are!

We invite you to relax, pull up a chair, as Android Central proudly presents… your themes.

Belle

Belle, Books, Blue, what's not to love?

Belle is a bold, brainy bookworm who wants the world to see past her beautiful exterior to the intellect and ingenuity inside. While Belle has and always will be defined to the world and her fans by the yellow dress, I wanted to portray Belle's theme the way I think she'd use a home screen: elegant but functional, with her passion for books in full view.

This theme wouldn't have been possible without the exceptional skills of Virginia Poltrack of Fat Russell watch faces, who made this perfectly-fitting wallpaper!

  • Belle's Bookcase Wallpaper
  • Whicons (Free)
  • 1Weather
  • KWGT Pro
  • Belle Music Widget Preset for KWGT
  • File manager app to move the Belle Music Widget Preset into the Kustom/widgets folder
  • Launcher with resizable widgets, custom icon support, custom grid sizes, and padding support. These instructions and this theme were drafted on Nova Launcher and I highly recommend using it for this theme as we're going to be dealing with some ridiculously precise widget placements here.
  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Wallpapers.
  3. Tap Pick image.

Wallpaper picking

  1. Select your downloaded Belle's Bookcase Wallpaper.
  2. Center your wallpaper. If your screen is wider than the image, make sure when you zoom in that you stay at the top of the image, cutting off some of the wood at the bottom rather than cutting off the top shelf.
  3. Tap Set wallpaper.

Set your wallpaper

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

Icons are awesome

  1. Select Whicons.
  2. Return to the home screen and long-press the app drawer icon until the icon menu appears.
  3. Tap Edit.

App drawer icons can be boring...

  1. Tap the icon box to edit it.
  2. Select Whicons.
  3. Scroll down to G for Google. Select Google Play Books, a symmetrical open book.

Time to get a fitting one

  1. Tap Done to confirm the icon change.
  2. Long-press the wallpaper on your home screen until a series of options appear.
  3. Tap Widgets.

Done and done

  1. Press-and-drag a 1Weather Compact widget to the bottom row of your home screen.
  2. In the configuration window, change Background to Dark.
  3. Change Background opacity to 0%.

Weather widget tweaking

  1. Change Accent to White (top row, middle).
  2. Tap Done.
  3. Open Nova Settings.

Back to Nova Settings

  1. Tap Desktop.
  2. Under Page indicator, tap Indicator color.
  3. Tap Turquoise (third row, fourth column)

Page indicator color

  1. Tap the back arrow in the top left corner to return to the main Nova Settings menu.
  2. Tap Folders.
  3. Under Window, tap Background.

Now folders

  1. Tap Custom (fifth row, fourth column).
  2. Change the color to #a66e2100.

This gives folders a woody tone

  1. Tap OK.
  2. Return to the home screen.

We're almost done... kinda.

Belle's Music Widget

Music makes themes better

Putting a custom-tinted music widgets perfectly inside the top bookshelf takes a little tinkering on any device it's on. Because of the complexity it can entail, I'm keeping the instructions for it to its own section. I'll try to be as clear as I can and explain things as I go, but this is definitely on the advanced side of our spectrum.

These instructions were drafted with KWGT Pro and Nova Launcher on a Google Pixel with a 6x6 desktop grid with height padding set to small for both the dock and desktop. I mention the padding because that will figure into how the widget fits into the shelf.

Before we begin, download the Belle Music Widget Preset into the Kustom/widgets folder on your device using a file manager. If you can't find that folder, open the app up once so that the app can create the folders.

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Widgets.
  3. Press-and-drag a 4x2 KWGT widget to the top two rows of your home screen.

KWGT blank

  1. Long-press the widget until a Nova menu pops up.
  2. Tap Resizeand stretch the empty widget until it covers the entire top shelf. If it's just barely not covering the top/bottom of the shelf, long-press the widget until the menu pops up and tap Padding.
  3. Tap the widget to configure it.

Stretch it.

  1. Tap Exported in the top carousel of tabs.
  2. Tap Belle Music Widget.

Import your preset

  1. Save the widget using the floppy disk icon in the top left bar of the Kustom editor.
  2. Return to the home screen.

the basic widget is saved, but not ready.

Now that we have the widget preset loaded, we need to see what adjustments need to be made to have the white backer of the widget cover the whole shelf, and to have the top left corner of the Material Music Komponent line up with the white backer. Take a look at how close you are to where we need to be, and from there, we have a few adjustments to make:

Adjusting the backer to the shelf

  1. Tap the widget text to open the KWGT editor. (Tapping the album art should take you into the music app instead.)
  2. Tap Shape in the Items tab of the editor.
  3. To adjust the rectangle width-wise, change the Width in the Shape tab.

Adjust the backer's size

  1. To adjust the rectangle height-wise, change the Height in the Shape tab.
  2. To move the rectangle up or down in the widget box, adjust the YOffset in the Position tab.
  3. To move the rectangle left or right in the widget box, adjust the XOffset in the Position tab.
  4. Whenever you wish to return to the home screen and check your edits, Save the widget using the floppy disk icon in the top left bar of the Kustom editor.

Line it up and save it.

Adjusting the music component to the white backer

  1. Tap the widget text to open the KWGT editor.
  2. Tap Material Music Komponent in the Items tab of the editor.
  3. To adjust the size of the music komponent, change the Scale in the Layer tab.

Scale things up

  1. To move the komponent up or down to align the album art with the top line of the the white box, adjust the YOffset in the Position tab.
  2. To move the komponent left or right to align the album art with the left line of the the white box, adjust the XOffset in the Position tab.
  3. When you have the top left corners of the komponent and rectangle aligns as you wish, Save the widget using the floppy disk icon in the top left bar of the Kustom editor.

Line things up and save

Adjusting the touch shortcuts

Once you have the widget set as you'd like, you can edit the widget to so that you don't re-open the editor every time you hit the text instead of the playback buttons.

  1. Tap the widget text to open the KWGT editor.
  2. Pull the tabs list halfway down the page to the left so that you can see the Touch tab.
  3. Tap the Touch tab.

Touch it

  1. Tap Kustom Action => Advanced Editor.
  2. Tap Kustom Action to bring up the types of commands you can trigger.
  3. Tap None.
  4. Save the widget using the floppy disk icon in the top left bar of the Kustom editor.

Save and we're done. For realsies this time.

With this touch action saved, you won't re-open the editor by tapping the widget. If you need to edit the widget in the future, you can reach the editor by opening the KWGT app.

Beast

The rose she offered was truly an enchanted rose

The Beast is a brash, angry, and uncaring individual that Disney has somehow made us all care about more than should be reasonable. We do love a good underdog story, or underbeast story, as it were, but the Beast's whole existence before he meets Belle is consumed by two things: the curse that transformed him, and the enchanted rose that acts as the countdown clock to his eternal punishment as a beast. It is only fitting that his theme is also dominated by these two things as well, with the unnatural fuschia accenting the unnatural magic the Enchantress struck him with.

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Wallpapers.
  3. Tap Pick image.

Pick a rose (wallpaper)

  1. Select your downloaded The Rose She Offered Wallpaper.
  2. Center the rose on your screen as best you can.
  3. Tap Set wallpaper.

The Rose She Offered

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

Get some icons

  1. Select Lines.
  2. Return to the home screen.
  3. Long-press the app drawer icon until the icon menu appears.

App drawer icon needs a change

  1. Tap Edit.
  2. Tap the icon box to edit it.
  3. Select Lines.

Lines

  1. Scroll down to D for Disney.
  2. Select Disney, the Disney D.
  3. Tap Done to confirm the icon change.

D for Disney

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Widgets.
  3. Press-and-drag a 1Weather Tabbed widget to the bottom row of your home screen.

Weather is important to a beast

  1. In the configuration window, change Background to Dark.
  2. Change Background opacity to 0%.
  3. Change Icon Set to White.

Weather widget tweaking

  1. Change Accent to Fuschia (second row from the bottom, middle).
  2. Tap Done.
  3. Open Nova Settings.

Back to Nova Settings

  1. Tap Folders.
  2. Under Window, tap Background.
  3. Select Purple (second row, third column).

Pretty purple

  1. Tap the back arrow in the top left corner to return to the main Nova Settings menu.
  2. Tap Desktop
  3. Under Page indicator, tap Indicator color.

Indicator color

  1. Select Purple (second row, third column).
  2. Return to the home screen.

Finished

Prince Adam

The spell has been broken

Wait, Beast has a name?! Yes, yes, he does! And because I feel like Prince Adam would keep a reminder like this on his home screen not only to remind himself of his humanity but of his recovery. In honor of his transformation, this theme follows our previous Beast theme very closely, but things are a little brighter and rosier.

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Wallpapers.
  3. Tap Pick image.

Pick an enchanted wallpaper

  1. Select your downloaded Enchanted Rose Wallpaper.
  2. Zoom in on the wallpaper, cropping the black bars at the top and bottom.
  3. Tap Set wallpaper.

Enchanted Rose

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

Icon time!

  1. Select Whicons.
  2. Return to the home screen.
  3. Long-press the app drawer icon until the icon menu appears.

Whicons return

  1. Tap Edit.
  2. Tap the icon box to edit it.
  3. Select Whicons.

Finding a new app drawer icon

  1. Scroll down to K for King.
  2. Select King, a symmetrical crown with a fleur-de-lis pattern.
  3. Tap Done to confirm the icon change.

Every king needs a crown

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Widgets.
  3. Press-and-drag a 1Weather Tabbed widget to the bottom row of your home screen.

Widget time

  1. In the configuration window, change Background to Dark.
  2. Change Background opacity to 0%.
  3. Change Icon Set to White.

Weather widget tweaking

  1. Change Accent to Custom (rainbow in the top left box)
  2. Drag the arrow in the right-hand color bar between red and purple.
  3. Drag the color circle in the left box to the top of the box about a third in from the left.

Custom color tweaking

  1. Tap OK.
  2. Tap Done.
  3. Open Nova Settings.

Back to Nova Settings

  1. Tap Folders.
  2. Under Window, tap Background.
  3. Tap Custom (fifth row, fourth column).

Folder options

  1. Change the color to #9ad77ba2.
  2. Tap OK.
  3. Tap the back arrow in the top left corner to return to the main Nova Settings menu.

Custom color settings

  1. Tap Desktop
  2. Under Page indicator, tap Indicator color.

Indicator color

  1. Tap the most recently used color (sixth row, first column) to use same pink you just used on your folders.
  2. Return to the home screen.

The theme, and the curse, is done!

Gaston

No one themes like Gaston, no one preens like Gaston

He may use antlers in all of his decorating, but there's no way Gaston's wallpaper wouldn't just be a selfie. There's just no way. And lacking Gaston's selfies, his profile portrait from Gaston's tavern is just about as good as it gets. Also keeping to Gaston's simplistic and narcissistic nature, this theme is devoid of widgets, because Gaston wouldn't know how to use them, and he wouldn't stand for any of his lovely form to be covered up.

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Wallpapers.
  3. Tap Pick image.

My, what a wallpaper!

  1. Select your downloaded Gaston's Profile Wallpaper.
  2. Adjust the wallpaper to keep Gaston fully on the screens. On some device this may mean cutting off part of his rifle.
  3. Tap Set wallpaper.

No one walls like Gaston!

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

My what icons!

  1. Select Absolute Red.
  2. Return to the home screen.
  3. Long-press the app drawer icon until the icon menu appears.

Absolute icons!

  1. Tap Edit.
  2. Tap the icon box to edit it.
  3. Select Absolute Red.

My what app drawer icons!

  1. Scroll down to D for Deerhunter.
  2. Select DeerHunter 2016, a stag icon.
  3. Tap Done to confirm the icon change.

I use antlers in all of my decorating!

  1. Open Nova Settings.
  2. Tap Folders.
  3. Under Window, tap Background.

My what Nova Settings!

  1. Tap Red (second row, first column).
  2. Tap the back arrow in the top left corner to return to the main Nova Settings menu.
  3. Tap Desktop.

Red folders, like Gaston!

  1. Under Page indicator, tap Indicator color.
  2. Tap Red (second row, first column).
  3. Return to the home screen.

My what a theme, GASTON!

Lumiere

Warm, bright Lumiere

Our golden candelabra gave me a good amount of trouble, as womanizers are wont to do, but I believe I've managed to maintain the maitre d's suave style while imbuing a rosy motif and some modern magic to his setup here. Lumiere is a showman whose very being is quite musical, so we have a nice big widget front and center for him.

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Wallpapers.
  3. Tap Pick image.

Ma chere wallpaper

  1. Select your downloaded Brass Wallpaper.
  2. Center your wallpaper.
  3. Tap Set wallpaper.

Brass is a good look on Lumiere

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

Into to Nova Settings

  1. Select Golden Icons.
  2. Return to the home screen.
  3. Long-press the app drawer icon until the icon menu appears.

Golden Icons

  1. Tap Edit.
  2. Tap the icon box to edit it.
  3. Select Golden Icons.

Golden app drawers

  1. Scroll down to N for NFL.
  2. Select New Orleans' Fleur-de-lis
  3. Tap Done to confirm the icon change.

Fleur de lid FTW

  1. Open Nova Settings.
  2. Tap Folders
  3. Under Window, tap Background.

Back to Nova Settings

  1. Tap Black (first row, fourth column).
  2. Tap the back arrow in the top left corner to return to the main Nova Settings menu.
  3. Tap Dock.

Darkness helps Golden Icons shine

  1. Tap Dock Background.
  2. Under Shape, tap Rectangle.
  3. Under Content, tap Color.

Dock backgrounds are for more than Pixels.

  1. Tap Black (first row, fourth column).
  2. Under Transparency, drag the slider to 60%.
  3. If your phone uses on-screen buttons, tap Draw behind navigation bar.

Getting the dock nice and dark

  1. Tap the back arrow in the top left corner twice to return to the main Nova Settings menu.
  2. Tap Desktop.
  3. Under Page indicator, tap Indicator color.

Page Indicator Color

  1. Tap Gold (fifth row, first column).
  2. Under Layout, tap Width padding.
  3. Tap None.

Width passing will be important in a moment

  1. Return to the home screen.
  2. Long-press the wallpaper on your home screen until a series of options appear.
  3. Tap Widgets.

Widgets time

  1. Press-and-drag a 4x2 KWGT widget to the top two rows of your home screen.
  2. Long-press the widget until a Nova menu pops up.
  3. Tap Resize.

KWGT blanks need resizing

  1. Resize the empty widget until it covers the top two rows of your screen.
  2. Long-press the widget until a Nova menu pops up.
  3. Tap Padding. This should extend the widget to the edges of your screen.

Padding to go edge-to-edge

  1. Tap the widget to configure it.
  2. Tap Exported in the top carousel of tabs.
  3. Tap Lumiere Music Widget. If you don't see it, then you haven't copied the preset at the top of these instructions to the Kustom/widgets folder.

Lumiere Music Widget preset

  1. Save the widget using the floppy disk icon in the top left bar of the Kustom editor.
  2. Tap the Layer tab.
  3. Adjust the Scale until the music komponent reaches to the left and right edges of the box.

Scale things up

  1. Save the widget using the floppy disk icon in the top left bar of the Kustom editor again. (Yes, again!)
  2. Return to the home screen.

Voila!

Cogsworth

If it's not Baroque, don't fix it.

Our favorite mantle clock has a short fuse, a meek disposition, and some of the best comedic lines in the film. He's a clock on a schedule and someone who demands to be in the know at all times. While he may not be as musical as Lumiere, I've not doubt he'd keep a music widget on his home screen so that he could strike up some Bach or Mozart to keep him mellow as he puts up with the insanity of the household.

  1. Open Hypno Clock.
  2. Tap Set live wallpaper.
  3. Tap Apply.

Open and set Hypno Clock

  1. Tap Layout, zoom, and scrolling.
  2. Using the Original layout, adjust the scale to put the gears as large or as small on the screen as you like. I've tried to put the center of the bottom-most gear as close to the center my app drawer button.
  3. Press the back button to return to the main menu.

Zoom in

  1. Tap Special Effects.
  2. Under Fluid movement, tap Slow.
  3. Tap Ghostly Gears.

Ghostly Gears give a better look to the theme

  1. Press the back button to return to the main menu.
  2. Tap Paint your components.
  3. Tap Seconds needle to open the Select components menu.

Paint the gears

  1. Scrolls down and tap COLOR EVERYTHING.
  2. Scroll the color bar on the right side until you reach a nice goldenrod.
  3. Press the back button to return to the main menu.

Paint it gold

  1. Tap Background image.
  2. Tap Import new image.
  3. Select your downloaded wood grain image.

Bring in the wood backing

  1. Scroll down through Available background images and select to your downloaded wood grain.
  2. Tap the slider under Adjust background image darkness and drag it towards about 50%.
  3. Return to home screen.

Wallpaper finally set

  1. Open Nova Settings.
  2. Tap Look & feel.
  3. Tap Icon theme.

Into Nova Settings

  1. Tap Golden Icons.
  2. Return to the home screen.
  3. Long-press the app drawer icon until a Nova menu pops up.

Time for a new app drawer icon

  1. Tap Edit.
  2. Tap the icon box to edit the icon.
  3. Select Golden Icons.

Golden Icons are class

  1. Scroll down to C for Cogsworth.
  2. Select the Clock icon that features a solid face and three watch hands, one pointing down, one pointing to 10 and one pointing to 2.
  3. Tap Done to confirm your change.

Clock for a clock

  1. Open Nova Settings.
  2. Tap Folders.
  3. Under Window, tap Background.

Back to Nova Settings

  1. Tap Custom (fifth row, fourth column)
  2. Change color to #a66e2100.
  3. Tap OK.

Wood color folders

  1. Tap the back arrow in the top left corner to return to the main Nova Settings menu.
  2. Tap Dock.
  3. Tap Dock Background.

Dock backgrounds are cool

  1. Under Shape, tap Rectangle.
  2. Under Content, tap Color.
  3. Tap the most recent color to select the same shade of brown we just used (sixth row, first column).

Woody dock mimcks the trim on Cogsworth's clock

  1. Under Transparency, drag the slider to 60%.
  2. If your phone uses on-screen buttons, tap Draw behind navigation bar.
  3. Tap the back arrow in the top left corner twice to return to the main Nova Settings menu.

Make sure the dock isn't too dark or too light.

  1. Tap Desktop.
  2. Under Page Indicator, tap Indicator color.
  3. Tap Gold (fifth row, first column).

Page indicator color

  1. Under Layout, tap Width padding.
  2. Tap None.
  3. Return to the home screen.

Width padding is important for edge-to-edge-widgets

  1. Long-press the wallpaper on your home screen until a series of options appear.
  2. Tap Widgets.
  3. Press-and-drag a 4x2 KWGT widget to the top two rows of your home screen.

KWGT time!

  1. Long-press the widget until a Nova menu pops up.
  2. Tap Resize.
  3. Resize the empty widget until it covers the top two rows of your screen.

KWGT blanks always need a resize.

  1. Long-press the widget until a Nova menu pops up.
  2. Tap Padding. This should extend the widget to the edges of your screen.
  3. Tap the widget to configure it.

Padding for edge-to-edge music loveliness

  1. Tap Exported in the top carousel of tabs.
  2. Tap Cogsworth Music Widget. If you don't see it, then you haven't copied the preset at the top of these instructions to the Kustom/widgets folder.
  3. Save the widget using the floppy disk icon in the top left bar of the Kustom editor.

Cogsworth Music widget Preset

  1. Tap the Layer tab.
  2. Adjust the Scale until the music komponent reaches to the left and right edges of the box.

Scale things up

  1. Save the widget using the floppy disk icon in the top left bar of the Kustom editor again. (Yes, again!)
  2. Return to the home screen.

Finished! Splendid!

Ara Wagoner

Ara Wagoner was a staff writer at Android Central. She themes phones and pokes YouTube Music with a stick. When she's not writing about cases, Chromebooks, or customization, she's wandering around Walt Disney World. If you see her without headphones, RUN. You can follow her on Twitter at @arawagco.