Put constant text before EditText and TextView - android

I want to put some constant text before an EditText and TextView view widget in android. Is it possible using XML attributes or using any other way?
I want to write Task before taskname field as shown in the picture. Follow the below link to see image.
https://i.stack.imgur.com/tF0wH.png

here is the code to make EditText hint to its label after entering text inside it
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextAppearance.App.TextInputLayout">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/login_field_email"
android:hint="#string/login_email"/>
</android.support.design.widget.TextInputLayout>
here is the TextAppearance.App.TextInputLayout put the below code in style.xml
<style name="TextAppearance.App.TextInputLayout" parent="TextAppearance.AppCompat">
<item name="android:textColorHint">#color/white</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHighlight">#color/white</item>
<item name="android:textColorLink">#color/white</item>
Before entering email
After entering email

<com.github.pinball83.maskededittext.MaskedEditText
android:id="#+id/masked_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
app:mask="8 (***) *** **-**"
app:notMaskedSymbol="*"
app:maskIcon="#drawable/abc_ic_clear_mtrl_alpha"
app:maskIconColor="#color/colorPrimary"
/>
How to use
app:mask = "8 (***) *** **-**" //mask
app:notMaskedSymbol = "*" //symbol for mapping allowed placeholders
app:replacementChar = "#" //symbol which will be replaced notMasked symbol e.g. 8 (***) *** **-** will be 8 (###) ### ##-## by default it assign to whitespace
app:deleteChar = "#" //symbol which will be replaced after deleting by default it assign to whitespace
app:format = "[1][2][3] [4][5][6]-[7][8]-[10][9]" //set format of returned data input into MaskedEditText
app:maskIcon = "#drawable/abc_ic_clear_mtrl_alpha" //icon for additional functionality clean input or invoke additional screens
app:maskIconColor = "#color/colorPrimary" //icon tint color
For more you can find here https://github.com/pinball83/Masked-Edittext

without some sample-code it is hard to answer. One solution may be, to combine a vertical LinearLayout with a horozontal LinearLayout like this example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="constant Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="myEditText"
android:ems="10"
android:id="#+id/editText"
android:layout_weight="1"/>
<TextView
android:text="myTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

You can add a TextView with the constant text you want then add a TextView or EditText for input
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#android:color/black"
android:text="ConstantText"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:textSize="16sp"
android:textColor="#android:color/black"
android:text="UserText"/>
</LinearLayout>

Use RelativeLayout as root layout.and place the textview below it.
Add Linearlayout and place your edittext inside it place the linearlayout in the right of textview.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:textSize="17sp"
android:text="Task:" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/text1"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Task Name" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Task Priority" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Task Details" />
</LinearLayout>
</RelativeLayout>

Related

Extra space between TextInputLayout and TextView

I have used TextInputLayout to an EditText and there is a TextView just below to it. I see there is an extra space between TextInputLayout and TextView. I want to remove that extra space. Pics attached with and without TextInputLayout. I have enabled boundaries in developer options so pic may look confusing but informative.
Below is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:background="#drawable/edit_text_border_drawable"
android:gravity="center"
android:hint="#string/current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="#string/forgot_password"
android:textSize="17sp" />
</LinearLayout>
There is a known issue with TextInputLayout which displays additional padding once an error is displayed and isn't removed when the error is cleared or setErrorEnabled(false) is called.
https://code.google.com/p/android/issues/detail?id=200137
A workaround for this issue is to manually hide the bottom child layout when the error is cleared:
textInputLayout.setError(null);
if (textInputLayout.getChildCount() == 2)
textInputLayout.getChildAt(1).setVisibility(View.GONE);
Looks like this is not extra space, but just the bottom half of the TextInputLayout widget. I don't have your background resource, but this is essentially what your code looks like on my device. You could try the EditText without putting it inside a TextInputLayout widget if you want, and then you wouldn't have the extra space on the bottom or top.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_green_light"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:background="#android:color/white"
android:text="current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="forgot_password"
android:textSize="17sp" />
Try this
android:layout_alignStart="#id/layoutCurrentPW"

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 Multiline - After hide of Keyboard its Singleline

I have a EditText and if I type some text it will expand to the second line if the Text is too long.
So far so good.
But if I hide the keyboard the EditText converts to a SingeLine and without scrolling behaviour.
What's going on here?
<EditText
android:id="#+id/etNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:fontFamily="sans-serif-light"
android:inputType="textCapSentences|textMultiLine"
android:lines="2"
android:scrollbars="vertical"
android:maxLines="3"
android:textColor="#color/white"
android:textColorHint="#color/background"
android:textSize="25sp"
/>
On typing with keyboard open:
After keyboard hide:
Full XML:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:background="#color/app_color">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:minHeight="#dimen/list_item_height">
<ImageView
android:layout_height="wrap_content"
android:layout_width="72dp"
android:src="#drawable/ic_action_misc_light_24dp"
android:visibility="invisible"
/>
<EditText
android:id="#+id/etNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:inputType="textMultiLine"
android:lines="2"
android:maxLines="3"
android:textColor="#color/white"
android:textColorHint="#color/background"
/>
</TableRow>
</TableLayout>
</merge>
I think I found the problem.
In the main XML where the merge happens I have added by mistake an +id who was already there in another include layout with merge.
I removed that and now it works as it should.
Really strange that I get no error about the doubled +id's!
Old code:
<!-- Note -->
<include layout="#layout/inc_reminder_note" android:id="+id/areaDate"/>
<!-- Date and Time -->
<include layout="#layout/inc_reminder_date_time"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginRight="16dp"/>
New code:
<!-- Note -->
<include layout="#layout/inc_reminder_note" />
<!-- Date and Time -->
<include layout="#layout/inc_reminder_date_time"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginRight="16dp"/>
The layout "inc_reminder_date_time" had also as id "areaDate".

Edittext fields increases the size

In my android project, main_activity.xml is looks like:--
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal|top"
android:orientation="horizontal"
android:paddingBottom="8dp" >
<EditText
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_weight="10"
android:gravity="center_horizontal|center_vertical"
android:inputType="text"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="20sp" />
<EditText
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="75"
android:gravity="center_horizontal|center_vertical"
android:inputType="text"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="20sp" />
<Button
android:id="#+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="10"
android:maxWidth="48dp"
android:minHeight="48dp"
android:minWidth="48dp"
android:text="OK"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
this format is looks like:-- "Mr. Annonomus button(ok)"...Mr. is an edittext field,Annonomus is also a edittext field and a ok button..
It displays fine..But the problem is when I start writting into the second edittext field(means want to write "Annonomus" ) the edittext size is increasing and the ok button and another edittext field is decreasing in size..
How can i get that when I write any long name to edittext field the edittext field will remain same..
Use this code for your editText:
int px = editTextMessage.getWidth();
editTextMessage.setMaxWidth(px);
You're using android:layout_width="wrap_content" and android:layout_weight in all the components inside the linearlayout.
You must change the android:layout_width to match_parent or a fixed value and remove the android:layout_weight of them. Don't forget to remove the latter, otherwise it won't work.
Set android:maxLines="1" or android:singleLine="true" property in your EditText.

Edittext loses style when align_baseline used

I have a layout where I have RelativeLayout with some Edittext which use the default style and are baseline aligned with some Textfield. The issue is the Edittext are losing the default Holo Light style line (the line under the text). If I take out the baseline then the line is shown though, of course, the Edittext loses the alignment.
I suspect this is bug or at least a very strange behavior, but I will give it a try by asking here in SO :-)
This is how it looks (Edittexts are the blank spaces to the right of Opens and Closes TextViews):
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dip"
android:layout_weight="50"
android:orientation="vertical" >
<EditText
android:id="#+id/store_name_edit"
android:hint="#string/store_name"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_code_edit"
android:hint="#string/store_code"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_group_edit"
android:hint="#string/store_group"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_type_edit"
android:hint="#string/store_type"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_address_edit"
android:hint="#string/store_street"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="20dip"
android:textSize="20sp"
android:text="#string/store_description" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_opening_hours" />
<TextView
android:id="#+id/opens"
android:layout_below="#id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_open" />
<EditText
android:id="#+id/opens_edit"
android:layout_toRightOf="#id/opens"
android:layout_alignBaseline="#id/opens"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
<TextView
android:id="#+id/closes"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/opens_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_close" />
<EditText
android:id="#+id/closes_edit"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/closes"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
My guess is the containing RelativeLayout somehow isn't expanding to allow for the lines on the EditTexts to show.
Change the containing RelativeLayout to:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
I realise this may not be the best solution but it's a start. Another option might be to try using alignParentBottom instead of baseline on all the "bottom" row elements.

Categories

Resources