How to give an `EditText` a label to its left side? - android

How to give an EditText a label to its left side?

You can combine textview/imageview with edittext for that, for example like this one :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/shape_edittext_border_red"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView <!-- this one should be your text or image-->
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="10dp"
android:src="#drawable/your_logo" />
<EditText
android:id="#+id/edit_mobile"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#null"
android:hint="#string/dialog_mobile"
android:inputType="phone"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#color/main_color"
android:textColorHint="#color/main_color"
android:textSize="14sp" />
</LinearLayout>

you can do something like this.
File->new->image asset-> here choose 1st drop down and select Action bars and Tabs Icons->then choose radio button Asset type Text->now next columns is Text here in "Aa" field Enter "F" and choose back ground.
now save it with some img.png
now In your EditText
write add android:drawableLeft="#drawable/img.png" like bellow
<EditText
android:id="#+id/edittext_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Child's First Name"
android:textSize="20sp"
android:drawableLeft="#drawable/img.png" />

Related

Kotlin can't click on empty EditText

I am creating a profile activity and each row contain on one side a textview for the information about the row for exemple : Name, on the other side i have an EditText to change the information when we click on validate. here is the xml for each row :
<FrameLayout
android:id="#+id/first_name_row"
android:layout_marginBottom="#dimen/profile_row_bottom_margin"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/small_item_list_height"
android:paddingEnd="#dimen/default_padding"
android:paddingLeft="#dimen/default_padding"
android:paddingRight="#dimen/default_padding"
android:paddingStart="#dimen/default_padding">
<TextView
android:includeFontPadding="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/default_padding"
android:layout_marginRight="#dimen/default_padding"
android:text="#string/acct_first_name"
android:textSize="#dimen/profile_row_text_size" />
<EditText
android:id="#+id/acc_name_first"
android:includeFontPadding="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/default_padding"
android:layout_marginRight="#dimen/default_padding"
android:background="#null"
android:text="#string/acct_first_name"
android:enabled="false"
android:focusable="false"
android:cursorVisible="false"
android:textSize="#dimen/profile_row_text_size" />
</RelativeLayout>
</FrameLayout>
The problem is that I added android:background="#null" because I don't want the bar under the field. but when I do that I delete all character from the field, it's become empty and if I change to focus on another field, I can't click on the empty field.
Here you have the image, the field Nom is selected but we see that the field prename is empty so I can't select it. also, the field email work because I didn't put backgound = null but I don't want the bar under it.
Is there a way to have a Textedit that doesn't have a bar under it but can still be clickable is it's empty?
EditText has android:layout_width="wrap_content" once you remove all the char with becomes zero, next time even if you enable it you cannot click it. Use attribute android:minEms="1".
From my point of view it will be better to just add some minimum width to your edit text:
<EditText
android:id="#+id/acc_name_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/default_padding"
android:layout_marginRight="#dimen/default_padding"
android:background="#null"
android:cursorVisible="false"
android:enabled="false"
android:focusable="false"
android:includeFontPadding="false"
android:minWidth="50dp"
android:text="#string/acct_first_name"
android:textSize="#dimen/profile_row_text_size" />

How to align two text in extreme ends (left and right) in a Single Button View android

I have a button for showing list of items in a different popup
In that button, I want a text as a label which is left aligned and a text on the right side which would be dynamically added depending on the item selected from the popup
How to align these two texts on a single button? I'm new to android.
Tried giving different ascii characters as spaces but didn't help
<Button
android:id="#+id/button"
android:layout_width="400dp"
android:layout_height="80dp"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="14dp" />
Expected Result
[**Name** john] ---- single button view with two texts
Wrap your button and textviews withhin a frame layout, along with elevation to display the textviews over the button :
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="80dp"
android:textAllCaps="false"
android:textSize="14dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|start"
android:text="TextView 1"
android:layout_margin="5dp"
android:elevation="2dp"
android:outlineProvider="none"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:text="TextView 2"
android:layout_margin="5dp"
android:elevation="2dp"
android:outlineProvider="none"/>
</FrameLayout>
Note: android:outlineProvider="none" will remove the shadow on the textviews that the elevation provides.

How to set an non editable text on left side of edit text in android?

As we all know that we can set a drawable_left on the EditText using
edittext.setcCompoundDrawablesWithIntrinsicBounds(R.drawable.icon,0,0,0);
Is it possible to set a non editable text say "A" on the left side of the edit text?
You can do this like this (The values are for example):
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_marginRight="10dp"/>
<EditText android:layout_width="100dp"
android:layout_height="25dp"
android:id="#+id/editTextView"
android:layout_marginLeft="40dp"/>
</RelativeLayout>

How to match drawableleft borders with its parent edittext's borders?

I am trying to add a drawableleft to an Edittext:
<EditText
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon_email"
android:hint="#string/login_identity_hint"
android:textSize="12sp" />
Here is how it looks like:
As you see, the image does not match its parent's borders, there is padding from left, bottom and top even though i do not set any padding. What can i do about it?
I also tried the following approach:
<RelativeLayout
android:id="#+id/editUserNameContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_email"
android:layout_alignParentLeft="true"/>
<EditText
android:layout_toRightOf="#+id/img"
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:hint="hint"
android:textSize="12sp" />
</RelativeLayout>
But this time, it looks like the following: The image and edittext's heights do not match and there is a small gap between them:
Thanks.
I am thinking the only way you can get it to be how you want is to do something like this....
Remove android:drawablePadding="5dp" from EditText
Remove android:layout_toRightOf="#+id/img" from EditText
Add android:paddingLeft="50dp" to EditText
Add android:layout_alignParentLeft="true" to ImageView
This will just put the image over the top of your edit text, and using the padding to move the text in the edit text box to the right a bit after the image. You may need to make adjustments to the image view to make it fit just right
Let me know how this works!
<ImageView android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_email"
android:layout_alignParentLeft="true"/>
<EditText
android:layout_alignParentLeft="true"
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="50dp"
android:hint="hint"
android:textSize="12sp" />

How do you remove the extra inner padding inside a Spinner button in an Android layout?

I am trying to create a Button that looks like a Spinner.
I have done this by creating a Button like this:
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
The problem is that the text ("default text") inside the Button seems to have extra padding around it, which makes the Button look bloated and expanded in its height.
I thought that setting the layout_height for the button to "wrap_content" would fix this and make the button thinner, but it does not have any effect.
Does anyone know how to make this button's height wrap to the text inside it?
Here is the example code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp" >
<TextView
android:id="#+id/dateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Select date:"
android:textSize="15sp" />
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
</RelativeLayout>
android:gravity="center_vertical|center_horizontal" instead of this you can write
android:gravity="center" but as per your requirment just remove this line.do not add any gravity and change your height size android:layout_height="40dp"
i changed your code
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
style="?android:attr/spinnerStyle"
/>
The padding of this button is decided by the drawable of it. You either need to change the spinner drawable (can be done at runtime) , or provide your own drawable to the given button that would make it look like a spinner, without using the default one

Categories

Resources