0

I am trying to make an android Calculator app but however i am stuck on one thing, there is some extra space coming up while using grid layout.

enter image description here

Now i know i have used match parent value for the layout height and width which might be the reason for the extra spacing in the image.

Since , i am new to android and i am just learning more and more of android, could anyone let me know , how can i evenly distribute those buttons on the grid layout?

Code

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.tilak.myfirstapplication.MainActivity">


    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/editText3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="225dp"
            android:ems="10"
            android:layout_gravity="fill_horizontal"
            android:inputType="textMultiLine"
            tools:layout_editor_absoluteX="104dp"
            tools:layout_editor_absoluteY="207dp" />



        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:rowCount="5"
            android:columnCount="4"

            android:background="#ff0000"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">
            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"

                android:layout_row="0"
                android:layout_column="0"
                tools:layout_editor_absoluteX="136dp"
                tools:layout_editor_absoluteY="100dp" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="1"
                tools:layout_editor_absoluteX="116dp"
                tools:layout_editor_absoluteY="289dp" />


            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="2"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="255dp" />



            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="3"
                tools:layout_editor_absoluteX="41dp"
                tools:layout_editor_absoluteY="180dp" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="1"
                android:layout_column="0"
                tools:layout_editor_absoluteX="64dp"
                tools:layout_editor_absoluteY="259dp" />



            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="1"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="1"
                android:layout_column="2"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="217dp" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="1"
                android:layout_column="3"
                android:text="Button"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="168dp" />


            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="0"
                android:text="Button" />

            <Button
                android:id="@+id/button13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="2"
                android:text="Button" />
            <Button
                android:id="@+id/button15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="3"
                android:text="Button" />




            <Button
                android:id="@+id/button16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="0"
                android:text="Button" />


            <Button
                android:id="@+id/button17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="2"
                android:text="Button" />


            <Button
                android:id="@+id/button19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="3"
                android:text="Button" />
            <Button
                android:id="@+id/button20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="0"
                android:text="Button" />
            <Button
                android:id="@+id/button21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="1"
                android:text="Button" />
            <Button
                android:id="@+id/button22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="2"
                android:text="Button" />
            <Button
                android:id="@+id/button23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="3"
                android:text="Button" />
        </GridLayout>
    </LinearLayout>


</android.support.constraint.ConstraintLayout>
Tilak Raj
  • 1,369
  • 5
  • 31
  • 64

2 Answers2

1

I suggest using the weight attribute to make the child views share the space equally. There's another post here on StackOverflow with a great answer that covers the subject:

https://stackoverflow.com/a/30245753/2281718

In short, just set the width to 0dp and add the android:layout_columnWeight="1" for all children

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_columnWeight="1"
    ...
    />
patrick.elmquist
  • 2,113
  • 2
  • 21
  • 35
  • Could you please explain this code? it worked but i still didn't get it. I would appreciate it. Plus why 0dp helped? – Tilak Raj Nov 22 '17 at 16:12
  • Glad it worked :) The `weight` is basically just a way to divide the available space. So if your `GridLayout` is as wide as the device and you add 2 views with `weight=1` then they will each get half the parent width. If you'd have 3 views then each would get a third of the total width. The `0dp` part is an optimization, I've never actually read up on why it's supposed to better. Personally I just use it to quickly see that a view size will be determined at runtime and based on available space. – patrick.elmquist Nov 22 '17 at 16:24
  • its not for optimization, basically it lets the android know on which it should work, here you used width =0 , so it sets the weight on the width thing.Just read it somewhere, i think you got what i am trying to say :) – Tilak Raj Nov 22 '17 at 16:25
  • you want to implement a table with two equally-sized columns. Each table row is a horizontal linear layout with two "table cells" (for example, TextViews), each one having layout_weight=.5. If you specify layout_width="wrap_content" on the "table cells," the content width will be added to the width calculated by layout_weight, the table cells will be all different sizes, and the columns won't line up correctly. So you have to set layout_width=0dp so that android only uses layout_weight to calculate the width of the cells – Tilak Raj Nov 22 '17 at 16:26
  • ^actual statement – Tilak Raj Nov 22 '17 at 16:27
0

Use place holder like this. This is not exact XML.

<button 1/>
<textview weight=1>
<button 2/>
<textview weight=1>
<button 3/>
<textview weight=1>
<button 4/>
Younghwa Park
  • 392
  • 2
  • 9