Android Layout Can't get EditText to line up in LinearLayout - android

I created a layout for dialog box. I want same width for zip code EditText and Email EditText Edit boxes and I want them to align left.
So it should look like:
Email: _______
ZipCode: _______
Correction: Actually above is not showing correctly on StackOverflow. The lines above should be exactly even and left justified. So I have exactly the same display problem on this forum. I put spaces after Email: but it still does not align.
Instead I am getting email always wider than Zip code. I even changed both EditText to same input type but no luck. Only if the TextView has exactly the same text do they align like if they both say Zip Code:. If I pad Email text edit with spaces they layout manager seems to know this and expand the email EditText larger than for the zip code. Very frustrating!
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/messageMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_21px"
android:textColor="#color/white"
android:text="lorum ipsum afasdf lajsdfasldfjald:"
android:padding="10dip"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/emailDescriptor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/text_21px"
android:textColor="#color/white"
android:padding="10dip"
android:text="Email: "/>
<EditText android:id="#+id/emailId"
android:inputType="textEmailAddress"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="10dip"
android:textSize="#dimen/text_21px" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/zipCodeDescript"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:textSize="#dimen/text_21px"
android:text="ZIP Code: "
android:textColor="#color/white"/>
<EditText android:id="#+id/zCode"
android:inputType="textEmailAddress"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="10dip"
android:textSize="#dimen/text_21px"/>
</LinearLayout>

As #AedonEtLIRA said, you can hardcode the position. You could increase the margin attribute for the left side to make them align.
Alternatively, you could use the attribute,
android:layout_alignLeft="#id/your_other_edittext"
A third idea, make the text boxes for your labels the same "width", then the following edittexts should align.
Finally, you could use weighted nests layouts. But that is a bad idea. Poor performance & excessively confusing. =)

If I understand you correctly, try this
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="7dp"
android:text="ZipCode" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
</TableRow>
</TableLayout>

Stumbled upon a useful attribute today and remembered this post.
Check out Textview.setEms(int). Edittext inherits that function as well.

Related

My text is getting cut at the edge while trying to display it in a listview

When I try to display TextView inside my Listview. The text that are long in length or width are getting cut at the edge. So how do I prevent it. Please help like some parts of the textviews don't show and are cut off by the edge of the screen.
I have already tried the android's ellipsize attribute, but not working and also the maxlines attribute trying to show the edges which are getting cut to be shown on the next line
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:fontFamily="OpenSans-Regular">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Brand: "
android:textAppearance="?android:attr/textAppearanceMedium" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="16dp"
android:ellipsize="marquee" />
</TableRow>
Try this
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="horizontal" >
<TextView
android:id="#+id/txtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
Hope it help.
If still getting problem please comment below.
Thanks :)

ScrollView kills my android app, and I don't understand something about the table view

I'm writing a small application for my nexus 7 tablet, and I have a strange error. To my understanding the following xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ScrollView>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dip">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="name"
android:inputType="text"
android:textSize="20sp"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="smells more like prey than a hunter."/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="The spirits spoke to me of a great danger that follows"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="name"
android:inputType="text"
android:textSize="20sp"/>
</TableRow>
</ScrollView>
</TableLayout>
should produce a scrollable app with two lines, each with a text field with gray name written in it, with the text wrap around it and additional text that will be written before or after the text that will try and fill the screen. When I compile this, however, the application crash (unfortunately, has stopped). If I remove the ScrollView attribute, The two lines are of the same length, with the EditText taking half the space on each line while in landscape mode. In portrait mode, the first line holds only the EditText field and the second one only the TextView field. It seams to me that the table tries to fit the two lines into the same length, but I can't understand why.
How can I fix this?
Comment:
I'm using a library structure generate by aide, which I use only to compile my code on the tablet.
put your table layout all inside the scrollview. scrollview can onlyhost one direct child, but that child can have many children! also you still need a height and width for scrollview
here
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="name"
android:inputType="text"
android:textSize="20sp"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="20sp"
android:text="smells more like prey than a hunter."/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="name"
android:inputType="text"
android:textSize="20sp"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="center"
android:text="The spirits spoke to me of a great danger that follows"/>
</LinearLayout>
</TableLayout>
</ScrollView>
should work for u.
try the above layout instead of yours and let me know if it helps. to tell the truth i think you want a listview and an adapter...

ListView displaying problems

I have a listview that consists three columns. The first one is an ImageView, the second and third one are textviews (see code blow).
I want the list to be aligned like this:
the icon and the date should always been shown completely !!
the text in the middle should show as much chars as possible
the date should always be on the right of the right side
With the XML below it looks ok on my Nexus 4. But on the asus tablet the date should be more on the right and the coloumn in the middle should show more text (screenshot 1). On the AVD (screenshot 2) the coloumn in the middle should be smaller and the date should be shown completely.
Can anyone tell me how to change the XML? Thanks!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginLeft="5px"
android:layout_marginRight="20px"
android:layout_marginTop="5px"
android:src="#drawable/social_chat"
android:layout_weight="0"
>
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="0px"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
<TextView
android:id="#+id/last_changed"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="15px"
android:layout_marginLeft="5px"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
Off the top of my head your layout would look something like this.-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="5dp"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
The key here is to use wrap_content for the views that just need to keep their size, and set a weight for the middle view, which you want to fill the rest of the row.
Some useful tips.-
fill_parent is deprecated, use match_parent instead
When a view has no children, you can just close it with />
singleLine="true" is enough to have a singleLined TextView
You'll usually want to use dp units instead of px
This should do your job. I have put the imageview on the parents left, the date on the parents right and the label to the rightof image and to the left of date.It should work fine for you. Margins , padding please put yourself
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#id/last_changed"
android:layout_toRightOf="#id/logo"
android:singleLine="true" />
</RelativeLayout>

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>

Android and displaying multi-lined text in a TextView in a TableRow

I'm displaying a TableLayout with rows as follows:
<?xml version="1.0" encoding="utf-8"?>
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/one"
android:layout_marginLeft="10dip"
android:textColor="#B0171F" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:id="#+id/two"
android:layout_marginLeft="10dip"
android:ellipsize="none"
android:singleLine="false"
android:scrollHorizontally="false"
android:maxLines="10"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
I'm hitting this with everything I can find here and can think of to permit the text to wrap on many lines but to no avail: The text is always forced to a single line, running off the screen. It might matter that I'm working inside a TableRow here, and so far as I can tell this hasn't been treated on this site.
So, how do I force my second TextView to wrap to many lines?
The TextView will wrap the text if the column it's in is set to shrink. Sometimes it does not wrap exactly, if the text ends with ", ...", then it is a little bit longer than exactly n lines.
Here's an example, the TextView with the id question will wrap:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="*">
<TableRow>
<TextView
android:id="#+id/question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
For the sake of completeness, this is how my TableLayout reads in XML:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:shrinkColumns="0"
android:stretchColumns="0"
android:id="#+id/summaryTable">
</TableLayout>
I later populate this with TableRows.
By code also works:
TableLayout tablelayout = (TableLayout) view.findViewById(R.id.table);
tablelayout.setColumnShrinkable(1,true);
1 is the number of column.
Maybe try as follows:
myTextView.setText(Html.fromHtml("On " + stringData1 + "<br> at " + strinData2);
I know, looks a bit like a "wheelchair" solution, but works for me, though I also fill a text programmatically.
You can also used below code
<TableRow >
<TextView
android:id="#+id/tv_description_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="#string/rating_review"
android:textColor="#color/black"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="4"
android:padding="8dp"
android:text="The food test was very good."
android:textColor="#color/black"
android:textColorHint="#color/hint_text_color" />
</TableRow>

Categories

Resources