I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.
Layout editor and emulator result
Code for the layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="schemas.android.com/apk/res/android";
xmlns:app="schemas.android.com/apk/res-auto";
xmlns:tools="schemas.android.com/tools";
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.first.anew.MainActivity">
<TextView
android:layout_width="216dp"
android:layout_height="60dp"
android:text="Hello World!"
tools:layout_editor_absoluteY="16dp"
tools:layout_editor_absoluteX="61dp" />
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="45dp"
android:text="Login"
tools:layout_editor_absoluteY="343dp"
tools:layout_editor_absoluteX="177dp" />
<TextView
android:id="#+id/textView"
android:layout_width="215dp"
android:layout_height="65dp"
android:text="username"
tools:layout_editor_absoluteY="117dp"
tools:layout_editor_absoluteX="61dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="horizontal" />
<EditText
android:id="#+id/editText"
android:layout_width="217dp"
android:layout_height="57dp"
android:ems="10"
android:inputType="textPassword"
tools:layout_editor_absoluteY="218dp"
tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>
Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).
Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.
put the whole code. if you are using Relativelayout, this will happen. change it to Linearlayout at the top i mean the bottom most element, and put orientation as vertical
see this - for me my soltion works...
add this in xml to the button etc
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.57"
then play with it in the design.
Good luck! :)
you can click the infer Constraints buttonclick on this
and run your programme again..it will solve your problem
Related
I placed a button in the middle of design layout from activity_main.xml but when i run the app through my phone, the positioning is not the same as the design inside activity_main.xml.
Tried to change layout to relative and the problem still exist.
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="276dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
I expect that the design position from activity_main is the same when run through an actual android phone.
From the design layout
from the actual phone
First of all, you might want to adjust button relatively with other components. i.e. try to align your button on top of other component or maybe on bottom of another component.
Refer this link, it has all information
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams#attr_android:layout_alignBottom
If you have confusion, share whole xml file for us to refer.
You need just to change the <ConstraintLayout/> in <RelativeLayout/> and replace the Button code by this:
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
Hope this will help.
First of all remove that margins from attributes. There is the left margin which make your button to go right and top margin which move button below the actual center point in small density devices.
So If you want to add button in center of screen in all devices. Use below code without any margin. But if your want to add spacing between other view then use small margin in other views.
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Refer this guide to learn basics of constraints : guide
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efeff1">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
I am creating my first app with android studio and this is my first problem:
I want to try the ConstraintLayout. I have built the layout with a ConstraintLayout with the Design Editor (clicking it together). When i try the layout in Android Emulator, all Buttons have moved in the left upper corner :(
Except the "Hello World" Label which was generated automatically when i created my first project.
The difference between the Label and the Button is, that some code lines beginning with app:layout_constraint.... are missing. You can see it in Code.
What am I doing wrong, or is it a bug?
I would be glad for an answer! :)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.u0017007.coffeecounter.MainActivity">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
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.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="#string/add_coffee"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="231dp" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/remove_coffee"
tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp" />
</android.support.constraint.ConstraintLayout>
tools:layout_editor_absoluteX and tools:layout_editor_absoluteY are only used for preview, like all tools:XXXX.
You need to add constraints to your view. You can add in the XML or you can do it with the visual editor.
There is a very good website that explain all about ConstraintsLayout.
By the way, Android Studio warm you with a error This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints if you don't set constraints.
It seems from the above code that, you didn't added any constraints to buttons thats why they moved to left upper corner.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
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.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="ADD coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
app:layout_constraintRight_toLeftOf="#+id/buttonRemoveCoffee"
android:layout_marginRight="82dp"
android:layout_marginLeft="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="1.0" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="remove coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Please refer to bellow link -
https://www.youtube.com/watch?v=z53Ed0ddxgM
tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp"
These are used by studio to render in Graphic editor only. During run time,
as constraints are not set, the views take default position(0,0).
Try setting some constraints on buttons and procedd
I just started using android studio and I inserted a button and text field. In preview panel looks ok but when I run the app the layout it's different.
This is the 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:paddingBottom="16dp"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context="com.example.alexander.myapplication.MainActivity">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="119dp"
tools:layout_editor_absoluteY="222dp"
tools:ignore="HardcodedText,MissingConstraints"
android:onClick="buttonClicked"
/>
This is how it looks like
Thank you!
Look at the lines:
tools:layout_editor_absoluteX="119dp"
tools:layout_editor_absoluteY="222dp"
What they say is that you placed the button in an absolute position BUT only in the editor preview.
The button doesn't have real placement values when the app actually running (notice the "editor" prefix in the parameters name).
You need to define actual values in the editor.
Check out this guide on the Android developers site:
Build a Responsive UI with ConstraintLayout
I just solved the problem by setting the layout to RelativeLayout.
enter image description here
please see the pic. How can I fix this error? I tried installing a couple other devices, checked some function for hardware vs software graphics. TIA
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="haroonahmad.berkeleysucksapp.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Berkeley Admisions"
android:textSize="24sp"
tools:layout_editor_absoluteY="88dp"
tools:layout_editor_absoluteX="88dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="335dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="268dp"
tools:layout_editor_absoluteY="335dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Points: 0"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="415dp" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
</RelativeLayout>
edit: sorry i'm a completely new to adding code, didn't realize I could only add to the first post.
I tried changing the ConstraintLayout in both places to RelativeLayout, didn't work. then tried right clicking on the resource file and changed the layout and layoutvertical to RelativeLayout, and still didn't work. thanks for any further suggestions
You're probably using a root layout that does not match the alignments you're setting in other views. Try using RelativeLayout as root layout.
Maybe if you post your XML layout, it is easier for us to identify the problem.
OK I fixed it by changing the whole text before xmlns to RelativeLayout. thanks for the tip!
I was following along some Android tutorial on Youtube when I encountered the following problem:
(left the designer, right the emulator)
I tried searching on google, but can't seem to find the right link.
Does anyone have any idea what is going on? I tried deleting and placing new elements, but the same problem keeps occurring.
[Edit]
XML code which I didn't change. This was created with a new project.
All elements in the picture were dragged and dropped. No code was changed.
<?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:visibility="visible"
tools:context="com.example.todor.myapplication.MainActivity">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="159dp"
tools:layout_editor_absoluteY="235dp"
tools:text="#string/loginbutton" />
<TextView
android:id="#+id/textView2"
android:layout_width="132dp"
android:layout_height="31dp"
android:layout_marginBottom="42dp"
android:fontFamily="monospace"
android:textAlignment="center"
android:textColor="#color/colorAccent"
android:textColorHint="#android:color/holo_blue_bright"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/editText"
tools:text="#string/logintext"
tools:layout_editor_absoluteX="126dp" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="33dp"
android:width="300dp"
android:ems="10"
android:hint="#string/emailhint"
android:inputType="textEmailAddress"
app:layout_constraintBottom_toTopOf="#+id/editText2"
tools:layout_editor_absoluteX="42dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:width="300dp"
android:ems="10"
android:hint="#string/passowrdhint"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#+id/button"
tools:layout_editor_absoluteX="42dp" />
</android.support.constraint.ConstraintLay
out>
Here are some tips for you !
Read about Tools Attributes Reference
Android Studio supports a variety of XML attributes in the tools namespace that enable design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources). When you build your app, the build tools remove these attributes so there is no effect on your APK size or runtime behavior.
You need to understand the difference of below attributes!
tools:text="loginbutton"
android:text="loginbutton"
Your views are not constrained they have only design time position!
Go to the design, drag the corners until the circle turns green and then give the constraint.Here is an extra guidance from linkOne LinkTwo related with ConstraintLayout
If you mess it up big-time you can replace android.support.constraint.ConstraintLayout with LinearLayout but that's not the solution it's another way instead!