4

The layout preview in Android Studio isn't rendering and I am unsure why. I have everything updated to the latest version, and it seems to run fine on other computers. My professor wasn't sure how to fix this and all the other layout rendering Stack Overflow posts I could find are outdated. I've tried refreshing it, restarting it, rebuilding it, invalidating caches, etc...

The best clue I could get is that it has to due with the androidx.constraintlayout.widget.ConstraintLayout not being properly supported. My professor also mentioned that there might be an issue with Jetpack? Not quite sure what he means.

enter image description here

activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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" android:background="@android:color/background_light">
    <EditText
            android:layout_width="86dp"
            android:layout_height="45dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/totalTwentyEditText"
            app:layout_constraintStart_toEndOf="@+id/totalFifteenEditText" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline4" android:text="0.00" android:textAlignment="center"
            android:focusable="false" android:longClickable="false"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline" app:layout_constraintGuide_begin="20dp"
                                                android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline2" app:layout_constraintGuide_begin="86dp"
                                                android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline3" app:layout_constraintGuide_begin="128dp"
                                                android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline4"
                                                android:orientation="horizontal"
                                                app:layout_constraintGuide_begin="191dp"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline5" app:layout_constraintGuide_begin="259dp"
                                                android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
                                                android:id="@+id/guideline6" app:layout_constraintGuide_begin="309dp"
                                                android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Barrier
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/leftColumn"
            app:barrierDirection="end"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp"
            app:constraint_referenced_ids="textView3,textView5,textView4,textView2,textView"/>
    <TextView
            android:text="@string/bill_total"
            android:layout_width="wrap_content"
            android:layout_height="23dp"
            android:id="@+id/textView" android:textSize="18sp"
            android:textStyle="bold"
            android:textAlignment="viewEnd"
            android:textColor="@android:color/black"
            android:layout_marginStart="16dp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/billTotalEditText"/>
    <TextView
            android:text="@string/tip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" android:textSize="18sp"
            android:textStyle="bold" android:textAlignment="viewEnd" android:textColor="@android:color/black"
            android:layout_marginEnd="8dp" app:layout_constraintEnd_toEndOf="@+id/leftColumn"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline3"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/tipTenEditText"/>
    <TextView
            android:text="@string/total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView3" android:textSize="18sp"
            android:textStyle="bold" android:textAlignment="viewEnd" android:textColor="@android:color/black"
            android:layout_marginEnd="8dp" app:layout_constraintEnd_toEndOf="@+id/leftColumn"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline4"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/totalTenEditText"/>
    <TextView
            android:text="@string/custom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView4" android:textSize="18sp"
            android:textStyle="bold" android:textAlignment="viewEnd" android:textColor="@android:color/black"
            android:layout_marginEnd="8dp" app:layout_constraintEnd_toEndOf="@+id/leftColumn"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline5"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/customSeekBar"/>
    <TextView
            android:text="@string/tip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView5" android:textSize="18sp"
            android:textStyle="bold" android:textAlignment="viewEnd" android:textColor="@android:color/black"
            android:layout_marginEnd="8dp" app:layout_constraintEnd_toEndOf="@+id/leftColumn"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline6"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/tipEditText"/>
    <EditText
            android:layout_width="302dp"
            android:layout_height="39dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/billTotalEditText"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline"
            android:layout_marginStart="8dp" app:layout_constraintStart_toStartOf="@id/leftColumn"
            app:layout_constraintHorizontal_bias="0.0" android:text="@string/zeroDecimal"/>
    <EditText
            android:layout_width="81dp"
            android:layout_height="wrap_content"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/tipTenEditText"
            app:layout_constraintStart_toEndOf="@+id/textView2" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/tipFifteenEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline3" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
    <EditText
            android:layout_width="86dp"
            android:layout_height="wrap_content"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/tipFifteenEditText"
            app:layout_constraintStart_toEndOf="@+id/tipTenEditText" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/tipTwentyEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline3" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
    <EditText
            android:layout_width="86dp"
            android:layout_height="wrap_content"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/tipTwentyEditText"
            app:layout_constraintStart_toEndOf="@+id/tipFifteenEditText" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline3" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
    <TextView
            android:text="@string/tenPercent"
            android:layout_width="36dp"
            android:layout_height="23dp"
            android:id="@+id/textView6" android:textSize="18sp"
            android:textAlignment="center" android:textStyle="bold" android:textColor="@android:color/black"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/tipTenEditText" app:layout_constraintEnd_toEndOf="@+id/tipTenEditText"/>
    <TextView
            android:text="@string/fifteenPercent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView7" android:textSize="18sp"
            android:textAlignment="center" android:textStyle="bold" android:textColor="@android:color/black"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/tipFifteenEditText" app:layout_constraintEnd_toEndOf="@+id/tipFifteenEditText"/>
    <TextView
            android:text="@string/twentyPercent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView8" android:textSize="18sp"
            android:textAlignment="center" android:textStyle="bold" android:textColor="@android:color/black"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/tipTwentyEditText" app:layout_constraintEnd_toEndOf="@+id/tipTwentyEditText"/>
    <EditText
            android:layout_width="80dp"
            android:layout_height="45dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/totalTenEditText"
            app:layout_constraintStart_toEndOf="@+id/textView3" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/totalFifteenEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline4" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
    <EditText
            android:layout_width="86dp"
            android:layout_height="45dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/totalFifteenEditText"
            app:layout_constraintStart_toEndOf="@+id/totalTenEditText" app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/totalTwentyEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline4" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
    <SeekBar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/customSeekBar" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline5" app:layout_constraintEnd_toStartOf="@+id/customTextView"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toEndOf="@+id/leftColumn"
            android:layout_marginStart="8dp" android:progress="18" android:max="100"/>
    <TextView
            android:text="@string/eighteenPercent"
            android:layout_width="55dp"
            android:layout_height="29dp"
            android:id="@+id/customTextView" android:textSize="18sp"
            android:textAlignment="center" android:textStyle="bold" android:textColor="@android:color/black"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline5"
            app:layout_constraintStart_toStartOf="@+id/totalTwentyEditText" app:layout_constraintEnd_toEndOf="@+id/totalTwentyEditText"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/customSeekBar"/>
    <EditText
            android:layout_width="84dp"
            android:layout_height="43dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/tipEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline6"
            app:layout_constraintEnd_toEndOf="@+id/totalTenEditText"
            app:layout_constraintStart_toStartOf="@+id/totalTenEditText"
            android:text="@string/zeroDecimal" android:textAlignment="center" android:focusable="false"
            android:longClickable="false"/>
    <TextView
            android:text="@string/total"
            android:layout_width="51dp"
            android:layout_height="26dp"
            android:id="@+id/textView10" android:textSize="18sp"
            android:textStyle="bold" android:textAlignment="viewEnd" android:textColor="@android:color/black"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="@+id/guideline6"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="@+id/tipEditText"
            app:layout_constraintStart_toStartOf="@+id/totalFifteenEditText" app:layout_constraintEnd_toEndOf="@+id/totalFifteenEditText"/>
    <EditText
            android:layout_width="86dp"
            android:layout_height="47dp"
            android:inputType="numberDecimal"
            android:ems="10"
            android:id="@+id/totalEditText" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/guideline6"
            app:layout_constraintStart_toStartOf="@+id/totalTwentyEditText"
            app:layout_constraintEnd_toEndOf="@+id/totalTwentyEditText"
            app:layout_constraintBottom_toBottomOf="@+id/textView10" android:text="@string/zeroDecimal"
            android:textAlignment="center" android:focusable="false" android:longClickable="false"/>
</androidx.constraintlayout.widget.ConstraintLayout>

app gradle

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.example.tipcalculator"
        minSdkVersion 17
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Any help would be appreciated.

Genevieve
  • 975
  • 2
  • 21
  • 35
  • ["Force Refresh Layout"](https://stackoverflow.com/a/49791978/115145) worked for me when I ran into this problem yesterday. While the linked-to answer is for Android Studio 3.1, it worked for me on 3.3.1. – CommonsWare Feb 09 '19 at 21:00
  • @CommonsWare I wish - I've tried it, and I can tell it refreshes but the layout doesn't change – Genevieve Feb 09 '19 at 21:03
  • Press the red explanation mark and show us the error.Did you clean your build? – Steve Moretz Feb 09 '19 at 21:39

2 Answers2

3

I can see your implementations are wrong:

com.android.support.constraint:constraint-layout:1.1.3

You should have:

androidx.constraintlayout:constraintlayout:2.0.0-alpha3

And also a few others like:

com.android.support:appcompat-v7:27.1.1

To fix all goto Refactor(menu)->migrateToAndroidX if you don't have such an option update your ide(Android Studio).

Steve Moretz
  • 2,758
  • 1
  • 17
  • 31
  • Hey - you were definitely right but now I get an error that says v7 in import android.support.v7.app.AppCompatActivity is an unresolved reference in my main activity. – Genevieve Feb 09 '19 at 22:10
  • Nevermind I removed that part - it works now. I would also like to mention that the rendering didn't work until I put android.enableJetifier=true in the gradle properties – Genevieve Feb 09 '19 at 22:14
  • @Mia Yes the refactor is a big buggy you should just fix some parts your self just remove the red import statements and add new import statements by alt + enter.android.enableJetifier=true is supposed to be added by refactor. :) – Steve Moretz Feb 10 '19 at 06:29
2

  1. You can go to Refractor Menu and then -> Click on Migrate To Android X

  2. These dependencies will be added automatically, if not you can add these (Note: Dependency Versions may vary)

    implementation 'androidx.appcompat:appcompat:1.0.2'

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

implementation 'com.google.firebase:firebase-auth:16.2.1'

implementation 'androidx.legacy:legacy-support-v4:1.0.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'androidx.test:runner:1.1.1'

androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'

  3. Try "Force Refresh Layout" option from Layout Editor in preview.

  4. If the 3rd Option doesn't help, try cleaning and rebuilding your project. This should fix the issue.

I know this question has already an answer but these steps might help someone as i fixed the same problem using these steps.

Boken
  • 4,825
  • 10
  • 32
  • 42
Aakash
  • 5,181
  • 5
  • 20
  • 37