skip to Main Content

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

3

Answers


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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. I had the same issue and waslosing my mind over it as well! However I made it work now with Theme.Material3.Light.NoActionBar

    • Update Android Studio to Electric Eel | 2022.1.1 Patch 2
    • Update Material Design to implementation 'com.google.android.material:material:1.9.0-alpha02'
    • Update Plugins to id 'com.android.application' version '7.4.2' apply false and id '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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search