I am trying to make a Material3 application with Android Studio.
I was able to successfully add a MaterialButton
but when adding a TextInputLayout
, the preview fails without even showing an error.
This is the snippet that works without issues:
<com.google.android.material.button.MaterialButton
android:id="@+id/mybtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/open"/>
This is the xml snippet that causes the issue:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:hint="ok">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
My project is brand new and created using the latest Android Studio version (2022.1.1 patch 1)
I tried:
- Completely uninstalling Android Studio, the Android SDK and all gradle, caches and configuration files and then reinstalled everything
- Invalidating caches and restarting
- Using the Android Studio Material 3 Activity project template
- Checking for issues in the gradle files (missing dependencies, dependencies versions…)
My build.gradle
(project)
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id 'com.android.application' version '7.4.1' apply false
id 'com.android.library' version '7.4.1' apply false
id 'org.jetbrains.kotlin.android' version '1.8.0' apply false
}
My build.gradle
(Module app) dependencies:
dependencies {
implementation 'androidx.core:core-ktx:1.9.0'
implementation 'androidx.appcompat:appcompat:1.6.0'
implementation 'com.google.android.material:material:1.8.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}
My settings.gradle
:
pluginManagement {
repositories {
google()
mavenCentral()
gradlePluginPortal()
}
}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
}
}
rootProject.name = "MyMood"
include ':app'
I am using the Material3 styles:
- Light:
<style name="Theme.MyMood" parent="Theme.Material3.Light.NoActionBar">
- Dark:
<style name="Theme.MyMood" parent="Theme.Material3.Dark.NoActionBar">
3
Answers
well i reproduced your code in the newest version of Android Studios ( Android Studio Electric Eel | 2022.1.1 Patch 1 ) and the xml showed just fine.
I did have issues reproducing the xml myself back in the previous version ( Dolphin ) but i guess its fixed now.
Try updating android studio to the newest version.
If that doesn’t work try changing an option in your " design screen " called "Theme for Preview "
I have the same problem, Electric Eel + Material3 Theme + TextInputLayout brakes layout preview.
This used to work fine before upgrading to Electric Eel, and at the moment, I think downgrading Android Studio is the only option.
I had the same issue and waslosing my mind over it as well! However I made it work now with
Theme.Material3.Light.NoActionBar
implementation 'com.google.android.material:material:1.9.0-alpha02'
id 'com.android.application' version '7.4.2' apply false
andid 'com.android.library' version '7.4.2' apply false
Afterwards clean the project and invalidate ALL caches under: File -> Invalidate Caches (MacOS)
After Android Studio restarted Rebuild Project and then it should work.