I am trying to include text in my layout but it doesn't show up in Design or Blueprint. In Blueprint, it just shows up as a dot (encircled in red in the picture). I tried opening the default text in the "hello world" app which works on my phone, but the same problem occurs in the layout in Android Studio.
I am following the guide at this link : https://developer.android.com/training/basics/firstapp/building-ui.
I've included a screenshot for reference. If this helps, please note that the emulator is not running in Android Studio and the layout / design screen does not display fully in the window when I select Pixel XL 5.5 screen (it's too large and I can't scroll down to see it).
I also do not get the square box in the Blueprint as shown in figure 3 of the webpage (link above). Screenshot of Android Studio
EDIT : Following is the code for my activity_main.xml file -
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="36dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintDimensionRatio="h,1:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Your code has a couple of issues. You're using ConstraintLayouts, but you're constraints are a little mixed up. In the first TextView, you have your topToTopOf constraint set to parent, which is fine, but your bottom constraint is also set to topOf parent. Change your bottom constraint to bottomToBottomOf parent. Like this:
<TextView
android:id="#+id/textView"
android:layout_width="36dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
In your second TextView, you're using dimensionRatio wrong. It states in the ConstraintLayout docs that you can only use this attribute with H or W if both of your width and height are set to MATCH_CONSTRAINT (aka 0dp). So for example, you've set the dimensionRatio to h,1:3, but this only works if your width is set to 0dp (aka MATCH_CONSTRAINT). You should either make the width 0dp, set the height explicitly, or change your dimensionRatio to 1:3 rather than h,1:3
Related
I think I have the constraints correct for each element inside of the layout, and I want the app at runtime to look at the preview. The resource for the dice image works properly in another activity, but for some reason doesn't show on the main/first activity.
Here's the preview that's showing inside of Android Studio:
App at runtime:
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="80dp"
android:layout_height="100dp"
android:contentDescription="#string/dice_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.513"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.202"
tools:srcCompat="#drawable/dice_1" />
<Button
android:id="#+id/roll_d6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/roll_d6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/roll_d4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d4"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d6" />
<Button
android:id="#+id/roll_d8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d8"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d4" />
<Button
android:id="#+id/roll_d10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d10"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d8" />
<Button
android:id="#+id/roll_d12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d12"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d10" />
<Button
android:id="#+id/roll_d20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d20"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d12" />
</androidx.constraintlayout.widget.ConstraintLayout>
It is working as programmed, you're just checking it on a small display size where there is no room left below the dice image to fit 6 buttons.
What you need to do is make it responsive to accommodate different screen sizes.
Remove the margins from all the buttons or set it to a minimum margin so that it doesn't take much space when the screen size is too small and the last button can fit.
Connect the buttons to each other by connecting their bottom to next button's top as Bottom_ToTop just like Top_toBottom, to make it a chain, useful for 4th point and last button's bottom to the parent's bottom, so that it doesn't go beyond that point.
Set vertical constraint style in buttons (typically, setting it only in the first button is enough) as spread_inside. This will make equal space of the available space between all 6 buttons. Minimum space will be what you set as margin.
For small sizes, consider making it a 2xN grid of buttons instead of list to utilize the horizontal space available.
Use
android:src="#drawable/dice_1"
instead of
tools:srcCompat="#drawable/dice_1"
If you are using android:src in xml during runtime this will show up
on the app, whereas if you use tools:src in xml it will show only on
the preview of Android studio and not on the runtime of the app.
Reference
The preview looks fine, but the app runs differently. In the layout inspector, there is simply nothing where this weird white space is. It seems to be a problem with ConstraintLayout + ViewPager. I had the same issue in three places, all with same ViewPager, 0dp vertical size setup. I have solved by converting ConstraintLayouts into LinearLayouts. But the question is why do I need to regress to a LinearLayout? I originally wrote the UI with ConstraintLayout, and ViewPager, it was fine. Somewhere along the way, without touching the code, things turned weird and this blank space showed up. As if something in Android UI rendering changed under the hood. Anyone have any idea what it is, or how to solve while keeping a ConstraintLayout?
Here is the layout inspector image of the app running on a device. I have clearly marked the problematic white space with my mouse calligraphy skills.
Here is the layout preview for the following xml code, note UI elements fill the screen, no white space after the bottom toolbar in this view, unlike live app. Don't mind the colour difference, the app changes colours at run time.
fragment_layout.xml (Between green and marked blank space in live app image, the rest of UI is from activity, but I know that's not the problem, so won't add the xml for that)
<?xml version="1.0" encoding="utf-8"?>
<layout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.order.OrderBuildFragment"
>
<com.google.android.material.tabs.TabLayout
android:id="#+id/order_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:layout_constraintBottom_toTopOf="#+id/order_viewpager"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/order_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
app:layout_constraintTop_toBottomOf="#id/order_tabs"
app:layout_constraintBottom_toTopOf="#id/build_order_bottom_toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
</androidx.viewpager.widget.ViewPager>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/build_order_bottom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/order_viewpager"
app:layout_constraintBottom_toBottomOf="parent"
android:background="?attr/colorPrimary"
>
<TextView
android:id="#+id/order_service_point_spinner_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/service_point"
android:textColor="#color/white"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_service_point_spinner"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
/>
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/order_toolbar_service_point_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintStart_toEndOf="#id/order_service_point_spinner_label"
android:layout_marginEnd="8dp"/>
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintGuide_percent="0.5"
/>
<TextView
android:id="#+id/order_textView_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#{#string/currency_symbol + viewModel.price}"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_button_more"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/build_order_guideline_service_point_and_action_buttons"
tools:text="$999.99"
/>
<Button
android:id="#+id/order_toolbar_button_more"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="moreButtonAction"
android:text="#string/more"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_button_send"
app:layout_constraintStart_toEndOf="#id/order_textView_price"
app:layout_constraintTop_toBottomOf="#id/build_order_guideline_service_point_and_action_buttons"/>
<Button
android:id="#+id/order_toolbar_button_send"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendButtonAction"
android:text="#{viewModel.sendButtonText}"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/order_toolbar_button_more"
app:layout_constraintTop_toBottomOf="#+id/build_order_guideline_service_point_and_action_buttons"
tools:text="#string/send"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/build_order_progress_bar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="#{safeUnbox(viewModel.loading)}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
My Linear layout solution simply included replacing ConstraintLayout with a LinearLayout, removing all constraints from child elements and adding orientation: "vertical" (of course) plus putting layout_weight: 1 in the ViewPager element. If that helps anyone.
My guess is that you are using androidx.constraintlayout:constraintlayout:2.0.0-beta2.
This specific version is known to cause issues like this.
Update to the latest version ('androidx.constraintlayout:constraintlayout:2.0.0-beta6' at the time of writing).
I was having trouble getting some views to wrap to the correct height while matching constraints, and I managed to condense my issue down to a single text view.
For some reason, when I'm using layout_constrainedWidth and layout_constrainedHeight, they can't handle text views that just barely wrap onto the next line.
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="64dp"
android:layout_marginBottom="8dp"
android:text="If a single word wraps onto the next line it is cut off one"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I'm actually using it on a scroll view that contains some text views, and it doesn't work at all unless I also apply it to the child views as well.
Is this a bug in Android?
Yes, it was a bug in Android.
https://issuetracker.google.com/issues/123551995
Google marked it as resolved with the release of ConstraintLayout 2.0 beta 2
I'm new on Android Studio and I just want to create a button who open an URL. For that, I have just created a basic activity from the software. When I try to drag and drop on the design nothing is happening.
Here it is the screenshoot
<?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">
<Button
android:id="#+id/button2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="24dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Test" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
There is a
app:layout_constraintStart_toStartOf="parent"
missing on your button. You defined it with 0dp width, so it will scale first if you define left and right constraints.
0dp width or height inside a ConstraintLayout means, that the View will take as much space as possible with the defined Constraint attributes. You missed one for the width scaling, so it will stay 0dp.
If problem persist just follow these steps:
File> Invalid cache/Restart > Invalidate and Restart
It will then surely work
Update :
I get this problems too but it works by Choosing another theme
Problem solved by #I_A_Mok with this problem: Why doesn't the layout design preview get displayed on my Android Studio?
"Change Theme in Editor from App Theme to anything with .NoActionBar (e.g. AppCompat.NoActionBar)."
and this is working! thanks a lot! :D
I have a XML layout for a ViewHolder inside a RecyclerView.
This layout's root is a ConstraintLayout whose height is set to wrap_content.
Inside this flat hierarchy there are 3 textviews and an image view with a fixed height; think of:
<ConstraintLayout>
<TextView height=wrap>
<TextView height=wrap>
<TextView height=wrap>
<ImageView height=150dp>
</ConstraintLayout>
It's a relatively simple layout. In beta4 this is how it looks in the Designer (and eventually at runtime, each recyclerView cell):
Apologies for the "red tape" but it's NDA blah blah.
That being said, the elements are:
The 3 text views (red taped with a nice purple background)
The ImageView with 150dp height is the gray thing.
The Purple background was applied to the root ConstraintLayout. All nice.
Now this is how it looks, without a single modification with Beta 5:
As you can see the Purple (root) Constraint Layout is now "confused" and doesn't wrap content as it used to.
Things I tried:
Adding app:layout_constraintHeight_default="wrap" to the ConstraintLayout (and spread too). Didn't make a difference.
The ImageView has a app:layout_constraintBottom_toBottomOf="parent" constraint that I tried removing, didn't make a difference either.
Revert back to beta4 :)
For the record, this is the full layout (id's have been renamed for red-tape reasons and no tools:text or similar due to the same reasons). The layout is otherwise exactly the same.
<?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="wrap_content"
android:background="#color/colorAccent">
<TextView
android:id="#+id/toplabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text=""
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/top_bottom_label"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/top_right_label"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/top_right_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/top_bottom_label"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toRightOf="#+id/toplabel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/top_bottom_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text=""
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toRightOf="#+id/toplabel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_right_label" />
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_bottom_label"
app:srcCompat="#android:color/darker_gray" />
</android.support.constraint.ConstraintLayout>
Am I supposed to do something different? (I know I can replace this with a RelativeLayout and probably do the same, but anyway… I believe in ConstraintLayout!) :)
I filed a bug about this and I got a workaround.
It's a regression and will be fixed (we hope) but… turns out my Chain is also incorrectly defined. My top_bottom_label does not have a bottom endpoint, and according to the documentation elements in a chain should be connected on both endpoints.
So I added app:layout_constraintBottom_toTopOf="#id/imageview" to the top_bottom_label and this seems to work for my case. I have, effectively added the imageView to the chain, even do I don't really care much for it. It works for now.
Update February 14th 2017: The ConstraintLayout team # Google fixed the issue in master. It will likely be fixed in a next release. (Thanks!).