Develop Reference

Creating an Android launchscreen xml in Flutter project using constraint layout - constraints not found

I wanted to create a new Android launch screen for my Flutter app using constraint layout.
Firstly, I wasn't able to directly open layout builder in Android Studio in my Flutter app project. So using Android Studio, I created a new Android app with an empty activity and used the layout builder to create my layout by setting constraints. I then copied the generated XML into launch_background.xml of my Flutter project - where my previous splashscreen (not using constraint layout) had been working. I added this vectorDrawables.useSupportLibrary = true in the android.defaultConfig in and compile 'com.android.support:appcompat-v7:24.1.1' in dependencies, both in build.gradle.
I'm now unable to run my app because of errors for each constraint:
attribute layout_constraintTop_toTopOf (aka pha.myapp.dep.us:layout_constraintTop_toTopOf) not found.
...and repeat for each constraint.
How have I already tried to fix it?
I tried with this: implementation 'androidx.constraintlayout:constraintlayout:2.0.4' in the
dependencies in build.gradle but my app was stuck building for over
an hour.
I've run flutter clean
I've deleted my entire gradle file.
Am I missing something?
Finally, as reference, this is my XML file. The three drawables exist and have worked before when I haven't used constraint layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
app:srcCompat="#drawable/ic_bg_splash" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="157dp"
android:layout_marginLeft="157dp"
android:layout_marginEnd="157dp"
android:layout_marginRight="157dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/ic_logo" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginLeft="56dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:srcCompat="#drawable/ic_brandlogotag" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android views never becoming invisible

I'm trying to make some of my views invisibe. Here's the XML code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:text="See More Like This"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recommender"
tools:visibility="invisible"
android:layout_marginEnd="24dp" android:layout_marginRight="24dp" android:layout_marginBottom="20dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toTopOf="#+id/imageView"/>
<TextView
android:text="https://www.google.com"
android:layout_width="169dp"
android:layout_height="50dp"
android:autoLink="web"
android:linksClickable="true"
android:id="#+id/urlDisplay"
tools:visibility="invisible"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="24dp" android:layout_marginTop="101dp" android:layout_marginStart="24dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="59dp"
android:id="#+id/comicTitle" tools:visibility="invisible"
android:layout_marginTop="21dp" android:layout_marginBottom="21dp" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/urlDisplay" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" android:layout_marginLeft="40dp"
android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginRight="40dp"/>
</android.support.constraint.ConstraintLayout>
There is no kotlin code except for the boilerplate. When I start up the app, all of my views are visible. I don't understand how this is happening, given that I've explicitly set them to be invisible in xml.
How can I make them invisible?

Read 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 should use android:visibility="invisible" instead of tools:visibility="invisible"

As you are using tools
tools:visibility="invisible"
Just replace the tools with the android it start working fine
android:visibility="invisible"

You have used tools:visibility="invisible"
use android:visibility="invisible" to make your view invisible.

In your xml you have set the tools:visibility="invisible" This is basically tools namespace supported in Android Studio
Android Studio supports a variety of XML attributes in the tools namespace that enable design-time features.
When you build your app, the build tools remove these attributes so there is no effect on your APK size or run-time behavior. Hence when you run the app there is no effect of these attributes.
You can read more about tools attributes in official android dev docs
As suggested in comments you should instead set android:visibility="invisible"

Android Studio 3.2.1 design view is broken

The problem
I've started to notice that my Android Studio is showing some weird glitches lately when I'm working with layout files. It started by randomly breaking AS GUI, which was solved by a restart.
But since today, every time I try to open the design view, it breaks.
The picture below will show what I mean:
As you can see, the UI is completely broken, I can't see most of the buttons, and sometimes not even that layout preview shows up. Is this a known issue?
I'm running Android Studio 3.2.1 stable on Windows 10 x64.
What I've tried so far
I have tried to:
Close AS and open it again;
Clean project;
Rebuild project;
Uninstall and reinstall AS;
Uninstall AS, remove the SDK, gradle caches, and everything related to Android, and then reinstall it again and let it download everything once more.
None of those things worked, unfortunately.
And for the sake of completeness, here's the layout I'm using:
<?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">
<ImageView
android:id="#+id/backdrop"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:importantForAccessibility="no"
android:src="#color/mds_indigo_400"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/letter"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="14sp"
app:autoSizeMaxTextSize="26sp"
android:maxLines="1"
android:textColor="#color/secondaryLightText"
app:layout_constraintTop_toTopOf="#id/backdrop"
app:layout_constraintBottom_toBottomOf="#id/backdrop"
app:layout_constraintStart_toStartOf="#id/backdrop"
app:layout_constraintEnd_toEndOf="#id/backdrop"
tools:text="M" />
<TextView
style="#style/TextAppearance.AppCompat.Large"
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:textColor="#color/colorAccentDark"
app:layout_constraintStart_toEndOf="#id/backdrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/backdrop"
app:layout_constraintBottom_toBottomOf="#id/backdrop"
app:layout_constrainedHeight="true"
tools:text="Marketing"/>
</android.support.constraint.ConstraintLayout>

Android Studio does not show components on design view, but shows on emulator, any idea why? [duplicate]

This question already has answers here:
Android Studio does not show layout preview
(34 answers)
Closed 4 years ago.
I just started with the Build your first app tutorial from android.com but for some reason, the design view does not show anything I drag or drop to it. I've tried creating buttons, text, plaintext etc, all with no errors, however, I can only see it when I run the app. What am I missing?
Running Android studio 3.1.4 on Ubuntu 18.04.1 LTS.
This is my first time using it, and I searched for similar questions before posting and only found questions/answers that were not similar enough to my issue to be helpful. I have tried rebuilding and invalidating the cache/restart with no avail.
Here are some snaps:
Snap of studio
Snap of emulator
Last here is the activity_main.xml:
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:text="#string/title_home"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="KoDy Abbott"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Please let me know if you need anything else to help answer my question. Thank you in advanced, hopefully it is something simple that I am overlooking but at this point its easier for me to ask then bang my head for another few hours.....

There is no error in your project but there are some bugs in the recent update of support libraries
Change support libraries version to 28.0.0-alpha1 and it will work all
implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
implementation 'com.android.support:design:28.0.0-alpha1'

Other solutions is that you can find an image button on the up-left. Click it and you can find a option called "force to refresh layout", click it and you problem will be solved.

Android studio preview does not show layouts

I have just started to learn android studio. I've encountered a problem:
The layouts won't appear in the preview after I have added them. But if I change the theme or run the app in the emulator they do appear but they overlap.

For API 27:
Add the following dependency:
If you are using targetSdkVersion 27,
in your App Level gradle file build.gradle(Module: app)
implementation 'com.android.support:appcompat-v7:27.1.1'
For API 28:
if you are using targetSdkVersion 28,
Step 1:
Make sure you have the following dependency:
implementation 'com.android.support:appcompat-v7:28.0.0-rc02'
UPDATE: For the latest appcompat-v7 library repo version, follow this link
https://mvnrepository.com/artifact/com.android.support/appcompat-v7?repo=google
Step 2:
Goto Values > styles.xml and modify the style as follows,
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
or any other base theme you like.
Here is an example constraint layout for you,
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<EditText
android:id="#+id/enter_age"
android:layout_width="200dp"
android:layout_height="100dp"
android:ems="10"
android:hint="enter age"
android:inputType="number"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button1"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/button1"
android:layout_width="200dp"
android:layout_height="110dp"
android:onClick="butGetAge"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/enter_age"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>