Android - Text in TextView doesn't align left/vertically - android

Ok, this is the deal:
I have a list containing an ImageView, a TextView and an IconTextView.
The TextView contains text that I want centered vertically and clinging to the left side of the TextView. But for one reason or another it doesn't work with android:gravity="center|left" nor any other of the gravity variations.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/task_item_item_layout"
android:background="?android:attr/activatedBackgroundIndicator" >
<ImageView
android:id="#+id/task_item_imageview"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/default_icon"
android:contentDescription="TODO"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:visibility="visible" />
<TextView
android:id="#+id/task_item_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:text="TODO"
android:textSize="15sp"
android:layout_toLeftOf="#+id/task_item_icontextview"
android:paddingLeft="4dp"
android:paddingRight="8dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_toRightOf="#+id/task_item_imageview"
android:gravity="center|left" />
<IconTextView
android:id="#+id/task_item_icontextview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:visibility="gone"
android:gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
MinSDK = 14
Target and compiled SDK = 19
I've found a lot of potential answers, but non of them seem to work.
Any ideas?
solution
I altered the layout_height to android:layout_height="fill_parent" and added android:layout_centerVertical="true" like Apoorv said.
<TextView
android:id="#+id/task_item_textview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:text="Description"
android:textSize="15sp"
android:layout_toLeftOf="#+id/task_item_icontextview"
android:paddingLeft="4dp"
android:paddingRight="8dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_toRightOf="#+id/task_item_imageview"
android:gravity="center|left"
android:layout_centerVertical="true"/>
Works like charm!

Try using android:layout_centerVertical="true" in the TextView. At present you are using android:layout_height="wrap_content" as a result the TextView will probably be sticking to the top of the parent layout.
So when you give the android:gravity="center|left" it is being applied but you are not seeing any difference because the height of TextView does not change.
Also you can change to android:layout_height="fill_parent" instead of using android:layout_centerVertical="true".

Related

how to ensure the min space between two views in Relativelayout

I have two TextViews in a RelativeLayout. One to the left and the other one to the right. Both of them shows a string which may become very long. I want to make a min space of 10dp between two TextViews and let the right one have ellipse if no enough space.
I have below layout definition which does not work. The right TextView may cover the first one if it is very lone.
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp">
<TextView
android:id="#+id/left_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:text=""/>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
The only way I can do is to set the max length to the right one. But this is not what I want because if the left one is short, i want the right one to be longer than the maxWidth.
And when I added "toRightOf" this work but the textView width becomes too long for a short string shown in it. That is not acceptable
add Add android:layout_toRightOf="#+id/left_one in right_one textview
remove android:layout_alignParentRight="true" from right_one textview
replace android:layout_marginRight="10dp" by android:layout_marginLeft="10dp" in right_one textview
For right_one textview to remain right if it is short replace right_one textview portion by
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/left_one>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
You can do like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/left_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:layout_weight="0.3"
android:text="Left text "/>
<TextView
android:id="#+id/right_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_weight="0.7"
android:layout_marginLeft="10dp"
android:text="edkjfcnrdskjvkjrdfvsxsdcndsjkvnjksdnvkj
sdjkvbksdbvkj zskjvn jsdnbjkvfdbde"/>
</LinearLayout>
Add:
android:layout_toLeftOf="#+id/right_one"
android:layout_marginRight="10dp"
to your left_one TextView.

Align left edges of vertical views in RelativeLayout

How can I make the 500 (TextView) match the left edge of checkbox above ?
I am using RelativeLayout
<ImageView
android:id="#+id/group_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/expander_open_holo_dark" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17sp" />
<CheckBox
android:id="#+id/GroupCheckBox"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:focusable="false"
android:paddingRight="10dp"
android:scaleX="2"
android:scaleY="2" />
<SeekBar
android:id="#+id/GroupSeekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/lblListHeader"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/GroupSeekCount"
android:layout_below="#id/lblListHeader"
android:focusable="false"
android:max="1000"
android:paddingBottom="0dp"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:paddingTop="20dp" >
</SeekBar>
<TextView
android:id="#+id/GroupSeekCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10dp"
android:paddingTop="20dp"
android:text="500"
android:layout_below="#id/GroupCheckBox"
/>
// try this way,hope this will help you...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/group_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/expander_open_holo_dark" />
<CheckBox
android:id="#+id/GroupCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:scaleX="2"
android:scaleY="2" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/group_indicator"
android:layout_toLeftOf="#id/GroupCheckBox"
android:textSize="17sp" />
<SeekBar
android:id="#+id/GroupSeekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:max="1000"
android:paddingBottom="0dp"
android:layout_below="#id/lblListHeader"
android:layout_toLeftOf="#id/GroupCheckBox"
android:layout_alignBaseline="#id/lblListHeader"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:paddingTop="20dp" />
<TextView
android:id="#+id/GroupSeekCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/GroupCheckBox"
android:layout_toRightOf="#id/GroupSeekbar"
android:paddingTop="10dp"
android:text="500"/>
</RelativeLayout>
I would go about this much differently.
Try grouping the expander and list header into a horizontal linearlayout, then group the Checkbox and 500 text into a vertical linearlayout. Finally, these two linearlayout's should be nested within a horizontal linearlayout.
First define the CheckBox, only THEN the TextView.
And then set the TextView's layout_width to match_parent (so that it takes the remaining space)
Also, the ImageView can become part of the TextView (compound drawable), to reduce the controls count:
To do so: in the TextView definition, set these attributes:
android:drawableLeft="#drawable/expander_open_holo_dark"
android:drawablePadding="8dp"
Then you can modify the group indicator by code:
Drawable drw = getContext().getResources().getDrawable(R.drawable.expander_open_holo_dark);
lblListHeader.setCompoundDrawablesWithIntrinsicBounds(drw, null, null, null);
Even better (always bearing in mind the purpose to optimize the design), you could use a CheckedTextView control, so to have the image, the text and the checkmark in a single control (since it extends the TextView, it can hold compound drawables as well as the TextView does).
Of course, you can move the tick mark to the right.

limit a view to the left/right of center in android

Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<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="wrap_content"
android:background="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.
I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.

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 .

How to get Side by Side textviews with one that wraps

I have a listview with a custom adapter in which I have 3 textviews, two are next to each other and one is below the others. The problem I am running into though, is when the first textview extends, it pushes the other textview off the screen.
I have not been able to successfully get this to work, here is an example of what's happening:
As you can see when the first textview gets too long, it then pushes the other text off the screen. I would like it so it wraps but the date textview is also showing. It should also be functional in horizontal view.
Here's the listview adapter code:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="left"
android:layout_gravity="left" />
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="right"
android:layout_gravity="right" android:width="60sp" android:layout_toRightOf="#+id/liName" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
</RelativeLayout>
I am assuming that the text view being pushed is the liDate one.
You need to put this one before the liName in your layout and set the width to "wrap_content" and align it right. Then you lace the liName to the left of it with "fill_parent" width
So it would look like this:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:width="60sp"
android:layout_alignParentRight="true" />
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/liDate" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
Hope this is what you meant
The key was using "#+id/" for the first textview instead of "#id/"
This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/listEventTypeText"
android:layout_toLeftOf="#+id/listEventDateText"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/listEventDateText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/listEventTypeText"
/>
</RelativeLayout>

Categories

Resources