how to add a clickable text in EditText - android

Hi, I have a UI like the picture above, when the "forgot?" text clicked it will open another activity, this is an EditText view, Is there any way I can do to add the "forgot?" text and make it clickable?

This should fit your needs:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/et_password"
android:hint="Password"/>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/et_password"
android:text="Forgot?" />
</RelativeLayout>
Just set an OnClickListener to the TextView and you are good to go :)

Related

Textview next to an ImageView

I am trying to have a TextView with an ImageView directly to its right. Right now the image partially overlaps the far right of the text, so if the text inputted is long, then the image is "over" the text. I have an ellipse setting on the text but I need the TextView to "stop" right at the left border of the ImageView.
TextView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
ImageView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"
.... />
<!-- background == #null if you don't want default button background -->
<ImageButton
android:id="#id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="3dp"
android:background="#null"
.... />
</RelativeLayout>
EDIT
See the comments in regards to why this works and the posted question doesn't. Also take a look at
Android Relative Layout alignParentRight and alignParentEnd
for a reference to end/right and start/left attributes.

how to display textview below button in relativeLayout

in the below xml layout, i have two buttons at the same position and they will do their function based on the visibilty set. now i tried to place two textviews
below the buttons, i want the text views to be below both buttons so I used
android:layout_below="#id/actConnect2_btn_connect"
but at run time when the connect-button is visible the text view appears below it, and if pair-button is visible it overlap
how to display the textview below both buttons?
Note: i know that i can use android:layout:marginTop but i want to solve it without it
code:
<Button
android:id="#+id/actConnect2_btn_pair"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_tv_label_devClass"
android:layout_centerInParent="true"
android:text="#string/str_pair"/>
<Button
android:id="#+id/actConnect2_btn_connect"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_connect"
android:layout_below="#+id/actConnect2_tv_label_devClass"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actConnect2_tv_label_uuids"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_btn_connect"
android:text="Service's UUID: ">
</TextView>
<TextView
android:id="#+id/actConnect2_tv_uuids"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/actConnect2_tv_label_uuids">
</TextView>
Put both buttons in a LinearLayout then put the textview below the LinearLayout
take both button in one layout
<RelativeLayout android:id="#+id/relativeButton"
android:layout_width="wrap_content"
android:layout_below="#id/actConnect2_tv_label_devClass"
android:layout_height="wrap_content">
<Button
android:id="#+id/actConnect2_btn_pair"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/str_pair"/>
<Button
android:id="#+id/actConnect2_btn_connect"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_connect"
android:layout_alignParentStart="true" />
</RelativeLayout>
and use this for your textview
android:layout_below="#id/relativeButton"
You have to place the buttons in a Layout (any type and arrange them accordingly)
Assign an ID to that layout.
Place the textView below that layout ID.

TextView and EditText overflow

I've got a need to display and TextView (label), EditText(Input) and TextView(suffix) in a line.
The issue I have is - if the label TextView is too long it The EditText and Suffix TextView and not drawn.
Here's my code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="0"
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.." />
<TextView
android:padding="5dp"
android:layout_weight="0"
android:text="Suffix.."
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
So what I want is - even if the label is over 2-3 lines, for an EditText to appear followed by another TextView.
Any pointers would be appreciated.
Thanks!
Edit:
I've added some 'diagrams' so you can understand what I want to do a bit better.
The label to the EditText can be arbitrary length(2/3 lines), so whenever the label finishes I want an EditText to start (which is followed by another TextView showing a suffix..)
..
![This shows a 2 line label and TextView..]
Edit 2: Thanks for the responses guys!! I think #questioner has really understood what I want to do i.e. I want your 3 views to move to other lines so that they behave like they were one view - and as he has suggested i'll have to find a library for this!
How about this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="100dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"/>
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.."/>
<TextView
android:padding="5dp"
android:text="Suffix.."
android:layout_gravity="center_vertical"
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="100dp"
android:layout_height="wrap_content"/>
</LinearLayout>
If you want your 3 views to move to other lines so that they behave like they were one view - you should use external library for that.
Why not use a RelativeLayout instead of LinearLayout and then use android:layout_below="#+id/..." or android:layout_above="#+id/..." also android:layout_toRightOf="#+id/..." or android:layout_toLeftOf="#+id/..."
Set
android:layout_weight="1"
for each view so that they all occupy the same amount of horizontal space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1">
Try this or please expand a little more.

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 to embed a View (with Buttons, etc.) inside an EditText?

I'm trying to figure out how to embed things, other than Drawables, inside an EditText widget. Specifically the example I'm thinking of is from the Google Buzz widget:
screenshot
(no inline image, sorry, I'm a newb)
It appears to the casual observer that there's an entire layout object pinned to the bottom of the EditText, containing an ImageView, a TextView, and a Button.
Anyone have any idea how to pull this off? Or do we think this is a custom subclass of EditText?
The EditText + Button + ... it's a FrameLayout with the EditText with fill_parent and the Buttons with layout_gravitiy:"bottom". Something like this:
<?xml version="1.0" encoding="utf-8"?> <!-- Main Layout (may be relative or whatever --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Layout for edittext and button -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lines="5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="5dip"
android:text="Overflow"/>
</FrameLayout>
<!-- More layouts ..... --> </RelativeLayout>
you can use frame layout for embed Button in EditText,here i give sample code for embed TextView in EditText,just change the TextView as Button
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="40px"
android:layout_y="35px"
>
<EditText android:id="#+id/twt_post_content" android:layout_gravity="center_vertical"
android:layout_width="320dp" android:layout_height="140dp"
android:paddingTop="5dp" android:imeOptions="actionDone"
android:gravity="left" android:focusableInTouchMode="true"
android:maxLength="140" android:ellipsize="end" />
<TextView
android:text="123"
android:paddingLeft="270dp"
android:paddingTop="100dp"
android:layout_alignParentRight="true"
android:id="#+id/twt_content_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:layout_gravity="center"
android:background="#color/transparent"/>
</FrameLayout>
I think that what they have done here is create a background for their layout that looks like an EditText. Then they added an EditText with the background turned off and come Buttons.

Categories

Resources