This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

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