This is the XML, but for smartphone and Android it is a different design.
This is for the grid layout and the button in there.
This is the display for tablet:
And this for smartphone:
I want for all two user interfaces the full table
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="4"
app:layout_constraintBottom_toTopOf="#+id/btnWin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="4"
tools:ignore="MissingConstraints">
<Button
android:id="#+id/button1"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="1"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button2"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="2"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button3"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="3"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button4"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="4"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button5"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="5"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button6"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="6"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button7"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="7"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button8"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="8"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button9"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="9"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button10"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="10"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button11"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="11"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button12"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="12"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button13"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="13"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button14"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="14"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button15"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="15"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button16"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="0"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
</android.support.v7.widget.GridLayout>
I don't understand where is the problem.
It's simple - height - 0dp:
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
Related
I've created a simple GridLayout with a bunch of buttons. Every button has layout_columnWeight and layout_rowWeight set to "1" to cause the gridlayout to expand to fill the space.
If I delete any of the weights, e.g. layout_columnWeight from the upper-left button, all of the other buttons in that column disappear.
Can anybody explain what's going on here?
My complete layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorAccent">
<Button
android:id="#+id/button24"
android:text="7"
app:layout_column="0"
app:layout_row="1"
app:layout_columnWeight=".01"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button25"
android:text="8"
app:layout_column="1"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button26"
android:text="9"
app:layout_column="2"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button28"
android:text="4"
app:layout_column="0"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button29"
android:text="5"
app:layout_column="1"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button30"
android:text="6"
app:layout_column="2"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button34"
android:text="1"
app:layout_column="0"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button35"
android:text="2"
app:layout_column="1"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button36"
android:text="3"
app:layout_column="2"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>
</LinearLayout>
I have a GridLayout in my xml layout with width and height of 420dp. This GridLayout is filled by n*n buttons; I want to create a n*n board (like Sudoku or chess).
If n were constant I could do this by xml, and set height and width of buttons to 0dp to auto-size them. For example if n is 4, the width and height of each button is 420/4 = 105.
But the problem is n is not constant and is given at runtime by the user, so I can't use xml and must add buttons in Java. Below is the code I use to create them. The buttons are added just fine, but the problem is their size; they are not auto-sized.
I tried to give a size of 0dp in code with btns[i].setWidth(0) or btnsParam.width = 0, but neither worked. It doesn't matter if n is 3 or 10, the button size is always fixed.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.game_screen);
boardSize = (int)Math.pow(Integer.parseInt(getIntent().getExtras().getString("boardSize")),2);
btns = new Button[boardSize];
final GridLayout board = (GridLayout)findViewById(R.id.ninnboard);
board.setRowCount((int)Math.sqrt(boardSize));
board.setColumnCount((int)Math.sqrt(boardSize));
for (int i = 0; i < btns.length; i++) {
btns[i] = new Button(this);
btns[i].setTag(i);
btns[i].setText(0+"");
btns[i].setBackground(getResources().getDrawable(R.drawable.tiles));
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
GridLayout.LayoutParams btnsParam = new GridLayout.LayoutParams();
btnsParam.setMargins(px,px,px,px);
btns[i].setLayoutParams(btnsParam);
board.addView(btns[i]);
btns[i].setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
btnMove(v);
}
});
}
i conform that if n is fixed, i can do this by xml like below(n is 4). but n is not fixed or constant. and is given by user in runtime. so i need to add them by programming.
{<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".Game3Activity">
<android.support.v7.widget.GridLayout
android:layout_width="320dp"
android:layout_height="320dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark"
android:padding="3dp"
app:columnCount="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.62"
app:rowCount="4">
<Button
android:id="#+id/btn0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="0"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="1"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="2"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="3"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="4"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="5"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="6"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="7"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="8"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="9"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn10"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="10"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="11"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="12"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="13"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn14"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="14"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1" />
<Button
android:id="#+id/btn15"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="1dp"
android:background="#drawable/tiles"
android:fontFamily="#font/artifika"
android:onClick="btnMove"
android:tag="15"
android:text="0"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1" />
</android.support.v7.widget.GridLayout>
<TextView
android:id="#+id/hintTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginTop="10dp"
android:fontFamily="#font/artifika"
android:onClick="getHint"
android:text="#string/hint_name"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#color/colorAccent"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/resetTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="10dp"
android:fontFamily="#font/artifika"
android:onClick="reset"
android:text="#string/reset_name"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#color/colorAccent"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/winInformingTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="44dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:fontFamily="#font/artifika"
android:text="#string/win_informing_text"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textSize="25sp"
android:textStyle="bold"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/moveInformingTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/artifika"
android:text="#string/move_text"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/winInformingTextView"
app:layout_constraintVertical_bias="0.75" />
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:fontFamily="#font/artifika"
android:text="00:00:00"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/hintTextView"
app:layout_constraintHorizontal_bias="0.461"
app:layout_constraintStart_toEndOf="#+id/resetTextView"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>}
I am trying to stretch the keyboard of my calculator (which is a GridLayout with buttons inside of it). It is a 5*4(columns*rows).
I give GridLayout android:layout_height="match_parent" and android:layout_width="match_parent" to make its dimensions fill the available space. then
I assign the column and row indices to the cells with android:layout_column an android:layout_row accordingly.
I get the following result:
1080x1920
The cells take an uniform width and height, but do not stretch enough to fill the whole grid. So I searched online and saw that I could assign an equal weight to each cell and the layout figures out a uniform width and height value that fills the whole grid.
(Side question: how does android determine the size of these cells in this case? why did it not make them larger/smaller than what it is here?)
So I add:
android:layout_weight="1" and android:layout_height="1" to each of the buttons
I get this result:
1080x1920
Awesome. Looks like it is working as intended.. until I change the resolution to something else:
480x800
Or if I keep the same 1080x1920 resolution but force the min height of the top section to something like 280dp (279dp works fine)
How can I fix this? I am intending API Level 21 and I want to force the GridLayout to fill the available space no matter. I prefer the buttons to be squeezed (even have their content clipped/ invisible) rather than to shoot off the screen. To finish here is the XML:
main.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root">
<!--Top section (screen + few keys)-->
<LinearLayout
android:style="#style/CalculatorScreenStyle"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/top">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="280dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:hint="Enter a number here"/>
</LinearLayout>
<!-- Keyboard layout -->
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/keyboard"
android:columnCount="4"
android:rowCount="5">
<Button
android:style="#style/CalculatorButtonStyle"
android:text="C"
android:id="#+id/clearButton"
android:layout_column="0"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="Button"
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="%"
android:layout_column="2"
android:layout_row="0"
android:id="#+id/percentButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:id="#+id/divideButton"
android:layout_column="3"
android:layout_row="0"
android:text="÷" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="7"
android:layout_column="0"
android:layout_row="1"
android:id="#+id/sevenNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="8"
android:layout_column="1"
android:layout_row="1"
android:id="#+id/eightNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="9"
android:layout_column="2"
android:layout_row="1"
android:id="#+id/nineNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+"
android:layout_column="3"
android:layout_row="1"
android:id="#+id/plusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="4"
android:layout_column="0"
android:layout_row="2"
android:id="#+id/fourNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="5"
android:layout_column="1"
android:layout_row="2"
android:id="#+id/fiveNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="6"
android:layout_column="2"
android:layout_row="2"
android:id="#+id/sixNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="x"
android:layout_column="3"
android:layout_row="2"
android:id="#+id/multiplyButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="1"
android:layout_column="0"
android:layout_row="3"
android:id="#+id/oneNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="2"
android:layout_column="1"
android:layout_row="3"
android:id="#+id/twoNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="3"
android:layout_column="2"
android:layout_row="3"
android:id="#+id/threeNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="-"
android:layout_column="3"
android:layout_row="3"
android:id="#+id/minusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+/-"
android:layout_column="0"
android:layout_row="4"
android:id="#+id/signButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="0"
android:layout_column="1"
android:layout_row="4"
android:id="#+id/zeroNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="."
android:layout_column="2"
android:layout_row="4"
android:id="#+id/periodButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="="
android:layout_column="3"
android:layout_row="4"
android:id="#+id/equalsButton" />
</GridLayout>
</LinearLayout>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CalculatorButtonStyle" >
<item name="android:textSize">22sp</item>
<item name="android:layout_columnWeight">1</item>
<item name="android:layout_rowWeight">1</item>
<item name="android:background">#9E5EC2</item>
</style>
<style name="CalculatorScreenStyle">
<item name="android:background">#ED59E8</item>
</style>
</resources>
EDIT: As a temporary solution, I am using a vertical LinearLayout of horizontals LinearLayouts and I assing an equal weights to all the Buttons. It works fine but then I wonder what is the use of GridLayout if I have to emulate how it works myself..
When android API level < 21, it doesn't work well.
So we can add dependency in app gradle file:
implementation 'androidx.gridlayout:gridlayout:1.0.0'
If you've still not migrated to androidx (which you ought to), then use:
implementation 'com.android.support:gridlayout-v7:28.0.0'
Then change your code.
Use androidx.gridlayout.widget.GridLayout (or android.support.v7.widget.GridLayout, if not androidx) in your XML code.
<androidx.gridlayout.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="4"
app:rowCount="5">
<Button
android:id="#+id/clearButton"
style="#style/CalculatorButtonStyle"
android:text="C"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/button15"
style="#style/CalculatorButtonStyle"
android:text="Button"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/percentButton"
style="#style/CalculatorButtonStyle"
android:text="%"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/divideButton"
style="#style/CalculatorButtonStyle"
android:text="÷"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/sevenNumButton"
style="#style/CalculatorButtonStyle"
android:text="7"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/eightNumButton"
style="#style/CalculatorButtonStyle"
android:text="8"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/nineNumButton"
style="#style/CalculatorButtonStyle"
android:text="9"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/plusButton"
style="#style/CalculatorButtonStyle"
android:text="+"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/fourNumButton"
style="#style/CalculatorButtonStyle"
android:text="4"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/fiveNumButton"
style="#style/CalculatorButtonStyle"
android:text="5"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/sixNumButton"
style="#style/CalculatorButtonStyle"
android:text="6"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/multiplyButton"
style="#style/CalculatorButtonStyle"
android:text="x"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/oneNumButton"
style="#style/CalculatorButtonStyle"
android:text="1"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/twoNumButton"
style="#style/CalculatorButtonStyle"
android:text="2"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/threeNumButton"
style="#style/CalculatorButtonStyle"
android:text="3"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/minusButton"
style="#style/CalculatorButtonStyle"
android:text="-"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/signButton"
style="#style/CalculatorButtonStyle"
android:text="+/-"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/zeroNumButton"
style="#style/CalculatorButtonStyle"
android:text="0"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/periodButton"
style="#style/CalculatorButtonStyle"
android:text="."
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/equalsButton"
style="#style/CalculatorButtonStyle"
android:text="="
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
</androidx.gridlayout.v7.widget.GridLayout>
Note
The new attributes are:
app:layout_columnWeight
app:layout_rowWeight
app:layout_rowSpan
app:layout_columnSpan
This question already has answers here:
Buttons not visible on the application. What's wrong?
(5 answers)
ConstraintLayout views in top left corner
(5 answers)
Android Layout editor ConstraintLayout
(1 answer)
Closed 5 years ago.
I am new in android development. I was trying to create some buttons but in android studio its showing in design view but when I run it on emulator it do not show any button there.
Sorry I was trying to post code before but it was not posting. now code is here.
Please help.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sqatech.calculator.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/button19"
android:layout_width="88dp"
android:layout_height="59dp"
android:layout_marginStart="253dp"
android:text="="
android:visibility="visible"
tools:layout_editor_absoluteX="298dp"
tools:layout_editor_absoluteY="423dp" />
<Button
android:id="#+id/button18"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="+"
android:layout_marginStart="253dp"
tools:layout_editor_absoluteY="364dp"
tools:layout_editor_absoluteX="298dp" />
<Button
android:id="#+id/button17"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="-"
android:layout_marginStart="253dp"
tools:layout_editor_absoluteY="306dp"
tools:layout_editor_absoluteX="298dp" />
<Button
android:id="#+id/button16"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="x"
android:layout_marginStart="253dp"
tools:layout_editor_absoluteY="247dp"
tools:layout_editor_absoluteX="298dp" />
<Button
android:id="#+id/button15"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="/"
android:layout_marginStart="253dp"
tools:layout_editor_absoluteY="188dp"
tools:layout_editor_absoluteX="298dp" />
<Button
android:id="#+id/button14"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="."
android:layout_marginStart="191dp"
tools:layout_editor_absoluteY="423dp"
tools:layout_editor_absoluteX="211dp" />
<Button
android:id="#+id/button10"
android:layout_width="88dp"
android:layout_height="59dp"
android:layout_marginStart="55dp"
android:text="1"
android:visibility="visible"
tools:layout_editor_absoluteX="38dp"
tools:layout_editor_absoluteY="364dp" />
<Button
android:id="#+id/button11"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="2"
android:layout_marginStart="117dp"
tools:layout_editor_absoluteY="364dp"
tools:layout_editor_absoluteX="123dp" />
<Button
android:id="#+id/button12"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="3"
android:layout_marginStart="191dp"
tools:layout_editor_absoluteY="364dp"
tools:layout_editor_absoluteX="210dp" />
<Button
android:id="#+id/button13"
android:layout_width="173dp"
android:layout_height="60dp"
android:text="0"
android:layout_marginStart="55dp"
tools:layout_editor_absoluteY="423dp"
tools:layout_editor_absoluteX="38dp" />
<TextView
android:layout_width="348dp"
android:layout_height="59dp"
android:text="Hello World!"
android:id="#+id/textView"
android:layout_marginStart="67dp"
android:layout_marginEnd="67dp"
tools:layout_editor_absoluteY="129dp"
tools:layout_editor_absoluteX="31dp" />
<Button
android:id="#+id/button"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="%"
android:layout_marginStart="191dp"
tools:layout_editor_absoluteY="188dp"
tools:layout_editor_absoluteX="210dp" />
<Button
android:id="#+id/button3"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="+/-"
android:layout_marginStart="123dp"
tools:layout_editor_absoluteY="188dp"
tools:layout_editor_absoluteX="123dp" />
<Button
android:id="#+id/button2"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="7"
android:layout_marginStart="55dp"
tools:layout_editor_absoluteY="247dp"
tools:layout_editor_absoluteX="38dp" />
<Button
android:id="#+id/button5"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="8"
android:layout_marginStart="117dp"
tools:layout_editor_absoluteY="247dp"
tools:layout_editor_absoluteX="126dp" />
<Button
android:id="#+id/button6"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="9"
android:layout_marginStart="185dp"
tools:layout_editor_absoluteY="247dp"
tools:layout_editor_absoluteX="211dp" />
<Button
android:id="#+id/button7"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="4"
android:layout_marginStart="55dp"
tools:layout_editor_absoluteY="305dp"
tools:layout_editor_absoluteX="38dp" />
<Button
android:id="#+id/button8"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="5"
android:layout_marginStart="123dp"
tools:layout_editor_absoluteY="306dp"
tools:layout_editor_absoluteX="123dp" />
<Button
android:id="#+id/button9"
android:layout_width="88dp"
android:layout_height="59dp"
android:text="6"
android:layout_marginStart="185dp"
tools:layout_editor_absoluteY="305dp"
tools:layout_editor_absoluteX="210dp" />
<Button
android:id="#+id/button4"
android:layout_width="88dp"
android:layout_height="59dp"
android:layout_marginStart="24dp"
android:text="AC"
tools:layout_editor_absoluteY="189dp"
tools:layout_editor_absoluteX="38dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="20dp"
tools:layout_editor_absoluteX="0dp" />
I need to create smth like calculator keyboard. GridLayout is ideal for it (and only for it :) ). So, I use the one from Support Library (compile 'com.android.support:gridlayout-v7:22.2.0'. Here is my xml:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:columnCount="4"
app:rowCount="4"
android:layout_gravity="bottom"
android:layout_weight="4"
app:alignmentMode="alignBounds"
app:rowOrderPreserved="false"
app:orientation="horizontal">
<Button android:text="7"
android:id="#+id/button7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="8"
android:id="#+id/button8"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="9"
android:id="#+id/button9"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="←"
android:id="#+id/button_backspace"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="4"
android:id="#+id/button4"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="5"
android:id="#+id/button5"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="6"
android:id="#+id/button6"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="#string/clean"
android:id="#+id/button_clear"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="1"
android:id="#+id/button1"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="2"
android:id="#+id/button2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="3"
android:id="#+id/button3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button_clear_all"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill_vertical"
android:text="#string/clean_all"
app:layout_rowSpan="2"
android:background="#color/calculator_button_separator_color"
android:textColor="#drawable/light_button_text_color"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill_horizontal"
android:text="0"
app:layout_columnSpan="2"
style="#style/CalculatorButton"/>
<Button android:text="."
android:id="#+id/button_dot"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
</android.support.v7.widget.GridLayout>
On Android 4.3-4.4 all is okay:
But there are troubles on Android 4.1-4.2:
So, I cannot understand where is my bad.
Well, it was really bug in the support library. I replaced compile 'com.android.support:gridlayout-v7:22.2.0' with compile 'com.android.support:gridlayout-v7:22.0.+', made some magic with code, checked on 4.1 and 4.3 and now it's working!
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:columnCount="4"
app:rowCount="4"
android:layout_gravity="bottom"
android:layout_weight="4"
app:alignmentMode="alignBounds"
app:orientation="horizontal">
<Button android:text="7"
android:id="#+id/button7"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="8"
android:id="#+id/button8"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="9"
android:id="#+id/button9"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="←"
android:id="#+id/button_backspace"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="4"
android:id="#+id/button4"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="5"
android:id="#+id/button5"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="6"
android:id="#+id/button6"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="#string/clean"
app:layout_gravity="fill"
android:id="#+id/button_clear"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="1"
android:id="#+id/button1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="2"
android:id="#+id/button2"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="3"
android:id="#+id/button3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button_clear_all"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
android:text="#string/clean_all"
app:layout_rowSpan="2"
android:background="#color/calculator_button_separator_color"
android:textColor="#drawable/light_button_text_color"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
android:text="0"
app:layout_columnSpan="2"
style="#style/CalculatorButton"/>
<Button android:text="."
android:id="#+id/button_dot"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
</android.support.v7.widget.GridLayout>
Do you get any error on LogCat?
If you are not getting nothing on it try to import gridlayout-v7
compile 'com.android.support:gridlayout-v7:19.0.0'
Also get sure that you've got a 8+ minSdkVersion
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" />
Do you have tried to replace the android.support.v7.widget.GridLayout to GridLayout?
compile 'com.android.support:design:22.2.0'
or try to create a Adapter and add the datas to the GridView by that
I've just fixed this bug in my project. Adding android:layout_width="0dp" and android:layout_height="0dp" for all buttons solves the problem. Here are parts from my layout:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:padding="16dp"
app:columnCount="4"
app:rowCount="5"
app:orientation="horizontal">
<Button
android:text="Test"
app:layout_gravity="fill"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
...
</android.support.v7.widget.GridLayout>