The document describes the development of a Netflix clone using Codename One, highlighting the UI components and CSS styling used in the application. It details various forms such as the splash, home, and base forms, as well as the initialization process for UI elements like the toolbar and images. Code snippets illustrate the structure and functionality of the application, including layouts, commands, and styling elements.

1. Creating a Netflix Clone
VI

2. codenameone.com github.com/codenameone/CodenameOne
Client UI

3. codenameone.com github.com/codenameone/CodenameOne
Client UI
There are just three forms in the demo
We’re using layered toolbar for the UI
CSS is used for the UI design

4. #Constants {
includeNativeBool: true;
labelGap: 1;
}
Form {
background: black;
}
TitleCommand {
color: white;
}
ToolbarGradient {
border: none;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
padding: 2mm;
}
ThumbIcon {
background: transparent;
margin: 0px;
padding: 8mm;
padding-right: 3mm;
}
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

5. public class BaseForm extends Form {
public BaseForm(Layout l) {
super(l);
}
@Override
protected void initGlobalToolbar() {
Toolbar tb = new Toolbar(true);
setToolbar(tb);
tb.setUIID("ToolbarGradient");
}
}
Source Listing - BaseForm
codenameone.com github.com/codenameone/CodenameOne

6. Form {
background: black;
}
TitleCommand {
color: white;
}
ToolbarGradient {
border: none;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
padding: 2mm;
}
ThumbIcon {
background: transparent;
margin: 0px;
padding: 8mm;
padding-right: 3mm;
}
HeroImageLogo {
/* margin: 35% 22% 5mm 22%; */
margin: 35mm 7mm 5mm 7mm;
padding: 3.5mm;
background: transparent;
}
HeroImagePlayButton {
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

7. public class SplashForm extends Form {
private SplashForm() {
super(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER));
}
private void init() {
Resources r = Resources.getGlobalResources();
add(CENTER, new Label(r.getImage("netflix-logo.png")));
}
public static SplashForm create() {
SplashForm h = new SplashForm();
h.init();
return h;
}
}
Source Listing - SplashForm
codenameone.com github.com/codenameone/CodenameOne

8. border: none;
background-color: black;
padding: 1.5mm 0.5mm 1.5mm 0.5mm;
margin: 0px;
}
/* =============== IMAGES ============= */
ImageImports1 {
background-image: url(images/data/show-logo.png),
url(images/data/hero-background.jpg),
url(images/data/thumb1.jpg),
url(images/data/thumb2.jpg),
url(images/data/thumb3.jpg),
url(images/data/thumb4.jpg),
url(images/data/thumb5.jpg),
url(images/data/thumb6.jpg),
url(images/data/thumb7.jpg),
url(images/data/thumb8.jpg);
cn1-source-dpi: 0;
}
ImageImports2 {
background-image: url(images/netflix-logo.png);
cn1-source-dpi: 320;
}
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

9. border: none;
background-color: black;
padding: 1.5mm 0.5mm 1.5mm 0.5mm;
margin: 0px;
}
/* =============== IMAGES ============= */
ImageImports1 {
background-image: url(images/data/show-logo.png),
url(images/data/hero-background.jpg),
url(images/data/thumb1.jpg),
url(images/data/thumb2.jpg),
url(images/data/thumb3.jpg),
url(images/data/thumb4.jpg),
url(images/data/thumb5.jpg),
url(images/data/thumb6.jpg),
url(images/data/thumb7.jpg),
url(images/data/thumb8.jpg);
cn1-source-dpi: 0;
}
ImageImports2 {
background-image: url(images/netflix-logo.png);
cn1-source-dpi: 320;
}
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

10. border: none;
background-color: black;
padding: 1.5mm 0.5mm 1.5mm 0.5mm;
margin: 0px;
}
/* =============== IMAGES ============= */
ImageImports1 {
background-image: url(images/data/show-logo.png),
url(images/data/hero-background.jpg),
url(images/data/thumb1.jpg),
url(images/data/thumb2.jpg),
url(images/data/thumb3.jpg),
url(images/data/thumb4.jpg),
url(images/data/thumb5.jpg),
url(images/data/thumb6.jpg),
url(images/data/thumb7.jpg),
url(images/data/thumb8.jpg);
cn1-source-dpi: 0;
}
ImageImports2 {
background-image: url(images/netflix-logo.png);
cn1-source-dpi: 320;
}
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

11. public class HomeForm extends BaseForm {
private HomeForm() {
super(new BorderLayout());
}
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

12. add(CENTER, tabs);
}
private Container movieList(List<Content> lst) {
Container p = new Container(BoxLayout.x());
for(Content c : lst) {
ScaleImageButton b = new ScaleImageButton(c.icon.get());
b.setUIID("ThumbIcon");
p.add(b);
b.addActionListener(e -> {
DetailsForm.create(c).show();
});
}
p.setScrollableX(true);
return p;
}
public static HomeForm create(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
HomeForm h = new HomeForm();
h.init(lead, popularTitles, myTitles, recommended);
return h;
}
}
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

13. public class HomeForm extends BaseForm {
private HomeForm() {
super(new BorderLayout());
}
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

14. public class HomeForm extends BaseForm {
private HomeForm() {
super(new BorderLayout());
}
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

15. public class HomeForm extends BaseForm {
private HomeForm() {
super(new BorderLayout());
}
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

16. }
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

17. }
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

18. ToolbarGradient {
border: none;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
padding: 2mm;
}
ThumbIcon {
background: transparent;
margin: 0px;
padding: 8mm;
padding-right: 3mm;
}
HeroImageLogo {
margin: 35mm 7mm 5mm 7mm;
padding: 3.5mm;
background: transparent;
}
HeroImagePlayButton {
border: none;
border-radius: 1.5mm;
background-color: #D8D8D8;
color: black;
font-family: "native:MainRegular";
font-size: 3mm;
padding: 2mm 4mm 2mm 4mm;
}
Lead {
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

19. }
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

20. margin: 0px;
padding: 8mm;
padding-right: 3mm;
}
HeroImageLogo {
margin: 35mm 7mm 5mm 7mm;
padding: 3.5mm;
background: transparent;
}
HeroImagePlayButton {
border: none;
border-radius: 1.5mm;
background-color: #D8D8D8;
color: black;
font-family: "native:MainRegular";
font-size: 3mm;
padding: 2mm 4mm 2mm 4mm;
}
Lead {
color: white;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.01));
padding: 5mm 2mm 0.3mm 2mm;
font-family: "native:MainRegular";
font-size: 2.4mm;
}
PlayNowButton {
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

21. }
private void init(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
Resources r = Resources.getGlobalResources();
Toolbar tb = getToolbar();
((Label)tb.getTitleComponent()).setIcon(r.getImage("netflix-logo.png"));
// adding this just so the sidemenu and search icon appear
tb.addMaterialCommandToLeftSideMenu("Placeholder", MATERIAL_AIRPLANEMODE_ON, e ->{});
tb.addSearchCommand(e -> {});
ScaleImageLabel logo = new ScaleImageLabel(lead.logo.get());
logo.setUIID("HeroImageLogo");
Button play = new Button("PLAY", MATERIAL_PLAY_ARROW, "HeroImagePlayButton");
Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

22. }
HeroImagePlayButton {
border: none;
border-radius: 1.5mm;
background-color: #D8D8D8;
color: black;
font-family: "native:MainRegular";
font-size: 3mm;
padding: 2mm 4mm 2mm 4mm;
}
Lead {
color: white;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.01));
padding: 5mm 2mm 0.3mm 2mm;
font-family: "native:MainRegular";
font-size: 2.4mm;
}
PlayNowButton {
color: white;
background-color: rgba(0, 0, 0, 0.6);
border: 2px #ffffff cn1-round-border;
padding: 2mm;
font-family: "native:MainRegular";
font-size: 3.5mm;
margin: 15mm 7mm 15mm 7mm;
}
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

23. Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
movieList(myTitles),
new Label("Recommended", "Lead"),
movieList(recommended));
content.setScrollableY(true);
tabs.addTab("Home", MATERIAL_HOME, 4, content);
tabs.addTab("Search", MATERIAL_SEARCH, 4, new Label("TODO"));
tabs.addTab("Coming Soon", MATERIAL_ONDEMAND_VIDEO, 4, new Label("TODO"));
tabs.addTab("More", MATERIAL_MENU, 4, new Label("TODO"));
add(CENTER, tabs);
}
private Container movieList(List<Content> lst) {
Container p = new Container(BoxLayout.x());
for(Content c : lst) {
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

24. padding: 3mm;
margin: 0px;
}
DescriptionFormButton {
color: white;
font-family: "native:MainLight";
font-size: 3.5mm;
padding: 3mm;
margin: 0px;
}
Tab {
color: white;
font-family: "native:MainLight";
font-size: 2.1mm;
border: none;
background-color: black;
padding: 1.5mm 0.5mm 1.5mm 0.5mm;
margin: 0px;
}
/* =============== IMAGES ============= */
ImageImports1 {
background-image: url(images/data/show-logo.png),
url(images/data/hero-background.jpg),
url(images/data/thumb1.jpg),
url(images/data/thumb2.jpg),
url(images/data/thumb3.jpg),
Source Listing - CSS
codenameone.com github.com/codenameone/CodenameOne

25. Container heroTitle = BoxLayout.encloseY(logo,
FlowLayout.encloseCenter(play),
new Label("Popular on Netflix", "Lead"));
Style stl = heroTitle.getAllStyles();
stl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stl.setBgImage(lead.heroImage.get());
Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
movieList(myTitles),
new Label("Recommended", "Lead"),
movieList(recommended));
content.setScrollableY(true);
tabs.addTab("Home", MATERIAL_HOME, 4, content);
tabs.addTab("Search", MATERIAL_SEARCH, 4, new Label("TODO"));
tabs.addTab("Coming Soon", MATERIAL_ONDEMAND_VIDEO, 4, new Label("TODO"));
tabs.addTab("More", MATERIAL_MENU, 4, new Label("TODO"));
add(CENTER, tabs);
}
private Container movieList(List<Content> lst) {
Container p = new Container(BoxLayout.x());
for(Content c : lst) {
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

26. tabs.addTab("Home", MATERIAL_HOME, 4, content);
tabs.addTab("Search", MATERIAL_SEARCH, 4, new Label("TODO"));
tabs.addTab("Coming Soon", MATERIAL_ONDEMAND_VIDEO, 4, new Label("TODO"));
tabs.addTab("More", MATERIAL_MENU, 4, new Label("TODO"));
add(CENTER, tabs);
}
private Container movieList(List<Content> lst) {
Container p = new Container(BoxLayout.x());
for(Content c : lst) {
ScaleImageButton b = new ScaleImageButton(c.icon.get());
b.setUIID("ThumbIcon");
p.add(b);
b.addActionListener(e -> {
DetailsForm.create(c).show();
});
}
p.setScrollableX(true);
return p;
}
public static HomeForm create(Content lead, List<Content> popularTitles,
List<Content> myTitles,
List<Content> recommended) {
HomeForm h = new HomeForm();
h.init(lead, popularTitles, myTitles, recommended);
return h;
}
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

27. Tabs tabs = new Tabs();
tabs.setTabPlacement(BOTTOM);
Container content = BoxLayout.encloseY(heroTitle,
movieList(popularTitles),
new Label("My List", "Lead"),
movieList(myTitles),
new Label("Recommended", "Lead"),
movieList(recommended));
content.setScrollableY(true);
tabs.addTab("Home", MATERIAL_HOME, 4, content);
tabs.addTab("Search", MATERIAL_SEARCH, 4, new Label("TODO"));
tabs.addTab("Coming Soon", MATERIAL_ONDEMAND_VIDEO, 4, new Label("TODO"));
tabs.addTab("More", MATERIAL_MENU, 4, new Label("TODO"));
add(CENTER, tabs);
}
private Container movieList(List<Content> lst) {
Container p = new Container(BoxLayout.x());
for(Content c : lst) {
ScaleImageButton b = new ScaleImageButton(c.icon.get());
b.setUIID("ThumbIcon");
p.add(b);
b.addActionListener(e -> {
DetailsForm.create(c).show();
});
}
p.setScrollableX(true);
Source Listing - HomeForm
codenameone.com github.com/codenameone/CodenameOne

28. codenameone.com github.com/codenameone/CodenameOne
Thank You

29. Thank You