Designing Dashboard UI Using JavaFx | Dribble_Profile_Main

//FXMLDocuments.fxml

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

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTextField?>
<?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.text.Font?>

<HBox fx:id="root" alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="670.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="dribble_profile_main.FXMLDocumentController">
   <children>
      <Pane prefHeight="670.0" prefWidth="1146.0" style="-fx-background-color: #ffffff;">
         <children>
            <HBox layoutX="-2.0" prefHeight="670.0" prefWidth="285.0">
               <children>
                  <Pane prefHeight="670.0" prefWidth="293.0" style="-fx-background-color: #ffffff;">
                     <children>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="14.0" prefHeight="52.0" prefWidth="52.0">
                           <graphic>
                              <ImageView fitHeight="49.0" fitWidth="39.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../images/arrow.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                        <ImageView fitHeight="98.0" fitWidth="111.0" layoutX="92.0" layoutY="64.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/IMG_2796.JPG" />
                           </image>
                        </ImageView>
                        <Label layoutX="79.0" layoutY="168.0" prefHeight="25.0" prefWidth="123.0" text="WajiD HuCeYN">
                           <font>
                              <Font name="System Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="93.0" layoutY="187.0" prefHeight="25.0" prefWidth="94.0" text="\@Material_UI" textFill="#ff2615">
                           <font>
                              <Font size="13.0" />
                           </font>
                        </Label>
                        <JFXButton layoutX="55.0" layoutY="221.0" prefHeight="39.0" prefWidth="174.0" styleClass="btn" stylesheets="@style.css" text="Follow" textFill="WHITE">
                           <font>
                              <Font name="System Bold" size="14.0" />
                           </font>
                        </JFXButton>
                        <Label layoutX="31.0" layoutY="298.0" text="98" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="8.0" layoutY="323.0" prefHeight="25.0" prefWidth="123.0" text="Followers">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="117.0" layoutY="296.0" text="178" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="98.0" layoutY="321.0" prefHeight="25.0" prefWidth="75.0" text="Following">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="215.0" layoutY="296.0" text="35" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="207.0" layoutY="321.0" prefHeight="25.0" prefWidth="41.0" text="Posts">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="14.0" layoutY="368.0" text="1200" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="17.0" layoutY="396.0" prefHeight="25.0" prefWidth="41.0" text="Likes">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="124.0" layoutY="369.0" text="77" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="94.0" layoutY="394.0" prefHeight="25.0" prefWidth="86.0" text="Bookmarks">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="212.0" layoutY="369.0" text="168" textFill="#ff2615">
                           <font>
                              <Font name="System Bold" size="18.0" />
                           </font>
                        </Label>
                        <Label layoutX="207.0" layoutY="394.0" prefHeight="25.0" prefWidth="75.0" text="Media">
                           <font>
                              <Font name="Candara Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="104.0" layoutY="453.0" prefHeight="25.0" prefWidth="58.0" text="About">
                           <font>
                              <Font name="System Bold" size="16.0" />
                           </font>
                        </Label>
                        <Label layoutX="34.0" layoutY="472.0" prefHeight="60.0" prefWidth="204.0" text="Passionate about Ui Design | Brand&#10;      Identity Design | illustration">
                           <font>
                              <Font size="13.0" />
                           </font>
                        </Label>
                        <Label layoutX="115.0" layoutY="539.0" prefHeight="25.0" prefWidth="65.0" text="Social">
                           <font>
                              <Font name="System Bold" size="16.0" />
                           </font>
                        </Label>
                        <ImageView fitHeight="71.0" fitWidth="259.0" layoutX="13.0" layoutY="563.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/social.PNG" />
                           </image>
                        </ImageView>
                     </children>
                  </Pane>
               </children>
            </HBox>
            <Label layoutX="340.0" layoutY="55.0" prefHeight="30.0" prefWidth="65.0" text="Posts" textFill="#6b6a6a">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <Label layoutX="417.0" layoutY="55.0" prefHeight="30.0" prefWidth="86.0" text="Photos" textFill="#6b6a6a">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <Label layoutX="507.0" layoutY="55.0" prefHeight="30.0" prefWidth="86.0" text="Videos" textFill="#6b6a6a">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <JFXTextField focusColor="#313132" layoutX="768.0" layoutY="51.0" maxWidth="259.0" minWidth="190.0" prefHeight="39.0" prefWidth="204.0" />
            <ImageView fitHeight="52.0" fitWidth="285.0" layoutX="738.0" layoutY="55.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/seaech%20all.PNG" />
               </image>
            </ImageView>
            <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="1017.0" layoutY="49.0" prefHeight="52.0" prefWidth="52.0">
               <graphic>
                  <ImageView fitHeight="53.0" fitWidth="47.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/dash.PNG" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
            <ImageView fitHeight="225.0" fitWidth="324.0" layoutX="340.0" layoutY="129.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/1a.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="225.0" fitWidth="343.0" layoutX="724.0" layoutY="129.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/2a.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="225.0" fitWidth="324.0" layoutX="353.0" layoutY="381.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/3a.PNG" />
               </image>
            </ImageView>
            <ImageView fitHeight="225.0" fitWidth="343.0" layoutX="737.0" layoutY="381.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/4a.PNG" />
               </image>
            </ImageView>
         </children>
      </Pane>
      <HBox prefHeight="670.0" prefWidth="55.0" styleClass="hbox_1" stylesheets="@style.css">
         <children>
            <Pane prefHeight="670.0" prefWidth="61.0">
               <children>
                  <ImageView fitHeight="46.0" fitWidth="38.0" layoutX="9.0" layoutY="17.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/u.PNG" />
                     </image>
                  </ImageView>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutY="207.0" prefHeight="52.0" prefWidth="52.0">
                     <graphic>
                        <ImageView fitHeight="49.0" fitWidth="39.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/home.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="-1.0" layoutY="264.0" prefHeight="52.0" prefWidth="38.0" style="-fx-background-color: #ffffff;">
                     <graphic>
                        <ImageView fitHeight="40.0" fitWidth="42.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/clock.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="2.0" layoutY="319.0" prefHeight="52.0" prefWidth="52.0">
                     <graphic>
                        <ImageView fitHeight="49.0" fitWidth="39.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/notification.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <ImageView fitHeight="49.0" fitWidth="39.0" layoutX="10.0" layoutY="373.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/bage.PNG" />
                     </image>
                  </ImageView>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="1.0" layoutY="552.0" prefHeight="52.0" prefWidth="52.0">
                     <graphic>
                        <ImageView fitHeight="49.0" fitWidth="39.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/girl.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <ImageView fitHeight="49.0" fitWidth="39.0" layoutX="9.0" layoutY="615.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../images/setting.PNG" />
                     </image>
                  </ImageView>
               </children>
            </Pane>
         </children>
      </HBox>
   </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