I'm using android studio to create a simple calculator app using the GridLayout. However, it's not displaying on my device (yes, running it on my old note5 rather than emulator because it's goes a lot faster). In android studio in the design tab of the xml file it shows how I'd expect it to be, however when I run the app on my phone, thing's are a little weird. I'll post the screenshot of the app running on my phone as well as a screenshot of android studio design tab. I'll also post my full xml code in my activity_main.xml.
My Phone:
Android Studio:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.pvtboromeo.test.MainActivity"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:layout_row="0"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:enabled="false"
android:gravity="bottom|right"
android:paddingRight="15sp"
android:paddingBottom="15sp"
android:textAlignment="gravity"
android:textSize="40sp"
android:text="TEST" />
<Button
android:id="#+id/buttonC"
android:layout_column="0"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="C"/>
<Button
android:id="#+id/buttonNegative"
android:layout_column="1"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="+/-"/>
<Button
android:id="#+id/buttonPercent"
android:layout_row="2"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="%" />
<Button
android:id="#+id/buttonDivide"
android:layout_row="2"
android:layout_column="3"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button2"
android:textSize="20sp"
android:text="/" />
<Button
android:id="#+id/buttonSeven"
android:layout_column="0"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="7"/>
<Button
android:id="#+id/buttonEight"
android:layout_column="1"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="8"/>
<Button
android:id="#+id/buttonNine"
android:layout_row="3"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button1"
android:textSize="20sp"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
android:layout_row="3"
android:layout_column="3"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/button2"
android:textSize="20sp"
android:text="X" />
</GridLayout>
What am I doing wrong?
android:layout_rowWeight="1"
android:layout_columnWeight="1"
this attribute is only used in API21 and higher. you should use supportv7
GridLayout instead.
add this
compile 'com.android.support:gridlayout-v7:26.0.0-alpha1'
in your module's build.gradle.
then change you xml like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.pvtboromeo.test.MainActivity"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:background="#android:color/black"
android:textColor="#android:color/white"
app:layout_row="0"
app:layout_column="0"
app:layout_columnSpan="4"
app:layout_rowSpan="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:enabled="false"
android:gravity="bottom|right"
android:paddingRight="15sp"
android:paddingBottom="15sp"
android:textAlignment="gravity"
android:textSize="40sp"
android:text="TEST" />
<Button
android:id="#+id/buttonC"
app:layout_column="0"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="C"/>
<Button
android:id="#+id/buttonNegative"
app:layout_column="1"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="+/-"/>
<Button
android:id="#+id/buttonPercent"
app:layout_row="2"
app:layout_column="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="%" />
<Button
android:id="#+id/buttonDivide"
app:layout_row="2"
app:layout_column="3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="/" />
<Button
android:id="#+id/buttonSeven"
app:layout_column="0"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="7"/>
<Button
android:id="#+id/buttonEight"
app:layout_column="1"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="8"/>
<Button
android:id="#+id/buttonNine"
app:layout_row="3"
app:layout_column="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
app:layout_row="3"
app:layout_column="3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
android:background="#color/colorPrimary"
android:textSize="20sp"
android:text="X" />
</android.support.v7.widget.GridLayout>
notice, this is android.support.v7.widget.GridLayout not android.widget.GridLayout, and the attribute is
app:layout_rowWeight="1" not android:layout_rowWeight="1"
I suggest you to use a ConstraintLayout. Is the better way to do layouts with a lot of view.
It's the best way to have good performance too (and you need less time to program it).
More neasted view you have, more slowly works your activity.
For a simple layout of a calculator you can try to see my 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="com.example.moris.calcolatricelayoutconstraint.MainActivity">
<TextView
android:id="#+id/textView24"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="/"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView21" />
<TextView
android:id="#+id/textView25"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView22" />
<TextView
android:id="#+id/textView26"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="="
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView23" />
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="-"
app:layout_constraintBottom_toTopOf="#+id/textView24"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView18" />
<TextView
android:id="#+id/textView22"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="+"
app:layout_constraintBottom_toTopOf="#+id/textView25"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView19" />
<TextView
android:id="#+id/textView23"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="%"
app:layout_constraintBottom_toTopOf="#+id/textView26"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView20" />
<TextView
android:id="#+id/textView18"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="8"
app:layout_constraintBottom_toTopOf="#+id/textView21"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView15" />
<TextView
android:id="#+id/textView19"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/textView22"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<TextView
android:id="#+id/textView20"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="9"
app:layout_constraintBottom_toTopOf="#+id/textView23"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<TextView
android:id="#+id/textView15"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="5"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/textView19"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView17"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="6"
app:layout_constraintBottom_toTopOf="#+id/textView20"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="6dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="6dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="Insert numbers"
android:inputType="textPersonName"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintLeft_toRightOf="#+id/textView5"
app:layout_constraintRight_toLeftOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/textView16"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
android:gravity="center"
android:text="3"
app:layout_constraintBottom_toTopOf="#+id/textView17"
app:layout_constraintLeft_toRightOf="#+id/textView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
To do the border, I've created this xml file call "border", in drawable resource, and use that in the TextView's background:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners
android:radius="5dp"/>
If you want learn more about ConstraintLayout: https://developer.android.com/training/constraint-layout/index.html
In particulary, watch the video 4.
Related
Whenever I run this program on Emulator, the positions of the widgets change, I tried changing the emulator, size of the layout(Device For Preview), but it wasn't helpful. Please Help me Out.
One solution I got was by decreasing the size of widgets, and arranging widgets to the top of the layout, but it was very time consuming. Also any widget placed at the bottom of the layout wouldn't even show up in the Emulator.
Layout
Emulator
XML file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".button">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/addition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="76dp"
android:layout_marginEnd="116dp"
android:background="#D2F0FD"
android:padding="15dp"
android:text="10 + 5"
android:textColor="#000000"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/scoreBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="23dp"
android:layout_marginEnd="273dp"
android:background="#F44336"
android:padding="10dp"
android:text="0/0"
android:textSize="25dp" />
<TextView
android:id="#+id/result"
android:layout_width="183dp"
android:layout_height="61dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="487dp"
android:layout_marginEnd="49dp"
android:layout_marginBottom="92dp"
android:padding="5dp"
android:text="result"
android:textSize="30dp" />
<Button
android:id="#+id/play"
android:layout_width="127dp"
android:layout_height="64dp"
android:layout_marginStart="150dp"
android:layout_marginTop="-417dp"
android:layout_marginEnd="133dp"
android:layout_marginBottom="528dp"
android:onClick="playAgain"
android:text="Play Again!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="18dp"
android:layout_marginTop="23dp"
android:layout_marginEnd="26dp"
android:background="#FF9800"
android:padding="10dp"
android:text="30s"
android:textSize="25dp" />
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="167dp"
android:layout_marginEnd="0dp"
android:layout_marginBottom="182dp"
app:columnCount="2"
app:rowCount="2">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#2196F3"
android:onClick="chosAns"
android:tag="1"
android:text="Button"
android:textSize="30dp"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#E80909"
android:onClick="chosAns"
android:tag="2"
android:text="Button"
android:textSize="30dp"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#62F806"
android:onClick="chosAns"
android:tag="3"
android:text="Button"
android:textSize="30dp"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#8448E4"
android:onClick="chosAns"
android:tag="4"
android:text="Button"
android:textSize="30dp"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>
<Button
android:id="#+id/go"
android:layout_width="268dp"
android:layout_height="146dp"
android:layout_marginStart="64dp"
android:layout_marginTop="433dp"
android:background="#3FED46"
android:onClick="hideIt"
android:text="GO!!"
android:textSize="60dp"
android:visibility="invisible" />
</RelativeLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Because you are nesting Constraint Layout with Relative Layout which contains widget that may lead to overflowing.
I recently got a new computer and installed android studio on it. Now my grid is not taking the full width of the screen. I am almost certain it was taking the full width on my other install of android studio. I do not have a device to test on but on the emulators it is not working.
<?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="io.musicschool.app.NoteTrainerActivity">
<ImageView
android:id="#+id/intervalNoteImage"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/c4" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/intervalNoteImage"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:columnCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage"
>
<Button
android:id="#+id/unison_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:text="Unison"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min2nd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="Min 2nd"
android:textAllCaps="false"/>
<Button
android:id="#+id/maj2nd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="Maj 2nd"
android:textAllCaps="false" />
<Button
android:id="#+id/min3rd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Min 3rd"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj3rd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Maj 3rd"
android:textAllCaps="false" />
<Button
android:id="#+id/per4th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Per 4th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/aug4th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Aug 4th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/dim5th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Dim 5th"
android:textAllCaps="false" />
<Button
android:id="#+id/per5th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Per 5th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min6th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Min 6th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj6th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Maj 6th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min7th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Min 7th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj7th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="4"
android:text="Maj 7th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/oct_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="4"
android:text="Octave"
android:textAllCaps="false"
/>
</GridLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Making calculator UI using Constraint Layout but unable to stretch buttons to parent in different size of device. Want layout like first image in every device.
This is what I made.
This is what where it changing alignment.
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="330dp"
android:layout_margin="0dp"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:background="#android:color/background_dark"
android:gravity="bottom|right"
android:maxLength="17"
android:maxLines="2"
android:nestedScrollingEnabled="false"
android:text="#string/_0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="70sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<Button
android:id="#+id/button25"
android:layout_width="195px"
android:layout_height="wrap_content"
android:background="?attr/colorButtonNormal"
android:text="AC"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button26"
android:layout_width="195px"
android:layout_height="0dp"
android:layout_margin="0dp"
android:background="?attr/colorButtonNormal"
android:text="+/-"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/button25"
app:layout_constraintStart_toEndOf="#+id/button25" />
Code is big so adding starting Lines only.
You can add an 50%(or other percnet whatever you want) percnet horizontal Guideline,and create some chains.Use layout_constraintHorizontal_weight to proportionate the bottom buttons' width.
<?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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/button9"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="="
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="."
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button17" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintStart_toEndOf="#+id/button5"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button8"
app:layout_constraintStart_toEndOf="#+id/button6"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
app:layout_constraintBottom_toBottomOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button7"
app:layout_constraintTop_toTopOf="#+id/button5" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="AC"
app:layout_constraintBottom_toTopOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+/-"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button11"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="%"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button12"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button18"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button21" />
<Button
android:id="#+id/button18"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button19"
app:layout_constraintStart_toEndOf="#+id/button17"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button19"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="6"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button20"
app:layout_constraintStart_toEndOf="#+id/button18"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button20"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="-"
app:layout_constraintBottom_toBottomOf="#+id/button17"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button19"
app:layout_constraintTop_toTopOf="#+id/button17" />
<Button
android:id="#+id/button21"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/button17"
app:layout_constraintEnd_toStartOf="#+id/button22"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9" />
<Button
android:id="#+id/button22"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button23"
app:layout_constraintStart_toEndOf="#+id/button21"
app:layout_constraintTop_toTopOf="#+id/button21" />
<Button
android:id="#+id/button23"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toStartOf="#+id/button24"
app:layout_constraintStart_toEndOf="#+id/button22"
app:layout_constraintTop_toTopOf="#+id/button21" />
<Button
android:id="#+id/button24"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="x"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="#+id/button21"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button23"
app:layout_constraintTop_toTopOf="#+id/button21" />
</android.support.constraint.ConstraintLayout>
It looks like:
Using fixed width will cause issue on different screen
If you want it to be dynamically adjusted to every screen i suggest you to use constraint layout horizontal chaining
something like this:
<Button
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 1"
app:layout_constraintRight_toLeftOf="#+id/view2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View 2"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/view1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
It works pretty similar like weight in linear layout
further reference you can see here:
https://medium.com/#nomanr/constraintlayout-chains-4f3b58ea15bb
I am having trouble getting my scrollview working. Have tried many settings on these views.
<ImageView
android:id="#+id/noteImage"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/c4" />
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="112dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage">
<Button
android:id="#+id/c_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
<Button
android:id="#+id/csharp_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:text="C#" />
<Button
android:id="#+id/dflat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:text="Db"
android:textAllCaps="false" />
<Button
android:id="#+id/dsharp_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:text="D#" />
<Button
android:id="#+id/eflat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:text="Eb"
android:textAllCaps="false" />
<Button
android:id="#+id/e_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="1"
android:text="E" />
<Button
android:id="#+id/fsharp_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:text="F#" />
<Button
android:id="#+id/gflat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:text="Gb"
android:textAllCaps="false" />
<Button
android:id="#+id/g_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="2"
android:text="G" />
<Button
android:id="#+id/aflat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:text="Ab"
android:textAllCaps="false" />
<Button
android:id="#+id/a_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:text="A" />
<Button
android:id="#+id/asharp_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="3"
android:text="A#" />
<Button
android:id="#+id/b_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="4"
android:text="B" />
</GridLayout>
</ScrollView>
I have a GridLayout that displays a calculator screen. It looks very nice on many devices but utterly fails on small displays and even some big displays. There is a bug in GridLayout implementation but Google is not working on it. You can see details in my half year old question and an accepted answer: GridLayout collapses on small display
I tried to reimplement my layout. I started with new ConstraintLayout without luck. LinearLayout is quite close but I failed to stretch individual cells. They do not fill the available space. When I change a width from wrap_content to match_parent, the layout breaks totally.
All source code and a sample application is available at https://github.com/literakl/CalcTrouble.
Current Linear Layout
GridLayout when it works
Broken GridLayout on Nexus 5
Broken GridLayout on Nexus S
Layout source code
<LinearLayout
android:id="#+id/calc_content"
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:background="#color/bg_calc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Display row-->
<TextView
android:id="#+id/assignment"
android:text="50 + 40 = 90"
style="#style/Formula"
android:focusable="false"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_display_height"
tools:ignore="HardcodedText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 4-6, - -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit4"
android:text="4"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit5"
android:text="5"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit6"
android:text="6"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMinus"
android:text="-"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 1-3, * -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit1"
android:text="1"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit2"
android:text="2"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit3"
android:text="3"
style="#style/KeypadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonMultiply"
android:text="\u22C5"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
<!--row with 0, backspace and / -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/digit0"
android:text="0"
style="#style/KeypadLeftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonBackspace"
android:text="←"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_columnSpan="2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonDivide"
android:text=":"
style="#style/KeypadFunctionRightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
<!--row with button submit -->
<Button
android:id="#+id/buttonSubmit"
android:text="#string/action_next_formula"
style="#style/KeypadNextButton"
android:layout_width="match_parent"
android:layout_height="#dimen/calc_next_height"
app:layout_gravity="fill_horizontal"/>
</LinearLayout>
How can I achieve desired look that will work on all devices?
Make your button's width to 0dp, height to match_parent and layout_weight to 1 as in below sample for a single row
<!-- row with 7-9,+ -->
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum ="4"
android:orientation="horizontal"
android:layout_width="match_parent">
<Button
android:id="#+id/digit7"
android:text="7"
style="#style/KeypadLeftButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit8"
android:text="8"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/digit9"
android:text="9"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/buttonPlus"
android:text="+"
style="#style/KeypadFunctionRightButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
Using ConstraintLayouts you can achieve this :
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:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_bottom"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="9dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/button_bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_top">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/second_row"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button_first_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_first_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_first"
app:layout_constraintRight_toLeftOf="#+id/button_first_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_second"
app:layout_constraintRight_toLeftOf="#+id/button_first_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_first_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_first_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/second_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/third_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/first_row">
<Button
android:id="#+id/button_second_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_second_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_first"
app:layout_constraintRight_toLeftOf="#+id/button_second_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_second"
app:layout_constraintRight_toLeftOf="#+id/button_second_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_second_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_second_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/third_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toTopOf="#+id/fouth_row"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/second_row">
<Button
android:id="#+id/button_third_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_third_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_first"
app:layout_constraintRight_toLeftOf="#+id/button_third_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_second"
app:layout_constraintRight_toLeftOf="#+id/button_third_fourth"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_third_fourth"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/button_third_third"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/fouth_row"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/third_row">
<Button
android:id="#+id/button_fourth_first"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_second"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_second"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_first"
app:layout_constraintRight_toLeftOf="#+id/button_fourth_third"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button_fourth_third"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintLeft_toRightOf="#+id/button_fourth_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>