Reputation: 10891

TextInputLayout EditText counter runs off screen in LinearLayout

I am trying to make my EditText take up the remaining empty space of the screen between the toolbar on top and the wide submit button on the bottom.

However, when I use match_parent for that EditText, the counter runs off screen (ends up behind the button). I can't seem to figure out how to make it show.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.myapp.app.PostActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:overScrollMode="never"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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


    <LinearLayout
        android:id="@+id/textLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        >

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:scrollbars="vertical"
            app:counterEnabled="true"
            app:counterMaxLength="300">

            <EditText
                android:id="@+id/EditText"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00000000"
                android:gravity="top|left"
                android:inputType="textMultiLine|textCapSentences"
                android:maxLength="300"
                android:scrollbars="vertical"/>

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

    </LinearLayout>


    <LinearLayout
        android:id="@+id/submitArea"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/postButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Submit" />
    </LinearLayout

</LinearLayout>

Here is what it looks like right now:

Here is what I want it to look like (with the 0/300 counter on the bottom right):

Upvotes: 3

Answers (2)

pRaNaY

Reputation: 25312

Try below updated xml code for your layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".AppTourActivity">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:overScrollMode="never"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <LinearLayout
        android:id="@+id/textLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"

        android:orientation="vertical"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:scrollbars="vertical"
            app:counterEnabled="true"
            app:counterMaxLength="300">

            <EditText
                android:id="@+id/EditText"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00000000"
                android:gravity="top|left"
                android:inputType="textMultiLine|textCapSentences"
                android:maxLength="300"
                android:scrollbars="vertical" />

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

    </LinearLayout>
    <TextView
        android:id="@+id/tvCounter"
        tools:text="0/300"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10sp"
        android:layout_height="wrap_content" />
</RelativeLayout>

<LinearLayout
    android:id="@+id/submitArea"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal">

    <Button
        android:id="@+id/postButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Submit" />
</LinearLayout>

</LinearLayout>

Output:

I hope its helps you.

Upvotes: 1

Jiyeh

Reputation: 5297

Try using RelativeLayout instead, think the problem is with your layouts:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout     
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapp.app.PostActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:overScrollMode="never"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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


<LinearLayout
    android:id="@+id/textLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/appBarLayout"
    android:layout_above="@id/submitArea"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    >

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:scrollbars="vertical"
        app:counterEnabled="true"
        app:counterMaxLength="300">

        <EditText
            android:id="@+id/EditText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00000000"
            android:gravity="top|left"
            android:inputType="textMultiLine|textCapSentences"
            android:maxLength="300"
            android:scrollbars="vertical"/>

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

</LinearLayout>


<LinearLayout
    android:id="@+id/submitArea"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        android:id="@+id/postButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Submit" />
</LinearLayout>

</RelativeLayout>

The tricks are using android:layout_below and android:layout_above for your middle layout, and android:layout_alignParentBottom="true" for your submit button.

Hope this helps ;)

Upvotes: 1

TextInputLayout EditText counter runs off screen in LinearLayout

Answers (2)

Related Questions