android layout: edittext shifting right and left - android

I am working on a calculator where on the "screen" the left part shows the symbol + - * / and the right shows the digits. The size of the symbol cannot be too small, but when the user presses for the symbol and the symbol shows e.g. +, the figures on the right will shift rightwards a bit in order to accomodate the symbol.
The figure on the right keep shifting rightwards when have symbol while back to its place when no symbols. Also, the symbol cannot be shown properly. This is frustrating.
Yet I would like to maintain that the symbol and the figures be maintained within 1 row such that it really looks like calculator. How could this be handled? The layout code is as follows. Thanks in advance!!!!
<TableRow
android:id="#+id/tableRow3"
android:layout_weight="0.1"
android:background="#android:color/white"
android:paddingLeft="0dp"
android:paddingRight="0dp" >
<EditText
android:id="#+id/symEditText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_span="1"
android:background="#android:color/transparent"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:longClickable="false"
android:maxLength="3"
android:paddingRight="0dp"
android:text=""
android:textColor="#003366"
android:textSize="14dp"
android:textStyle="bold" >
</EditText>
<EditText
android:id="#+id/ansEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_span="9"
android:background="#android:color/transparent"
android:clickable="false"
android:ems="4"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:longClickable="false"
android:maxLength="23"
android:paddingRight="20dp"
android:textColor="#003366"
android:textSize="#dimen/display_text_size"
android:textStyle="bold" >
<requestFocus />
</EditText>
</TableRow>

You should only use TableRow inside a TableLayout. I think you can just use a horizontal LinearLayout instead. If you want to always maintain a space to show a symbol, give that view a fixed width instead of using wrap_content, otherwise it will grow/shrink when the content changes. (make sure to specify your width in dp units)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/symbol"
android:layout_width="20dp" <!-- fixed size -->
android:layout_height="wrap_content"
<!-- more attributes -->
</TextView>
<TextView
android:id="#+id/answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" <!-- fill remaining space -->
android:gravity="right"
<!-- more attributes -->
</TextView>
</LinearLayout>

Related

Android move Button always to center

I have a little Chat application. At the bottom is the EditText line and a send button. In the EditText maxLines is set to 5. How can I move the button always to center_horizontal, even if new lines (1-5) are added to the textview? The button actually just stays at it's position.
My try:
<LinearLayout
android:id="#+id/llLine"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/txtChatline"
android:layout_width="0dp"
android:layout_weight="0.70"
android:hint="#string/hint_message"
android:layout_height="wrap_content"
android:maxLength="500"
android:maxLines="5"
android:ems="10" />
<Button
android:id="#+id/cmdSendMessage"
android:layout_width="0dp"
android:layout_weight="0.30"
android:enabled="false"
android:gravity="center"
android:layout_height="wrap_content"
android:text="#string/send" />
</LinearLayout>
If your EditText grows vertically, you need to use android:gravity="center_vertical".
(or android:gravity="center" if you want to use both, but I assume it was a mistake).

How can I make EditText control take more free space?

In the following UI, I hope the two buttons both btnAddress and btnDelete take minimum space,
and editnumber take max space, how can I do? Need I use RelativeLayout layout? Thanks!
BTW, the following code, the btnDelete button only display a part.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left"
android:orientation="horizontal" >
<EditText
android:id="#+id/editnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:phoneNumber="true"
android:ems="10" >
</EditText>
<Button
android:id="#+id/btnAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BtnAddressMin" />
<Button
android:id="#+id/btnDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BtnDeleteMin" />
</LinearLayout>
This should do it. Giving editnumber a weight of 1. Leve the rest as it is.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left"
android:orientation="horizontal" >
<EditText
android:id="#+id/editnumber"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:phoneNumber="true"
android:ems="10" >
</EditText>
<Button
android:id="#+id/btnAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BtnAddressMin" />
<Button
android:id="#+id/btnDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BtnDeleteMin" />
</LinearLayout>
Instead of fixing the length of EditText with ems, use layout_weight to fill the remaining space.
<EditText
android:id="#+id/editnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:phoneNumber="true" />
Edit: I'm not sure if android:phoneNumber="true" is still recommended or not, but I would change it to android:inputType="phone" instead.
Give the android:layout_weight="1 to edit text .No need to change it to relative layout
<EditText
android:id="#+id/editnumber"
android:layout_width="0dp"//no need to specifing the width if parent layout is horizontal
android:layout_height="wrap_content"
android:phoneNumber="true"
android:layout_weight="1";>
</EditText>
Doing this Edittext will take maximum space and remaing space will be left for other View.Other then this no need to change anything in your xml

Set Textview + Edittext + Button

I want to put in the same row a TextView, and Edittext and a button but I am having the problem that the button is not aligned properly to left and in small screens edittext fills entire with.
Small screen:
Big Screen:
My codification is as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right" >
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</RelativeLayout>
</LinearLayout>
Apply a weight to your EditText so it will take up as much room as it can while letting the other two elements do the normal wrap_content. To do this, remove the relative layout container and then change the EditText width to "0dp" and give it a layout_weight of "1" as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</LinearLayout>
First, many people will tell you that hint is Android's solution for not needing the label. I don't care if you use the label or not but it does save you space, especially on smaller screens. That was just an FYI.
Now, your RelativeLayout that only has a Button appears to be useless...I would remove that. You can use layout_weight so that each View takes up the appropriate amount of space. Make sure to make the layout_width="0dp". So it may look something like
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Go" />
</LinearLayout>
Here I used 2,3,1 for the weights of your TextView, EditText, and Button respectively. You may need to change those to get exactly what you want but that should give you a start.
Layout weigth is ideal for designing layouts that adjust to screen size. However, make sure to set layout_width to 0dp, or it won't work properly.
Use like this:
android:layout_width="0dp"
android:layout_weight="1"
I'm going to assume you mean the button is not properly aligned to the right.
It's because your RelativeLayout's android:width="wrap_content", but it should be android:width="match_parent".
Also, you'd be better off setting your EditText's android:width="0dp" and adding android:weight="1" so that it expands/contracts between screen sizes.

Android RelativeLayout with wrap_content truncates some children

I have a RelativeLayout whose width/height is set to wrap_content. However, the button in the bottom right is truncated on its lower side.
Changing the RelativeLayout's paddingBottom doesn't help, neither does adding a marginBottom to the button.
Any ideas?
Here's my code:
<RelativeLayout
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:background="#ff6aa639"
>
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="29dp"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sign_up_signuphere"
android:layout_alignLeft="#id/sign_up_signuphere"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_below="#id/sign_up_signuphere"
android:layout_toRightOf="#id/sign_up_emaillabel"
android:ems="10"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignRight="#id/sign_up_email"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_signup" />
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/sign_up_emaillabel"
android:layout_marginTop="27dp"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
...and this is what it looks like in the emulator:
Any thoughts on how I can get the bottom of my button to show?
TIA!
My fast idea is to set button bottom border to height of text on the left by using xml code
android:layout_alignBottom="#+id/sign_up_haveaccount"
because you've setted layout_below option already. However your xml code is quite not proper :) I will try write here better xml code for you, later.
Well, I found your problem. And I was searching for solution.
I setted for textview new padding bottom because button was aligned to this textview basline. I know that it could be a nice hack but I coudln't find andy good way to handle it :)
According to your layout I changed behaviour for edittext to make it stretchable. Also I grouped all elements into 3 groups. Each one per row to make it more readable.
Also do not forget that first 2 lines about xmls.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff6aa639"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<!-- 1 row -->
<RelativeLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="29dp" >
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<!-- 2 row -->
<RelativeLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row1" >
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/sign_up_emaillabel"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
</RelativeLayout>
<!-- 3 row -->
<RelativeLayout
android:id="#+id/row3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row2" >
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:paddingBottom="15dp"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignParentRight="true"
android:text="#string/sign_up_signup" />
</RelativeLayout>
</RelativeLayout>
This is happening because of your padding , you have given 10 dp padding in bottom and your button view doesn't have enough space.Remove padding and check it .

Add unit symbol at the end of the EditText

I have one EditText witch is of type numberDecimal. I would like to have the unit symbol (for instance m, km, kg, g) at the end of the value. I have found many posts here at stackoverflow that tells to use TextWatcher or InputFilter, but what I would really love to is to restrict this unit symbol to not being editable for the user.
So when you edit the value in the textbox, you can't move the courser to manipulate/delete the symbol. It is basically not a editable part of the value.
I'm sure this is possible to achieve, but Im not sure how much custom code I need to write to make it work. Are there any SDK support for this?
Ismar
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.70"
android:gravity="center_horizontal"
android:padding="4dip" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/browseurl"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dip"
android:imeOptions="actionGo"
android:textColor="#BCBCBC"
android:textSize="14dip"
android:typeface="serif" />
<ImageButton
android:id="#+id/cross"
android:layout_width="25dip"
android:layout_height="25dip"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:clickable="true"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
Replace the ImageButton with either a textbox or a image button for units.
Thanks for the hints. Here is my solution, I have one linearlayout with 20dip margin to the left and right. Inside of the layout I have one EditText and one TextViw. I set weight to 1 on the EditText so it fills any remaining space in the parent view.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:orientation="horizontal" >
<EditText
android:id="#+id/value_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="numberDecimal"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/value_unit_symbol"
android:layout_width="wrap_content"
android:layout_height="25dip"
android:text="kg"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Categories

Resources