I'd like to align the text in a TextView with text inside an EditText that is directly below it. Is this possible without using padding tricks?
If not, is this because it's discouraged? I could see it being discouraged because it could confuse the user into missing the distinction between the two controls.
Here's the layout that created the above screenshot:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Please align my first character" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view"
android:hint="To my first character" />
</RelativeLayout>
No, you can't do this without using padding or layout_margin. EditText has a background with borders and padding, so its content area is a little bit smaller than the area of TextView. I think it's normal to use padding in such situations.
Actually this can be confusing, but you can add a little offset to the TextView to make it look better. Use android:layout_marginLeft and choose a value that will match your requirements. Hope this helps.
I feel you will have to use padding to the TextView. It actually looks better to me that the first character in TextView and that in EditView are NOT aligned perfectly. They also have different font size, so it actually looks pretty natural the way it is right now - or maybe with just a little bit of padding, but not too much. When padding, don't forget to consider users with different screen sizes and resolutions, so please use dp with you are doing padding with android:layout_marginLeft. For example:
<TextView
android:id="#+id/text_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:text="Please align my first character" />
Hope this helps.
Related
I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.
For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.
I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout
Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>
You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>
This question is in a way a continuation of my last question.
My problem now is pretty much the same, except that instead of separating the image and text in differend views (namely ImageView and TextView) I learned I can use the attribute android:drawableLeft to set an image "for" my text (the suggestion was pointed to me by Eclipse with a warning icon on the LinearLayout line).
I thought the only difference would be that instead of setting the ImageView with setImageResource() method I would simply set the TextView's drawableLeft attributed with the setCompoundDrawablesWithIntrinsicBounds() method. Instead, when I made the change, I was taken back to my original issue: the text aligns with the top edge of the view rather than the center.
This is what my TextView looks like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/account_login"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/pm_gmail"
android:drawablePadding="8dp"
android:text="example#gmail.com"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_centerVertical="true"
android:layout_below="#id/account_login"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="5dp"
android:background="#DDDDDD" />
</RelativeLayout>
The second View is just a separator.
... and this is what the layout looks like after setting the above mentioned attributes:
(I don't have enough reputation to post images yet, so here's the link to it)
(Just to be clear, this is only a static example. My text and image are both set dynamically in the code at runtime).
Any help is greatly appreciated.
Change android:layout_gravity="left|center_vertical" to android:gravity="center_vertical".
layout_gravity is for positioning a View inside a container (layout), while gravity is referred to
the View contents (that is, in this case, the text inside the TextView).
I have 2 TextViews which I need to both horizontally side by side, like category + nummber of products for category. The code is like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingBottom ="10dp"
android:background="#color/navigation_background_sub">
<TextView
android:id="#+id/category_name_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#color/ebuy_color_navigation_name" />
<TextView
android:layout_toRightOf="#+id/category_name_second"
android:paddingLeft="7dp"
android:id="#+id/category_number_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#color/ebuy_color_navigation_number" />
</RelativeLayout>
Now the problem is that once the text for the first TextView is to long , the space left for the second is to little and the text is display in two ore more lines.
I have no reputation to post pictures so I am just trying to explain like below:
How it is:
Laptops (34)
Computer Software (1
4
)
How it should be:
Laptops (34)
Computer (14)
Software
use
layout_toRightOf= "#id/category_name_second"
It may help you
If you replace your RelativeLayout with a horizontal LineraLayout the available space will be distributed evenly among your text views. You can add a weight attribute to control the portion of each TextView in one line of length.
Well, the problem is that you have not enough space at the horizontally line, this is why the text view display more lines.
You must define how much space you want for each Textview. If your layout is so simple like that, you can choose a linear layout to align better the textview's.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="15dp"
android:weightSum="1" >
<TextView
android:id="#+id/category_name_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:text="Computers"
android:textSize="22sp"
android:singleLine="true"
android:textColor="#color/ebuy_color_navigation_name" />
<TextView
android:id="#+id/category_number_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:paddingLeft="7dp"
android:text="(24)"
android:textSize="22sp"
android:singleLine="true"
android:textColor="#color/ebuy_color_navigation_number" />
</LinearLayout>
You must add also the property singleLine to avoid the textview's display more lines. As you see, using the weight you can set the proportional width for each component in the horizontal line.
In TextView When you use wrap_content android device will adjust its width and height(if you use wrap_content for height) according to data you put in (length of text). If text is not fix in textview then don't use wrap_content(only if you don't want that text automatically write in second line).So if first Textview has taken more than half space, second textview must adjust its height to show full text.There is no permanent solution of it, because this text line depends on device's size. if device's screen is larger to show both textview in single line it will show you unless it will increase height of second textview in your case.
you can also make different layout for all type of screen size and set text's size according to it. you can check for supporting multiple screen size.
I have a edittext and a button in a relative layout. Here is the xml:
<?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="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5sp" >
<Button
android:id="#+id/action_home_button"
android:layout_width="35sp"
android:layout_height="35sp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/home_button" />
<EditText
android:id="#+id/action_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/action_home_button"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Some hint..."
android:textColor="#FFFFFF"
android:textColorHint="#DDDDDD" />
</RelativeLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="5sp"
android:layout_alignParentBottom="true"
android:background="#EC9D21" />
</RelativeLayout>
The problem is that the button is centered in the RelativeLayout just fine, but my EditText is aligned to the top of the layout. Is there anything that I'm missing? Thank you in advance.
Edit Above I updated my xml. I set this as a custom view of my action bar. But that should not make a difference, since the button has no problem aligning to center vertical. Thanx
Edit EditText should be aligned center vertical
The standard EditTexts in some themes seem to have some built in padding or margin around and/or under it. If you wish to eliminate this issue, then I would heavily suggest either using a nine patch, background color, or some other form of custom background.
Trying to set a negative bottom margin or something crazy might fix the issue for one standard EditText, but you have to be careful between Android versions as their EditTexts can have different themes and give rather unexpected behavior.
As for why the theme designers chose to have this gap underneath is beyond me. My best guess would be that is their way of "saving face" when the developer doesn't add a margin between vertically aligned EditTexts?
+1 for Uxonith. Changing the background seemed to do the trick eg. android:background="#000000". For me this works fine, because I had to change the background anyways, but if you need the standard edit text, this will not be a solution.
Say I have a list of Strings with the elements:
"One",
"Two",
"Three",
"Four"
I want to center them in the middle of the screen but I want to do it in a way that the start of each word is next to each other.
Like this:
One
Two
Three
Four
Considering that the font probably has different length per character, how do I do this best in Android?
I'm not sure how your application is behaving and if a ListView is strictly required, but the effect you desire can be achieved using TableLayout and TableRows. The TableLayout will line up the elements in each column for each row as you have described.
Having said that, TableLayout does not support having lines between the rows or gridlines (although I have seem some clever hacks involving changing the background colour of the TableRow to black, and then changing the padding and background colour of the View objects in the TableRow to white to get a black divider line - but that doesn't always work depending on your View objects).
I'm in a similar pickle, and that was the first avenue I examined. It didn't have a solution for my situation, but this might work for you. And if you do find a way of lining up the text in a List, I'd love to hear about it.
EDIT:
I also feel it is worth mentioning (based on how the conversation is progressing) that you can also set row.setOnClickListener() and make an entire row clickable in a TableView. Once you wrap it in a ScrollView, it's pretty list-like.
you can set the gravity at the elements you want to be center and for detail
android:gravity="center_horizontal"
Wrap your ListView in a LinearLayout with layout_gravity="center_horizontal" or
nvm: that won't work obviously..
So wait.. You want a list, where each line is clickable for the whole width of the screen, and you want to justify all lines to left, and ALSO center all of the justified text without breaking justification?
It sounds like you want to place your items within a parent with layout_width="wrap_content" and center the whole parent.
Something like this, perhaps?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:text="Content above..."
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView android:text="One"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Two"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Three"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView android:text="Content below..."
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Remember the difference between gravity and layout_gravity. The gravity attribute refers to the view's content. layout_gravity (and all other attributes prefixed with layout_) refers to the view's layout within its parent.
Edit: If you're looking to format ListView items similarly, try something like this as your list item layout with the ListView itself using layout_width="fill_parent" and layout_height="fill_parent":
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:weightSum="2"
android:gravity="center">
<TextView android:id="#+id/text"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Change the content of the TextView with id text in each list item in the usual way. The minHeight setting pulled from the current theme will make sure it stays a good size for touch.
The uniform centering in this case is handled by a combination of the weightSum and gravity on the LinearLayout and the layout_weight on the TextView. The TextView's weight divided by its parent's weightSum will determine the percentage of horizontal space the LinearLayout will give it. In the example above it will get 1/2 the available horizontal space, but centered.
Since ListView never knows the content of list items that are not currently onscreen there is no way to have it measure the text of every item in your adapter to center the content perfectly. You will have to approximate it using a list item layout like the example above.