I am an android studio beginner, and here is an app I made.
How it looks in the IDE:
How it looks on my Tablet (9 inch screen):
And how it looks on my Mom's phone (6 inch screen):
As you can see, the objects are getting squished to the bottom of the screen in the case of Mom's phone, whose screen is significantly smaller than my Tablet. I used Constraint Layout to make this app. I don't understand why this happens.
I'd be pleased to give any more information if required.
Edit: Here's my XML:
<?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">
<EditText
android:id="#+id/textview_number_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter first fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/textview_number_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter second fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_1" />
<Button
android:id="#+id/button_add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Add"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_2" />
<TextView
android:id="#+id/textView_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="0"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Switch
android:id="#+id/switch_simplify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Simplify result "
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_divide" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="Fractions Calculator"
android:textColor="#673AB7"
android:textSize="30sp"
android:textStyle="bold|italic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_subtract"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Subtract"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<Button
android:id="#+id/button_multiply"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Multiply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_subtract" />
<Button
android:id="#+id/button_divide"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Divide"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_multiply" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Result:"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_simplify" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="This calculator only calculates fractions, and does not calculate whole numbers. Please enter the numbers only in the form a/b"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_result" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:text="DK Apps"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Build v1.0.0"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your mom's phone has a small screen so you should wrap your content in a ScrollView in order for all of it do be displayed.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Related
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>
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
I have a set of codes that fit all phones with a width of 1080 or bigger, however for phones with 720 widths my last TextView with textSize of 20dp with the text "Price" goes halfway out of bound the phone width. So basically, for phones with a width of 1080 or bigger, I want to keep my textSize of 20dp, since it fits those phones, but for phones with a width of 720 I want to decrease the textSize of it. How would I do that?
Need this to work for android 5.0 and up
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#00FFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="409dp"
android:layout_height="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button1"
android:layout_width="44dp"
android:layout_height="38dp"
android:layout_marginStart="268dp"
android:layout_marginLeft="268dp"
android:layout_marginTop="96dp"
android:onClick="onButtonClick"
android:text="Go"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/Name1"
android:layout_width="67dp"
android:layout_height="45dp"
android:layout_marginTop="85dp"
android:ems="10"
android:hint="Symbol"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="109dp"
android:layout_height="37dp"
android:layout_marginStart="76dp"
android:layout_marginLeft="76dp"
android:layout_marginTop="92dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/Price1"
android:layout_width="72dp"
android:layout_height="51dp"
android:layout_marginStart="192dp"
android:layout_marginLeft="192dp"
android:layout_marginTop="84dp"
android:ems="10"
android:hint="Amount"
android:inputType="numberDecimal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text1"
android:layout_width="80dp"
android:layout_height="31dp"
android:layout_marginStart="324dp"
android:layout_marginLeft="324dp"
android:layout_marginTop="100dp"
android:text="Price"
android:textSize="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
I've gone through your layout and tried to improve it how I would do a layout like this. You're using ConstraintLayout so you want to align views in relation to each other. For example, you can align your price to the far right, and have it expand to the left, and push other views left.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/Name1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:hint="Symbol"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="44dp"
android:layout_height="38dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="onButtonClick"
android:text="Go"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/text1"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:minWidth="120dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/Name1"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/Price1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:hint="Amount"
android:inputType="numberDecimal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button1"
app:layout_constraintStart_toEndOf="#+id/spinner1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Price"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
The position of widgets in my emulator is changing even though I change the margins it's still in different positions.
How can I fix it? My XML code doesn't seem to match with the UI, the other layouts seem to be okay and this is the only layout I have a problem with.
Thanks for your help :)
Here is my xml code:
<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="#drawable/bg"
tools:context=".LoadingScreen"
tools:layout_editor_absoluteY="25dp">
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="172dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/scissors"
android:textColor="#color/colorPrimary"
android:textSize="60sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:layout_marginEnd="19dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/rock"
android:textColor="#color/colorPrimaryDark"
android:textSize="60sp"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="#+id/paper" />
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="49dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/paper"
android:textColor="#android:color/holo_red_light"
android:textSize="60sp"
[![enter image description here][1]][1]app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="59dp"
android:text="#string/press_start"
android:textColor="#color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
and here is my layout and emulator images:
there is only little problem in your layout, which is you have used margin properties in inconsistent way. For Ex, layout_marginRight="19dp" will need some more space than some other device according to their device configurations and size.
so, you should have to use your layout like below,
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#001235">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="ROCK"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="PAPER"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SCISSOR"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="<<Press to Start>>"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
</android.support.constraint.ConstraintLayout>
this will work nearly equal in almost all devices. always try to provide the attributes value dynamic instead of static as much as it is possible
Your constraints are bad, here You have some example for Your view how to set them:
<android.support.constraint.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"
>
<TextView
android:id="#+id/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rock"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="paper"
android:textColor="#android:color/holo_red_light"
app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rock"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scisors"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/paper"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
android:text="press_start"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Then add some margins to fit your layout
I am new to android studio and I have been creating a few projects, learning different concepts. I am now making my first application and I've noticed that when I launch all my applications on the emulator, the content doesn't completely cover the application. In my XML, the activity is centered in the app, but on the emulator everything's strangely shifted to the left.
I have posted images below to explain what I am talking about. I was wondering if this is normal, or am I doing something wrong. Since I spent a lot of time laying out the XML activity the way I desire, and then it is displayed awful on the emulator.
This is the Login Page, notice how centered and laid out all the views are.
This is the application launched on the emulator. Notice how the content is constrained, and kind of squeezed and pushed to the top left corner.
How do I fix this issue?
Thank you in advance.
<?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="#drawable/barbell_background"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Login">
<ImageView
android:id="#+id/AppLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="118dp"
android:layout_marginTop="40dp"
android:adjustViewBounds="true"
android:foregroundGravity="center_horizontal"
android:maxHeight="150dp"
android:maxWidth="150dp"
android:scaleType="fitCenter"
android:src="#drawable/fitness_logo_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/LoginUsernameLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="30dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/user_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginUsernameInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Username"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/LoginPasswordLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="90dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/password_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginPasswordInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Password"
android:textSize="20sp"
android:inputType="textPassword"/>
</LinearLayout>
<Button
android:id="#+id/SignInButton"
android:layout_width="297dp"
android:layout_height="34dp"
android:layout_marginStart="44dp"
android:layout_marginTop="25dp"
android:width="250dp"
android:height="5dp"
android:background="#drawable/login_button_design"
android:gravity="center"
android:text="#string/sign_in"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LoginPasswordLayout" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="72dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SignInButton">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/don_t_have_an_account"
android:textSize="16sp" />
<EditText
android:id="#+id/SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#android:color/transparent"
android:text="#string/sign_up" />
</LinearLayout>
<Button
android:id="#+id/DB_Display_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="92dp"
android:layout_marginTop="32dp"
android:width="200dp"
android:background="#drawable/signup_button_design"
android:gravity="center"
android:text="Display Login Database"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
</android.support.constraint.ConstraintLayout>
You using hard coded values for margins, it will not work on differente resolutions from the one you created it for. You need to use relative sizes for width/height (wrap_content/match_parent) and use gravity to anchor childs relative to its parent (center, left, right, center_horizontal, center_vertical).
margins are used only to add space between views not for centering.
Once you do all this your same screen will work on different screen sizes.
I think you have set all the necessary constraint for all the view. that is why they are getting shifted to the 0,0(top left) location of the screen.
Could you post the whole 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"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Main2Activity">
<ImageView
android:id="#+id/AppLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="118dp"
android:layout_marginTop="40dp"
android:adjustViewBounds="true"
android:foregroundGravity="center_horizontal"
android:maxHeight="150dp"
android:maxWidth="150dp"
android:scaleType="fitCenter"
android:src="#color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="118dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp" />
<LinearLayout
android:id="#+id/LoginUsernameLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="30dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo"
android:layout_marginLeft="40dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/user_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginUsernameInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Username"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/LoginPasswordLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="40dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="17dp"
app:layout_constraintTop_toBottomOf="#+id/LoginUsernameLayout"
android:layout_marginEnd="8dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/password_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginPasswordInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Password"
android:textSize="20sp"
android:inputType="textPassword"/>
</LinearLayout>
<Button
android:id="#+id/SignInButton"
android:layout_width="297dp"
android:layout_height="48dp"
android:layout_marginStart="44dp"
android:layout_marginTop="26dp"
android:width="250dp"
android:height="5dp"
android:background="#drawable/login_button_design"
android:gravity="center"
android:text="#string/sign_in"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LoginPasswordLayout"
android:layout_marginLeft="44dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.4" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="59dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/SignInButton"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.154">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/don_t_have_an_account"
android:textSize="16sp" />
<EditText
android:id="#+id/SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#android:color/transparent"
android:text="#string/sign_up" />
</LinearLayout>
<Button
android:id="#+id/DB_Display_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="92dp"
android:layout_marginTop="32dp"
android:width="200dp"
android:background="#drawable/signup_button_design"
android:gravity="center"
android:text="Display Login Database"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2"
android:layout_marginLeft="92dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintVertical_bias="0.029"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>