I have recently started learning the new ConstraintLayout in Android Studio 2.2 and noticed that when I add simplest of the views, the layout editor automatically generates some absolute coordinates. Here is a sample XML:
<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:id="#+id/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:text="#string/creator_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="479dp"
android:id="#+id/first_textview"
app:layout_constraintRight_toRightOf="#+id/activity"
android:layout_marginEnd="16dp"
tools:layout_constraintRight_creator="0"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginBottom="16dp"
tools:layout_constraintBottom_creator="0" />
</android.support.constraint.ConstraintLayout>
Notice the absolutes like 81dp, 246dp, 479dp... I tried to manually delete these, but when I go back to the "Design" tab and come back to the "Text" tab, these regenerate. Now, I have three questions:
Is there a way to tell Android Studio to not generate these?
Should I manually place them in dimens.xml?
Would these absolutes cause some layout problems in other devices?
You'll note that all of the absolute values are in the tools namespace - this means they are not compiled into your app, nor used in anything but in the tools (and in this case, the visual editor). They are simply to ensure that switching from the Design to Text tab is always consistent, with the underlying files remaining stable.
Is there a way to tell Android Studio to not generate these?
No.
Should I manually place them in dimens.xml?
These are only useful for the tools and therefore should not be added to a separate dimens.xml file that would be included in your final APK.
Would these absolutes cause some layout problems in other devices?
No, they are only used by the tools.
I'm not sure your original question contains your entire layout, as it references a widget with an id of #+id/activity, so the issue might lie elsewhere in your layout.
Ensure that no widget that exists within a ConstraintLayout has a layout_width or layout_height of match_parent.
MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".
Source
If you use match_parent, Android Studio will generate these absolute values, as well as replacing match_parent with an absolute dimension.
Based on the layout you posted, your TextView probably had a layout_width or layout_height of match_parent before Android Studio replaced it.
You should replace android:layout_width="match_parent" with
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndtOf="parent"
And android:layout_height="match_parent" with
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomtOf="parent"
In your specific layout, you probably want something like this:
<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:id="#+id/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity">
<TextView
android:text="#string/creator_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/first_textview"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp" />
</android.support.constraint.ConstraintLayout>
As a side notes to given answers, you can use the Magic Wand Icon in the toolbar menu above the design preview. Click on Infer Constraints button, this will automatically add some lines in the text field and the tools one will be converted to constrained.
Please see below picture :
Related
I am beginner in android studio and having headache with this if someone could help me am i missing something?.... I have problem with Constraint layout, the problem is i put some element(ImageView, Button it does not mater) in layout and constraint it to parent but when I run it in emulator it just is not showing. also it is not showing me those buttons under elements connect BaseLine and remove Constrains for that element.
"screenShot":
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="343dp"
android:layout_height="118dp"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_c`enter code here`onstraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic[7]" />
</android.support.constraint.ConstraintLayout>
when i run it in emulator it just is not showing
The problem is here :
tools:srcCompat="#tools:sample/backgrounds/scenic[7]"
You need to understand what tools is, so I recommend to you to read a little bit the documentation.
Just a note of it :
It's a 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.
Instead you have to use to show it on the emulator.
app:srcCompat="#drawable/your_drawable"
Note: remember to add : xmlns:app="http://schemas.android.com/apk/res-auto"
I found the solution.it's difrent in new Android Studio 3.4, You have to Right click on element and option Show Base Line is there now.
I code using Android Studio. I found some problem that layout in emulator and APK (Build APK and run in my gadget) is different with layout when I design in deisgner. What is wrong with my code ? Or is there something I must set ?
Layout in designer :
Layout in gadget (apk) :
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"
tools:context="com.example.alfonsus.ebaandroid.Login">
<EditText
android:id="#+id/etPassword"
android:layout_width="280dp"
android:layout_height="41dp"
android:ems="10"
android:hint="Password"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="113dp" />
<EditText
android:id="#+id/etUserId"
android:layout_width="280dp"
android:layout_height="41dp"
android:ems="10"
android:hint="User ID"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="44dp" />
<Button
android:id="#+id/btnLogin"
android:layout_width="143dp"
android:layout_height="47dp"
android:text="Login"
tools:layout_editor_absoluteX="121dp"
tools:layout_editor_absoluteY="194dp" />
Each view in your layout has attributes like these:
tools:layout_editor_absoluteX="52dp"
tools:layout_editor_absoluteY="113dp"
Any tools: attribute will only affect what you see in the layout/design preview, and will have no effect on what you see when you actually run your app on an emulator or real device.
In your case, these were added when you dragged-and-dropped views into the visual editor (in order to make your life easy; otherwise the views would snap to the top-left corner like you're seeing on a real device). However, you still need to add constraints to each view so that they'll appear correctly when you run your app.
See this link for more information: https://developer.android.com/training/constraint-layout/#add-a-constraint
Note that you must follow item #3:
Do one of the following:
Click a constraint handle and drag it to an available anchor point (the edge of another view, the edge of the layout, or a guideline).
Click Create a connection in the view inspector at the top of the Attributes window.
The problem here is that you are missing some constraints.
Check your android editor/designer layout again, I think you are missing constraints.
Every view in android must have a vertical and a horizontal constraint.
You need to make each item have a constraint.
I am trying to do some simple app to practice, and the user interface gets broken for some reason I don't know why when I run test on my phone. I did an app on android only once before and I didn't have this problem, I was using a different phone though. I'm testing this on Samsung Galaxy A5.
That's how it looks in project: http://imgur.com/Pnbg5ns
And that's how it looks on my phone: http://imgur.com/a/uki84
Anyone knows how to resolve this?
All your views have locations set with the tools:... attribute. The locations set this way (using tools:) position the views within the Android Studio editor, and Android Studio editor only. It doesn't do anything at all to position the views for when the app is actually run, that's why all your views are on top of each other, they simply don't have any attributes to indicate their positioning on the screen when the app is run.
You should check tutorials for how to use ConstraintLayout (if you want to use that layout) which is a recent (2016) addition to Android and position your views with the constraints you need. Or you could use some of the older layouts like LinearLayout which should be perfectly fine for your layout needs.
And absolute positioning of the views like you have with the use of the tools:... attribute is also a big no most of the time. Views need to be positioned in some relative way within a layout, which doesn't mean it has to be within a RelativeLayout :), just saying that the views should be positioned in reference to the layout containing them, not just at some absolute point f.e. (150, 110).
This is a very simple layout. You can use LinearLayout instead of ConstraintLayout.
Here is an example using LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<EditText
android:id="#+id/etLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Login"
android:inputType="textPersonName" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Hasło"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Loguj"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/tvRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Nie masz jeszcze konta? Kliknij tutaj."
android:layout_gravity="center_horizontal"/>
</LinearLayout>
OUTPUT:
Hope this will help~
Heyho mates,
currently I am learning the new layout editor of Android Studio with the new ConstraintLayout.
By the way, I hate it.
But I got the issue, that if I want to specify a layout_height with #dimen, it gets replaced with a dp value instead.
Someone else got this issue?
Android Studio version 2.2.2 & 2.2.3 same issue.
Newest gradle version.
Thanks in advance guys!
Edit :
Code example :
<?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="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="#dimen/imageViewHeight"
app:srcCompat="#drawable/accept"
android:id="#+id/imageView"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Also happens outside scrollview.
Turns out this is a bug and will be fixed in Android Studio 2.3.
I think the reason behind this is, that ConstraintLayout as a WYSIWYG layout is inevitably meant to be edited/manipulated in the visual editor only.
Therefore keeping references to dimens in your dimens.xml would mean that as soon as you change something, move some elements around, these would not be relevant anymore and are hence replaced with "actual current values".
Also as mentioned in the docs:
All margins offered by the tool are factors of 8dp to help your views align to Material Design's 8dp square grid recommendations.
I use latest Android Studio and SDK. In preview & real device i see this:
My code:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.myappname.view.AboutActivity">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listViewAbout" />
</RelativeLayout>
How i make subtitle text color is gray? Like this:
I'm going out on a limb and assume that you're using the row layout simple_list_item_2.xml (based on the screenshot) which gives you two rows. The problem, if you may call it that, is that depending on the SDK version, the styling for this layout has changed.
On SDK 23, it looks like this:
However, on say SDK 19, it looks like this:
Why?
To understand this we first need to take a look at the xml that generates the rows from simple_list_item_2.xml, you'll see it's a pretty simple layout that uses the now deprecated view TwoLineListItem but that's just a plus on why to use your custom layout.
<TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/listPreferredItemHeight"
android:mode="twoLine"
android:paddingStart="?attr/listPreferredItemPaddingStart"
android:paddingEnd="?attr/listPreferredItemPaddingEnd">
<TextView android:id="#id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textAppearance="?attr/textAppearanceListItem" />
<TextView android:id="#id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text1"
android:layout_alignStart="#id/text1"
android:textAppearance="?attr/textAppearanceListItemSecondary" />
</TwoLineListItem>
The reason is because of the way the style textAppearanceListItemSecondary is resolved in each SDK version. The style is what gives the text the size, the color, etc. The evolution of the interface in Android has given birth to a huge ecosystem of themes and relying on the default styling will result in inconsistencies like the one you stumbled upon.
What to do about it?
You should use your own layout for this to allow for uniform styling across versions. To do so, please refer to any of the multiple questions covering this matter. But in short it just means creating a layout file, call it for example custom_row.xml and having the layout look exactly as you please. This also gives you total control over placement of the items, extra Views that you may need, and overhead in terms of coding is minimal compared to the SimpleAdapter or ArrayAdapter that perhaps you were using.
Note
You should consider moving your code towards RecyclerView instead of ListView if you haven't already.
You can set Textview property
android:textColor="#color/grey"
in you Adapter layout to change colour of your sub item
Hope this will help