Search code examples
androidxmlandroid-studiokotlinmaterial-ui

Adding a TextInputLayout breaks the Android Studio layout preview, but the apk builds as expected and the app runs without issues


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)

This is a GIF of the issue

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">

Solution

  • 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.