I'm new to android development, and I am making a calculator in android studio. My calculator works fine but there isa problem with its layout I installed it on my tablet and the buttons were very small as I designed them in Android Studio on an emulator, the button size doesn't change, and need help so that the button size increases as the screen size changes.
My calculator design in Android Studio
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#ff000000">
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/clear"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="110dp"
android:background="@drawable/clear_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/plus_minus"
android:layout_alignBottom="@+id/clear"
android:layout_toRightOf="@+id/clear"
android:layout_toEndOf="@+id/clear"
android:layout_marginLeft="-11dp"
android:background="@drawable/pm_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/per"
android:layout_alignBottom="@+id/plus_minus"
android:layout_toRightOf="@+id/plus_minus"
android:layout_toEndOf="@+id/plus_minus"
android:layout_marginLeft="-11dp"
android:background="@drawable/per_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/div"
android:layout_alignTop="@+id/per"
android:layout_toRightOf="@+id/per"
android:layout_toEndOf="@+id/per"
android:layout_marginLeft="-11dp"
android:background="@drawable/div_btn"
android:layout_alignParentRight="false" />
<TextView
android:layout_width="fill_parent"
android:layout_height="70dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/disp"
android:layout_above="@+id/plus_minus"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="@android:color/white"
android:textSize="32sp"
android:inputType="none"
android:textStyle="normal"
android:gravity="right" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/seven"
android:layout_below="@+id/clear"
android:layout_toLeftOf="@+id/plus_minus"
android:layout_toStartOf="@+id/plus_minus"
android:layout_marginTop="-10dp"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:background="@drawable/seven_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/eight"
android:layout_alignTop="@+id/seven"
android:layout_alignLeft="@+id/plus_minus"
android:layout_alignStart="@+id/plus_minus"
android:background="@drawable/eight_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/nine"
android:layout_alignBottom="@+id/seven"
android:layout_alignLeft="@+id/per"
android:layout_alignStart="@+id/per"
android:background="@drawable/nine_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/mul"
android:layout_alignTop="@+id/nine"
android:layout_alignLeft="@+id/div"
android:layout_alignStart="@+id/div"
android:background="@drawable/mul_btn" />
<Button
android:layout_width="103dp"
android:layout_height="90dp"
android:id="@+id/four"
android:layout_below="@+id/seven"
android:layout_alignRight="@+id/seven"
android:layout_alignEnd="@+id/seven"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="@drawable/four_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/five"
android:layout_alignBottom="@+id/four"
android:layout_alignLeft="@+id/eight"
android:layout_alignStart="@+id/eight"
android:background="@drawable/five_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/six"
android:layout_alignTop="@+id/five"
android:layout_alignLeft="@+id/nine"
android:layout_alignStart="@+id/nine"
android:background="@drawable/six_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/sub"
android:layout_toEndOf="@+id/nine"
android:layout_alignTop="@+id/six"
android:layout_alignLeft="@+id/mul"
android:layout_alignStart="@+id/mul"
android:background="@drawable/min_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/one"
android:layout_below="@+id/four"
android:layout_alignLeft="@+id/four"
android:layout_alignStart="@+id/four"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="@drawable/one_btn" />
<Button
android:layout_width="203dp"
android:layout_height="90dp"
android:id="@+id/zero"
android:layout_below="@+id/one"
android:layout_alignLeft="@+id/one"
android:layout_alignStart="@+id/one"
android:layout_marginTop="-10dp"
android:background="@drawable/zero_btn"
android:layout_alignParentLeft="true"
android:layout_marginLeft="-7dp" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/two"
android:layout_above="@+id/zero"
android:layout_alignLeft="@+id/five"
android:layout_alignStart="@+id/five"
android:background="@drawable/two_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/three"
android:layout_below="@+id/five"
android:layout_alignLeft="@+id/six"
android:layout_alignStart="@+id/six"
android:layout_marginTop="-10dp"
android:background="@drawable/three_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/add"
android:layout_toEndOf="@+id/three"
android:layout_below="@+id/six"
android:layout_alignLeft="@+id/sub"
android:layout_alignStart="@+id/sub"
android:layout_marginTop="-10dp"
android:background="@drawable/plus_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/dot"
android:layout_below="@+id/two"
android:layout_alignRight="@+id/three"
android:layout_alignEnd="@+id/three"
android:layout_marginTop="-10dp"
android:background="@drawable/dot_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="@+id/equ"
android:layout_toEndOf="@+id/dot"
android:layout_below="@+id/three"
android:layout_alignLeft="@+id/add"
android:layout_alignStart="@+id/add"
android:layout_marginTop="-10dp"
android:background="@drawable/equ_btn" />
</RelativeLayout>
Then inside that Root Linear layout, I again take LinearLayout with layout_height = "0dp" (if you want vertical partition only otherwise layout_height = "wrap_content" and if you need horizontal then make layout_width = "0dp" and layout_weight =1 (1 is for 1 part of the screen you can also put the value in float like ...
The best way to create a responsive layout is to use ConstraintLayout as the base layout in your UI. ConstraintLayout enables you to specify the position and size of each view according to spatial relationships with other views in the layout. All the views can then move and resize together as the screen size changes.
Compact buttons appear smaller but have a larger tappable area. The default tappable area is 48x48dp.
You have to use layout_weight
in order to achieve what you want, and that will be used by wrapping each row of buttons inside a LinearLayout
and all that LinearLayouts
plus the TextView
will be wrapped inside one big LinearLayout
instead of your RelativeLayout
like the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:orientation="vertical"
android:weightSum="6" >
<TextView
android:id="@+id/disp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:inputType="none"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@android:color/white"
android:textSize="32sp"
android:textStyle="normal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/clear_btn" />
<!-- then the three remaining buttons -->
<LinearLayout />
<!-- then the four remaining rows -->
<!-- in the last row the "0" button will have layout_weight="2" NOT "1" -->
</LinearLayout>
</LinearLayout>
UPDATE:
use ImageButtons instead of Buttons for better scalability, and this is how you must use it:
<ImageButton
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/transparent"
android:src="@drawable/clear_btn"
android:scaleType="fitCenter" />
<!-- and so for all Buttons -->
Note here we changed:
1- layout_height
: from wrap_content
to match_parent
.
2- background
: removing the drawable(clear_btn) and making it transparent
.
and we added:
1- src
: assigning to it the drawable(clear_btn).
2- scaleType
: making it fitCenter
to make it scales in all the available area without ruining the Image scalability ratio.
P.S: in case you are want the Button to take all the area weather it is scalable or not, change scaleType
from fitCenter
to fitXY
(may be you will need that for the "0" Button).
If you want to support multiple screens never drag and drop and resize views manually.
You can check both the android:layout_weight
attribute and LinearLayout
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With