Problems with position elements which generating from code
i will try to place it in center and give them margin (left right) from previous elements.
tried use LinearLayout, RowLayout, but all result are the same (staying center in each other).
Like a Sample
public void testImageAdd(object sender, EventArgs eventArgs)
{
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams relativeLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent);
RelativeLayout.LayoutParams relativeLayoutParams2 = new RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
relativeLayoutParams.SetMargins(30,20,30,0);
relativeLayoutParams.AddRule(LayoutRules.CenterHorizontal);
#region team1 Elements
ImageView firstTeamLogo = new ImageView(this);
firstTeamLogo.LayoutParameters = relativeLayoutParams;
TextView firstTeamText = new TextView(this);
firstTeamText.Text = "testTeam1";
firstTeamText.LayoutParameters = relativeLayoutParams;
var firstTeamLogoBitmap = ImageDownloader.GetImageBitmapFromUrl("");
firstTeamLogo.SetImageBitmap(firstTeamLogoBitmap);
#endregion
#region team2 Elements
ImageView secondTeamLogo = new ImageView(this);
secondTeamLogo.LayoutParameters = relativeLayoutParams;
TextView secondTeamText = new TextView(this);
secondTeamText.Text = "testTeam2";
secondTeamText.LayoutParameters = relativeLayoutParams;
var secondTeamLogoTeamLogoBitmap = ImageDownloader.GetImageBitmapFromUrl("");
secondTeamLogo.SetImageBitmap(secondTeamLogoTeamLogoBitmap);
#endregion
TextView versusText = new TextView(this);
versusText.Text = "vs";
versusText.LayoutParameters = relativeLayoutParams;
relativeLayout.AddView(firstTeamLogo);
relativeLayout.AddView(firstTeamText);
relativeLayout.AddView(versusText);
relativeLayout.AddView(secondTeamText);
relativeLayout.AddView(secondTeamLogo);
SetContentView(relativeLayout, relativeLayoutParams2);
What did i do wrong? And i think i'm calling the drawing of elements incorrectly (is there a bit of code duplication?).
Replace RelativeLayout with LinearLayout , your code works fine on my side .
Update
You can add relativeLayout.SetGravity(GravityFlags.CenterVertical); to make the elements center in vertical , but another problem would happen ,all the elements would be placed to the center of the screen(vertically).
To solve the problem we should add another LinearLayout as root layout.
Refer to the following code
LinearLayout relativeLayout = new LinearLayout(this);
relativeLayout.SetGravity(GravityFlags.CenterVertical);
relativeLayout.LayoutParameters = new LinearLayout.LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent);
LinearLayout.LayoutParams relativeLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent);
relativeLayoutParams.SetMargins(10, 20, 30, 10);
#region team1 Elements
ImageView firstTeamLogo = new ImageView(this);
firstTeamLogo.LayoutParameters = relativeLayoutParams;
TextView firstTeamText = new TextView(this);
firstTeamText.Text = "testTeam1";
firstTeamText.LayoutParameters = relativeLayoutParams;
//var firstTeamLogoBitmap = ImageDownloader.GetImageBitmapFromUrl("");
//firstTeamLogo.SetImageBitmap(firstTeamLogoBitmap);
firstTeamLogo.SetBackgroundResource(Resource.Drawable.myIcon);
#endregion
#region team2 Elements
ImageView secondTeamLogo = new ImageView(this);
secondTeamLogo.LayoutParameters = relativeLayoutParams;
TextView secondTeamText = new TextView(this);
secondTeamText.Text = "testTeam2";
secondTeamText.LayoutParameters = relativeLayoutParams;
//var secondTeamLogoTeamLogoBitmap = ImageDownloader.GetImageBitmapFromUrl("");
//secondTeamLogo.SetImageBitmap(secondTeamLogoTeamLogoBitmap);
secondTeamLogo.SetBackgroundResource(Resource.Drawable.a);
#endregion
TextView versusText = new TextView(this);
versusText.Text = "vs";
versusText.LayoutParameters = relativeLayoutParams;
relativeLayout.AddView(firstTeamLogo);
relativeLayout.AddView(firstTeamText);
relativeLayout.AddView(versusText);
relativeLayout.AddView(secondTeamText);
relativeLayout.AddView(secondTeamLogo);
LinearLayout parent = new LinearLayout(this);
parent.SetGravity(GravityFlags.Top);
parent.AddView(relativeLayout);
SetContentView(parent, new LinearLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent));
Related
I'm using a TextFlow and some Text items to show a styled text, but i cant find a way to set a simple background color for the Text items.
I can set the fill color and font but it does not have a java method or css property that sets its background color.
Based on this solution, this is a quick implementation of a method to provide background coloring for all the Text nodes within a FlowPane, using CSS and the ability to set a series of paint values separated by commas (as much as Text items) and insets for each one of them:
private FlowPane flow;
private Scene scene;
#Override
public void start(Stage primaryStage) {
Text text0 = new Text("These are several ");
Text text1 = new Text("Text Nodes ");
Text text2 = new Text("wrapped in ");
Text text3 = new Text("a FlowPane");
text0.setFill(Color.WHEAT);
text0.setFont(new Font("Times New Roman", 20));
text1.setFill(Color.WHITE);
text1.setFont(new Font("Verdana", 32));
text2.setFill(Color.WHITESMOKE);
text2.setFont(new Font("Arial", 24));
text3.setFill(Color.WHITESMOKE);
text3.setFont(new Font("Arial", 18));
flow = new FlowPane(text0, text1, text2, text3);
scene = new Scene(flow, 300, 200);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
setBackgroundColors();
flow.needsLayoutProperty().addListener((obs,d,d1)->setBackgroundColors());
}
private void setBackgroundColors(){
final Bounds out = flow.getBoundsInLocal();
final StringBuilder sbColors = new StringBuilder();
final StringBuilder sbInsets = new StringBuilder();
AtomicInteger cont = new AtomicInteger();
flow.getChildrenUnmodifiable().forEach(n->{
sbColors.append("hsb(")
.append((((double)cont.get())/((double)flow.getChildren().size()))*360d)
.append(", 60%, 90%)");
Bounds b = ((Text)n).getBoundsInParent();
sbInsets.append(b.getMinY()).append(" ");
sbInsets.append(Math.min(scene.getWidth(),out.getMaxX())-b.getMaxX()).append(" ");
sbInsets.append(Math.min(scene.getHeight(),out.getMaxY())-b.getMaxY()).append(" ");
sbInsets.append(b.getMinX());
if(cont.getAndIncrement()<flow.getChildren().size()-1){
sbColors.append(", ");
sbInsets.append(", ");
}
});
flow.setStyle("-fx-background-color: "+sbColors.toString()+"; -fx-background-insets: "+sbInsets.toString()+";");
}
This will lead to this:
and after resizing the scene:
EDIT
Based on the OP request of using a TextFlow layout instead of a FlowPane, since Text nodes can be spanned over several lines within a TextFlow, the given solution will no longer be valid, as the bounding box of each text node will overlap others.
As a workaround, we can split the Text nodes in single word Text nodes, while keeping the same background color for those in the same original phrase.
I won't go into the splitting logic, but I will add a list of indices, where each index maps the text node with its index of background color.
private FlowPane flow;
private Scene scene;
private final List<Integer> indices=Arrays.asList(0,0,0,1,1,2,2,3,3);
#Override
public void start(Stage primaryStage) {
List<Text> text0 = Arrays.asList(new Text("These "), new Text("are "), new Text("several "));
List<Text> text1 = Arrays.asList(new Text("Text "), new Text("Nodes "));
List<Text> text2 = Arrays.asList(new Text("wrapped "), new Text("in "));
List<Text> text3 = Arrays.asList(new Text("a "), new Text("FlowPane"));
text0.forEach(t->t.setFill(Color.WHEAT));
text0.forEach(t->t.setFont(new Font("Times New Roman", 20)));
text1.forEach(t->t.setFill(Color.WHITE));
text1.forEach(t->t.setFont(new Font("Verdana", 32)));
text2.forEach(t->t.setFill(Color.WHITESMOKE));
text2.forEach(t->t.setFont(new Font("Arial", 24)));
text3.forEach(t->t.setFill(Color.WHITESMOKE));
text3.forEach(t->t.setFont(new Font("Arial", 18)));
flow = new FlowPane();
flow.getChildren().addAll(text0);
flow.getChildren().addAll(text1);
flow.getChildren().addAll(text2);
flow.getChildren().addAll(text3);
scene = new Scene(flow, 300, 200);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
setBackgroundColors();
flow.needsLayoutProperty().addListener((obs,d,d1)->setBackgroundColors());
}
private void setBackgroundColors(){
final Bounds out = flow.getBoundsInLocal();
final StringBuilder sbColors = new StringBuilder();
final StringBuilder sbInsets = new StringBuilder();
AtomicInteger cont = new AtomicInteger();
flow.getChildrenUnmodifiable().forEach(n->{
sbColors.append("hsb(")
.append((double)indices.get(cont.get())/(double)(indices.get(flow.getChildren().size()-1)+1)*360d)
.append(", 60%, 90%)");
Bounds b = ((Text)n).getBoundsInParent();
sbInsets.append(b.getMinY()).append(" ");
sbInsets.append(Math.min(scene.getWidth(),out.getMaxX())-b.getMaxX()-1).append(" ");
sbInsets.append(Math.min(scene.getHeight(),out.getMaxY())-b.getMaxY()).append(" ");
sbInsets.append(b.getMinX());
if(cont.getAndIncrement()<flow.getChildren().size()-1){
sbColors.append(", ");
sbInsets.append(", ");
}
});
flow.setStyle("-fx-background-color: "+sbColors.toString()+"; -fx-background-insets: "+sbInsets.toString()+";");
}
This FlowPane now behaves as a TextFlow:
There is no background for Text objects. You'd either have to group it with a shape (rectangle, ellipse, etc) and set the color of that shape, or you could put the objects inside a StackPane and set the background color of the StackPane.
I am developing an application in which i am showing a image followed by text followed by image again horizontally in table layout.
I am creating the table layout programmatically as:
for(i = 0; i < arrayList.size(); i++){
/* Find Tablelayout defined in main.xml */
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
tableLayout.setStretchAllColumns(true);
/* Create a new row to be added. */
TableRow tableRow = new TableRow(this);
tableRow.setId(i);
tableRow.setClickable(true);
tableRow.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
v.setBackgroundColor(Color.GRAY);
}
});
tableRow.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.MATCH_PARENT));
/* Create a Button to be the row-content. */
ImageView imageView1 = new ImageView(this);
if(arrayList.get(i).getImage().equalsIgnoreCase("Y")){
// setImage
}
imageView1.setPadding(5, 5, 5, 5);
imageView1.setLayoutParams(new TableRow.LayoutParams(100, 100));
tableRow.addView(imageView1);
TextView textViewName = new TextView(this);
textViewName.setText(arrayList.get(i).getName());
textViewName.setPadding(5, 5, 5, 5);
textViewName.setGravity(Gravity.CENTER_VERTICAL);
textViewName.setTextSize(15);
textViewName.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT,7));
tableRow.addView(textViewName);
ImageView imageView2 = new ImageView(this);
imageView2.setImageDrawable(getResources().getDrawable(R.drawable.icon));
imageView2.setPadding(25, 25, 25, 25);
imageView2.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT,1));
tableRow.addView(imageView2);
tableLayout.addView(tableRow, new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT));
View horizontalLine = new View(this);
horizontalLine.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 1));
horizontalLine.setBackgroundColor(Color.rgb(50, 50, 50));
tableLayout.addView(horizontalLine);
}
With the help of this i am getting the out put as image 1.
But i need the out put as image 2.
The difference between image 1 and 2 is the red line. I am getting the line with the help of drawing view but that covers whole width. I need a line which is as same as red in image 2. In center and of fix width.
Please suggest me what changes or steps i follow. Need your valuable suggestion.
You can set the color using setBackgroundColor method.
horizontalLine.setBackgroundColor(Color.RED);
Edit :
You can horizontal line of fixed length and in center.
Add the TableRow
Define layout weight for View
Add the View in TableRow
Add the tableRow in Table layout
View horizontalLine = new View(this);
// Set weight
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 10,0.7f);
horizontalLine.setLayoutParams(params);
TableRow tr = new TableRow(this);
TableLayout.LayoutParams tableRowParams= new TableLayout.LayoutParams
(TableLayout.LayoutParams.MATCH_PARENT,TableLayout.LayoutParams.WRAP_CONTENT);
// Set margin
int leftMargin=20;
int topMargin=2;
int rightMargin=20;
int bottomMargin=2;
tableRowParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
tr.setLayoutParams(tableRowParams);
// Add View in tr
tr.addView(horizontalLine);
//Add tr in Table
tableLayout.addView(tr);
You can see the output :
Hope it helps ツ
I have a TextField in my JavaFX application. I want to programmatically display a message on the right side of the text (like the validation message). I thought of using Popup and setting the Label with message in that Popup. But I'm not sure how I can position this to the right side of the text field. Below is the sample code for this. Can you please help me with this?
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Label label=new Label();
label.setText("This is an error message");
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
final Popup popup = new Popup();
popup.getContent().add(label);
//Want to display this popup to the right of the userTextField.
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
After showing the stage, do
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScreen(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField, popupLocation.getX(), popupLocation.getY());
The localToScreen(...) method was introduced in Java 8; if you are in an earlier version you will need
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScene(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField,
popupLocation.getX()+scene.getX()+primaryStage.getX(),
popupLocation.getY()+scene.getY()+primaryStage.getY());
I am novice and trying to create programmatically:
But my program shows the following for now:
My code is here:
RelativeLayout layout = new RelativeLayout(this);
layout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
layout.setBackgroundColor(0xFFFFFFDD);
TextView tView = new TextView(this);
tView.setText("TITLE");
tView.setTextSize(TypedValue.COMPLEX_UNIT_DIP,34);
tView.setBackgroundColor(0xFFEEEE66);
tView.setGravity(Gravity.CENTER);
tView.setId(100);
layout.addView(tView);
View line = new View(this);
line.setId(150);
line.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,5 ));
line.setBackgroundColor(0xFF00FF00);
RelativeLayout.LayoutParams layoutParams150 = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams150.addRule(RelativeLayout.BELOW,100);
layout.addView(line,layoutParams150);
TextView tView2 = new TextView(this);
tView2.setId(200);
tView2.setGravity(Gravity.LEFT);
tView2.setText("NAME1");
tView2.setTextSize(TypedValue.COMPLEX_UNIT_DIP,34);
RelativeLayout.LayoutParams layoutParams200 = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams200.addRule(RelativeLayout.BELOW,150);
layout.addView(tView2,layoutParams200);
I don't understand why "tView.setGravity(Gravity.CENTER);" does not work.
I don't understand why I can't draw the line.
BTW what is the best way to create such screen programmatically?
Thanks.
layout1 is composed of status bar at the top and toolbar at the bottom of screen. And it is defined in xml.
I want to place layout2 between layout1's status bar and toolbar programmatically.
setContentView(R.layout.layout1);
layout2 = new MyLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.leftMargin = 0;
params.addRule(RelativeLayout.BELOW, R.id.statusbar); // this does not work.
addContentView(layout2, params);
This code puts layout2 at the top of screen so it hides layout1's status bar. How can I place layout2 at the location I want?
Is there other way not using addContentView?
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.gravity = Gravity.CENTER;
I tried this work.
Set gravity in linear layout programmatically.
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.gravity = Gravity.CENTER;