Develop Reference

How to store data in ImageView in android dynamically?

Subject of interest : Android
After hours of searching I couldn't find or understand how to create ImageView dynamically to store associative data and perform an action depending on the image view clicked.
Let me elaborate ,
I am creating a grid of ImageViews using GridLayout (as gridview examples are too complex for me). I am able to create the grid but still struggling with alignment issues.
So now I have this Grid of ImageViews, but from what I learned, the Id's of these ImageViews are converted to integers at run time. But I need these IDs as I use them to fetch data from server depending on their uniqueness. Is there a way to store other data than the Ids in ImageView Tags?. I come from a web development background where I could use JavaScript easily to create elements with dynamic Ids to refer later and use in queries. So please guide me.
UPDATE:
I tried using the SetId method, and that is when I got this doubt. Because SetId only lets me set IntegerIDs. What if I needed alphanumeric ID to be used later for querying purposes?.
Exam_Screen.Java
public class Exam_Screen extends AppCompatActivity {
GridLayout gridLayout;
public int[] QArray;
private int[] GetQuestionsFromServer() {
return new int[50];
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_exam__screen);
QArray = GetQuestionsFromServer();
AddQuestionsToScrollArea(QArray);
}
public void AddQuestionsToScrollArea(int[] QArray)
{
gridLayout = findViewById(R.id.gridlayout);
gridLayout.removeAllViews();
int total = QArray.length;
int column = 4 ;
int row = total / column;
gridLayout.setColumnCount(column);
gridLayout.setRowCount(row + 1);
//gridLayout
for (int i = 0, c = 0, r = 0; i < total; i++, c++) {
if (c == column) {
c = 0;
r++;
}
ImageView oImageView = new ImageView(this);
oImageView.setScaleX(0.3f);
oImageView.setScaleY(0.3f);
oImageView.setId(i); // I want to set the Ids I get from Server, and use them later
oImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
oImageView.setAdjustViewBounds(true);
oImageView.setImageResource(R.drawable.new_candidate_image);
GridLayout.LayoutParams lp = new GridLayout.LayoutParams();
lp.width = 30;
lp.height = 30;
lp.topMargin = 5;
lp.bottomMargin = 5;
lp.leftMargin = 5;
lp.rightMargin = 5;
oImageView.setLayoutParams(lp);
GridLayout.Spec rowSpan = GridLayout.spec(GridLayout.UNDEFINED, 1);
GridLayout.Spec colspan = GridLayout.spec(GridLayout.UNDEFINED, 1);
if (r == 0 && c == 0) {
Log.e("", "spec");
Log.d("Column", "value: " + column);
Log.d("rows", "value: " + row);
colspan = GridLayout.spec(GridLayout.UNDEFINED, 1);
rowSpan = GridLayout.spec(GridLayout.UNDEFINED, 1);
}
GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(
rowSpan, colspan);
gridLayout.addView(oImageView, gridParam);
}
}
}
Relevant Exam Screen Activity XML
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/border">
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</ScrollView>

How to generate large seat layout with 1200 seats?

I am making an app where i need to display a seat layout containing 900 to 1200 seats. I had managed to generate a 900 seat layout by creating LinearLayouts with customized TextViews programatically by looping. But I'm pretty sure that is definitely not the way to do it.
Here is what I was doing:
// Seat Layout
LinearLayout linearLayoutSeatContainer;
static final LinearLayout[] rows = new LinearLayout[30];
static final TextView[][] seats = new TextView[30][30];
static final View[][] spaceVertical = new View[30][4];
static final View[] spaceHorizontal = new View[4];
// Populating the screen with seats
for (int i = 0; i < 30; i++) {
rows[i] = new LinearLayout(this);
rows[i].setOrientation(LinearLayout.HORIZONTAL);
// Each loop creates a row of seats
for (int j = 0; j < 30; j++) {
// To add horizontal space after every 10 seats
if (j % 10 == 0) {
spaceVertical[i][(j / 10)] = new View(this);
spaceVertical[i][(j / 10)].setLayoutParams(spaceVerticalParams);
rows[i].addView(spaceVertical[i][(j / 10)]);
}
seats[i][j] = new TextView(this);
seats[i][j].setId(i * 100 + j);
seats[i][j].setLayoutParams(textViewParams);
seats[i][j].setBackgroundResource(R.drawable.seat_circle_empty);
seats[i][j].setClickable(true);
seats[i][j].setOnClickListener(this);
// TODO: Delete randomized code for disabled seats
Random rand = new Random();
int num = rand.nextInt(20);
if (num % 5 == 0 && (i != 0 && j != 0))
seats[i][j].setEnabled(false);
rows[i].addView(seats[i][j]);
}
// Adding the last vertical space between screen and the last seat
spaceVertical[i][3] = new View(this);
spaceVertical[i][3].setLayoutParams(spaceVerticalParams);
rows[i].addView(spaceVertical[i][3]);
// To add horizontal space after every 10 rows of seats
if (i % 10 == 0) {
spaceHorizontal[i / 10] = new View(this);
spaceHorizontal[i / 10].setLayoutParams(spaceHorizontalParams);
linearLayoutSeatContainer.addView(spaceHorizontal[i / 10]);
}
linearLayoutSeatContainer.addView(rows[i]);
}
// Adding the last horizontal space between screen and the last row
spaceHorizontal[3] = new View(this);
spaceHorizontal[3].setLayoutParams(spaceHorizontalParams);
linearLayoutSeatContainer.addView(spaceHorizontal[3]);
Please ignore that bit with the randomization, that was for testing purposes. I know this is not the way of doing things. Please point me towards the right direction.

Assigning custom buttons dynamically into a custom grid layout

I have a requirement to display a question along with a list of options that i am getting from server. Each option has a title and an image and these options should be clickable. So I am creating a class ImageButton extending to RelativeLayout and each option is an ImageButton. I am also creating a class ImageButtonGroup extending to GridLayout and dynamimcally adding all the ImageButtons to this ImageButtonGroup.
It works fine except for the alignment of the ImageButtons. The ImageButton's size depends on the length of the title text (the image is of same size for all options) and I am having hard time in distributing equal cell space to each ImageButton in the grid layout. See below my code where I am adding ImageButtons to ImageButtonGroup:
ImageButtonGroup imageButtonGroup =
(ImageButtonGroup)
mInflater.inflate(
R.layout.button_image_response_layout, holder.richTextContainer, false);
int total = item.getMessage().getResponseOptions().size();
int col = 3;
int row = total / col;
imageButtonGroup.setColumnCount(col);
imageButtonGroup.setRowCount(row + 1);
for (int i = 0; i < total; i++) {
ResponseOption responseOption = item.getMessage().getResponseOptions().get(i);
ImageButtonView imageButtonView =
(ImageButtonView)
mInflater.inflate(
R.layout.image_button_layout, holder.richTextContainer, false);
imageButtonView.setData(
responseOption.getImage(), responseOption.getViewText(), responseOption.getValue());
GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams();
gridParam.setGravity(Gravity.CENTER);
gridParam.topMargin = 10;
gridParam.bottomMargin = 10;
gridParam.width = GridLayout.LayoutParams.WRAP_CONTENT;
gridParam.height = GridLayout.LayoutParams.WRAP_CONTENT;
imageButtonGroup.addView(imageButtonView, gridParam);
This gets me the following view:(The text isn't always Happy as shown below)
How to dynamically allocate fixed sized cell to these buttons inside a grid layout?

You can to specify row and column while creating the GridLayoutParams so that it will handle itself the matching of the size dependending on the total space:
GridLayout.LayoutParams first = new GridLayout.LayoutParams(row, col);
GridLayout.LayoutParams(GridLayout.Spec rowSpec, GridLayout.Spec
columnSpec)
Constructs a new LayoutParams instance for this rowSpec and
columnSpec.
In your specific case it will be something like :
for (int i = 0; i < total; i++) {
ResponseOption responseOption = item.getMessage().getResponseOptions().get(i);
ImageButtonView imageButtonView =
(ImageButtonView)
mInflater.inflate(
R.layout.image_button_layout, holder.richTextContainer, false);
imageButtonView.setData(
responseOption.getImage(), responseOption.getViewText(), responseOption.getValue());
Spec row = GridLayout.spec(Math.round(i / 3);
Spec col = GridLayout.spec(i % 3);
GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(row, col);
gridParam.setGravity(Gravity.CENTER);
gridParam.topMargin = 10;
gridParam.bottomMargin = 10;
gridParam.width = GridLayout.LayoutParams.WRAP_CONTENT;
gridParam.height = GridLayout.LayoutParams.WRAP_CONTENT;
imageButtonGroup.addView(imageButtonView, gridParam);

I was able to achieve this taking a hint from here
I got the screen width, calculated my layout size in terms of %age point (came out to be 70% of the total width) and divided it by 3 (the number of column). So basically what i did is:
int dWidth = (int)(presenter.getView().getScreenWidth() * .70) / 3;
gridParam.width = dWidth;

Programmatically adding TextView to Grid Layout alignment not proper

Hi i am trying to add TextView with drawableLeft to GridLayout.
I am adding this TextView in an Loop. The TextView are getting added properly but the are not aligned properly. Each textview should take equal width in one horizontal row which is not happening.
Following is the code i am using
GridLayout gridLayout = new GridLayout(getContext());
gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
gridLayout.setColumnCount(2);
gridLayout.setRowCount(3);
TextView titleText;
for (int i = 0; facilities != null && i < facilities.size(); i++) {
titleText = new TextView(getContext());
titleText.setText(facilities.get(i));
gridLayout.addView(titleText, i);
titleText.setCompoundDrawablesWithIntrinsicBounds(rightIc, 0, 0, 0);
}

For this you have to dynamically set the column width for the views. This will finally align each view properly with equal amount of space.
GridLayout gridLayout = new GridLayout(getContext());
gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
gridLayout.setColumnCount(2);
gridLayout.setRowCount(3);
TextView titleText;
for (int i = 0; facilities != null && i < facilities.size(); i++) {
titleText = new TextView(getContext());
titleText.setText(facilities.get(i));
gridLayout.addView(titleText, i);
titleText.setCompoundDrawablesWithIntrinsicBounds(rightIc, 0, 0, 0);
GridLayout.LayoutParams param =new GridLayout.LayoutParams();
param.height = LayoutParams.WRAP_CONTENT;
param.width = LayoutParams.WRAP_CONTENT;
param.rightMargin = 5;
param.topMargin = 5;
param.setGravity(Gravity.CENTER);
param.columnSpec = GridLayout.spec(c);
param.rowSpec = GridLayout.spec(r);
titleText.setLayoutParams (param);
}

The following code sample should give each text view equal height and width, and order the TextViews left-to-right and then top-to-bottom.
The critical part is explicitly providing the GridLayout.LayoutParams, setting height/width to 0 and defining the row/column specs with weights set to 1 so that the height and width will be automatically calculated based on the weights.
Also notice I set the number of rows as a function of the number of facilities, so that if your list grows you'll have more rows.
if (facilities == null) {
// In this case there is nothing to display. You can adjust this part to your needs.
return;
}
GridLayout gridLayout = new GridLayout(getContext());
gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
gridLayout.setColumnCount(2);
gridLayout.setRowCount(facilities.size() / 2);
for (int i = 0; i < facilities.size(); i++) {
TextView titleText = new TextView(getContext());
titleText.setText(facilities.get(i));
titleText.setCompoundDrawablesWithIntrinsicBounds(rightIc, 0, 0, 0);
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
layoutParams.height = 0;
layoutParams.width = 0;
int currentCol = i % 2;
int currentRow = i / 2;
// The last parameter in the specs is the weight, which gives equal size to the cells
layoutParams.columnSpec = GridLayout.spec(currentCol, 1, 1);
layoutParams.rowSpec = GridLayout.spec(currentRow, 1, 1);
// Optional, if you want the text to be centered within the cell
layoutParams.setGravity(Gravity.CENTER);
gridLayout.addView(titleText, layoutParams);
}

Basically that is the column and row count. I have re wrotten the complete logic
GridLayout gridLayout = new GridLayout(getContext());
int total = facilities.size();
int column = 2;
int row = total / column;
gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
gridLayout.setColumnCount(column);
gridLayout.setRowCount(row + 1);
TextView titleText;
for(int i =0, c = 0, r = 0; i < total; i++, c++)
{
if(c == column)
{
c = 0;
r++;
}
titleText = new TextView(getContext());
titleText.setText(facilities.get(i));
gridLayout.addView(titleText, i);
titleText.setCompoundDrawablesWithIntrinsicBounds(rightIc, 0, 0, 0);
GridLayout.LayoutParams param =new GridLayout.LayoutParams();
param.height = LayoutParams.WRAP_CONTENT;
param.width = LayoutParams.WRAP_CONTENT;
param.rightMargin = 5;
param.topMargin = 5;
param.setGravity(Gravity.CENTER);
param.columnSpec = GridLayout.spec(c);
param.rowSpec = GridLayout.spec(r);
titleText.setLayoutParams (param);
}

That's may be because of your dynamic text length is not fixed so each textview not take same space Check this
int height=getContext().getResources().getDimension(R.dimen.activity_horizontal_margin); //set size of dimen in required resolution
titleText .setLayoutParams(new LinearLayout.LayoutParams(0, height, height));

My solution:
GridLayout gl = findViewById( R.id.grid_layout );
TextView tv = new TextView( this );
tv.setText( ""+cursor.getInt( column ) ); //for example
GridLayout.LayoutParams lp = new GridLayout.LayoutParams();
lp.columnSpec = GridLayout.spec( GridLayout.UNDEFINED, 1, GridLayout.FILL ); //for stretch a child to column use GridLayout.FILL
gl.addView( tv, lp );
//DO NOT USE lp.setGravity( ... );
//FOR ALIGN TEXT USE tv.setTextAlignment( ... );

Adding an ImageView array to a RelativeLayout

I am trying to add a series of images to the current RelativeLayout at runtime below another TextView. So far, I get it to display partially correct, but not exactly right. I can't get them to move to another row. I hope someone can give me a hand and show me the correct way. The series of image will appear below this TextView(R.id.date):
TextView date = (TextView) findViewById(R.id.date);
//// image view start //////
int photos = Integer.parseInt(total_photo);
RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.relative_layout_b);
for (int i = 0; i < limit; i++){
final ImageView imageView = new ImageView (this);
imageView.setId(i);
imageView.setImageResource(R.drawable.photo_frame);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
imageView.setPadding(10, 10, 0, 0);
imageView.setAdjustViewBounds(true);
imageView.setMaxHeight(80);
imageView.setMaxWidth(80);
lp.addRule(RelativeLayout.BELOW, R.id.date);
lp.addRule(RelativeLayout.RIGHT_OF, imageView.getId() - 1);
imageView.setLayoutParams(lp);
mainLayout.addView(imageView);
}
Right now, it only display total photo quantity - 1 (i.e.: when there is 5, it only display 4); and I would like to get each row to display 5 and will move to the next row immediately if it reach 6, 11, 16....etc. This layout is nested inside a ScrollView and in a RelativeLayout because I have quite a few views in it. So, I will have to stick with RelativeLayout for this.

If I understood what you're trying to do, see if the code below position the ImageViews like you want(I don't know how efficient it is):
private static final int ROW_ITEMS = 5; // 5 ImageViews per row
// ...
RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.relative_layout_b);
int limit = 13; // I assume that limit is the number of ImageView that you'll put in the layout
int rows = limit / ROW_ITEMS; // the number of rows that results from limit
int leftOver = limit % ROW_ITEMS; // see if we have incomplete rows
if (leftOver != 0) {
rows += 1;
}
int id = 1000; // the ids of the ImageViews 1000, 1001, 1002 etc
int belowId = R.id.date; // this id will be used to position the ImageView on another row
while (rows > 0) {
int realItemsPerRow = ROW_ITEMS;
if (leftOver != 0 & rows == 1) {
realItemsPerRow = Math.min(ROW_ITEMS, leftOver);
}
for (int i = 0; i < realItemsPerRow; i++) {
final ImageView imageView = new ImageView(this);
imageView.setId(id);
imageView.setImageResource(R.drawable.ic_launcher);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
imageView.setPadding(10, 10, 0, 0);
imageView.setAdjustViewBounds(true);
imageView.setMaxHeight(80);
imageView.setMaxWidth(80);
if (i == 0) {
lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
} else {
lp.addRule(RelativeLayout.RIGHT_OF, imageView.getId() - 1);
}
lp.addRule(RelativeLayout.BELOW, belowId);
imageView.setLayoutParams(lp);
mainLayout.addView(imageView);
id++;
}
belowId = id - 1;
rows--;
}
Also, as kcoppock already said in his comment, it might be worth looking at the GridView for efficiency.