Image using drawableLeft does not fit inside the EditText field - android

I'm trying to make an image fit into the EditText itself using drawableLeft, without any padding or "whitespaces" around it.
This is what the image looks like for now
This is how it should look like
I tried increasing the size of the image itself but it made the EditText expand even more.
Here's the XML file:
<EditText
android:layout_marginTop="6dp"
android:id="#+id/login_password"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textColor="#8d8e8f"
android:hint="Password"
android:drawableLeft="#drawable/sample"
android:singleLine="true"
android:inputType="textPassword"
android:layout_below="#+id/login_name"
android:layout_centerHorizontal="true" />
How can the image fit inside the EditText? Does it something to do about the image itself?

You can try the LinearLayout for it. Means in the LinearLayout , you should put the Editext's drawable image as the background , and than divide it in to three parts,1st part is for the password_image , 2nd one for your EditText and and 3rd last one for is your INVISIBLE View, which prevent , your EditText value to touch at end
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/EDITEXT_DRAWABLE"
android:gravity="center_vertical"
android:padding="5dp"
android:weightSum="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:gravity="left|center"
android:src="#drawable/sample" />
<EditText
android:id="#+id/password_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1.5"
android:background="#android:color/transparent"
android:ems="10"
android:gravity="center"
android:hint="********"
android:inputType="textPassword"
android:paddingLeft="-10dp"
android:singleLine="true"
android:imeOptions="actionDone"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:layout_weight="0.1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:src="#drawable/sample"
android:visibility="invisible" /> ///PUT THE VIEW INVIIBLE
</LinearLayout>

Just use a Fram layout it works well use a frame layout and inside it edit text and an image view is created set the background of image view to transperent and gravity to the right or to the left
<FrameLayout
android:layout_width="match_parent"
android:layout_height="25dp">
<EditText
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_gravity="left|center_vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/border_round"
android:drawableLeft="#color/place_autocomplete_search_text"
android:drawableStart="#drawable/places_ic_search"
android:drawableRight="#drawable/arrowxml">
</EditText>
<ImageView
android:layout_width="25dp"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:layout_gravity="right"
android:src="#drawable/searcharrow"
android:layout_height="25dp" />

use this...........
<EditText
android:id="#+id/user_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/editback"
android:drawableLeft="#drawable/useremail"
android:drawablePadding="10dp"
android:hint="#string/user_name"
android:padding="7dp"
android:singleLine="true"
android:textColor="#9291A1"
android:textSize="15sp" />

Related

How to ellipsize a TextView in between an ImageView and a TextView?

Here is my layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_marginStart="20dp"
android:gravity="center_vertical|start"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18.9dp"
android:lineSpacingExtra="64sp"
android:textColor="#484848"
android:textSize="16sp"
tools:text="அனைத்து அனைத்துஅனைத்து" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:lineSpacingExtra="64sp"
android:text="0"
android:textAlignment="center"
android:textColor="#color/red_500"
android:textSize="14sp" />
</LinearLayout>
All other languages are working fine, except tamil language is very big.
I need an icon at beginning and sometimes it show number of notifications at end. So I need to set ellipsize to text on middle.
How to achieve this?
you can use android:ellipsize atrribute to do that.
like this :
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18.9dp"
android:lineSpacingExtra="64sp"
android:textColor="#484848"
android:textSize="16sp"
android:ellipsize="end"
android:maxLines="1"
tools:text="அனைத்து அனைத்துஅனைத்து" />
note: don't forget to use android:maxLines attribute to set the line number of your text.

EditText height changes according to the text size

If I change the textsize in editext, the height of edittext changes accordingly. I want the size of edittext to be same and I want a smaller sized hint or text to be in it. What should I do? Following is the code and I am also posting the screenshot of this layout :
<RelativeLayout
android:id="#+id/normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4594e4"
android:orientation="horizontal">
<ImageView
android:id="#+id/set"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_marginTop="05dp"
android:padding="5dp"
android:src="#drawable/bari" />
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />
<EditText
android:id="#+id/etDestination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etOrigin"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:onClick="wow"
android:text="Where to go ?"
android:textColor="#fff"
android:textColorHint="#fff" />
<ImageView
android:id="#+id/swipe"
android:layout_width="30dp"
android:layout_height="27dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/_5sdp"
android:background="#drawable/flip" />
</RelativeLayout>
Screenshot of the layout before changing:
Screenshot of layout after changing textsize:
Try using android:minHeight and android:maxHeight attributes :
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textPersonName"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="12sp"/>
<EditText
android:id="#+id/etUserEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="14sp"/>
Use padding for this :-
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />
Give fix height to the layout android:layout_height="75dp"
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true"/>
Here, try this third party library.
Your TextView height would be fixed but your textView size will be adjusted
dependencies {
compile 'me.grantland:autofittextview:0.2.+'
}
Enable any View extending TextView in code:
AutofitHelper.create(textView);
Enable any View extending TextView in XML:
<me.grantland.widget.AutofitLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>
</me.grantland.widget.AutofitLayout>
Use the built in Widget in code or XML:
<RootElement
xmlns:autofit="http://schemas.android.com/apk/res-auto"
...
<me.grantland.widget.AutofitTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="2"
android:textSize="40sp"
autofit:minTextSize="16sp"
/>
For more information, visit below link:
https://github.com/grantland/android-autofittextview
You can explicitly set the height and size of your EditText view as well as the text in it.
To set the heigh of the EditText simply use :
android:layout_height="<height_you_want>dp"
And to set height of the text in your EditText view :
android:textSize="<height_you_want>sp"
And you can simultaneously view the changes in the preview tab of AndroidStudio.
One Solution : include these two lines in your XML file
android:maxLines="1"
android:singleLine="true"
Using the EditText inside of a ConstraintLayout will fix this.
...
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="17">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="1"
android:textSize="24sp"
android:text="foo"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

How to allow view to expand without pushing othe views off screen

I have a horizontal layout with two views in it: an EditText that will show a chosen path, and a "Browse" Button to the right of the EditText.
I want the EditText to expand as required, but not to the extent that it pushes the Button off the screen.
Here is my current xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
I have tried all types of layout, I have tried using toLeftOf, toRightOf and everything I can think of, I think I now need help if I am to get this working.
You can achieve this using layout weights:
<LinearLayout
android:layout_width="match_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
This xml can be interpreted as saying: "let the EditText take up all the horizontal room that is not filled by other views" (in this case, the only other view is the Button).
Try with RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"
android:layout_toLeftOf="#+id/browse_button"
android:layout_alignParentLeft="true" />
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_alignParentRight="true" />
</RelativeLayout>

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.

EditText not displaying entered text while setting ImageView as background of EditView and also while placing EditView over ImageView?

while i am placing EditText over an ImageView by using android:layout_alignTop property of EditText as below:-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/first_meddle_baar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/image_view"
android:src="#drawable/top_meddle_baar" />
<ImageView
android:id="#+id/search_baar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:contentDescription="#string/image_view"
android:src="#drawable/search_baar" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/search_baar" // #1
android:layout_margin="3dip"
android:hint="#string/search"
android:paddingLeft="30dip" />
or if i am placing an EditText over a TextView whose background i had set as an image as in the code below:-
<TextView
android:id="#+id/first_enter_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/first_center_back"
android:layout_margin="12dp"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:background="#drawable/enter_code_new"
android:text="#string/enter_client_code"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<EditText
android:layout_width="70dp"
android:layout_height="35dp"
android:layout_alignTop="#id/first_enter_code" //#2
android:layout_marginLeft="210dip"
android:padding="15dp" />
In both the cases the text that is entered into EditText is not getting displayed ? why?
First of all you and give background image to any text box you need not to take this separately in image view. This will resolve your problem of showing edittext.
Just like:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/search_baar"
android:layout_margin="3dip"
android:background="#drawable/txt_view_bg"
android:paddingLeft="30dip" />

Categories

Resources