Using TextInputLayout to count the number of characters in an EditText

Question

I am trying to use TextInputLayout to count the number of characters in an EditText. The problem is that and I wrap my editText in the code of the TextInputLayout, the editText disappears.

This is my XML code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    tools:context="com.construct.v2.activities.plan.PlanChooserActivity"
    android:background="@android:color/white"
    android:id="@+id/relativeLayout">

    <include android:id="@+id/toolbar" layout="@layout/toolbar_shadow"/>

    <LinearLayout
        android:layout_below="@+id/toolbar"
        android:id="@+id/add_category_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/add_blue"
        android:paddingTop="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingBottom="20dp"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="55" >

    <EditText
        android:id="@+id/edittext_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/add_new_category"
        android:textColorHint="#b1b1b1"
        android:textColor="@color/text_color"
        android:textSize="@dimen/s_text_size"
        android:paddingTop="20dp"
        android:background="#ffffff"
        android:maxLines="1"
        android:inputType="text"/>

    </android.support.design.widget.TextInputLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_bar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#f5f5f5"
        android:layout_below="@+id/add_category_layout"
        android:visibility="invisible">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="15dp"
            android:gravity="center_vertical"
            android:id="@+id/movie_name"
            android:textSize="@dimen/s_text_size"
            android:textColor="#b1b1b1"
            android:text="@string/added_categories"/>

    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:scrollbars="vertical"
        android:visibility="invisible"
        android:layout_below="@id/layout_bar"/>

    <TextView
        android:id="@+id/ghost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:fontFamily="sans-serif"
        android:textStyle="bold"
        android:textColor="#494949"
        android:layout_below="@+id/toolbar"
        android:layout_centerHorizontal="true"
        android:paddingBottom="20dp"
        android:paddingTop="10dp"/>

    <ImageView
        android:id="@+id/edit_image"
        android:layout_width="135dp"
        android:layout_height="100dp"
        android:src="@drawable/empty_categorie"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/ghost"/>

    <TextView
        android:id="@+id/message_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:fontFamily="sans-serif"
        android:textStyle="bold"
        android:textColor="#494949"
        android:text="@string/view_category_title_empty"
        android:layout_below="@+id/edit_image"
        android:layout_centerHorizontal="true"
        android:paddingBottom="15dp"
        android:paddingTop="10dp"/>

    <TextView
        android:id="@+id/message_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:fontFamily="sans-serif"
        android:textStyle="normal"
        android:textColor="#494949"
        android:lineSpacingExtra="6sp"
        android:gravity="center_horizontal"
        android:layout_below="@+id/message_title"
        android:layout_centerHorizontal="true"
        android:paddingBottom="30dp"
        android:text="@string/view_category_message_empty"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"/>

</RelativeLayout>

If I remove the textInputLayout the EditText appears, but with the tag it is not showing.

I would also accept any other suggestions to count the characters of a EditText.

Answer 1

use this:

<LinearLayout
    android:id="@+id/add_category_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:visibility="visible">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="20dp"
        android:src="@drawable/add_blue" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="55">

        <EditText
            android:id="@+id/edittext_category"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:hint="@string/add_new_category"
            android:inputType="text"
            android:maxLines="1"
            android:paddingTop="20dp"
            android:textColor="@color/text_color"
            android:textColorHint="#b1b1b1"
            android:textSize="@dimen/s_text_size" />

    </android.support.design.widget.TextInputLayout>

</LinearLayout>

Note: You also need to:

1- Add compile 'com.android.support:design:26.0.1' to your app level build.gradle file.

2- Add this to your project level build.gradle file:

repositories {
    maven {
        url "https://maven.google.com"
    }
}