Develop Reference

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>

layout element control in Android

I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??

It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...

You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>

android:weightSum work fine for me, I resolved all my troubles :)

Can't align ImageViews to the left in ListView Row (RelativeLayout)

This is how I have my view at the moment.
As you can see, the icons are not all aligned all the way to the left. The red line is my objective. If they go all the way to the left, no problem, because I can solve it later with marginLeft.
This is my XML code (layout/listview_style_listview.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:background="#color/BackGroundColor"
android:orientation="vertical"
android:scaleType="center" >
<LinearLayout
android:id="#+id/titleLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:background="#color/BackGroundColor"
android:orientation="horizontal" >
<TextView
android:id="#+id/sectionTitle"
style="#style/sectionTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left"
android:text="(blank)" />
<Button
android:id="#+id/sectionInfoButton"
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_gravity="right"
android:layout_marginLeft="3dp"
android:layout_weight="0"
android:background="#drawable/infoicon" />
<Button
android:id="#+id/sectionInfoButton"
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_gravity="right"
android:layout_marginLeft="3dp"
android:layout_weight="0"
android:background="#drawable/filtericon" />
<Button
android:id="#+id/sectionOptionsButton"
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_gravity="right"
android:layout_marginLeft="3dp"
android:layout_weight="0"
android:background="#drawable/menuicontop2" />
<Button
android:id="#+id/addCatButton"
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_gravity="right"
android:layout_marginLeft="3dp"
android:layout_weight="0"
android:background="#drawable/effect_button_add_cat_click" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dip"
android:layout_marginRight="0dip"
android:background="#color/blueOceanStroke" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#color/BlueOcean"
android:dividerHeight="1dp"
android:listSelector="#drawable/listview_style_list_selector"
android:paddingBottom="1dp" />
</LinearLayout>
This is my XML code (layout/listview_style_row.xml)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="35dp" >
<ImageView
android:id="#+id/catThumbnail"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/bank1" />
<TextView
android:id="#+id/sectionTitle"
style="#style/title"
android:layout_width="97dp"
android:layout_height="32dp"
android:layout_alignBottom="#+id/catThumbnail"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="66dp"
android:gravity="center_vertical"
android:text="Title Text"
android:textColor="#color/listsTextColor"
android:textSize="15sp"
android:textStyle="normal"
android:typeface="normal" />
<ImageView
android:layout_width="25dip"
android:layout_height="32dp"
android:layout_alignBottom="#+id/sectionTitle"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:src="#drawable/arrow" />
</RelativeLayout>
PS: I added an arrow icon to the right after the screenshot and that's why it's not showing on the image but I guess it's not important.

From the screenshot the layout is OK because the divider with back color #color/blueOceanStroke goes all the way and so do the separators. The problem must be in the "#+id/catThumbnail", if you measure the distance between your red line and the left edge of the yellow square and compare it with the distance between the right edge of the square and the left edge of letter "B" they are about the same which it shouldn't be.
My guess is that there is some king of padding in the #drawable/bank1. Try to remove it completely and see if the letter "B" left aligns with the title.
Hope this helps...

I was able to fix it with android:layout_marginLeft="-10dp" on the "ImageView #+id/catThumbnail" in listview_style_row.xml, but i really dont think this is a valid solution for a final perfectly designed app, yes? For me to put negative values in there, theres something wrong, right?

As someone else mentioned, I would try removing the ImageView and seeing if the TextView will be flush against the red line. If it is, the ImageView has some issues, if not it's something else. Also, the ImageView may not have the same height and width and that could cause issues with the scaling you're doing by setting to 32 dp, see: Unwanted padding around an ImageView.
It might be easier to wrap your ImageView in a FrameLayout. Something like this:
<FrameLayout>
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/catThumbnail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bank1" />
</FrameLayout>
Or if that doesn't work, try setting the width and height of the image view and/or the frame layout to wrap_content. Also if that image is a 9-patch, there may be other causes.

Custom dialog height to match content

This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>

First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question

Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.

Simple Layout Issue - Aligning menu button to far right, center

Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen

There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>