I'm trying to make a dynamic grid layout, it being API 10+ is the part that's been making it slow going. I tried to make it wrap automatically.. but in the end found it easier just to try to force it into a grid pattern using coordinates. This script was working by itself when I did the positioning at time of creation, but now I am trying to loop through each item as a sort. So if one item is deleted, they all float back into a grid without a hole in the middle.
Problem is, it seems the layout parameters are only applying to the last object.
Here's some base variables and onCreate setup:
int screenWidth;
int screenHeight;
int distStep = 130;
int leftPad = 20;
int numCols;
int baseID = 0;
android.util.DisplayMetrics metrics = this.getResources().getDisplayMetrics();
screenWidth = metrics.widthPixels;
screenHeight = metrics.heightPixels;
numCols = (int) (screenWidth - leftPad) / distStep;
int scrRemain = screenWidth - ((numCols * distStep) + leftPad);
distStep += (int) scrRemain / numCols;
Then on to the main function for adding:
public void addObjToLayout() {
RelativeLayout relLay = (RelativeLayout) this.findViewById(R.id.mainWindow);
for(int i = 1; i <= currQuantity; i++){
TextView tv=new TextView(this);
tv.setTextSize(40);
tv.setId(baseID + i);
tv.setPadding(24, 4, 24, 4);
tv.setBackgroundColor(0x110000FF);
tv.setText(String.valueOf(baseID + i)); //Val for debugging
tv.setTextColor(0xFFFFFFFF);
relLay.addView(tv);
}
baseID += currQuantity;
sortLayout();
}
Then the sorting:
public void sortLayout() {
int leftNum = 20;
int topNum = 0;
for(int i = 1; i <= baseID; i++){
TextView tv= (TextView) this.findViewById(baseID);
MarginLayoutParams mp = new MarginLayoutParams(tv.getLayoutParams());
mp.setMargins(leftNum, topNum, 0, 0);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(mp);
tv.setLayoutParams(lp);
leftNum += distStep;
if(leftNum >= distStep * numCols){
leftNum = leftPad;
topNum += distStep;
}
}
}
What I am getting is all the textViews pile up in the top left corner, except the last one which is positioned exactly where it should be. So it seems in my head, the params object isn't applying until the loop ends or something.. but logically I don't see why.
As I said, this worked when I set the params at the get go, problem is mass updating them all at once. I am pretty new to android, so I hope I'm not just doing something stupid.
Thanks for your time
Margin means it will set a gap between the previous view and current view.
When you add view1, view2 and view3 to grid layout and if you remove view2 at some point of time, then the margin for view3 is set according to view1. So, it won't leave empty space in place of view2. Instead of removing view2 at run time, set the background for view2 as null and set the text as empty as below.
textView.setBackground(null);
textView.setText("");
So that the view is still available but looks as deleted.
Started looking into GridView using an extended baseAdapter. Looks promising:
For more (see #2):
http://www.mkyong.com/android/android-gridview-example/
Related
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;
the actual wondering is the following : I have a full-screen GridLayout which has half of it visible. To see the second part we have to scroll.
I tried some ways and looked around for answers but none of whichs I found gave me what I need. In my grid there are square cells and each one contains a view, and I need to get the x and the y of these views.
Problem is that I could get the coordinates of the views that were put into the visible cells, the views that are not displayed have a x and a y set to 0... Whereas they were drawn..
Here it is, hope some of you guys could help! :)
private void createGrid(){
//I call the function several times
int gridsLength = 19*48*grids;
for(int i = 0; i < 19; i++) {
for (int j = 0; j < 48; j++) {
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
layoutParams.width = 40;
layoutParams.height = 40;
View view = new View(this);
view.setLayoutParams(layoutParams);
Util.setDrawableBackground(view, R.drawable.border_black, this);
view.setOnTouchListener(newViewListener());
gridViews.add(view);
//glMain is my gridLayout that i put into global variable
glMain.addView(view, i + j + gridsLength);
}
}
grids++;
}
EDIT : I finally found out that I was not always accessing the views AFTER the grid were drawn so I changed that and it's working... Figured out that I was just a fool ^^
I am creating a Table of buttons, to control a LED Matrix via Bluetooth.
I have found on the web Brian's Video Tutorials and followed his Dynamic Buttons and Images video to implement this.
Here is the code:
public class DrawerMode extends Activity {
private static final int NUMOFCOL = 15;
private static final int NUMOFROW = 8;
Button buttons[][] = new Button[NUMOFROW][NUMOFCOL];
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Assign content
setContentView(R.layout.activity_draw_mod);
fillTable();
}
private void fillTable() {
TableLayout tableLayout = (TableLayout) findViewById(R.id.drawer_table);
for( int iter_R = 0; iter_R!= NUMOFROW; iter_R++){
TableRow tableRow = new TableRow(this);
tableRow.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT,1.0f));
tableLayout.addView(tableRow);
for(int iter_C = 0; iter_C != NUMOFCOL; iter_C++){
final int FINAL_COL = iter_C;
final int FINAL_ROW = iter_R;
Button button = new Button(this);
button.setLayoutParams(new TableRow.LayoutParams( TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.MATCH_PARENT, 1.0f));
button.setText("" + iter_C + "," + iter_R);
button.setPadding(0, 0, 0, 0);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
whenBtnClicked(FINAL_COL, FINAL_ROW);
}
});
tableRow.addView(button);
buttons[iter_R][iter_C] = button;
}
}
}
private void whenBtnClicked(int col, int row) {
//Toast.makeText(this, "Button clicked: " + FINAL_COL + "," + FINAL_ROW, Toast.LENGTH_SHORT).show();
Button button = buttons[row][col];
// Lock Button Sizes:
lockButtonSizes();
int newWidth = button.getWidth();
int newHeight = button.getHeight();
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_dark_blue);
Bitmap scaledBitmap = Bitmap.createScaledBitmap(originalBitmap, newWidth, newHeight, true);
Resources resource = getResources();
button.setBackground(new BitmapDrawable(resource, scaledBitmap)); // Change text on button:
button.setText(" ");
}
private void lockButtonSizes(){
for (int row = 0; row < NUMOFROW; row++){
for (int col = 0; col < NUMOFCOL; col++){
Button button = buttons[row][col];
int width = button.getWidth();
button.setMinWidth(width);
button.setMaxWidth(width);
int height = button.getHeight();
button.setMinHeight(height);
button.setMaxHeight(height);
}
}
}
}
It works great, but while testing I have found the following issue.
When I click random buttons it works great:
[img]http://i.imgur.com/OYFJ6zJ.png?1[/img]
But when I complete a row (all elements on row are clicked), and I mean any row it starts to rescale the buttons in the whole table:
[img]http://i.imgur.com/ttAz4U0.png?1[/img]
I was thinking that maybe the LayoutParams of the TableRow should be changed, but not sure about that. What am I missing here?
I think you're right about the layout parameters needing to change. This line
tableRow.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT,1.0f));
would cause the row's height to shrink in size if no button had displayed text, which seems to be what's happening. The TableLayout.LayoutParams does support setting fixed width/height, which you could sensibly calculate by first getting the device's screen width/height and dividing accordingly.
Or, if that gets to cumbersome, you could set -- though this may be too much of a hack -- the default text in the TextViews in the "unset" buttons with some transparent text (e.g., "1,1") so that the height is the same as a set button. This SO answer answer shows how to make transparent text.
I am certain that this is not a good solution for all cases. But just as I thought, the problem was with
button.setLayoutParams(new TableRow.LayoutParams( TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.MATCH_PARENT, 1.0f));
If I understand correctly after the entire row was clicked, since the LayoutParams change according to the MATCH_PARENT value, the TableRow rescales the whole row to meet this criteria,since the height of the entire row is the same now. Not sure if it happens exactly this way, but I think this is the case because of my solution.
My work around is to add specific values for the LayoutParams, instead of leaving it the system to figure it out:
button.setLayoutParams(new TableRow.LayoutParams( 75, 50, 1.0f));
I am aware this is not how it should be done. But since I have a deadline to met soon, I can't spend any more time with it. Most likely the correct way to do this is Jason's suggestion to get the screen size and calculate it. You can do this with:
Display display = getWindowManager().getDefaultDisplay(); Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
The problem is to come up with a correct formula to calculate this values you can pass to the LayoutParam. If anyone can figure this out please do post your solution and I will accept that answer. At this point I accept Jason's suggestion.
I'm wondering what would be the best solution to get to the result shown below.
Here is what i've found so far:
an ImageView for the forest and a transparent surfaceView (to handle touch) on which I would draw the rectangles?
Or...
Just One SurfaceView with the image set as background and rectangles directly drawn on...?
For those 2 I've already chosen a RelativeLayout.
Which of those 2 would be the most efficient and easiest to do?
Or maybe there is another way which I haven't think about.
In any case thanks for your advice, here is what I tend to...
I've implemented this by placing the image in a RelativeLayout (FrameLayout would work too), and then adding each outlined view programatically. If you know the x and y origin (perhaps as a ratio to the image) and the size for each area, you can easily inflate each view/area (with a black border, transparent center), make it clickable and set a listener, and then set it's origin by adjusting it's margins. You may want to perform all of this after the image has finished laying out:
I put this in onActivityCreated of my Fragment, but other lifecycle methods would work too...
ViewTreeObserver vto = image.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (image.getMeasuredHeight() > 0) {
addHotSpots();
ViewTreeObserver obs = image.getViewTreeObserver();
obs.removeGlobalOnLayoutListener(this);
}
}
});
And this is how I actually place all the hotspots/areas:
protected void addHotSpots() {
HotSpot[] hotSpots = res.hotspots;
for (HotSpot hs : hotSpots) {
addHotSpotToImage(hs);
}
private void addHotSpotToImage(HotSpot hs) {
int height = image.getMeasuredHeight();
int width = image.getMeasuredWidth();
//this piece will probably be different for you
//depending on what you know about the area's intended size/position
double hsHeightRatio = hs.lr.y - hs.ul.y;
double hsWidthRatio = hs.lr.x - hs.ul.x;
double leftMargin = hs.ul.x * width;
double topMargin = hs.ul.y * height;
double hsHeight = height * hsHeightRatio;
double hsWidth = width * hsWidthRatio;
LayoutInflater vi = (LayoutInflater) image.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View newSpot = vi.inflate(R.layout.question_hotspot, null);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams((int) hsWidth, (int) hsHeight);
newSpot.setTag(hs.key);
newSpot.setFocusable(true);
newSpot.setClickable(true);
newSpot.setFocusableInTouchMode(true);
newSpot.setOnTouchListener(this);
params.topMargin = (int) topMargin;
params.leftMargin = (int) leftMargin;
image.addView(newSpot, params);
}
I need to separate tab buttons with space, I tried to set margin to views and then add them as tabs, but it does not work, I also thought of adding empty view as divider, but haven't tried it yet, is there any standard way of doing this, or any tweak that can achieve same effect?
Thanks!
Here's the way:
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
final int tabChildrenCount = tabWidget.getChildCount();
View currentView;
for (int i = 0; i < tabChildrenCount; i++) {
currentView = tabWidget.getChildAt(i);
LinearLayout.LayoutParams currentLayout =
(LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(0, 5, 5, 0);
}
tabWidget.requestLayout();
This is really a good solution even for my problem! Many thanks for that! I used it to implement space before the first and after the last item in the widget to have the possibility to scroll them visible to the center without adding additional (and disturbing, because the widget does not excpect such silly things) invisible buttons.
//pump up space for first entry on the left and last entry on the right!
Display display = getWindowManager().getDefaultDisplay();
//Point size = new Point();
int width = display.getWidth();
View currentView = mTabHost.getTabWidget().getChildAt(0);
LinearLayout.LayoutParams currentLayout = (LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(currentLayout.leftMargin + width/2, currentLayout.topMargin, currentLayout.rightMargin, currentLayout.bottomMargin);
currentView = mTabHost.getTabWidget().getChildAt(mTabHost.getTabWidget().getChildCount()-1);
currentLayout = (LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(currentLayout.leftMargin, currentLayout.topMargin, currentLayout.rightMargin + width/2, currentLayout.bottomMargin);
mTabHost.getTabWidget().requestLayout();