Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to adjust button size according to screen size in Android Studio

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

Calculator design

<?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>
like image 353
user889030 Avatar asked Dec 07 '14 12:12

user889030


People also ask

How to set layout according to screen size in android?

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 ...

How to deal with different screen sizes in android Studio?

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.

What should be size of button in Android?

Compact buttons appear smaller but have a larger tappable area. The default tappable area is 48x48dp.


2 Answers

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).

like image 133
Muhammed Refaat Avatar answered Oct 12 '22 23:10

Muhammed Refaat


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

like image 29
Ahmed Hegazy Avatar answered Oct 12 '22 22:10

Ahmed Hegazy