I'm trying to make space between 2 buttons (Send and Clear) to be even.
It's adjusting to borders and vertical guideline which is in the center of the screen.
It seems to be fine on the project but it doesn't look like that in the app itself.
Please check below screenshots.
Project
App
<?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.f3nr1r.testkeyboard.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/buttonClear"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="clearText"
android:text="Clear"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button8"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="9"
app:layout_constraintBaseline_toBaselineOf="#+id/button8"
app:layout_constraintLeft_toRightOf="#+id/button8"
android:layout_marginLeft="8dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="7"
app:layout_constraintRight_toLeftOf="#+id/button8"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button8" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="6"
app:layout_constraintLeft_toRightOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="8"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button5"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="4"
app:layout_constraintRight_toLeftOf="#+id/button5"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button5" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Type something here..."
android:inputType="textPersonName"
android:maxLines="1"
android:selectAllOnFocus="false"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="3"
app:layout_constraintLeft_toRightOf="#+id/button2"
android:layout_marginLeft="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="2"
app:layout_constraintTop_toTopOf="#+id/guideline3"
android:layout_marginTop="60dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInput"
android:text="1"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginRight="8dp"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" />
<Button
android:id="#+id/buttonSend"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:onClick="sendText"
android:text="Send"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_end="192dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="154dp"
android:orientation="horizontal" />
</android.support.constraint.ConstraintLayout>
I figured it out.
Constraint to the middle guideline should be removed and you can adjust the place with margins.
In XML, below lines should be removed from these buttons ("buttonSend" and "buttonClear").
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
Related
I'm learning Android Development. I followed the google guide on developing a simple app if you already have programming experience. Now, I'm attempting to make a simple calculator. I seem to have some misunderstanding with constraints still. Below is how it looks in preview vs on my device (I can't simulate as my processor doesn't have the appropriate intrinsics).
Here's a pic:
I've tried watching some tutorials and reading online, what I've gotten is to have one constraint following another, parent<- child1 <- child2, etc.
<?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">
<Button
android:id="#+id/button11"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button12"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button13"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9"
app:layout_constraintVertical_bias="0.052" />
<Button
android:id="#+id/button10"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button6"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button9"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<EditText
android:id="#+id/calcResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:ems="10"
android:inputType="numberDecimal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.54"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Space
android:id="#+id/space"
android:layout_width="8dp"
android:layout_height="18dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="44dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/space"
app:layout_constraintStart_toEndOf="#+id/button30"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="44dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button33"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button8" />
<Button
android:id="#+id/button2"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button3"
android:layout_width="110dp"
android:layout_height="100dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
</androidx.constraintlayout.widget.ConstraintLayout>
As can be seen from the pic, the buttons are off the bottom of the screen. It also seems the spaces I design in the preview are different on the hardware. Thanks!
Now, I'm attempting to make a simple calculator. I seem to have some
misunderstanding with constraints still
Here, as for this layout, I overlooked and fixed it and hopefully according to your desire. And Reduced each button height to match with the resolution of the device screen.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/button11"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button12"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button5"
app:layout_constraintVertical_bias="0.012" />
<Button
android:id="#+id/button13"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9"
app:layout_constraintVertical_bias="0.018" />
<Button
android:id="#+id/button10"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button6"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button9"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<EditText
android:id="#+id/calcResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:ems="10"
android:inputType="numberDecimal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Space
android:id="#+id/space"
android:layout_width="8dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/space"
app:layout_constraintStart_toEndOf="#+id/button30"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button33"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calcResult" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button8" />
<Button
android:id="#+id/button2"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginRight="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.507"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/space" />
<Button
android:id="#+id/button3"
android:layout_width="110dp"
android:layout_height="70dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space" />
</android.support.constraint.ConstraintLayout>
layout_marginStart and layout_marginLeft are same, so just use one of them.
Some design suggestions:
Try and fix all the yellow warnings, fixing all the warnings for layouts will have 40% of your work done as per designing. And 10% depends on the size and position of each items on the layout. Rest 50% is a bit hard but not that hard. For showing you a example for this, when designing is ready for the layout and having fixed all the warning, press the "Orientation For Preview" button to set the Landscape mode. You will see that everything is messed up. Fixing this will need to make a separate layout for the landscape view. Now, why am I saying about Landscape ?
Here comes the second part of the answer of your question:
the buttons are off the bottom of the screen
Layout size is not same for all devices which you already know. So, when designing layouts, you have to keep track of the resolution of the screen. This is the reason the buttons are out off the screen. The resolution of the preview screen and the device screen are not same for your case. Try to select the preview resolution according to the device you are testing with by clicking the "Device For Preview" or 'Pixel' button of the layout preview.
Last but not the least, for both better understanding the design criteria along with best practices of performance, complete all the 11 lessons from Udacity on "Developing Android Apps" course (free).
Please choose relativeLayout as your parent layout. In that use a linearLayout with vertical orientation. Inside this place your calculator screen(EditText) first with center-horizontal orientation. Then place a center-horizontal oriented horizontalLinearLayout and populate this with the top most row buttons. Next for the numeric keypad, use a table layout with center orientation. You can then easily populate this table layout with your buttons.
Hope this helps.
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
You can use Use ConstraintLayout with guidelines and Chains to support different screen sizes.
Here is an example of a similar layout using ConstraintLayout without any fixed size values (one layout for all screen sizes):
<?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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button3"
app:layout_constraintTop_toTopOf="#+id/button3" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintEnd_toStartOf="#+id/button13"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/button16"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button14"
app:layout_constraintStart_toEndOf="#+id/button11"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button15"
app:layout_constraintStart_toEndOf="#+id/button12"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button10"
app:layout_constraintEnd_toStartOf="#+id/button5"
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="Button"
app:layout_constraintBottom_toTopOf="#+id/button11"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button9" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button12"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button11" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button7"
app:layout_constraintTop_toBottomOf="#+id/button16" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button8"
app:layout_constraintTop_toBottomOf="#+id/button14" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button13" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center_horizontal"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".3" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this:
I have the following layout in an Activity of my Android app:
There are 3 sections and 10 buttons, with icon and text.
As you can see on large screen (most of phones nowadays) I get a lot of blank space at the bottom of the screen.
Do you know how to make the GridView using all the room and filling that white part?
Is it possible to make it responsive so every row and column of the grid could adapt according to screen size?
Here are my XML files:
my_activity.xml (used by my Activity)
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:contentDescription="#string/logo"
android:src="#drawable/company_logo" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:textColor="#ffffff"
android:text="#string/menu1"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu2"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:verticalSpacing="5dp" >
</GridView>
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="26dp"
android:background="#4d4d4d"
android:layout_marginTop="10dp"
android:textColor="#ffffff"
android:text="#string/menu3"
android:gravity="center"
android:textSize="16sp" />
<GridView
android:id="#+id/gridView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:numColumns="2"
android:verticalSpacing="5dp" >
</GridView>
gridview_row.xml (used by a GridViewAdapter)
<ImageView
android:layout_height="32dp"
android:id="#+id/imageView1"
android:layout_width="32dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:text="TextView"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true"
android:textSize="18sp"
android:ellipsize="marquee">
</TextView>
</RelativeLayout>
You better use ConstraintLayout if you want to have a responsive layout for all devices, here is an example of constraint layout with some guidelines:
<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:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="logo"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/firstsection"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="first section"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="5"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintHorizontal_bias="0.548"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="6"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/button3" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="4"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="3"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="second section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="7"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="8"
app:layout_constraintBottom_toTopOf="#+id/guideline9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="third section"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline9" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="10"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button10" />
Here is how the layout will look on your screen:
Remember that this is just an example and you can change the ratio/height/width of the views as you like.
A small note on guidelines - they are very comfortable to use and in the above example you can see that I gave the guidelines Percents in order to tell them how to be placed (relatively to the screen) on the screen.
I have this layout on Fragment. It has 3 Buttons. Below Button3 there is one TextView.When this layout is set I am checking some conditions. If that condition is satisfied I am showing the Button3. But if the condition is not satisfied I need to hide the button.
This is how the layout looks after hiding Button3
It appears to be a lot of blank space between the TextView and Button2 when the button is hidden but in my XML layout, it is present there. How to avoid this so that it doesn't appear blank space?
This is code for XML
<?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:id="#+id/myConstraint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/allscreenbackground">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tabIndicator"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Table: "
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/tableName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="#+id/toolbar2" />
<TextView
android:id="#+id/tableName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/full_name"
app:layout_constraintEnd_toEndOf="#+id/toolbar2"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toEndOf="#+id/name" />
<TextView
android:id="#+id/full_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="10dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="marquee"
android:gravity="center"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/toolbar2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tableName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="28dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="0dp"
android:text="Pax -"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/people"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Occupied Since :"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/lapsedTime"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/people"
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"
android:text=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/toolbar2"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lapsedTime"
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"
android:text=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.18" />
<Button
android:id="#+id/shift"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:gravity="center"
android:text="Button 1"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.283" />
<Button
android:id="#+id/end"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 2"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.387" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="40dp" />
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/isBday"
android:visibility="invisible"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65"
app:srcCompat="#drawable/birthday" />
<ImageView
android:visibility="invisible"
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.78"
app:srcCompat="#drawable/ring_new" />
<TextView
android:visibility="visible"
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Hello"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64" />
<TextView
android:visibility="invisible"
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
</android.support.constraint.ConstraintLayout>
If you want to hide the spaces of the object use it:
boolean myCondition = true;
if(myCondition) {
Button3.setVisibility(View.GONE);
}
else {
Button3.setVisibility(View.VISIBLE);
}
The problem was because of incorrect constraint. You have constrained most of your views TOP to parent and set bias to align it. Instead of that, do align under your consecutive views. It will work as your requirement.
For better understanding, I have edited your xml file. Replace and check it out.
<........./>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
.............../>
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/end" />
<ImageView
android:id="#+id/isBday"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isBdayText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isBdayText"
app:srcCompat="#drawable/birthday" />
<ImageView
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isAniversaryText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isAniversaryText"
app:srcCompat="#drawable/ring_new" />
<TextView
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Hello"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/freeThisTable" />
<TextView
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="TextView"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/isBdayText" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
.............. />
This is my first time programming in android studio and I need help in figuring out how to compare options selected by the user based on the radio buttons and query an api to pull data from a website. Below is the code of the layout.The results are supposed to be displayed on another page, thank you.
<?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"
android:background="#0663ba"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="#+id/button"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#000000"
android:text="#string/search"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText"
android:layout_width="172dp"
android:layout_height="50dp"
android:layout_marginBottom="32dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="#string/zip_code"
android:inputType="textPostalAddress"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView2"
android:layout_width="175dp"
android:layout_height="44dp"
android:layout_marginBottom="48dp"
android:layout_marginStart="8dp"
android:fontFamily="sans-serif"
android:text="#string/select_date_range"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/radioGroup6"
android:layout_width="144dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:textColor="#FFFFFF"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/radioGroup7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/imageButton">
<RadioButton
android:id="#+id/radioButton8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="true"
android:text="#string/_1_week"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton9"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/_2_weeks"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/_3_months"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</RadioGroup>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="44dp"
android:layout_marginBottom="28dp"
android:layout_marginStart="16dp"
android:text="#string/select_crime_type"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/radioGroup7"
android:layout_width="144dp"
android:layout_height="0dp"
android:layout_marginBottom="11dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:textColor="#FFFFFF"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/radioGroup6">
<RadioButton
android:id="#+id/radioButton13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/rape"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton15"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/assault"
android:textColor="#FFFFFF"
android:textSize="18sp" />
<RadioButton
android:id="#+id/radioButton14"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/murder"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</RadioGroup>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="33dp"
android:text="#string/search_for_criminal_or_victim"
android:textAlignment="viewStart"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/editText3"
app:layout_constraintEnd_toEndOf="#+id/radioGroup7"
app:layout_constraintTop_toBottomOf="#+id/radioGroup7" />
<EditText
android:id="#+id/editText3"
android:layout_width="195dp"
android:layout_height="45dp"
android:layout_marginBottom="66dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="#string/enter_full_name"
android:inputType="textPersonName"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="147dp"
android:layout_marginBottom="76dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:backgroundTint="#a91818"
android:scaleType="fitCenter"
android:src="#drawable/new_crime_img"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/radioGroup6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I have a constraint layout inside a scroll view, with "adjustResize" in AndroidManifest.xml, because i want my views to resize when the user taps on an edit text. The problem is that sometimes (almost randomly) when I tap on the edit text (so the keyboard opens) or when i exit from the keyboard (pressing back button) the button is cut. This is what happens:
This is my layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="wrap_content"
android:paddingBottom="50dp">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.056"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/editText3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="31dp"
android:layout_height="35dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/spinner2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_qrcode_grey600_24dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="24dp"
android:layout_marginTop="32dp"
android:background="#android:color/transparent"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/spinner2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/editText3"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<Spinner
android:id="#+id/spinner"
android:layout_width="68dp"
android:layout_height="27dp"
android:layout_marginTop="48dp"
app:layout_constraintEnd_toEndOf="#+id/spinner2"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="68dp"
android:layout_height="27dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="48dp"
android:theme="#style/SpinnerSendFunds"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<Spinner
android:id="#+id/spinner5"
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:theme="#style/SpinnerSendFunds"
app:layout_constraintBottom_toBottomOf="#+id/editText5"
app:layout_constraintEnd_toEndOf="#+id/spinner"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/editText5" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4"
app:srcCompat="#drawable/add" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/buttons2"
android:text="SEND"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/spinner5"
app:layout_constraintTop_toBottomOf="#+id/spinner5" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:text="Add Additional Data"
android:textColor="#color/colorPrimary"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<EditText
android:id="#+id/editText4"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="number"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<EditText
android:id="#+id/editText5"
android:layout_width="113dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="numberDecimal"
android:theme="#style/EditTextStyleSendFunds"
app:layout_constraintEnd_toEndOf="#+id/textView7"
app:layout_constraintStart_toStartOf="#+id/textView7"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="110dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="#+id/editText2"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
<TextView
android:id="#+id/textView7"
android:layout_width="110dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
</android.support.constraint.ConstraintLayout>
</ScrollView>