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
Related
I have a problem with the design layout in Android Studio, when designing the layout there, the layout looks acceptable and everything okay, but as soon as I run it forms a very nasty white area between the Status Bar and the Toolbar (although I do not use the Toolbar), and the theme which is applied (Theme.MaterialComponents.Light.NoActionBar), does not imply the presence of ActionBar. In any case, I must admit that my skills and experience in Android development is not enough to solve this problem, I would be glad for any help, thanks in advance.
I attach the code of the layout:
<?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=".activities.WelcomeActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/background_intro" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/white_line" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.285"
app:srcCompat="#drawable/women" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:fontFamily="#font/ptsansbold"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="Welcome text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="41sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:fontFamily="#font/ptsansregular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Lorem Ipsum Text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnLogin"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Auth"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnRegister"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Register"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnLogin" />
</androidx.constraintlayout.widget.ConstraintLayout>
I tried to use android:fitsSystemWindows="true" but it had no effect, unfortunately I could not find any other cases with this problem, I also tried to activate Fullscreen mode.
But this also had no effect, which is needed.
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>
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>
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
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>