CODEWITHSUNDEEP
javajavafxjavafx-2javafx-8
Diluk Angelo
Diluk Angelo

Reputation: 107

Javafx resize components when fullscreen

Original size screenshot

enter image description here

Fullscreen screenshot

enter image description here

When i resize how can i nicely arrange the components. im using FXML for the GUI

FXML CODE 

    <AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="style.LoginController">
   <children>
      <Button fx:id="login" layoutX="250.0" layoutY="242.0" mnemonicParsing="false" onAction="#login" prefHeight="32.0" prefWidth="101.0" text="Login" />
      <ImageView fx:id="img2" fitHeight="32.0" fitWidth="32.0" layoutX="109.0" layoutY="184.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../../../../../Downloads/Drawing%20(23).png" />
         </image>
      </ImageView>
      <Label fx:id="title" alignment="CENTER" focusTraversable="false" layoutX="166.0" layoutY="48.0" opacity="0.83" prefHeight="42.0" prefWidth="269.0" styleClass="title" text="Label" textAlignment="CENTER" textOverrun="CENTER_ELLIPSIS">
         <font>
            <Font name="Arial Narrow" size="36.0" />
         </font>
      </Label>
      <TextField fx:id="txtusername" layoutX="159.0" layoutY="126.0" prefHeight="32.0" prefWidth="283.0" promptText="Username" styleClass="fields" />
      <PasswordField fx:id="txtpassword" layoutX="159.0" layoutY="183.0" prefHeight="32.0" prefWidth="283.0" promptText="Password" styleClass="fields" />
      <ImageView fx:id="img1" fitHeight="32.0" fitWidth="32.0" layoutX="109.0" layoutY="126.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../../../../../Downloads/Drawing%20(22).png" />
         </image>
      </ImageView>
      <ProgressIndicator fx:id="progress" layoutX="197.0" layoutY="120.0" minHeight="0.0" minWidth="0.0" prefHeight="128.0" prefWidth="188.0" progress="0.0" styleClass="progressind" />
   </children>
</AnchorPane>

Upvotes: 9

Views: 25213

Answers (2)

ItachiUchiha
ItachiUchiha

Reputation: 36722

The problem is because you are using AnchorPane as your root pane. Though, you can use AnchorPane for scenarios like this, I personally do not prefer it because you need to do a lot of things to get it right. There are easier ways to do and that is what I am gonna show you.

From the Javadocs :

AnchorPane allows the edges of child nodes to be anchored to an offset from the anchor pane's edges.

Solution

Use a different layout. May be a GridPane or VBox. These layouts have child alignment instead of anchors, which allow the children to be aligned to a particular position.

For re-sizing your children, you can set the HGrow / VGrow property on them.

Example

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" spacing="20.0" style="-fx-background-color: DARKCYAN;" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Easy Doctor" />
      <TextField promptText="Username" />
      <TextField promptText="Password" />
   </children>
   <padding>
      <Insets bottom="50.0" left="50.0" right="50.0" top="50.0" />
   </padding>
</VBox>

Here is a small gif on how it looks :

enter image description here

Upvotes: 13

Vishnu Katpure
Vishnu Katpure

Reputation: 395

Please add

AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"

to your image ,button , lable etc components speciefic size means when screen resize depend on that it will adjust its like Margin in css.

Or

you can add css to align this component as per screen size like

Scene scene = new Scene(root);
scene.getStylesheets().add(locator.locateAsURL("Css/StudentApp.css").toExternalForm());
scene.getStylesheets().add(("CSS/studentapp.css"));

Upvotes: 1

Related Questions