Editbox Hint - Always show hint - android

I have a textbox with a hint but I want the hint to always be shown, even when there is an input in the TB. Example is the "To" field in the Gmail app.

There are 3 approaches you could use (spoiler - use number 3), since as mentioned in my comment, in the Gmail example , it is not an actual hint:
Using a Linear Layout, getting a cleaner look in my opinion:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="#string/Hint"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:layout_height="wrap_content"/>
</LinearLayout>
Using a Relative Layout, getting a result that mimics the Gmail App:
Note: might be problematic since the text will be displayed on top of the hint, see solution 3.
<RelativeLayout android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="#string/Hint"
android:paddingLeft="10dp"
android:layout_marginBottom="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:layout_height="wrap_content"/>
Result are as shown in this image:
Edit:
using a Drawable:
This seems a better solution (I personally just created it from snipping the 1:1 display of the TextView, will be in correct measurements this way), this will allow a cleaner layout code, and the text will be aware of the drawable:
<RelativeLayout android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:gravity="top"
android:drawableLeft="#drawable/Hint"
android:layout_height="wrap_content"/>

The first thing that came to mind is to insert two editText layout relative layout.
First over second.at the top of that - put background as
android.R.color.transparent
Work with top elevent of relative layout! In item below - set hint(that you want) and try to put text. May be you will have specify padding of first element of top to greate display.
Oh. And one more thing.
Maybe put to editText background background image - but is the bad to scalability.

Related

Text View comes second line if the space is available

In my application, I have one text view, the text view length is 30, if the device space not enough then it will go to the next line. But in my case, if the space available also, it goes to the next line. In XML, it is showing well.
but when I run the real device, the text comes to the second and third lines also, but space is the available right side.
This is the text view I am using
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="#dimen/normal_font_size_newuser_final"
android:text="#string/useridset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:scrollHorizontally="false"
android:textSize="#dimen/normal_font_size_newuser_final"
android:id="#+id/userid_new_final"
android:layout_marginLeft="5dp"
android:text="venkataramanajagu1234567890_12 is setup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Here how to utilize the right side space.So please guide me on how to achieve this, Any properties for text view
Thanks In Advance
Try changing as below:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Also try changing layout_width to "match parent" for TextViews

Android layout: chat bubble with date text in bottom right and baseline of message text

This question has been asked many times but never got a correct answer.
How can I build up a layout (that is similar to the most common messaging apps like Whatsapp, Telegram) with following characteristics:
It has a view that acts as container and has a background with a image of a bubble.
In the container there are two elements, a text message and the text date.
The text message start from top left and can have multiple lines.
The text date is aligned to the baseline of the last text message line, and on the right of it.
I've tried to reach it with relative layout.
<RelativeLayout android:id="#+id/message_bubble_container"
android:layout_below="#+id/message_date_separator_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/chat_message_background"
android:padding="4dp">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
style="#style/TextAppearance.AppCompat.Medium"
android:id="#+id/message_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:text="This is a message long that causes the date to leave the screen!" />
<TextView
style="#style/TextAppearance.AppCompat.Small"
android:id="#+id/message_time"
android:layout_alignBottom="#id/message_text"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/message_text"
android:textColor="#color/material_grey_900"
android:textSize="12sp"
tools:text="18:58"
android:paddingLeft="4dp"/>
</RelativeLayout>
</RelativeLayout>
It works good when the text message is on one single line, but when it grows to fill the width of the container, it pushes out the date from the screen. How can I avoid this behavior and make the text message keep a margin on the right for the date?
If this was CSS I was just needed to add a margin-right: 40px; to the .message_text. Of course this is Android and not CSS so...
Moreover, I dislike to use a maxWidth on the #id/message_text because I don't know how many dp will the screen be.
Lastly, I've heard some talking about FlowLayout. Is there a way?
Thanks to anyone will try to solve this problem that affects anyone that is tring to develop a chat layout.
Use Linear layout with vertical orientation instead of Relative layout. Something like this:
<LinearLayout android:id="#+id/message_bubble_container"
android:layout_below="#+id/message_date_separator_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:background="#drawable/chat_message_background"
android:padding="4dp">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">
<TextView
style="#style/TextAppearance.AppCompat.Medium"
android:id="#+id/message_text"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:text="This is a message long that causes the date to leave the screen!" />
<TextView
style="#style/TextAppearance.AppCompat.Small"
android:id="#+id/message_time"
android:layout_alignBottom="#id/message_text"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/message_text"
android:textColor="#color/material_grey_900"
android:textSize="12sp"
tools:text="18:58"
android:paddingLeft="4dp"/>
</LinearLayout>
</LinearLayout>
Try, and let me know f it worked. :)
take that date text view out of inner relative layout and keep that in parent relative layout with alignparentbottom true and align parentright true
Happy coding

Getting DrawableRight to be pushed to edge of the screen

Im trying to show a ListView (Actually a DragSortListView) with a textitem and a drawableRight similar to the iOS disclosure indicator. Im not able to position the drawableRight to the edge of the screen and it always seems to appear right at the end of the text and not at the edge of the screen.
For e.g., this is how I want it.
+ Text1 here >
+ Text2 >
But it appears as
+ Text1 here>
+ Text2>
I have tried the many layout options and suggestions (since my LinearLayout is Horizontal) but none of them seem to help. The only way I can get to do what I want is setup the layout_width of the TextView to be some hardcoded value, say, 128dp so that it appears positioned at the end of the screen, but that might not be a proper solution since the screen dimensions can vary.
Can you please take a look at my layout code and see what I could be missing.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/titleslist_selector_tablet"
android:orientation="horizontal"
tools:ignore="HardcodedText,UselessParent">
<ImageView
android:id="#+id/dragHandle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#android:color/transparent"
android:src="#drawable/dragicon"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:clickable="false"
android:layout_weight="0" />
<TextView
android:id="#+id/listText"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:drawableRight="#drawable/navigate"
android:gravity="left|center"
android:paddingBottom="1dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#454545"
android:layout_weight="1"/>
</LinearLayout>
The #drawable/navigate is an image that displays the ">"
It looks like DragSortListView was causing the text to be wrapped due to a getMeasuredWidth not taking the full width as expected. There is a github issue highlighting this problem and the solution presented in that ticket seems to solve this perfectly. Sorry for the noise.

Clickable Button (or any View) inside EditText in android

I want to have a Button or a clickable View in my EditText so that I can perform some action on click of it. I was able to put a drawable inside my EditText thanks to Marcosbeirigo for this answer. But, now I want to make it clickable so that I can perform some action on it. I know this is possible as HTC uses buttons inside EditText in their stock sms app as shown in the following image-
In my case, the button will be positioned anywhere, can be in the center also. But the main thing is how can I put a button in EditText?
Use RelativeLayout. The Send and Attach buttons are simple Android Buttons and the 32/160 is a TextView. Put the buttons and the textview on the EditText object, play with the layout arrangments and set some right padding to the EditText object so that the text inside it won't go under the buttons.
You don't need any drawable and listening to the click event of the android buttons is not a question anymore.
Its absolutely correct
Use this , It worked for me -
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText android:id="#+id/id_search_EditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:paddingRight="40dp"
android:hint="Enter your feelings and connect" />
<ImageButton android:id="#+id/id_search_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/id_search_EditText"
android:layout_alignBottom="#+id/id_search_EditText"
android:layout_alignRight="#+id/id_search_EditText"
android:background="#drawable/ic_launcher"/>
</RelativeLayout>
I think you try to search set click event for compound drawable. You can find some solutions here
handling-click-events-on-a-drawable-within-an-edittext
there is no button inside editText It's just an editText with white background so you don't see it's margins and a simple layout arrangement.
The only possible solution is to use a RelativeLayout that allow you to put also Views in overlay to others. Other Layout wont allow you to do such things.
Also I found this tutorial: http://developer.android.com/resources/articles/layout-tricks-merge.html maybe it can helps you :)
Use this this code may work.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/REFReLayTellFriend"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<EditText
android:id="#+id/txtSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/editext_rounded"
android:drawableLeft="#android:drawable/ic_menu_search"
android:gravity="start"
android:hint="Search"
android:singleLine="true"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/txtSearch"
android:background="#drawable/ic_action_content_filter_list"/>
</RelativeLayout>
</LinearLayout>

How to use layouts in .xml files : Android application

How can I use any layout in .xml files. Let I want to use Tablelayout, so I dragged it on Graphical Layout of an xml file, and then I want that layout should be in two columns ( if I want add "Name : " in first column and "EditText" in another column.) but I am anable to do it.I am using Graphical layout. I want do like
Name : EditText (A textbox for Name entry)
Age : EditText (A textbox for Age entry)
Button (to save user entry)
How to design it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:isScrollContainer="true"
>
<EditText
android:id="#+id/et_name"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:visibility="visible"
android:maxLines="1"
android:nextFocusDown="#+id/mark"/>
<EditText
android:id="#+id/et_age"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:inputType="numberDecimal"
android:visibility="visible"
android:maxLength="3"
android:maxLines="1"/>
<Button
android:id="#+id/btn_save"
android:text="#string/save"
android:layout_width="fill_parent"
android:onClick="onButtonClick"
android:layout_height="wrap_content"
android:enabled="false" />
</LinearLayout>
Put this into your XML
There you go ;)
I would consider the same as ehudokai. If you are roughly familiar with XML, then try to use the graphical layout just to control if everything is working es expected.
In case you don't know how to create what you need in XML drag it to somewhere and cut & paste the code to the correct possition.
I think the graphical layout is quite good for editing the properties, so you see directly what you are changing.
try out droiddraw...here is d link..
http://www.droiddraw.org/

Categories

Resources