Building Youtube UI in 20 min || java || javafx

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTextField?>
<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="670.0" prefWidth="1300.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="youtube.FXMLDocumentController">
   <children>
      <VBox prefHeight="670.0" prefWidth="93.0" style="-fx-background-color: #ffff;">
         <children>
            <JFXButton contentDisplay="GRAPHIC_ONLY" prefHeight="62.0" prefWidth="93.0">
               <graphic>
                  <ImageView fitHeight="58.0" fitWidth="61.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/menu.PNG" />
                     </image>
                  </ImageView>
               </graphic>
               <VBox.margin>
                  <Insets bottom="70.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton contentDisplay="TOP" onAction="#btn_home" prefHeight="63.0" prefWidth="93.0" text="Home" textFill="#656261">
               <graphic>
                  <ImageView fitHeight="63.0" fitWidth="59.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/home.PNG" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
            <JFXButton contentDisplay="TOP" layoutX="10.0" layoutY="70.0" prefHeight="69.0" prefWidth="93.0" text="Trending" textFill="#656261">
               <graphic>
                  <ImageView fitHeight="63.0" fitWidth="59.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/trending.PNG" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
            <JFXButton contentDisplay="TOP" layoutX="10.0" layoutY="158.0" prefHeight="74.0" prefWidth="93.0" text="Subscriptions" textFill="#656261">
               <graphic>
                  <ImageView fitHeight="63.0" fitWidth="59.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/subscription.PNG" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
            <JFXButton contentDisplay="TOP" layoutX="10.0" layoutY="246.0" prefHeight="73.0" prefWidth="98.0" text="Library" textFill="#656261">
               <graphic>
                  <ImageView fitHeight="63.0" fitWidth="59.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/ibary.PNG" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
         </children>
      </VBox>
      <Pane prefHeight="661.0" prefWidth="1212.0">
         <children>
            <HBox layoutX="-2.0" prefHeight="53.0" prefWidth="1212.0" style="-fx-background-color: #ffff;">
               <children>
                  <ImageView fitHeight="70.0" fitWidth="163.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/youtube.PNG" />
                     </image>
                     <HBox.margin>
                        <Insets right="25.0" />
                     </HBox.margin>
                  </ImageView>
                  <JFXTextField focusColor="#4c4d51" maxWidth="437.0" minWidth="394.0" prefHeight="51.0" prefWidth="437.0" promptText="Search">
                     <font>
                        <Font size="18.0" />
                     </font>
                  </JFXTextField>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" prefHeight="35.0" prefWidth="53.0">
                     <graphic>
                        <ImageView fitHeight="42.0" fitWidth="44.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/search.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                     <HBox.margin>
                        <Insets right="200.0" />
                     </HBox.margin>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="635.0" layoutY="10.0" prefHeight="35.0" prefWidth="53.0">
                     <graphic>
                        <ImageView fitHeight="56.0" fitWidth="67.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/add.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="635.0" layoutY="10.0" prefHeight="35.0" prefWidth="53.0">
                     <graphic>
                        <ImageView fitHeight="61.0" fitWidth="58.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/add1.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="695.0" layoutY="10.0" prefHeight="35.0" prefWidth="53.0">
                     <graphic>
                        <ImageView fitHeight="58.0" fitWidth="64.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/notification.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="815.0" layoutY="10.0" prefHeight="35.0" prefWidth="53.0">
                     <graphic>
                        <ImageView fitHeight="76.0" fitWidth="63.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/logo.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
               </children>
            </HBox>
            <ImageView fitHeight="145.0" fitWidth="1210.0" layoutY="69.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/cover.PNG" />
               </image>
            </ImageView>
            <HBox layoutY="186.0" prefHeight="88.0" prefWidth="1210.0">
               <children>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" prefHeight="117.0" prefWidth="123.0">
                     <graphic>
                        <ImageView fitHeight="142.0" fitWidth="110.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/logo_1.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                     <HBox.margin>
                        <Insets left="20.0" />
                     </HBox.margin>
                  </JFXButton>
                  <Label prefHeight="35.0" prefWidth="190.0" text="Material Ui Java" textFill="#4a4a47">
                     <font>
                        <Font name="System Bold" size="22.0" />
                     </font>
                     <padding>
                        <Insets top="40.0" />
                     </padding>
                     <HBox.margin>
                        <Insets right="400.0" />
                     </HBox.margin>
                  </Label>
                  <JFXButton prefHeight="43.0" prefWidth="193.0" style="-fx-background-color: #005FF5;" text="CUSTOMIZE CHANNEL" textFill="#f5f0f0">
                     <HBox.margin>
                        <Insets right="10.0" top="40.0" />
                     </HBox.margin>
                  </JFXButton>
                  <JFXButton layoutX="326.0" layoutY="10.0" prefHeight="42.0" prefWidth="183.0" style="-fx-background-color: #005FF5;" text="YOUTUBE STUDIO" textFill="#fcfcfc">
                     <HBox.margin>
                        <Insets top="40.0" />
                     </HBox.margin>
                  </JFXButton>
               </children>
            </HBox>
            <HBox layoutX="-3.0" layoutY="298.0" prefHeight="54.0" prefWidth="1210.0">
               <children>
                  <JFXButton contentDisplay="TEXT_ONLY" prefHeight="53.0" prefWidth="105.0" styleClass="btn_1" stylesheets="@style.css" text="HOME">
                     <HBox.margin>
                        <Insets left="30.0" />
                     </HBox.margin>
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="TEXT_ONLY" layoutX="35.0" layoutY="10.0" onAction="#btn_videos" prefHeight="53.0" prefWidth="105.0" stylesheets="@style.css" text="VIDEOS">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                     <styleClass>
                        <String fx:value="btn_1" />
                        <String fx:value="btn" />
                     </styleClass>
                  </JFXButton>
                  <JFXButton contentDisplay="TEXT_ONLY" layoutX="35.0" layoutY="10.0" prefHeight="53.0" prefWidth="105.0" styleClass="btn_1" stylesheets="@style.css" text="PLAYLISTS">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="TEXT_ONLY" layoutX="140.0" layoutY="10.0" prefHeight="53.0" prefWidth="105.0" styleClass="btn_1" stylesheets="@style.css" text="CHANNELS">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="TEXT_ONLY" layoutX="245.0" layoutY="10.0" prefHeight="53.0" prefWidth="105.0" styleClass="btn_1" stylesheets="@style.css" text="DISCUSSIONS">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="TEXT_ONLY" layoutX="350.0" layoutY="10.0" prefHeight="53.0" prefWidth="105.0" styleClass="btn_1" stylesheets="@style.css" text="ABOUT">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="565.0" layoutY="10.0" prefHeight="57.0" prefWidth="53.0" text="ABOUT">
                     <font>
                        <Font name="System Bold" size="13.0" />
                     </font>
                     <graphic>
                        <ImageView fitHeight="47.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/search.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
               </children>
            </HBox>
            <ImageView fitHeight="203.0" fitWidth="312.0" layoutX="58.0" layoutY="386.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/video.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="193.0" fitWidth="307.0" layoutX="345.0" layoutY="386.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/video2.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="203.0" fitWidth="312.0" layoutX="612.0" layoutY="386.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/video3.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="193.0" fitWidth="307.0" layoutX="899.0" layoutY="386.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/vid4.PNG" />
               </image>
            </ImageView>
            <Label layoutX="58.0" layoutY="599.0" prefHeight="23.0" prefWidth="257.0" text="1.5k  views         5 days ago">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
            <Label layoutX="340.0" layoutY="599.0" prefHeight="23.0" prefWidth="257.0" text="912  views     15 days ago">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
            <Label layoutX="614.0" layoutY="599.0" prefHeight="23.0" prefWidth="257.0" text="2.2k  views           20 days ago">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
            <Label layoutX="904.0" layoutY="599.0" prefHeight="23.0" prefWidth="257.0" text="3.1k  views         1 month ago">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
         </children>
      </Pane>
   </children>
</HBox>

Comments

Post a Comment

Popular posts from this blog

JavaFX UI /UX Dashboard

Image
//FXML <?xml version="1.0" encoding="UTF-8"?> <?import com.jfoenix.controls.JFXButton?> <?import com.jfoenix.controls.JFXTextField?> <?import java.lang.String?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.ProgressBar?> <?import javafx.scene.image.Image?> <?import javafx.scene.image.ImageView?> <?import javafx.scene.layout.AnchorPane?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.Pane?> <?import javafx.scene.layout.VBox?> <?import javafx.scene.text.Font?> <HBox fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="827.0" prefWidth="1320.0" styleClass="root" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui_...
Read more

JavaFX code for responsive layout

Image
  This code creates a responsive layout using a BorderPane as the root layout, with an HBox in the top region containing two buttons. The spacing between the buttons adjusts based on the width of the scene using a listener on the scene’s width property bu ttons adjusts based on the width of the scene using a listener on the scene’s width property import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class ResponsiveLayoutExample extends Application { @Override public void start(Stage primaryStage) { // Create a border pane as the root layout BorderPane root = new BorderPane(); // Create an HBox for the top of the border pane HBox topBox = new HBox(); topBox.setPadding(new Insets(10, 10, 10, 10)); topBox.setSpacing(10); // Create two...
Read more