What I'm trying to display to the screen is Image and buttons that cover the image and enable the user clicks on the buttons and slowly reveals the image behind the buttons.
The problem that the button does not appear at all,can not be seen at all.
In addition to that, I need x * x buttons that will fit to cover the whole image evenly.
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/cat">
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="4">
<Button
android:id="#+id/first"
android:textSize="20sp"
android:layout_width="55dp"
android:layout_height="55dp"
android:text="W"
android:textAlignment="center"
android:background="#drawable/signalsquare"
/>
</GridLayout>
This image is for demonstration purposes(sorry for the lack of symmetry in the buttons)
At first the user sees the image covered with buttons,then each click of each button reveals another small part of the image
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/questions" />
<LinearLayout
android:id="#+id/GridLayout1"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/q"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/w"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/e"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/r"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<Button
android:id="#+id/q"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/w"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/e"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/r"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<Button
android:id="#+id/q"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/w"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/e"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/r"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<Button
android:id="#+id/q"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/w"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/e"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
<Button
android:id="#+id/r"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="W"
android:layout_weight="1"
android:textAlignment="center"
android:background="#drawable/button_design"
/>
</LinearLayout>
</LinearLayout>
Related
I have the following layout. I have this layout but it does not fit of all devices.I had the problem that my layouts do not fit on every page and on smaller phones they leave the screen box, although I chose the match parent option for the necessary layouts.Can you help me to solve this problem?
Thanks a lot.
design
output
<?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=".MainActivity">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textViewInput"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:background="#color/white"
android:gravity="bottom|end"
android:maxLength="10"
android:padding="8dp"
android:textSize="36sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit7"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="7"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit8"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="8"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit9"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="9"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDivide"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onOperatorClick"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit4"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="4"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit5"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="5"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit6"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="6"
android:textSize="20sp" />
<Button
android:id="#+id/buttonMultiple"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onOperatorClick"
android:text="*"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit1"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="1"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="2"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit3"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="3"
android:textSize="20sp" />
<Button
android:id="#+id/buttonMinus"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onOperatorClick"
android:text="-"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDot"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDecimalPointClick"
android:text="."
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit0"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="0"
android:textSize="20sp" />
<Button
android:id="#+id/buttonClear"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="clearText"
android:text="CLR"
android:textSize="20sp" />
<Button
android:id="#+id/buttonPlus"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onOperatorClick"
android:text="+"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonEqual"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="3dp"
android:backgroundTint="#color/black"
android:onClick="onEqualClick"
android:text="="
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How about this one? I use a combination with RelativeLayout to get shortcode and fix android height and weight issues
size 6.0
size 5.0
<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=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible"
android:layout_alignParentBottom="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textViewInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="40"
android:background="#color/white"
android:text="Result"
android:gravity="bottom|end"
android:maxLength="10"
android:padding="8dp"
android:textSize="36sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit7"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="7"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit8"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="8"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit9"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="9"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDivide"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit4"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="4"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit5"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="5"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit6"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="6"
android:textSize="20sp" />
<Button
android:id="#+id/buttonMultiple"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="*"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDigit1"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="1"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="2"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit3"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="3"
android:textSize="20sp" />
<Button
android:id="#+id/buttonMinus"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onOperatorClick"
android:text="-"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDot"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDecimalPointClick"
android:text="."
android:textSize="20sp" />
<Button
android:id="#+id/buttonDigit0"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="onDigitClicked"
android:text="0"
android:textSize="20sp" />
<Button
android:id="#+id/buttonClear"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:onClick="clearText"
android:text="CLR"
android:textSize="20sp" />
<Button
android:id="#+id/buttonPlus"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="3dp"
android:layout_weight="1"
android:backgroundTint="#color/black"
android:text="+"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonEqual"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="3dp"
android:backgroundTint="#color/black"
android:text="="
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
when I try my app on my computer all the buttons are in the correct place.
but when I testing my app on my phone all the buttons changed.
how can I fix that?
This is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<Space
android:id="#+id/s1"
android:layout_width="match_parent"
android:layout_height="40dp"/>
<TextView
android:id="#+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/s1"
android:textSize="30sp" />
<Space
android:id="#+id/s2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="#id/tv"/>
<LinearLayout
android:id="#+id/ll789"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/s2"
android:orientation="horizontal">
<Button
android:id="#+id/buttonSeven"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"
android:textSize="20sp" />
<Button
android:id="#+id/buttonEight"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"
android:textSize="20sp" />
<Button
android:id="#+id/buttonNine"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"
android:textSize="20sp" />
<Button
android:id="#+id/buttonDivide"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll456"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll789"
android:orientation="horizontal">
<Button
android:id="#+id/buttonFour"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"
android:textSize="20sp" />
<Button
android:id="#+id/buttonFive"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"
android:textSize="20sp" />
<Button
android:id="#+id/buttonSix"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"
android:textSize="20sp" />
<Button
android:id="#+id/buttonMultiply"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="*"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll123"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll456"
android:orientation="horizontal">
<Button
android:id="#+id/buttonOne"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"
android:textSize="20sp" />
<Button
android:id="#+id/buttonTwo"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"
android:textSize="20sp" />
<Button
android:id="#+id/buttonThree"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"
android:textSize="20sp" />
<Button
android:id="#+id/buttonSubtract"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="-"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll123"
android:orientation="horizontal">
<Button
android:id="#+id/buttonDot"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="."
android:textSize="20sp" />
<Button
android:id="#+id/buttonZero"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0"
android:textSize="20sp" />
<Button
android:id="#+id/buttonEqual"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="="
android:textSize="20sp" />
<Button
android:id="#+id/buttonAdd"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/llC"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll0"
android:orientation="horizontal">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/buttonClear"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="C"
android:textSize="20sp" />
</LinearLayout>
I think maybe that's happened because of my phone in Hebrew and my computer in English.
This is most likely happening because the <application> tag in your AndroidManifest.xml file specifies android:supportsRtl="true". Assuming this attribute is there, any time the user (i.e. you) has their phone set to a right-to-left language, the contents of your LinearLayouts will be reversed.
You can set this attribute to false or you can add android:layoutDirection="ltr" to your LinearLayouts.
I am making a simple calculator using LinearLayout.
The problem is that it looks like this :
Instead of like this:
I simply want it to look like in the second image. I don't get why it doesn't.
Please, can someone help me with this?
Here's the pastie with the xml.
It's the android:baselineAligned="false" that you have to apply to all of your nested LinearLayouts.
See enhanced layout here.
use this layout:
use layout weightSum and layout_weight properly in your child buttons to align them with required space:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.tsvetan.exercise_4_calculator.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/clear"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="50dp"
android:layout_height="48dp"
android:layout_marginEnd="11dp"
android:layout_marginRight="11dp"
android:onClick="clear"
android:text="C"
android:textAlignment="center"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:id="#+id/number"
android:layout_width="306dp"
android:layout_height="56dp"
android:layout_gravity="end"
android:ems="10"
android:inputType="numberSigned|numberDecimal"
android:text="0"
android:textAlignment="viewEnd"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="seven"
android:text="7" />
<Button
android:id="#+id/but8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="eight"
android:text="8" />
<Button
android:id="#+id/but9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="nine"
android:text="9" />
<Button
android:id="#+id/plus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:elevation="0dp"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="+"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold" />
<Button
android:id="#+id/multiply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:text="*"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="four"
android:text="4" />
<Button
android:id="#+id/but5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="five"
android:text="5" />
<Button
android:id="#+id/but6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="six"
android:text="6" />
<Button
android:id="#+id/minus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="-"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
<Button
android:id="#+id/division"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:onClick="onOperatorClick"
android:text="/"
android:textAlignment="center"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="one"
android:text="1" />
<Button
android:id="#+id/but2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="two"
android:text="2" />
<Button
android:id="#+id/but3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="three"
android:text="3" />
<Button
android:id="#+id/equals"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2.4"
android:onClick="onOperatorClick"
android:padding="0px"
android:text="="
android:textAlignment="center"
android:textColorLink="#android:color/holo_orange_dark"
android:textSize="36sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:weightSum="5">
<Button
android:id="#+id/but0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.6"
android:onClick="zero"
android:text="0" />
<Button
android:id="#+id/butMult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8"
android:onClick="point"
android:text="."
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
output:
You don't need to put height to all of your buttons. Just put the height of linear layout and the rest will be match_parent. You will get what you want:
This question already has answers here:
How to support different screen size in android
(9 answers)
Closed 8 years ago.
I've made an android app and spent quite a bit of time making it fit perfectly on my screen (specifically part marked as "this part" on xml). To my surprise, everything appears out of place in other screens. How do I make sure that it looks the same in all screens?
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wood"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.luanca.charangomaster.ChordActivity"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="#+id/chordintip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/choose_root" />
<Button
android:id="#+id/chordin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/dark_plank"
android:text=""
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:id="#+id/emptymiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/emptymiddle"
android:layout_weight="1">
<TextView
android:id="#+id/chordintip2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/choose_type" />
<Button
android:id="#+id/chordin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/dark_plank"
android:text=""
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tip1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="#string/help" />
<!--This part doesn't fill all screens -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitCenter"
android:src="#drawable/chord_box1"
/>
<LinearLayout
android:id="#+id/tabgrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/firstrow"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
<TextView
android:id="#+id/fretposition1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="1"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="2"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="3"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="4"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="5"
android:textColor="#000000"/>
<Button
android:id="#+id/empty2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignTop="#+id/firstrow"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret22"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret23"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret31"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret32"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret33"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret34"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret41"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret42"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret43"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret44"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret51"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret52"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret53"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret54"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret55"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<Button
android:id="#+id/empty13"
android:layout_width="0dp"
android:layout_height="10dp"
android:layout_weight="1.15"
android:text=""
android:visibility="invisible" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton"
android:clickable="false"
android:checked="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton2"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton3"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton4"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton5"
android:clickable="false"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
My drawables:
You can move all your dp values to dimen.xml, dimen.xml(large), etc. , and set different values for all screensizes.
You have to create different layouts (.xmls) for different different screen resolutions and place it in layout folder accordingly
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
Or else you have to create layout without hardcoded heights or widths and with the help of scrollViews you can access that view
I am making an app in which I am doing the following:
25 buttons (the red, 5x5) that are equally distributed throughout an image in the background and on the left side 5 buttons (brown) a bit closer to the edge.
I have looked at a few similar questions here, with relative layout, but the problem is that as soon as I adjust for one screen size, it doesn't fit with another any more...
Here is how it looks on my phone screen:
On other screensizes:
Here is my code:
(a bunch of code before that, but part about the image):
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
android:src="#drawable/chord_box1" />
<LinearLayout
android:id="#+id/firstrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="4"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
<TextView
android:id="#+id/fretposition1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:id="#+id/fretposition2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:id="#+id/fretposition3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:id="#+id/fretposition4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="4" />
<TextView
android:id="#+id/fretposition5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<Button
android:id="#+id/empty2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret22"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret23"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret31"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret32"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret33"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret34"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret41"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret42"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret43"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret44"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret51"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret52"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret53"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret54"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret55"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<Button
android:id="#+id/empty13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
</RelativeLayout>
I've made the first row and tried to make it fit, but I'm not sure how to make it fit on different screens. Is this the right way to do it, or should it maybe be done on the java code instead of the xml?
Change the layout_height of your top-level LinearLayout to "match_parent". Then it will cover the entire screen vertically.
<LinearLayout
android:id="#+id/firstrow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
You might need to re-adjust the weights to make it look exactly as it did before.