0

Im trying to make a calculator app, and im using a grid view in a fragment for the numbers but i cant manage to make the buttons fill the part that they should trying in different devices.

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="419dp"

    android:layout_margin="0dp"
    android:padding="0dp"
    app:columnCount="4"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="100"
    app:rowCount="4"
    app:useDefaultMargins="false">

    <Button
        android:id="@+id/but_7"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="7"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_8"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:lineSpacingExtra="0sp"
        android:onClick="AddBut"
        android:text="8"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_9"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="9"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_div"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="÷"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_4"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="4"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_5"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="5"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_6"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="6"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_mult"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="x"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_1"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="1"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_2"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="2"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_3"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="3"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_min"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="-"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_0"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="AddBut"
        android:text="0"
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_dot"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="."
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_eq"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="="
        android:textSize="36sp" />

    <Button
        android:id="@+id/but_plus"
        android:layout_width="96sp"
        android:layout_height="96sp"
        android:layout_marginLeft="-3sp"
        android:layout_marginTop="-5sp"
        android:layout_marginRight="-3sp"
        android:layout_marginBottom="-5sp"
        android:onClick="ButOP"
        android:text="+"
        android:textSize="36sp" />
</android.support.v7.widget.GridLayout>

This is how i have the layout at the moment, it fits my phone, but it leaves margins in the nexus 5X emulator. I tried with rowWeight and columnWeight, but i dont know if it just simply works, or if im doing something wrong. Also tried changing between dp and sp... i tried a lot searching for how to use percentage based on secreen or similar, but none worked (or i couldnt make it work...)

What i want is the buttons to fill the width of the screen in any device, and make the height be the same as the width for each buton, like height=btn.getwidth(); i dont kknow if thats possible.

I know i sound like a exteme noob but im learning, so pls dont get angry with me.

PixelFox
  • 57
  • 1
  • 7
  • Don't use `sp` for element dimensions. Instead use `dp`. The `sp` is for text dimensions. This is not a solution to your problem, but just a tip, in general. – Barns Dec 19 '18 at 02:09
  • 1
    You should learn to use `ConstaintLayout`, it can do whatever you want, in your case, the key word is `a chain`, see more https://developer.android.com/training/constraint-layout/ – GianhTran Dec 19 '18 at 02:59

3 Answers3

1

Thanks to GianhTran's comment, in developer.android.com/training/constraint-layout I found a calculator layout, and tunning it i managed what i wanted.

First of all: use a constraint layout, and link each side of the buttons to the buttons next to them and margins. Then using match_constraint for both width and height. and if i want to make the buttons always squared: nest the layout in another constraint layout and apply a size ratio "1:1" TO THE NESTED LAYOUT, NOT THE BUTTONS.

The final xml is this:

<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:orientation="vertical">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="@android:color/holo_orange_dark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0">

    <Button
        android:id="@+id/button6"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"

        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="3"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button12"
        app:layout_constraintLeft_toRightOf="@+id/button13"
        app:layout_constraintRight_toLeftOf="@+id/button23"
        app:layout_constraintTop_toBottomOf="@+id/button9"
        tools:text="6" />

    <Button
        android:id="@+id/button26"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="subtract"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button25"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button24" />

    <Button
        android:id="@+id/button8"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="5"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button13"
        app:layout_constraintLeft_toRightOf="@+id/button7"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="8" />

    <Button
        android:id="@+id/button10"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"

        android:text="7"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button14"
        app:layout_constraintRight_toLeftOf="@+id/button25"
        app:layout_constraintTop_toBottomOf="@+id/button11"
        tools:text="0" />

    <Button
        android:id="@+id/button12"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="9"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button25"
        app:layout_constraintLeft_toRightOf="@+id/button11"
        app:layout_constraintRight_toLeftOf="@+id/button24"
        app:layout_constraintTop_toBottomOf="@+id/button6"
        tools:text="3" />

    <Button
        android:id="@+id/button24"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="add"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button26"
        app:layout_constraintLeft_toRightOf="@+id/button12"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button23" />

    <Button
        android:id="@+id/button5"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="2"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button4"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button13"
        app:layout_constraintTop_toBottomOf="@+id/button7"
        tools:text="4" />

    <Button
        android:id="@+id/button14"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="dot"

        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button9"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"

        android:text="6"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        app:layout_constraintRight_toLeftOf="@+id/button22"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="9" />

    <Button
        android:id="@+id/button11"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="8"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button10"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintRight_toLeftOf="@+id/button12"
        app:layout_constraintTop_toBottomOf="@+id/button13"
        tools:text="2" />

    <Button
        android:id="@+id/button13"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="0"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button11"
        app:layout_constraintLeft_toRightOf="@+id/button5"
        app:layout_constraintRight_toLeftOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/button8"
        tools:text="5" />

    <Button
        android:id="@+id/button23"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="multiply"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button24"
        app:layout_constraintLeft_toRightOf="@+id/button6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button22" />

    <Button
        android:id="@+id/button22"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="divide"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button23"
        app:layout_constraintLeft_toRightOf="@+id/button9"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button25"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"

        android:text="equals"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button10"
        app:layout_constraintRight_toLeftOf="@+id/button26"
        app:layout_constraintTop_toBottomOf="@+id/button12" />

    <Button
        android:id="@+id/button4"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"

        android:layout_marginRight="1dp"

        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="1"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button14"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button11"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        tools:text="1" />

    <Button
        android:id="@+id/button7"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:background="@drawable/ripple2"
        android:text="4"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button8"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="7" />
</android.support.constraint.ConstraintLayout>

Thanks to GianhTran

PixelFox
  • 57
  • 1
  • 7
0

Button has 'minHeight' and 'minWidth' attribute itself. Maybe you can try 

android:minHeight="0dp"
android:minWidth="0dp"

in each Button to remove the default margin in each Button.

Robot Maniac
  • 1
  • 3
0

You can get screen size when runtime by using layout.getViewTreeObserver(); then in the listener you can use int width = layout.getMeasuredWidth(); to get width and int height = layout.getMeasuredHeight(); to get height. So now you can resize your Button when the application load (OnCreate). You can check this link for more information Here=> Get height and width of a layout programmatically.

One more solution you make use of Constraint Layout. It is very useful and flexible, I promised you will love it. Please let's me know If it working

Sovandara LENG
  • 129
  • 1
  • 12