• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Button size and position on different android screen sizes

S

Supratip

Newbie
I'm new in android development and I've designed this page. I've given fixed button sizes and I know that's why all buttons don't fit when screen size changes. I haven't used height and weight as match_parent or wrap_content because then all buttons won't fit within the textview. I've used Constraint layout and not linear layout because I've also used horizontal guidelines to keep button positions intact on different screen size. How to fit all buttons on different screen size without changing the size of the buttons?

Here is my code :

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="195dp"
        android:background="@android:color/transparent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:background="@drawable/buttonarea"
        app:layout_constraintTop_toTopOf="@+id/guideline2"/>

    <Button
        android:id="@+id/button"
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="12dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="1"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="94dp"
        android:layout_marginLeft="94dp"
        android:layout_marginTop="12dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="2"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="180dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="12dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="3"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="100dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="4"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="92dp"
        android:layout_marginLeft="92dp"
        android:layout_marginTop="100dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="5"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.01"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="180dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="100dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="6"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="188dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="7"
        android:textSize="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginTop="188dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="8"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.333"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="180dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="188dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="9"
        android:textSize="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"/>

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="276dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="0"
        android:textSize="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"/>

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="92dp"
        android:layout_marginLeft="92dp"
        android:layout_marginTop="276dp"
        android:alpha="0.66"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="."
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.01"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginStart="180dp"
        android:layout_marginLeft="180dp"
        android:layout_marginTop="276dp"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="="
        android:textSize="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"/>

    <Button
        android:id="@+id/button5"
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="+"
        android:textSize="30dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="-"
        android:textSize="30dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginTop="188dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="*"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:layout_width="78dp"
        android:layout_height="79dp"
        android:layout_marginTop="276dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/buttons"
        android:fontFamily="monospace"
        android:text="/"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="559dp"
        app:layout_constraintGuide_percent="0.0"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="30dp"
        app:layout_constraintGuide_percent="0.352" />

</android.support.constraint.ConstraintLayout>


I've also uploaded my design page.
 

Attachments

  • Untitled.png
    Untitled.png
    5.9 KB · Views: 281
ConstraintLayout is notoriously tricky for beginners to get to grips with.
Looking at your UI, have you considered using GridLayout?
 
Another thing to note is that you need to use sp for text so that android automatically scales your text for all screen sizes. You're currently using dp for your text. Should be this...

XML: 
android:textSize="30sp"
 
You must log in or register to reply here.
Back
Top Bottom