Constraint Layout not working; the layout is destroyed across devices - java

Desired Layout Photo
Current Layout Photo when tested
Across different devices the layout changes drastically. I have looked around on google for answers but nothing has provided clarity between what is the right way to do things and what is not. What can be done?
Note: There are twenty identical copies of the last image view that are not included in the code below. They are meant to be moved around for graphics.
<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">
<com.example.castbuddyv1.FFVisuals
android:id="#+id/FFVisuals"
android:layout_width="389dp"
android:layout_height="781dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rawdata" />
<Button
android:id="#+id/right2"
android:layout_width="59dp"
android:layout_height="48dp"
android:layout_marginStart="84dp"
android:layout_marginLeft="84dp"
android:layout_marginTop="658dp"
android:layout_marginBottom="29dp"
app:icon="#drawable/abc_vector_test"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/onoff"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.39" />
<ToggleButton
android:id="#+id/onoff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="700dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:rotation="0"
android:textOff="Motors On"
android:textOn="Motors Off"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.922" />
<Button
android:id="#+id/right"
android:layout_width="59dp"
android:layout_height="48dp"
android:layout_marginTop="658dp"
android:layout_marginEnd="51dp"
android:layout_marginRight="51dp"
android:layout_marginBottom="29dp"
android:rotation="180"
app:icon="#drawable/abc_vector_test"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/onoff"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/statusdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="166dp"
android:layout_marginLeft="166dp"
android:layout_marginTop="595dp"
android:layout_marginEnd="183dp"
android:layout_marginRight="183dp"
android:layout_marginBottom="44dp"
android:text="Status:"
app:layout_constraintBottom_toTopOf="#+id/onoff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/depth"
android:layout_width="80dp"
android:layout_height="31dp"
android:layout_marginEnd="49dp"
android:layout_marginRight="49dp"
android:text="Depth:"
app:layout_constraintBottom_toBottomOf="#+id/rawdata"
app:layout_constraintEnd_toStartOf="#+id/connect"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/connect"
app:layout_constraintVertical_bias="1.0" />
<Switch
android:id="#+id/rawdata"
android:layout_width="92dp"
android:layout_height="34dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="692dp"
android:text="Raw Data"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/connect"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/connect"
android:layout_width="110dp"
android:layout_height="38dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="#string/connect"
app:layout_constraintBottom_toBottomOf="#+id/rawdata"
app:layout_constraintEnd_toStartOf="#+id/rawdata"
app:layout_constraintStart_toEndOf="#+id/depth"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<ImageView
android:id="#+id/fish"
android:layout_width="57dp"
android:layout_height="33dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="320dp"
android:layout_marginRight="320dp"
android:layout_marginBottom="87dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/kisspng_computer_icons_symbol_clip_art_5b2bf54c62bee1_4646889015296075004045
</androidx.constraintlayout.widget.ConstraintLayout>


I'm not sure what is this part :
<com.example.castbuddyv1.FFVisuals
android:id="#+id/FFVisuals"
android:layout_width="389dp"
android:layout_height="781dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rawdata" />
I'm a beginner, I don't know if this is going to help you, but let's say I want to design your interface, for me I will do this:
Making sure to display the interface in vertical by adding below code to AndroidManifest.xml file:
android:screenOrientation="sensorPortrait"
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Putting vertical and horizontal guidelines in the constraintlayout:
<androidx.constraintlayout.widget.Guideline
android:id="#+id/v_guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
Replacing (app:layout_constraintGuide_begin="20dp") with (app:layout_constraintGuide_percent="x%") to place it depending on the percentage.
For example : 30% for the first vertical guideline and 50% for the first
horizontal guidline :
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
This is what I do to make sure that each widget appears in the position I want.
Here how it's look in Android studio:
Design+Blueprint
this is how it looks in : Pixel XL 1440 × 2560: 560dpi:
Pixel XL
this is how it looks in: Nexus 9 2048×1536:xhdpi24:
Nexus 9
you can see that the screen size changed but the widgets stay in the same position
this is the xml for this interface:
<?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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.03" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_1"
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/h_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/h_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.97" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/v_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/v_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.35" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/v_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.65" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/v_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<TextView
android:id="#+id/depth"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Depth:"
app:layout_constraintTop_toTopOf="#+id/h_0"
app:layout_constraintBottom_toTopOf="#+id/h_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/v_0"
/>
<Button
android:id="#+id/connect"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/connect"
app:layout_constraintTop_toTopOf="#+id/h_0"
app:layout_constraintBottom_toTopOf="#+id/h_1"
app:layout_constraintStart_toEndOf="#+id/v_1"
app:layout_constraintEnd_toStartOf="#+id/v_2"
/>
<Switch
android:id="#+id/rawdata"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Raw Data"
app:layout_constraintTop_toTopOf="#+id/h_0"
app:layout_constraintBottom_toTopOf="#+id/h_1"
app:layout_constraintStart_toEndOf="#+id/v_3"
app:layout_constraintEnd_toEndOf="parent"
/>
<Button
android:id="#+id/right2"
android:layout_width="0dp"
android:layout_height="0dp"
app:icon="#drawable/abc_vector_test"
app:layout_constraintTop_toBottomOf="#+id/h_3"
app:layout_constraintBottom_toTopOf="#+id/h_4"
app:layout_constraintStart_toStartOf="#+id/v_0"
app:layout_constraintEnd_toStartOf="#+id/v_1"
/>
<ToggleButton
android:id="#+id/onoff"
android:layout_width="0dp"
android:layout_height="0dp"
android:rotation="0"
android:textOff="Motors On"
android:textOn="Motors Off"
app:layout_constraintTop_toBottomOf="#+id/h_3"
app:layout_constraintBottom_toTopOf="#+id/h_4"
app:layout_constraintStart_toEndOf="#+id/v_1"
app:layout_constraintEnd_toStartOf="#+id/v_2"
/>
<Button
android:id="#+id/right"
android:layout_width="0dp"
android:layout_height="0dp"
android:rotation="180"
app:icon="#drawable/abc_vector_test"
app:layout_constraintTop_toBottomOf="#+id/h_3"
app:layout_constraintBottom_toTopOf="#+id/h_4"
app:layout_constraintStart_toEndOf="#+id/v_2"
app:layout_constraintEnd_toStartOf="#+id/v_3"
/>
<TextView
android:id="#+id/statusdisplay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Status:"
app:layout_constraintTop_toTopOf="#+id/h_2"
app:layout_constraintStart_toStartOf="#+id/v_1"
app:layout_constraintEnd_toStartOf="#+id/v_2"
/>
<ImageView
android:id="#+id/fish"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#+id/h_2"
app:layout_constraintBottom_toTopOf="#+id/h_3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/v_0"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
notice that I set the width and height of the widgets to 0dp:
android:layout_width="0dp"
android:layout_height="0dp"
Since the guidelines are set in a percentage, the widgets will be stretch and Shrink according to the size of the screen
you can make the widgets size-fixed by assign dp values for example:
android:layout_width="70dp"
android:layout_height="40dp"
that all what I got, I hope my explanation is clear and useful.


You can learn ConstrainLayout from here
I've try to figure it out the issue with constraint applied in your code. I hope this will help you, please check this code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<com.example.castbuddyv1.FFVisuals
android:id="#+id/FFVisuals"
android:layout_width="389dp"
android:layout_height="781dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rawdata" />
<Button
android:id="#+id/right2"
android:layout_width="59dp"
android:layout_height="48dp"
android:layout_marginBottom="29dp"
app:icon="#drawable/abc_vector_test"
app:layout_constraintBaseline_toBaselineOf="#id/onoff"
app:layout_constraintEnd_toStartOf="#+id/onoff" />
<ToggleButton
android:id="#+id/onoff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:rotation="0"
android:textOff="Motors On"
android:textOn="Motors Off"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/right"
android:layout_width="59dp"
android:layout_height="48dp"
android:layout_marginBottom="29dp"
android:rotation="180"
app:icon="#drawable/abc_vector_test"
app:layout_constraintBaseline_toBaselineOf="#id/onoff"
app:layout_constraintStart_toEndOf="#+id/onoff" />
<TextView
android:id="#+id/statusdisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="44dp"
android:text="Status:"
app:layout_constraintBottom_toTopOf="#+id/onoff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/depth"
android:layout_width="80dp"
android:layout_height="31dp"
android:layout_marginStart="16dp"
android:text="Depth:"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/connect" />
<Switch
android:id="#+id/rawdata"
android:layout_width="92dp"
android:layout_height="34dp"
android:layout_marginEnd="16dp"
android:text="Raw Data"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/connect"
android:layout_width="110dp"
android:layout_height="38dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Connect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/fish"
android:layout_width="57dp"
android:layout_height="33dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="87dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Android studio AVD glitch

I am new to android studio. Literally its my first day on the software. I am having issue with AVD Screen
I have used the default pixel 3 avd to run the apk but here is the problem:-
SO here is the
Output and here is the
Input
. I am sorry if it has any silly mistake but please help me it will make my day ❤
<?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="#454545"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="385dp"
android:layout_height="41dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/black_ops_one"
android:shadowColor="#70000000"
android:shadowDx="10"
android:shadowDy="5"
android:shadowRadius="1"
android:text=" Sumant Dusane"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#FFFFFF"
android:textSize="25sp"
android:textStyle="bold"
android:translationZ="5dp"
android:typeface="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="295dp"
android:layout_height="0dp"
android:layout_marginStart="3dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:layout_marginBottom="435dp"
android:alpha="0.2"
android:background="#FFFFFF"
android:scaleX="15"
android:translationZ="4dp"
app:layout_constraintBottom_toTopOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/marble_texture" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="447dp"
android:layout_height="799dp"
android:alpha="0.5"
android:scaleY="1.9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/matte_painitng_corrected__main" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:layout_marginEnd="29dp"
android:layout_marginRight="29dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/imageView6"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/instagram" />
<TextView
android:id="#+id/textView4"
android:layout_width="219dp"
android:layout_height="42dp"
android:layout_marginEnd="18dp"
android:layout_marginRight="18dp"
android:fontFamily="#font/frank_ruhl_libre_medium"
android:text="#s.u.m.a.n.t_8282"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="49dp"
android:layout_marginLeft="49dp"
android:layout_marginEnd="29dp"
android:layout_marginRight="29dp"
android:layout_marginBottom="57dp"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/textView5"
app:layout_constraintHorizontal_bias="0.52"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/linkedin" />
<TextView
android:id="#+id/textView5"
android:layout_width="210dp"
android:layout_height="31dp"
android:layout_marginEnd="26dp"
android:layout_marginRight="26dp"
android:fontFamily="#font/frank_ruhl_libre_medium"
android:lineSpacingExtra="5sp"
android:text="Sumant Dusane"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="#+id/imageView6" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="106dp"
android:text="Follow for more !!"
android:textColor="#FFFFFF"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView6" />
</android.support.constraint.ConstraintLayout>

Adding an image to a constraint layout using JAVA

i am experiencing some problems when I try to add an image to my contraint layout. I have the next CL:
I add also the xml code:
<?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=".pl.view.activities.Test1Activity"
android:id="#+id/test_layout">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:fontFamily="sans-serif-black"
android:text="1. Galdera: bla bla bla..."
android:textColor="#1E0354"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:text="1. aukera"
app:layout_constraintBottom_toTopOf="#+id/radioButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:text="2. aukera"
app:layout_constraintBottom_toTopOf="#+id/radioButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton" />
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:text="3. aukera"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="128dp"
android:background="#drawable/button_rounded"
android:text="CHECK"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton3" />
<Button
android:id="#+id/next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/button_rounded"
android:text="Next"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</androidx.constraintlayout.widget.ConstraintLayout>
I want to place a image, but just sometimes, between the title of the question, the element which is in the top, and the first radioButton.
I have seen a lot of ways to do it but none of them is working.
Thanks for support!

If I were you I would add the image to the XML and make its visibility GONE, then when needed would change to VISIBLE.

Static buttons over top a scroll view android studio

I want to create an activity where i have 2 buttons at the bottom of the screen, and a scroll view above them. Inside of the scroll view i want a drop down menu where the user can select a series of exercises. How do I put the scroll view above the buttons and have them stay in the same spot when scrolling?
Code for activity
<?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:id="#+id/ConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WorkoutsCreater">
<TextView
android:id="#+id/NameWorkoutTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:gravity="center"
android:text="Name of Workout:"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="#+id/NameWorkoutInput"
app:layout_constraintEnd_toStartOf="#+id/NameWorkoutInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/NameWorkoutInput" />
<TextView
android:id="#+id/nameExercise1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:gravity="center"
android:text="Exercise 1:"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="#id/spinnerExercise1"
app:layout_constraintEnd_toStartOf="#+id/NameWorkoutInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/spinnerExercise1" />
<EditText
android:id="#+id/NameWorkoutInput"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:inputType="text"
android:maxLength="20"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/NameWorkoutTextView"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/BtnNew"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/circle_plus"
android:clickable="true"
android:focusable="true"
android:foreground="#drawable/ic_add_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_add_white" />
<Button
android:id="#+id/BtnSave"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/rounded_corners"
android:foreground="#drawable/ic_save_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Spinner
android:id="#+id/spinnerExercise1"
android:layout_width="175dp"
android:layout_height="43dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/NameWorkoutInput" />
Image of activity

If you want to add a scrollview that stays above the two buttons, you can add a NestedScrollview inside the constraintlayout
<?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:id="#+id/ConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WorkoutsCreater">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/BtnNew"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/NameWorkoutTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:gravity="center"
android:text="Name of Workout:"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="#+id/NameWorkoutInput"
app:layout_constraintEnd_toStartOf="#+id/NameWorkoutInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/NameWorkoutInput" />
<TextView
android:id="#+id/nameExercise1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:gravity="center"
android:text="Exercise 1:"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="#id/spinnerExercise1"
app:layout_constraintEnd_toStartOf="#+id/NameWorkoutInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/spinnerExercise1" />
<EditText
android:id="#+id/NameWorkoutInput"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:inputType="text"
android:maxLength="20"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/NameWorkoutTextView"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinnerExercise1"
android:layout_width="175dp"
android:layout_height="43dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/NameWorkoutInput" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/BtnNew"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/ic_add_circle"
android:clickable="true"
android:focusable="true"
android:foreground="#drawable/ic_add_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_add_white" />
<Button
android:id="#+id/BtnSave"
android:layout_width="77dp"
android:layout_height="77dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/ic_remove_red_ba0a00"
android:foreground="#drawable/ic_save_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Disclaimer: Nested layouts are more costlier than flat layouts
Please have a look at this https://developer.android.com/topic/performance/rendering/optimizing-view-hierarchies

My items are all messed up when I run the app on my phone

When I design the app in android studio everything is where it belongs. Why when I view it on my phone everything is messed up?
Studio
On phone
I use Constraint layout. I tried changing API version to an older one, but nothing happened. Does it have something to do with resolutions? I can't use emulators I need it on my phone.
Activity XML code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="393dp"
android:layout_height="76dp"
android:layout_marginEnd="16dp"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<Button
android:id="#+id/button8"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="348dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button9"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="412dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view9"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="184dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view8"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="480dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="408dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view6"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="260dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view7"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="336dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="104dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView30"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="448dp"
android:layout_marginEnd="244dp"
android:layout_marginRight="244dp"
android:text="#string/inbox_text6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView29"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="156dp"
android:layout_marginEnd="188dp"
android:layout_marginRight="188dp"
android:text="#string/inbox_text2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView28"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="376dp"
android:layout_marginEnd="244dp"
android:layout_marginRight="244dp"
android:text="#string/inbox_text5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView22"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="352dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title5"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView23"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="416dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title6"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView18"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="272dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title4"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView19"
android:layout_width="173dp"
android:layout_height="34dp"
android:layout_marginTop="120dp"
android:layout_marginEnd="228dp"
android:layout_marginRight="228dp"
android:text="#string/inbox_title2"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView20"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="208dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title3"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView21"
android:layout_width="137dp"
android:layout_height="30dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="264dp"
android:layout_marginRight="264dp"
android:text="#string/inbox_title1"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView24"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="300dp"
android:layout_marginEnd="256dp"
android:layout_marginRight="256dp"
android:text="#string/inbox_text4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView27"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="232dp"
android:layout_marginEnd="260dp"
android:layout_marginRight="260dp"
android:text="#string/inbox_text3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="216dp"
android:layout_marginRight="216dp"
android:text="#string/inbox_text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button5"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="196dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button6"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="268dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="4">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Search" />
<Button
android:layout_width="52dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Refresh" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToAnActivity"
android:text="Send" />
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

In Android, you need to consider the number of different screen sizes when developing an android application.
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).
So what can you do to support different screen sizes?
You can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define Relative Layout with android:weightSum and layout_weight
But there is an even better option:
Use ConstraintLayout with guidelines and Chains to support different screen sizes.
From the documentation:
The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.
And here is an example of a similar layout like you want to achieve:
<?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">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline7" />
<TextView
android:id="#+id/textView4"
android:layout_width="62dp"
android:layout_height="19dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView16"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView15" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView18" />
<TextView
android:id="#+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView17"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="search"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rfreshe"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button11"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/button9" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="send"
app:layout_constraintBottom_toBottomOf="#+id/button10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toTopOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView17"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView18" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView16"
app:layout_constraintEnd_toEndOf="#+id/button12"
app:layout_constraintTop_toTopOf="#+id/textView15" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="#+id/button12"
app:layout_constraintTop_toTopOf="#+id/textView13" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="#+id/button14"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
</android.support.constraint.ConstraintLayout>
The result will look like this in the preview and on a real device:
And if you survived reading that long answer (I know, its long, who would read all of this?)
Here is something extra
Now, I know that at first look this may look like a lot of work and some may wonder if this is really worth the effort but here is why I believe ConstraintLayout is the proper way to build your UI:
It's really user-friendly.
ConstraintLayout is very easy and simple to learn.
once you have learned it you will see that you are saving a lot of development time because making your UI is simply fast.
Constraint layout is meant to support different screen sizes so no need to build a layout for every screen size (this also connect to the previous advantage- saving development time).
So happy coding, I hope that I could help with my answer.

The fresh layout resource file not loading after the device orientation change

I have created an app which has a help screen which is initiated by a 3 dots help menu button on the action bar.The help screen has the following layout xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="280dp"
android:layout_height="380dp"
android:layout_gravity="center"
android:background="#drawable/aboutus_new"
android:orientation="vertical"
android:padding="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/mehendi"
android:minHeight="40dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Info">
<TextView
android:id="#+id/closeButtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="end"
android:layout_marginRight="4dp"
android:background="#drawable/circlebackground"
android:gravity="center"
android:text="X"
android:textColor="#color/colorWhite"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayoutnew"
android:layout_width="350dp"
android:layout_height="232dp"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/imageViewnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:foregroundGravity="center_horizontal"
android:src="#drawable/eat_icon"
app:layout_constraintEnd_toStartOf="#+id/guideline25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textViewnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/aboutus"
android:textColor="#color/colorWhite"
android:textSize="13sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView6"
app:layout_constraintStart_toStartOf="#+id/imageView6"
app:layout_constraintTop_toBottomOf="#+id/imageView6" />
<RelativeLayout
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="4dp"
android:foregroundGravity="center_horizontal"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline24"
app:layout_constraintTop_toBottomOf="#id/textView">
<TextView
android:id="#+id/textView2"
android:layout_width="269dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="4dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="2dp"
android:fontFamily="sans-serif"
android:text="#string/introduc"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:textSize="13sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</RelativeLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="1" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:orientation="horizontal"
android:padding="1dp">
<ImageView
android:id="#+id/imageViewfre"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginStart="12dp"
android:background="#drawable/mason"
android:baselineAlignBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="55dp"
android:layout_height="55dp"
android:background="#drawable/app"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginEnd="12dp"
android:background="#drawable/creations"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="55dp"
android:layout_height="55dp"
android:background="#drawable/swrd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
The above layout has also an alternative layout for the landscape mode in 'aboutus-land' folder.The above layout gets loaded on pressing 3 dotted button and while it is still active, if I changes the device's rotation this still reloads instead of its landscape alternative. But when I closes it manually by pressing close button and after closing ,if I changes device's rotation and then opens it again using 3 dotted menu button.The altenative landscape layout gets loaded. Why it's happening? anyone with any suggestion please help me out.

If you want your Activity to handle configuration changes, you should declare it in your AndroidManifest.xml like this:
<activity android:name=".MyActivity"
android:configChanges="orientation|screenSize">
Please refer here for more info: https://developer.android.com/guide/topics/resources/runtime-changes#HandlingTheChange

Categories

Resources