I need to create a graph that is similar to a Baccarat trend like this
What could be the best approach? I am thinking of using RecyclerView with GridLayout but I have no idea how to plot it this way. Any library that support this kind of graph?
Try creating your own android View that can take some data and draw it
An example of your draw method could be
public void draw(Canvas canvas){
//draw grid
int spacing = 10; //costant cell size
//use (height/rows) and (width/cols) as spacing to have costant cols and rows instead
for(int y = 0; y<height; y+=spacing){
canvas.drawLine(0,y,width,y,paint);
}
for(int x = 0; x<width; x+=spacing){
canvas.drawLine(x, 0, x,height,paint);
}
//draw your data
}
Related
I'm new to android studio and I'm learning a lot right now. But I'm stuck now, I want to create something like a container for a 16x7 boardgame with individual fields. I think theres better ways to do this and I'm trying around since 2 hours, with no success. Right now I'm using a Grid View to display my String[] with an array adapter to a simple selectable list item, but it doesn't scale right and I need to scroll down to see all of the fields, which is bad for a videogame.
Tl,dr: I'd like to display an array of 112 elements like a boardgame, what container can I use to create those individual fields, maybe even set the amounts of rows(7) and columns(16), and display it simple like an actual boardgame?
I would render bitmap tiles to the Canvas. Below code is just an outline:
// You will set this frameBuffer to an ImageView in the app's main screen.
// You should set the ImageView's ScaleType properly.
Bitmap frameBuffer = Bitmap.createBitmap(
TILE_SIZE * 16, TILE_SIZE * 7, Bitmap.Config.ARGB_8888
);
Canvas canvas = new Canvas(frameBuffer);
Paint paint = new Paint();
for (int y = 0; y < 7; y++) {
for (int x = 0; x < 16; x++) {
// You are supposed to define bitmapTiles.get() method elsewhere.
canvas.drawBitmap(
bitmapTiles.get(x, y), TILE_SIZE * x, TILE_SIZE * y, paint
);
}
}
I have been using Graphview for some time and mostly LineGraph and PointGraph, link to GraphView can be found here: Link to GraphView.
But now I need a LineGraph that would fill the whole 0-100 and 100-200 when needed. For example when the point is 70, it would fill the whole 0-100 space, which would look something like this.
Another requirement is that is still needs to be like a LineGraph since it needs to be able to move to the right.
Does anyone have an idea how this could be done using GraphView or if it can be done at all with GraphView.
Or maybe if I set the point to be 50 and line thickness so it would cover exactly +/- 50 then it would also be the same but the problem here is that the line thickness is different on every screen.
You can use a custom shape for the PointGraphSeries to get the effect that you like. In the following code I am creating a custom rectangle. This can give you some ideas on what to do:
int mX = 0;
private void addPoints(double point, PointsGraphSeries<DataPoint> series) {
point = Math.floor(point / 100) * 100;
DataPoint dataPoint = new DataPoint(mX++, point);
series.appendData(dataPoint, false, 100);
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GraphView graph = findViewById(R.id.graph);
// Set manual X bounds
graph.getViewport().setXAxisBoundsManual(true);
graph.getViewport().setMinX(0);
graph.getViewport().setMaxX(10);
// Set manual Y bounds
graph.getViewport().setYAxisBoundsManual(true);
graph.getViewport().setMinY(0);
graph.getViewport().setMaxY(1000);
// Set up the number of division for horizontal and vertical units
graph.getGridLabelRenderer().setNumHorizontalLabels(11);
graph.getGridLabelRenderer().setNumVerticalLabels(11);
PointsGraphSeries<DataPoint> series = new PointsGraphSeries<>();
series.setCustomShape(new PointsGraphSeries.CustomShape() {
#Override
public void draw(Canvas canvas,
Paint paint,
float x,
float y,
DataPointInterface dataPoint) {
canvas.drawRect(x, y - 100, x + 175, y, paint);
}
});
int[] points = {450, 512, 323, 240, 70, 790};
for (int i = 0; i < points.length; i++) {
addPoints(points[i], series);
}
graph.addSeries(series);
}
This will give you the following picture based on the provided points:
I'm in need of assistance with the program that I'm writing.
The code basically list of words from an array, chops it into specific Strings at certain indexes, then into Chars and displaying it into the canvas.
Then, the chars animates while sliding down the canvas.
But, whenever it animates slowly, the characters are on top of each other, and whenever it animates fast, the characters are separated.
How do I get the chars to be separated equally WHILE animating slowly?
One solution I came up with was to find a way to edit the frame rate, but I don't know how to do it :(.
public sketchUp(Context context) {
super(context);
}
String arr [] = {"love","happiness"};
protected void onDraw (Canvas canvas){
super.onDraw(canvas);
Rect disRect = new Rect();
disRect.set(0,0, canvas.getWidth(), canvas.getHeight()/2);
Paint col = new Paint();
Paint txt = new Paint();
txt.setTextSize(20);
txt.setColor(Color.BLACK);
col.setColor(Color.GREEN);
col.setStyle(Paint.Style.FILL);
canvas.drawRect(disRect, col);
if(y<canvas.getHeight()/2){
y+=1;
}
else{
y=0;
}
// if(x<canvas.getWidth()){
// x+=10;
// }
// else{
// x=0;
// }
for(int i=0; i<arr.length; i++){
for(int j=0; j<arr[i].length(); j++){
char result = arr[i].charAt(j);
// System.out.println(result);
canvas.drawText(String.valueOf(result), x, y+=0.5, txt);
//
}
}
invalidate();
}
Think of it this way:
That y+=0.5 sets the separation of the characters. It is the only thing that makes each character's position different. If it was just y, the characters would be on top of each other.
Why it affects animation speed
Each y+=0.5 changes y. So after drawing the characters y is lower than it was before.
How to fix this
First, you have to decide what y is supposed to be. You should rename it, so you remember what it is. For example it could become firstCharacterY.
Obviously, the first characters y should not change when drawing the characters, but should change each frame. To fix the drawing part, you can either set y = firstCharacterY - 0.5 before the loop or calculate y from i and j each iteration.
XML is not the factor in this case. I'm overriding the canvas with the onDraw function and providing the entire screen as a canvas.
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLACK);
int gemID=0;
for(int c=0;c<5;c++){
for(int r=0;r<5;r++){
gemID= GemField[c][r];
canvas.drawBitmap(bmps.get(gemID),c,r,null);
}
}
Upon creating the canvas to draw on I create the matrix, and then I fill the matrix as seen in the following bits of code.
private void createGemField() {
Random rnd= new Random();
for(int col=0;col<5;col++){
for(int row=0;row<5;row++){
int gemNum = rnd.nextInt(4-0);
GemField[col][row]=gemNum;
}
}
}
private void drawGems(){
int gemID=0;
for(int col=0;col<5;col++){
for(int row=0;row<5;row++){
gemID=GemField[col][row];
canvas.drawBitmap(bmps.get(gemID),col,row,null);
}
}
}
Unfortunately the image I get is square in the top left of the screen with multiple objects that seem like they're scaled over each other. More like a snakes scale or shingles, the objects overlap but not completely. The further from the starting place holder in the matrix the less they overlap. Any idea why this may be happening?
canvas.drawBitmap(bmps.get(gemID),c,r,null);
Here, c and r are the x and y components of the point on the canvas where the bitmap is drawn. I assume your bitmaps are larger than 1px, so you should change this into:
canvas.drawBitmap(bmps.get(gemID), 50 * c, 50 * r, null); or something like this; between the bitmaps is now 50px space.
I want to draw a signal waveform using the path.linTo method and a for loop as shown below.
public void drawSignal(Canvas c, PointF pos) // draws the signal onto the Canvas for each of the 12 channels
{
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Style.STROKE);
Path path = new Path();
for (int i=0; i<ECGFilereader.numChannels; i++){
path.moveTo(wavePos[i].x, wavePos[i].y);
for (int chan = 0; chan<ECGFilereader.numChannels; chan++)
for (int m = 0; m < ECGFilereader.numSamples; m++){
path.lineTo(m+wavePos[i].x, signal[chan][m]+wavePos[i].y);
}
}
c.drawPath(path, paint);
However I would like to scale the graph so that each movement in the x-axis is only 1/5 of that of the y-axis, so that the length of the signal is effectively squashed horrizontally. Is it possible to do this by simply using floats somehow I do I need to actually create a larger canvas and scale it there?
Thanks in advance for any help.
err, either multiply the y-components by 5 or divide the x-components by 5 in both path.moveTo and path.lineTo?