Elements will not center correctly in Constraintlayout Android Studio2019 Community Moderator ElectionIs there a way to run Python on Android?How do save an Android Activity state using save instance state?How do I center text horizontally and vertically in a TextView?Close/hide the Android Soft KeyboardWhy is the Android emulator so slow? How can we speed up the Android emulator?Is there a unique Android device ID?What is 'Context' on Android?Proper use cases for Android UserManager.isUserAGoat()?Android Studio: Add jar as library?OnClickListener not working with fragments
Why do newer 737s use two different styles of split winglets?
Happy pi day, everyone!
How could an airship be repaired midflight?
How should I state my peer review experience in the CV?
Do I need to be arrogant to get ahead?
The German vowel “a” changes to the English “i”
How to pronounce "I ♥ Huckabees"?
What is the relationship between relativity and the Doppler effect?
Professor being mistaken for a grad student
Print a physical multiplication table
Why do tuner card drivers fail to build after kernel update to 4.4.0-143-generic?
A diagram about partial derivatives of f(x,y)
What is the significance behind "40 days" that often appears in the Bible?
How difficult is it to simply disable/disengage the MCAS on Boeing 737 Max 8 & 9 Aircraft?
Aluminum electrolytic or ceramic capacitors for linear regulator input and output?
Are all passive ability checks floors for active ability checks?
Different outputs for `w`, `who`, `whoami` and `id`
Bacteria contamination inside a thermos bottle
Is there a symmetric-key algorithm which we can use for creating a signature?
What options are left, if Britain cannot decide?
Instead of a Universal Basic Income program, why not implement a "Universal Basic Needs" program?
Why did it take so long to abandon sail after steamships were demonstrated?
How to write cleanly even if my character uses expletive language?
How to explain that I do not want to visit a country due to personal safety concern?
Elements will not center correctly in Constraintlayout Android Studio
2019 Community Moderator ElectionIs there a way to run Python on Android?How do save an Android Activity state using save instance state?How do I center text horizontally and vertically in a TextView?Close/hide the Android Soft KeyboardWhy is the Android emulator so slow? How can we speed up the Android emulator?Is there a unique Android device ID?What is 'Context' on Android?Proper use cases for Android UserManager.isUserAGoat()?Android Studio: Add jar as library?OnClickListener not working with fragments
I've a splash screen like this:
but if I open my application it will show like this:
This is my XML 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"
android:background="@android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_concas_icon" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.
java android android-constraintlayout
add a comment |
I've a splash screen like this:
but if I open my application it will show like this:
This is my XML 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"
android:background="@android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_concas_icon" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.
java android android-constraintlayout
add a comment |
I've a splash screen like this:
but if I open my application it will show like this:
This is my XML 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"
android:background="@android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_concas_icon" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.
java android android-constraintlayout
I've a splash screen like this:
but if I open my application it will show like this:
This is my XML 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"
android:background="@android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@mipmap/ic_concas_icon" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.
java android android-constraintlayout
java android android-constraintlayout
edited Mar 7 at 12:50
Rahul Chandrabhan
1,85741323
1,85741323
asked Mar 7 at 11:23
Marco ConcasMarco Concas
64
64
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout
chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED
chain is what you need.
add a comment |
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)
For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/splash_progress"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/splash_status"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55042646%2felements-will-not-center-correctly-in-constraintlayout-android-studio%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout
chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED
chain is what you need.
add a comment |
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout
chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED
chain is what you need.
add a comment |
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout
chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED
chain is what you need.
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout
chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED
chain is what you need.
answered Mar 7 at 15:36
CheticampCheticamp
28.9k43063
28.9k43063
add a comment |
add a comment |
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)
For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/splash_progress"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/splash_status"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
add a comment |
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)
For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/splash_progress"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/splash_status"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
add a comment |
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)
For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/splash_progress"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/splash_status"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)
For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="GO Tools"
android:textColor="@android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/splash_progress"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<ProgressBar
android:id="@+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
app:layout_constraintBottom_toTopOf="@+id/splash_status"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<TextView
android:id="@+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="@color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="@+id/splash_icon"
app:layout_constraintTop_toBottomOf="@+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
edited Mar 7 at 15:39
answered Mar 7 at 15:34
Tamir AbutbulTamir Abutbul
1,7821822
1,7821822
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
add a comment |
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
Is it possible to specify the dimension with a symbol percentage %?
– Marco Concas
Mar 7 at 20:42
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
The dimension of what?
– Tamir Abutbul
Mar 7 at 20:56
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
Dimension of elements, and if it's possibile with % position in the display.
– Marco Concas
Mar 7 at 21:03
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
There are many ways to achieve this - one way is to use barrier/guidelines and put them on a percent of the screen(for example 10 percent of the screen and tell your views to constraint to the guideline). It's really is a subject worth reading because there are a lot of examples
– Tamir Abutbul
Mar 7 at 21:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55042646%2felements-will-not-center-correctly-in-constraintlayout-android-studio%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown