Suppose I have a total value of 2000, while my current value is 180. I would like to present it graphically as follows:
How could I do that? I was looking for many charts, but I did not find such a solution anywhere.
Is there any open source that provides such graphical representation of values?
You can use TableLayout to achieve this.
Your layout will look like this:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</TableLayout>
Then in your code you could populate your table like so:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
int totalValue = 2000;
int currentValue = 180;
int rowsNumber = 10;
int columnsNumber = 10;
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
for (int i = 0; i < rowsNumber ; i++) {
TableRow tableRow = new TableRow(this);
tableRow.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tableRow.setBackgroundResource(R.drawable.yourRowDrawable);
for (int j = 0; j < columnsNumber; j++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(this.getCellDrawableId(i,j,totalValue ,currentValue ));
tableRow.addView(imageView, j);
}
tableLayout.addView(tableRow, i);
}
}
}
private int getCellDrawableId(int i, int j,int totalValue ,int currentValue ){
if(/*some logic here*/)
return R.drawable.greenCell;
return R.drawable.emptyGrayCell;
}
P.S.: Where R.drawable.greenCell, R.drawable.emptyGrayCell, R.drawable.yourRowDrawable are appropriate drawable to represent your grid.
Also I did not test this code, only writeen it here like snippet, so some errors may be present here
Related
in Android Studio I developed a view that consist of 15 TableRows, and each TableRow contains 15 ImageViews. (Each ImageView store a Bitmap with square shape, and this produce a 15 x 15 square matrix). Relevant coding of View onCreate roughly as below:
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
TableRow[] tr = new TableRow[15];
for (int i = 0; i < 15; i++) {
tr[i] = new TableRow(this);
for (int j = 0; j < 15; j++) {
bmp = BitmapFactory.decodeResource(getResources(),R.drawable.jmpty);
imageViews[j] = new ImageView(this);
imageViews[j].setImageBitmap(bmp);
imageViews[j].setOnClickListener(new doSomething());
tr[i].addView(imageViews[j],oParams);
}
tableLayout.addView(tr[i]);
}
....
My question is how do I know which imageView (Total = 15 x 15 = 225) was being clicked by user by utilizing OnClick event? i.e. If the user click the ImageView located at (imageViews[13] located at TableRow=4), can I return capture this x-y coordinate information (e.g. x=13, y=4) and return to other parts of program?
private class doSomething implements View.OnClickListener {
#Override
public void onClick(View v) {
ImageView iv = (ImageView) v;
......
// what I want:
int x = iv.GetImageViewNumber(); // how can I do this???
int y = iv.GetTableRowNumber(); // how can I do this???
Or is there any other better alternative way of doing this?
You can create a class who inherits from ImageView, and inside this class create 2 attributes int x and int y, So when onClickListener is called you should cast the View to your custom class.
Example:
public calss MyCustomImageView extends ImageView{
public int x;
public int y;
}
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
TableRow[] tr = new TableRow[15];
for (int i = 0; i < 15; i++) {
tr[i] = new TableRow(this);
for (int j = 0; j < 15; j++) {
bmp = BitmapFactory.decodeResource(getResources(),R.drawable.jmpty);
imageViews[j] = new MyCustomImageView(this);
imageViews[j].setImageBitmap(bmp);
imageViews[j].setOnClickListener(new doSomething());
imageViews[j].x = i;
imageViews[j].y = j;
tr[i].addView(imageViews[j],oParams);
}
tableLayout.addView(tr[i]);
}
#Override
public void onClick(View v) {
MyCustomImageView iv = (MyCustomImageView) v;
int x = iv.x;
int y = iv.y;
}
I hope it will help you, sorry for my English I'm beginner!
to know which imageview has been clicked, you need to identify that view by its ID or Tag. You need to set it in your for loop and then get it when u want to identify in onClick method.
String tagString = "Image";
for (int i = 0; i < 15; i++) {
tr[i] = new TableRow(this);
for (int j = 0; j < 15; j++) {
bmp = BitmapFactory.decodeResource(getResources(),R.drawable.jmpty);
imageViews[j] = new ImageView(this);
imageViews[j].setImageBitmap(bmp);
//setting image tag for each image in "Image1", "Image2"... format
imageViews[j].setTag(tagString+j);
imageViews[j].setOnClickListener(new doSomething());
tr[i].addView(imageViews[j],oParams);
}
tableLayout.addView(tr[i]);
}
Identify the image in your onClick method
#Override
public void onClick(View v) {
Toast.makeText(this, "Clicked items is "+v.getTag().toString(), Toast.LENGTH_SHORT).show();;
}
I'm generating TextViews in a loop and add them to a Relative layout like this :
RelativeLayout relativeLayout2 = (RelativeLayout) findViewById(R.id.rl_root);
for(int i = 0; i < 5; i++)
{
TextView textvw = new TextView(this);
textvw.setText(Integer.toString(i));
relativeLayout2.addView(textvw);
for(int j = 0; j < 10; j++)
{
TextView textvw2 = new TextView(this);
textvw2 .setText(Integer.toString(j+5));
relativeLayout2.addView(textvw2);
}
}
When I do this, all textViews print on the same place. I want them to appear below each other. I mean first one will be on the top, secone one below the top and like that. How can I do that? Thanks.
Use Linear layout instead of Relative layout and set the orientation to vertical if you want it one below the other.
LinearLayout linearLayout2 = (LinearLayout) findViewById(R.id.rl_root);
for(int i = 0; i < 5; i++) { TextView textvw = new TextView(this);
textvw.setText(Integer.toString(i));
relativeLayout2.addView(textvw); for(int j = 0; j < 10; j++) { TextView textvw2 = new TextView(this);
textvw2 .setText(Integer.toString(j+5));
linearLayout2.addView(textvw2); } }
I have a Dialogfragment which contains TableLayout. I have wrapped the TableLayout with a custom class (given below) because i wanted a fixed header and a scrolling body. And I wanted the header to align properly with the body. The custom class does this by overriding onLayout.
<com.ui.components.ScrollingTable
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:background="#color/transaction_table_bg">
<TableLayout
android:id="#+id/tlScrollingTableHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
android:fillViewport="true">
<TableLayout
android:id="#+id/tlScrollingTableBody"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</ScrollView>
</com.ui.components.ScrollingTable>
I used the following class to wrap the TableLayout.
public class ScrollingTable extends LinearLayout {
private static final String TAG = ScrollingTable.class.getSimpleName();
public ScrollingTable (Context context) {
super(context);
}
public ScrollingTable (Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
List<Integer> colWidths = new LinkedList<Integer>();
TableLayout header = (TableLayout) findViewById(R.id.tlScrollingTableHeader);
TableLayout body = (TableLayout) findViewById(R.id.tlScrollingTableBody);
// Measure content width first
for (int rownum = 0; rownum < body.getChildCount(); rownum++) {
TableRow row = (TableRow) body.getChildAt(rownum);
int countCells = 0;
for (int cellnum = 0; cellnum < row.getChildCount(); cellnum++) {
View cell = row.getChildAt(cellnum);
if (cell.getVisibility() == VISIBLE) {
Integer cellWidth = cell.getWidth();
if (colWidths.size() <= countCells) {
colWidths.add(cellWidth);
} else {
Integer current = colWidths.get(countCells);
if (cellWidth > current) {
colWidths.remove(countCells);
colWidths.add(countCells, cellWidth);
}
}
countCells++;
}
}
}
// Figure out if header needs resizing first based on widths
TableRow headerRow = (TableRow) header.getChildAt(0);
for (int count = 0; count < colWidths.size(); count++) {
if (headerRow.getChildAt(count).getWidth() >= colWidths.get(count)) {
colWidths.remove(count);
colWidths.add(count, headerRow.getChildAt(count).getWidth());
}
}
// Then apply to header
for (int rownum = 0; rownum < header.getChildCount(); rownum++) {
TableRow row = (TableRow) header.getChildAt(rownum);
for (int cellnum = 0; cellnum < row.getChildCount(); cellnum++) {
View cell = row.getChildAt(cellnum);
TableRow.LayoutParams params = (TableRow.LayoutParams) cell.getLayoutParams();
params.width = colWidths.get(cellnum);
cell.requestLayout();
}
}
}
}
This works well except for one problem. When the Dialog opens I can clearly see the columns resizing due to requestLayout. Is there anyway to fix this ?
As Nguyen suggested I moved to another thread. However I removed requestLayout. Instead in the new thread I used the following which seems to do the trick.
#Override
protected void onPostExecute(Void result) {
tableHeader.setColumnCollapsed(0, false);
tableContent.setColumnCollapsed(0, false);
}
I am working in Android studio and using TableLayout. i want to display small imageButtons. and height of each button can be changed programmatically. I tried my best. but does not change the height of imageButton, Please anyone help me, what changes can i make in this code. thanks
public void settable() {
index = 0;
LinearLayout le = (LinearLayout) findViewById(R.id.onofffbutton);
float height = le.getHeight();
height= height/9.0f;
for (int a = 0; a < maxrow; a++) {
TableRow row = new TableRow(this);
for (int b = 0; b < col; b++) {
location[a][b] = new ImageView(this);
/*LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(50, 50);
location[a][b].setLayoutParams(layoutParams);*/
if (isOn[a][b]) {
location[a][b].setBackgroundResource(R.drawable.box1);
} else {
location[a][b].setBackgroundResource(R.drawable.box);
}
location[a][b].setMaxHeight(height);
location[a][b].setOnClickListener(Onclick);
location[a][b].setId(index++);
row.addView(location[a][b]);
}
tableLayout.addView(row, a);
}
}
I am triying to use dynamic layout for comment part of my project but when i settext of textview dynamicly the output only appears in top of the screen. And it puts the output over the other outputs
RelativeLayout ll=(RelativeLayout) findViewById(R.id.rl);
for(int i = 0; i < 20; i++) {
TextView cb = new TextView(this);
cb.setText("YORUMLAR"+yorum[0]+i);
cb.setTextSize(30);
ll.addView(cb);
}
So how can i put the output on the bottom of the screen linearly.
You should use LinearLayout to automatically add one TextView after another.
Assuming you can't live without RelativeLayout, you'll need to dynamically generate ids for all TextView you create in order to put one view under another. Here is example:
public class HelloWorld extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout);
Random rnd = new Random();
int prevTextViewId = 0;
for(int i = 0; i < 10; i++)
{
final TextView textView = new TextView(this);
textView.setText("Text "+i);
textView.setTextColor(rnd.nextInt() | 0xff000000);
int curTextViewId = prevTextViewId + 1;
textView.setId(curTextViewId);
final RelativeLayout.LayoutParams params =
new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW, prevTextViewId);
textView.setLayoutParams(params);
prevTextViewId = curTextViewId;
layout.addView(textView, params);
}
}
}
You've to provide the location of your newly added view. As #Adinia said, with no position, it will be aligned to the top by default. So you can use the following code to do it with RelativeLayout;
RelativeLayout containerLayout = (RelativeLayout) findViewById(R.id.container);
for (int i = 0; i < 20; i++) {
TextView dynaText = new TextView(this);
dynaText.setText("Some text " + i);
dynaText.setTextSize(30);
// Set the location of your textView.
dynaText.setPadding(0, (i * 30), 0, 0);
containerLayout.addView(dynaText);
}
If you want to show multiple textviews one after the other, then you should go with LinearLayout.
You may also add Dynamic textview to relative layout. Here with i have attached some code this may help you.
RelativeLayout ll=(RelativeLayout) findViewById(R.id.rl);
for(int i = 0; i < 20; i++)
{
TextView cb = new TextView(this);
cb.setText("YORUMLAR"+yorum[0]+i);
cb.setTextSize(30);
cb.setId(2000+i);
RelativeLayout.LayoutParams TextViewLayoutParams = new RelativeLayout.LayoutParams(100,100);
if (i != 0 )DispViewLayoutParams.addRule(RelativeLayout.BELOW, 2000 - (i-1));
ll.addView(cb,TextViewLayoutParams);
}