How can I draw 5x5 matrix of ImageButtons programmatically?
Question
I need ImageButtons to have equal height and width, with no spaces between one another like in the picture below, and there must not be such blank spaces at the beginning and at the end of matrix
Thank you very much! PS the code I used here was`
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:layout_marginTop="-4.5dp"
android:paddingBottom="-5dp"
android:paddingLeft="-5dp"
android:paddingRight="-5dp"
android:paddingTop="-5dp" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:layout_height="fill_parent"
android:id="@+id/ImageButton_11"
android:layout_width="0dp"
android:layout_weight="1"
/>
<ImageButton
android:id="@+id/ImageButton_12"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="-8.5dp"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ImageButton_13"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_14"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_15"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp" >
<ImageButton
android:id="@+id/ImageButton_21"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ImageButton_22"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_23"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_24"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_25"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp" >
<ImageButton
android:id="@+id/ImageButton_31"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ImageButton_32"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_33"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_34"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_35"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"
>
<ImageButton
android:id="@+id/ImageButton_41"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ImageButton_42"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_43"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_44"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_45"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp" >
<ImageButton
android:id="@+id/ImageButton_51"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ImageButton_52"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_53"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_54"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
<ImageButton
android:id="@+id/ImageButton_55"
android:layout_width="0dp"
android:scaleType="centerCrop"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_marginLeft="-8.5dp"
/>
</TableRow>
</TableLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/refresh_ImageButton"
/>
</LinearLayout>
Now I want it to be done programmatically.
2 answers
solution1
1 2015-10-25 10:05:59
Your xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
Your Java file:
LinearLayout container = (LinearLayout) activity.findViewById(R.id.container);
TableLayout table = new TableLayout(activity);
LayoutParams matchWrap = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
LayoutParams zeroMatchOne = new TableRow.LayoutParams(
0, LayoutParams.MATCH_PARENT, 1f);
for (int i=0; i<5; i++) {
TableRow row = new TableRow(activity);
row.setLayoutParams(matchWrap);
for(int j=0; j<5; j++) {
ImageButton image = new ImageButton(activity);
image.setLayoutParams(zeroMatchOne);
row.addView(image);
}
table.addView(row);
}
If you want to add an Id look here , the second answer should do it!
If you want to add margin or padding:
layoutParams.setMargins(int left, int top, int right, int bottom);
view.setPadding(int left, int top, int right, int bottom);
I know that it isn't exactly look like yours, but it should give you an idea of how to do it!
solution2
1 ACCPTED 2015-10-25 11:19:45
With a little bit of delay my answer (very similar to the one above so I'm sorry but was looking for another way to remove the margin of the buttons :)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout mainContainer = (LinearLayout)findViewById(R.id.main_container);
int cols = 5;
int rows = 5;
//Params used for cells
TableRow.LayoutParams params = new TableRow.LayoutParams(
0, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f
);
int pixelsToDp = convertToPixelsDp(-4.5f);
params.setMargins(pixelsToDp, pixelsToDp, pixelsToDp, pixelsToDp);
//Params used for rows
TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
);
rowParams.setMargins(0, 0, 0, 0);
//Params used for table
TableLayout.LayoutParams tableParams = new TableLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
);
tableParams.setMargins(0, 0, 0, 0);
//Table generation
TableLayout table = new TableLayout(this);
table.setLayoutParams(tableParams);
table.setShowDividers(TableLayout.SHOW_DIVIDER_NONE);
table.setStretchAllColumns(true);
for(int i = 0; i < rows; i++){
TableRow row = new TableRow(this);
row.setShowDividers(TableRow.SHOW_DIVIDER_NONE);
row.setLayoutParams(rowParams);
for(int j = 0; j < cols; j++){
ImageButton btn = new ImageButton(this);
btn.setPadding(0, 0, 0, 0);
btn.setLayoutParams(params);
btn.setScaleType(ImageView.ScaleType.CENTER_CROP);
//The button's background has the unneeded margin
//so if you set correct background drawable I think
//you might achieve what you want API lvl 16 above
//btn.setBackground(null);
//API Level 17 and above
//If you want id's for some reason you could store them in
//some kind of Dictionary or you could store the UI elements
//to have access to them
//int id = btn.generateViewId();
//btn.setId(id);
row.addView(btn);
}
table.addView(row);
}
mainContainer.addView(table);
}
public int convertToPixelsDp(float pixels){
int px = (int)TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
pixels,
this.getResources().getDisplayMetrics());
return px;
}
Disclaimer - This is only to give you an idea, not solving the mentioned problem with the margins
I would advice you to create your buttons from base layout type like FrameLayout or LinearLayout etc... to have more control over them Here's what I did on a project of mine:
This code is using different drawables to define the states of my buttons which are just normal layout views, you could add more states in the selector if needed however I was using only pressed and normal.
So for each state defined in the selector another drawable file is used.
The given example is creating rounded borders for my buttons and giving them specified color
down_button_lesser_opacity_selector.xml in drawables
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed -->
<item
android:state_pressed="true"
android:drawable="@drawable/down_button_lesser_opacity_red_pressed"
/>
<!-- Normal -->
<item
android:drawable="@drawable/down_button_lesser_opacity_red_normal"/>
</selector>
down_button_lesser_opacity_red_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="0dp" android:color="@color/transparent" />
<solid android:color="#55FF0000"/>
<corners
android:topLeftRadius="0dp" android:topRightRadius="0dp"
android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp"
/>
<padding
android:left="6dp" android:top="0dp"
android:right="6dp" android:bottom="6dp"
/>
</shape>
down_button_lesser_opacity_red_normal.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="0dp" android:color="@color/transparent" />
<solid android:color="@color/feature_normal_item"/>
<corners
android:topLeftRadius="0dp" android:topRightRadius="0dp"
android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp"
/>
<padding
android:left="6dp" android:top="0dp"
android:right="6dp" android:bottom="6dp"
/>
</shape>
How do you use it:
- Create FrameLayout and set the background to
android:background="@drawable/down_button_lesser_opacity_selector" - Put ImageView inside and/or more controls(if you want to emulate image button or something else)
EDIT
Short addition that i missed the first time and some sample code to include the drawables
- You need to set the frame layout to clickable
- You need to change the colors from my example (I'm using colors defined in my styles). So put red in one drawable and blue in the other to see how it behaves
Put this in the place of button while generating
FrameLayout btn = new FrameLayout(this);
btn.setPadding(0, 0, 0, 0);
btn.setLayoutParams(new TableRow.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
));
TextView text = new TextView(this);
text.setText("Button: " + i + j);
btn.addView(text);
btn.setBackgroundResource(R.drawable.down_button_lesser_opacity_selector);
btn.setClickable(true);
EDIT 2
class MyFrameLayout extends FrameLayout
{
MyFrameLayout(Context context){
super(context);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
Log.v("measure", "width:" + w + " height:" + h);
if(w != h) {
this.setLayoutParams(new TableRow.LayoutParams(
w, w
));
}
}
}
You could do the override in a better way to be more generic but for your case that will work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I fill a grid with ImageButtons programmatically?
How to fix output to be on separate lines to create a 5x5 matrix?
How to create a 5x5 matrix with increasing numbers in java?
How do I draw a line between two ImageButtons in android?
searching for all words in a 5x5 matrix
How can I better achieve my implementation of a 5x5 grid puzzle of buttons that activate the surrounding buttons on the grid using a 2D Array?
How to implement a method to find the largest element of each row and column in my 5x5 matrix?
How to add 5x5 table of rectangle shape
how can i change imagebuttons automatically after what users want?
How can I draw several rectangles in a row programmatically?
Related Tags