Align left edges of vertical views in RelativeLayout - android

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.

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.

Android. Layout item move to right side

I have android layout with three parts (imageview, textview, imageview) and I want the last part move to right side, now its near the second element.
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/menu_button_bg"
android:orientation="horizontal"
android:paddingLeft="13dp" >
<ImageView
android:id="#+id/menuItemIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginBottom="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:contentDescription="#string/menuItemDesc"
android:gravity="center_vertical" />
<TextView
android:id="#+id/menuItemTitle"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:gravity="center_vertical"
android:textSize="16sp" >
</TextView>
<ImageView
android:id="#+id/menuItemIconRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:layout_weight="0.1"
android:contentDescription="#string/menuItemDesc"
android:gravity="right" />
</LinearLayout>
You can give the TextView the following attributes:
android:layout_width="0dp"
android:layout_weight="1"
This will make the TextView stretch to use up the space between the two ImageViews. The other alternative is to use a RelativeLayout instead of a LinearLayout, but this should work for your needs.

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

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".

How to set the max textsize in android?

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/lbd_user_pt"
android:paddingRight="10dp"
android:text="#string/leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</RelativeLayout>
Currently I have a relative layout that is the horizonal line. And there is two textview inside . Since the length of the relative layout is too small, the 2 textview overlay or behave werid
like:
[user_pt_tag user_pt]
The problem is , I would like the user pt align right and expand to left , also , the common textsize is 20sp , if the pt overlap the tag , the size will be reduce. (the pt textview is at most 5 digits , that will no more digit than that) How to achieve that? Thanks
//try to use Linear Layout rather than Relative Layout like below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="#string/leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:maxLength="5"//you can give the length as per your need
android:layout_toLeftOf="#+id/lbd_user_pt"
android:paddingRight="10dp"
android:text="leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</RelativeLayout>

Aligning two TextViews in a RelativeLayout

How do I align two TextViews with different font sizes in a RelativeLayout so that they're baseline aligned?
The bottom image is when both text views have android:layout_alignParentBottom="true" but they're the same way if I use android:layout_alignBaseline="#id/leftTextView" on the right text view.
What would be super useful is some way to make sure that the tops of the letters in two text views also align, but that's probably not realistic for TextViews.
By demand, the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/leftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="#string/daily_average_month"
style="#style/tvStatName" />
<TextView
android:id="#+id/rightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
style="#style/tvStatValue.big" />
</RelativeLayout>
Try this..
use android:layout_centerVertical="true" for rightTextView and try
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/leftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="#string/daily_average_month"
style="#style/tvStatName" />
<TextView
android:id="#+id/rightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
style="#style/tvStatValue.big" />
</RelativeLayout>

Categories

Resources