B4J Question Listview - one color not two color

ivanomonti

Well-Known Member
Licensed User
Longtime User
How can I color a listview of a single color, thank
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
You need to create a css file and add this:
B4X:
.list-cell {
  -fx-skin: "com.sun.javafx.scene.control.skin.ListCellSkin";
  -fx-background-color: -fx-control-inner-background;
  -fx-padding: 0.25em; /* 3 */
  -fx-text-fill: -fx-text-inner-color;
  -fx-opacity: 1;
}
.list-cell:odd {
  -fx-background-color: -fx-control-inner-background;
}
.list-view:focused .list-cell:focused {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  -fx-background-insets: 0, 1, 2;
}
.list-view:focused .list-cell:focused:odd {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  -fx-background-insets: 0, 1, 2;
}
/* When the list-cell is selected and focused */
.list-view:focused .list-cell:filled:focused:selected {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  -fx-background-insets: 0, 1, 2;
  -fx-background: -fx-accent;
  -fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover {
  -fx-background: -fx-accent;
  -fx-background-color: -fx-selection-bar;
  -fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused .list-cell:filled:focused:selected:hover {
  -fx-background: -fx-accent;
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: -fx-selection-bar-text;
}
/* When the ListView is _not_ focused, we show alternate selection colors */
.list-cell:filled:selected:focused, .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected {
  -fx-background-color: lightgray;
  -fx-text-fill: -fx-selection-bar-text;
}
.list-cell:filled:selected:focused:disabled, .list-cell:filled:selected:disabled {
  -fx-opacity: -fx-disabled-opacity;
}
.list-cell:filled:hover {
  -fx-background-color: -fx-cell-hover-color;
  -fx-text-fill: -fx-text-inner-color;
}
.list-view:focused .list-cell:filled:focused:hover {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
  -fx-background-insets: 0, 1, 2;
  -fx-text-fill: -fx-text-inner-color;
}
.list-view:horizontal .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected:hover {
  -fx-background-color: linear-gradient(to right, derive(-fx-accent,-7%), derive(-fx-accent,-25%));
}

It disables the odd color.
Add the file to the Files tab and add it in the main pane styles:
SS-2014-11-07_13.35.51.png


You can see an example here: http://www.basic4ppc.com/android/forum/threads/css-example.35854/#content
 
Upvote 0
Top