Programmatically added TextInputLayout not showing the Outline Box

Question

Adding TextInputLayout with TextInputEditText Programmatically not showing the Outline Box

I want to display some editable fields in a fragment. If I use the below xml then my fragment displayed TextInputLayout with a box outline as expected

sample_layout.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/clParent"
    android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/glvHoldLabelTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".05"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/glhHoldLabelStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.05" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/glhHoldLabelEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.95" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilUsername"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Username"
        app:layout_constraintEnd_toEndOf="@id/glhHoldLabelEnd"
        app:layout_constraintStart_toStartOf="@id/glhHoldLabelStart"
        app:layout_constraintTop_toTopOf="@id/glvHoldLabelTop">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/tietUsername"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is the output from sample_layout.xml TextInputLayout from XML

---

But when I try to do the same through program, it is not showing the outline box and the theme used by the TextInputLayout is also different

Code:

        TextInputLayout tilUsername = new TextInputLayout(getActivity(), null, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);


        TextInputEditText edtUsername = new TextInputEditText(getActivity());
        tilUsername.addView(edtUsername);

//        Set Layout parameters
        ConstraintLayout.LayoutParams clpTextInputLayout = new ConstraintLayout.LayoutParams(
                ConstraintLayout.LayoutParams.MATCH_PARENT, ConstraintLayout.LayoutParams.WRAP_CONTENT);
        clpTextInputLayout.topToTop = glvHoldLabelTop.getId();
        clpTextInputLayout.topMargin = 50;
        clpTextInputLayout.setMarginStart(100);
        clpTextInputLayout.setMarginEnd(100);
        tilUsername.setLayoutParams(clpTextInputLayout);
        tilUsername.setHint("Username");
        tilUsername.setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE);
        tilUsername.setBoxCornerRadii(5, 5, 5, 5);

//        Add TextInputlayout to ConstraintLayout
        clParent.addView(tilUsername);

Here is the output from code: TextInputLayout from Code

Note: Build.gradle(:app) has the below dependency added

implementation 'com.google.android.material:material:1.2.0-alpha06'

Please correct what I am missing here?

Answer 1

I finally figured out what’s causing this issue. In style.xml file, changing the parent attribute of AppTheme style from

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

to

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

displayed the outline box. Now I can see the expected output in my TextInputLayout. Thought it would help someone who is facing the same issue. But still I am not sure about the impact of changing the AppTheme. Suggestions are welcome!

Edit:

I had to modify the method which initializes and adds TextInputLayout to the parent layout as well. Below are my findings,

    TextInputLayout tilUsername = new TextInputLayout(new ContextThemeWrapper(getContext(), R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox));

//    Set Box related configurations first before adding TextInputEditText to the TextInputLayout
    tilUsername.setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE);
    tilUsername.setBoxBackgroundColor(ContextCompat.getColor(tilUsername.getContext(), android.R.color.transparent));
    tilUsername.setHint("Username");

//    Set Layout parameters
    ConstraintLayout.LayoutParams clpTextInputLayout = new ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    tilUsername.setLayoutParams(clpTextInputLayout);
    clpTextInputLayout.topToTop = glvHoldLabelTop.getId();
    clpTextInputLayout.topMargin = 50;
    clpTextInputLayout.setMarginStart(100);
    clpTextInputLayout.setMarginEnd(100);

//    Add TextInputEditText to TextInputLayout
    TextInputEditText edtUsername = new TextInputEditText(tilUsername.getContext());
    tilUsername.addView(edtUsername);

//    Call this line after adding TextInputEditText to the TextInputLayout to get rid error 'float com.google.android.material.shape.MaterialShapeDrawable.getTopLeftCornerResolvedSize()' on a null object reference'
    tilUsername.setBoxCornerRadii(50, 50, 50, 50);


//    Add TextInputlayout to ConstraintLayout
    clParent.addView(tilUsername);

---

Here is the final output: