Develop Reference

EditText is cut off with white space

I have textfield - text view in relative layout with rounded rectangle. It looks fine until I try to change textview to edit text. After it, text of EditText view is cutted of. Well, I try to change height to wrap_content, it fixes the problem of cutting, but the rounded rectangle becomes much higher than with textView although EditText height seems like only half of the rectangle outside. How can I remove these spaces below and above the real visible EditText? Any manipulations with margins/paddings don't help me.
EditText with wrap_content height:
EditText with 30dp height:
TextView with 30dp height:
<RelativeLayout
android:id="#+id/token_input_layout_outside"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/top_divider"
android:gravity="center_horizontal"
android:paddingVertical="5dp"
app:layout_constraintStart_toEndOf="#id/top_divider"
app:layout_constraintTop_toBottomOf="#id/top_divider">
<RelativeLayout
android:id="#+id/token_input_layout"
android:layout_width="#dimen/counter_monitor_width"
android:layout_height="30dp"
android:background="#drawable/counter_background_3"
android:gravity="center">
<EditText
android:gravity="center_horizontal"
android:id="#+id/token_input"
android:layout_width="85sp"
android:layout_height="match_parent"
android:maxLength="5"
android:singleLine="true"
android:textSize="23sp"
android:backgroundTint="#color/white"
android:textColor="#color/white"
android:hint="Input"
android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz">
</EditText>
</RelativeLayout>
</RelativeLayout>

30dp is a small height for your textSize; so you can do it in two different ways:
make edit text wrap_content:
<RelativeLayout
android:id="#+id/token_input_layout"
android:layout_width="#dimen/counter_monitor_width"
android:layout_height="wrap_content"
android:background="#drawable/counter_background_3"
android:gravity="center">
<EditText
android:gravity="center_horizontal"
android:id="#+id/token_input"
android:layout_width="85sp"
android:layout_height="wrap_content"
android:maxLength="5"
android:singleLine="true"
android:textSize="23sp"
android:backgroundTint="#color/white"
android:textColor="#color/white"
android:hint="Input"
android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz">
</EditText>
</RelativeLayout>
change height size:
<RelativeLayout
android:id="#+id/token_input_layout"
android:layout_width="#dimen/counter_monitor_width"
android:layout_height="wrap_content"
android:background="#drawable/counter_background_3"
android:gravity="center">
<EditText
android:gravity="center_horizontal"
android:id="#+id/token_input"
android:layout_width="85sp"
android:layout_height="30dp"
android:maxLength="5"
android:singleLine="true"
android:textSize="23sp"
android:backgroundTint="#color/white"
android:textColor="#color/white"
android:hint="Input"
android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz">
</EditText>
</RelativeLayout>

TextInputEditText, how can align hint to the top margin

I have some trouble with a TextInputEditText and his hint message if I use the last material library version com.google.android.material:material:1.2.0-alpha02 .. I set 5 lines scrollable textInputEditText and I want to show the hint message align to top margin of that text input. On layout editor appears in the correct position, but when I run the app the position is vertical centered. Why ?
Instead i'm not encounter this problem with com.google.android.material:material:1.1.0-beta02
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/sendMailContainer"
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="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/popupTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/sendBusinessCard"
android:textColor="#android:color/black"
android:textSize="22sp" />
<TextView
android:id="#+id/subTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sendBusinessCard"
android:textColor="#android:color/black"
android:textSize="18sp"
android:layout_below="#+id/popupTitle"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="20dp"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/noteMessageContainer"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/subTitle"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/noteMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/emailText"
android:inputType="text|textMultiLine|textCapSentences"
android:textColor="#android:color/black"
android:textColorHint="#color/gray9B"
android:textSize="16sp"
android:isScrollContainer="true"
android:scrollbars="vertical"
android:textIsSelectable="true"
android:minLines="5"
android:maxLines="5"
android:gravity="top"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/notePopupLeftButton"
android:layout_width="180dp"
android:layout_height="35dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/noteMessageContainer"
android:layout_marginBottom="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="40dp"
android:background="#FF515151"
android:text="#string/Cancel"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:id="#+id/notePopupRightButton"
android:layout_width="180dp"
android:layout_height="35dp"
android:layout_alignParentEnd="true"
android:layout_below="#+id/noteMessageContainer"
android:layout_marginBottom="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="40dp"
android:background="#FF515151"
android:text="#string/Send"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</ScrollView>
And this is two screenshot, one of the layout editor with hint in correct position and other is an app screenshot:
enter code here

You can use
android:gravity="top|start"
property in your EditText of the address block and it shall act as the container's underlying controlling property and take the hint to top left corner.

Add android:gravity="top|start" to the EditText in the layout XML file.

Add this code in your EditText / TextInputEditText:
android:gravity="top|start"

I faced the same problem.
I tried to remove the inputType attribute
and the height of edit text becomes now dependent on the lines attribute.
Then my problem is solved

How to centrally align the hint and drawable in edittext?

I want to align the drawable and hint at center in EditText. For that I am having this piece of code,
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/relative_layout"
android:layout_margin="5dp" >
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Hint"
android:background="#null"
android:gravity="center"
android:textColor="#android:color/black"
android:textColorHint="#color/black"
android:textSize="14sp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:drawableLeft="#android:drawable/icon"
android:drawableStart="#android:drawable/icon" />
</RelativeLayout>
Now as soon as user starts typing, the drawable should move to extreme left of EditText. How to achieve this?

Use android:layout_gravity="center" for your EditText. This will help you setting hint in center.
and for drawable this is hack. Set your drawableTop for editText and give some paddingTop to the view.

Android Layout: Comments activity similar to the Facebook app

I have been looking at Facebook comment activity:
I keep wondering how do they manage to make their edittext increase in size from one single line to a maximum of 4 lines, and at the same time, the recyclerview that contains the posts also adjust upwards and reduces in size. This happens automatically when you type in the text.
I'm trying to duplicate their layout myself by doing the following but I can not display more then 2 lines. It keeps on limiting itself to the size of the "Send" arrow, but the edittext never goes over the recyclerview in my example below.
The following is my xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="#color/white"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/like_box"
android:text="Number of Likes goes here"
android:maxLines="1"
android:minLines="1"
android:layout_margin="16dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider"
android:layout_below="#+id/like_box"
android:background="#color/half_black"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_below="#+id/divider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/commenttext" />
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider2"
android:layout_below="#+id/my_recycler_view"
android:background="#color/half_black"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/commenttext"
android:layout_toLeftOf="#+id/send"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:hint="Add a comment here"
android:layout_alignTop="#+id/send"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/send"
android:src="#drawable/ic_action_send_now"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Does anyone know what the correct xml layout code is to ensure that both the edittext and recyclerview adjust upwards when text is entered? I thought it would just be something simple like setting "wrap_content" to my edittext which I have already done but it still does not adjust properly.
Anoop M's answer seems to be the closest to what I want to do but the recyclerview does not adjust properly - see image below. Imagine if the blue portion of the screen was filled with text, the edittext will end up hiding the text in the blue section when you enter more than 4 lines. The edittext just seems to go over the recyclerview. This does not happen on the facebook app, comments are fully shown as the recyclerview adjust upwards when the edittext size increases.

I suggest using a LinearLayout as the parent container. You can then achieve the desired result by applying layout_weights on all child views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/like_box"
android:text="Number of Likes goes here"
android:maxLines="1"
android:minLines="1"
android:layout_margin="16dp"
android:layout_weight="0"/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider"
android:background="#color/half_black"
android:layout_weight="0"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:id="#+id/divider2"
android:background="#color/half_black"
android:layout_weight="0"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/commenttext"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:maxLines="4"
android:inputType="textMultiLine"
android:hint="Add a comment here" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/send"
android:src="="#drawable/ic_action_send_now"
android:layout_weight="0" />
</LinearLayout>
</LinearLayout>
Notable changes:
parent container is now LinearLayout
all child views have layout_weights assigned
the EditText and the send button have been housed inside a horizontal LinearLayout.
maxLines attribute of the EditText has been set to 4 as per your requirements. this way, the EditText will keep growing in height until its 4 lines tall, after which it will start to scroll. The send button will remain aligned to the first line.
inputType="textMultiLine" has been added to the EditText to indicate that the content of this EditText can span multiple lines.
the RecyclerView will shrink when the EditText's line-count increases and vice-versa.

when you are defining your activity in manifest add code given below,
<activity
android:name="com.companyname.applicationname"
android:windowSoftInputMode="adjustResize|adjustPan">
And also you can use you edit text as given below.
<EditText
android:inputType="textMultiLine" <!-- Multiline input -->
android:lines="8" <!-- Total Lines prior display -->
android:minLines="6" <!-- Minimum lines -->
android:gravity="top|left" <!-- Cursor Position -->
android:maxLines="10" <!-- Maximum Lines -->
android:layout_height="wrap_content" <!-- Height determined by content -->
/>

You need to have singleLine = false attribute set for Edit Text
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/commenttext"
android:layout_toLeftOf="#+id/send"
android:background="#null"
android:paddingLeft="16dp"
android:textSize="16sp"
android:singleLine="false"
android:hint="Add a comment here"
android:layout_alignTop="#+id/send"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />

Try this out.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="65dp"
android:fadeScrollbars="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/topedittext_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">
<!--Your Contents Goes Here-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Your Contents Goes Here" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/tos_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:gravity="center"
android:hint="Type message"
android:maxLines="4"
android:minHeight="60dp"
android:padding="7dp"
android:singleLine="false"
android:textColor="#88000000"
android:textColorHint="#bdbdbd"
android:textSize="15sp" />
</RelativeLayout>
</RelativeLayout>

For set the max and min lines in XML use.
android:maxlines="your choice" // in integer
android:minlines="your choice" // in integer
or if you want to show text in one line use:
android:ellipsize

Edittext background stretches to fill the entire area

I have an edittext for which I want to set below background
but when I set this as background it stretches itself to fit in whole EditText like below image.
and below is my code for xml file for editext
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="visible" >
<EditText
android:id="#+id/comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:hint="#string/add_your_comment"
android:imeOptions="actionDone"
android:padding="5dp"
android:background="#drawable/bg_search_field"
android:scrollHorizontally="true"
android:singleLine="true" />
<ImageView
android:id="#+id/post_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:layout_marginRight="#dimen/fifteen_dp"
android:src="#drawable/tick_selection" />
</LinearLayout>
How can I set the background correctly?

Ok So issue resolved simply by using nine patch image i have got from actionBarsherlock library which is using it for it's search view.

This line.-
android:layout_weight="1"
makes your TextView fill the empty width in the LinearLayout. Just try and remove it. You should also replace
android:padding="5dp"
for
android:layout_margin="5dp"

// try this
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="visible" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<EditText
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="add_your_comment"
android:imeOptions="actionDone"
android:padding="5dp"
android:background="#drawable/bg_search_field"
android:scrollHorizontally="true"
android:singleLine="true" />
</LinearLayout>
<ImageView
android:id="#+id/post_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:layout_marginRight="#dimen/fifteen_dp"
android:src="#drawable/tick_selection" />
</LinearLayout>
// also use my uploaded image which is editext background i'm apply 9-patch so now it not stretched if editext width is large.