I`m having problems for do something like this: http://imageshack.us/photo/my-images/824/examplehm.png/
My xml code shows 3 columns in the row but i want 2 columns and the second column must be divided in two horizontal parts.
My .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" >
<ListView android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
<TableRow>
<ImageView android:id="#+id/imagen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dip"
android:paddingRight="5dip" />
<TextView android:id="#+id/cabecera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12px" />
<TextView android:id="#+id/descripcion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="10px" />
</TableRow>
</TableLayout>
Someone could help me?
Thanks.
Put LinearLayout by the image and then put in it two TextViews , or use RelativeLayout for entire row.
Here is example of the first solution:
<?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" >
<TableRow>
<ImageView android:id="#+id/imagen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dip"
android:paddingRight="5dip" android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:gravity="center_vertical">
<TextView android:id="#+id/cabecera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12px"
android:text="TextView"/>
<TextView android:id="#+id/descripcion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="10px"
android:text="TextView" />
</LinearLayout>
</TableRow>
Related
I have a layout like 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="fill_parent" >
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Number of payrates (overtime etc)"
android:textSize="12sp" />
<Spinner
android:id="#+id/num_rate"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:textSize="12sp" />
</TableRow>
<TableRow>
<Button
android:id="#+id/cont"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Continue"
android:layout_gravity="bottom|right"/>
</TableRow>
</TableLayout>
Problem is that is still looks like this...
Meaning the button is conforming to the same amount of rows as above. Is there anyway (without switching layout types) to make it fill the entire row?
Also bonus points if you can point me towards how to move the button to the bottom of the screen.
// 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" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Number of payrates (overtime etc)"
android:textSize="12sp" />
<Spinner
android:id="#+id/num_rate"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="12sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<Button
android:id="#+id/cont"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Continue"/>
</TableRow>
</TableLayout>
For row to fill entire row and to align your button to the bottom use Linear Layout instead of TableRow and give layout_gravity = "bottom".
Try the following data
<?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" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number of payrates (overtime etc)"
android:textSize="12sp" />
<Spinner
android:id="#+id/num_rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:textSize="12sp" />
</TableRow>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button
android:id="#+id/cont"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Continue" />
</LinearLayout>
</TableLayout>
Hope this works
I have the listView with set of items. And I want to add 2 buttons below the list. But if I do like this:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:background="#000000"
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<CheckedTextView
android:id="#+id/checkedTextItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:clickable="true"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:textColor="#000000"
android:paddingLeft="10dip"
android:paddingRight="6dip"
android:typeface="sans" android:textSize="16dip"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignBottom="#+id/fileManagerList">
<Button
android:id="#+id/attachFiles"
android:layout_width="200dp"
android:layout_height="55dp"
android:background="#007FFF"
android:gravity="center|center"
android:text="Attach files"
android:layout_alignBottom="#+id/fileManagerList"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
<Button
android:id="#+id/cancelFiles"
android:layout_width="82dp"
android:layout_height="55dp"
android:background="#838B83"
android:gravity="center|center"
android:layout_alignRight="#+id/attachFiles"
android:layout_alignBottom="#+id/fileManagerList"
android:text="Do not attach"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
my buttons displaying in each row of ListView. I tried do it the same way but using RelativeLayout, but I get correct list, buttons were in the bottom, but they overlay the last item of the list. How can I implement this?
Try this Layout, You can achieve your goal using the below XML Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relRingtone"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:contentDescription="#string/ringtone"
android:layout_marginLeft="3dip"
android:textSize="2dp" />
<LinearLayout
android:id="#+id/closecalmlayout"
android:layout_below="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
</LinearLayout>
</RelativeLayout>
Hope it helps.
This is because you are using #+id everywhere, wherever you are referring any id. Ex.:
android:layout_alignBottom="#+id/fileManagerList"
Use "#id/" instead.
And also, try:
android:layout_below="#id/fileManagerList" // Add this attribute in button.
In my application I am showing list of datas from database in a list view.For that listview i have 1 header with 4 text views arranged horizontally..But i want this to be arranged with some space exactly between and also it should fit into every screen. Please help me.Thanks in advance.By the following code it is arranging 1 after the other without space.
My code:
<?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="horizontal"
android:background="#ffffffff">
<TextView android:id="#+id/hdrdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date"/>
<TextView android:id="#+id/hdrdateasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView android:id="#+id/hdrdes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item"
/>
<TextView android:id="#+id/hdritemasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView android:id="#+id/hdrprice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
/>
<TextView android:id="#+id/hdrpriceasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
<TextView android:id="#+id/hdrtot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
/>
<TextView android:id="#+id/hdrtotasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
</LinearLayout>
You can use layout margin for spacing between view like
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
To fit them on the screen you can use layout_weight.Give every view weight 1 so all will be equal.You already use fill_parent for the width of your LinearLayout.
android:layout_weight="1" for every view
try this use android:layout_weight="1"in all TextView
<?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="horizontal"
android:background="#ffffffff">
<TextView android:id="#+id/hdrdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#ff00ff00"
android:text="Date"/>
<TextView android:id="#+id/hdrdateasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gffgfg"
android:textColor="#ffff0000"
android:layout_weight="1"
/>
<TextView android:id="#+id/hdrdes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#FF4500"
android:text="Item"
/>
<TextView android:id="#+id/hdritemasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gdgdfgsg"
android:textColor="#ff0000ff"
android:layout_weight="1"
/>
<TextView android:id="#+id/hdrprice"
android:layout_weight="1"
android:layout_width="wrap_content"
android:textColor="#ff00ff00"
android:layout_height="wrap_content"
android:text="Price"
/>
</LinearLayout>
Instead of wrap_content for widht you should use weight on your textview and weightsum on linear layout:
<?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="horizontal"
android:background="#ffffffff"
android:weightSum="100.0">
<TextView android:id="#+id/hdrdate"
android:layout_width="0dp"
android:layout_weight="100/number of text views"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:text="Date"/>
....
</LinearLayout>
If you do not want to use exact values for your margins you should add some blank text views and set the weight smaller than the one of the ones in which you have text.
Here is the code,
<?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="horizontal"
android:background="#ffffffff">
<TextView android:id="#+id/hdrdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView android:id="#+id/hdrdateasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/hdrdes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView android:id="#+id/hdritemasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/hdrprice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView android:id="#+id/hdrpriceasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" />
<TextView android:id="#+id/hdrtot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:layout_weight="1"
android:gravity="center_horizontal"/>
<TextView android:id="#+id/hdrtotasc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" />
</LinearLayout>
http://i.stack.imgur.com/4Irb3.png
click above link for screen shot.
Ok so i'm having some problems editing my xml layout to get this list looking good. Basically i want each row of info to fill the whole list row, so that the white space you see in between each row isn't there. I have tried manipulating multiple different attributes in the row.xml and the main.xml but nothing has worked so far. Anyone have any advice? Thanks
row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="4dip"
android:paddingBottom="6dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:orientation="horizontal">
<TextView android:id="#+id/position"
android:textColor="#color/white"
android:background="#color/black"
android:layout_width="20dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"/>
<TextView android:id="#+id/team_name"
android:textColor="#000000"
android:background="#color/grey"
android:gravity="center"
android:layout_width="70dip"
android:textSize="14dip"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView android:id="#+id/games_played"
android:textColor="#000000"
android:background="#color/cyan"
android:layout_width="5dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView android:id="#+id/points"
android:textColor="#000000"
android:background="#color/turquoise"
android:layout_width="5dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/white"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="Team"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="right"
android:layout_width="wrap_content" />
<TextView
android:text="Games Played"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="center"
android:layout_width="wrap_content"
android:paddingLeft="22dip" />
<TextView
android:text="Points"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="left"
android:layout_width="wrap_content"
android:paddingRight="18dip"/>
</TableRow>
<TableRow >
<ListView
android:background="#color/white"
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</TableRow>
</TableLayout>
Did you set android:minHeight prop as well as android:layout_height of LinearLayout? this will fixes the row height.
i figured it out, i had to remove the padding attributes in the linearlayout, can't believe i didn't figure it out before!
This is what I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="right|center_vertical"
/>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="right|center_vertical"
android:layout_gravity="center_vertical"
android:background="#E30000">
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon"
android:gravity="right|center_vertical"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
And I want this:
So horizontal center align the text and vertical center align the button.
What am I missing? I haven't tried RelativeLayout and I would prefer LinearLayout to work this out.
android:gravity="right|center_vertical"
aligns your TextView to the right. How about center_horizontal?
And your LinearLayouts have the same ID, if there is not more code, then I would delete one of them.
try this one
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:layout_weight="1"
android:gravity="center"/>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="right|center_vertical"
android:layout_gravity="center_vertical"
android:background="#E30000"
android:layout_width="wrap_content">
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/icon"
android:gravity="right|center_vertical"
android:layout_height="wrap_content"
android:layout_margin="5dip"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I found none of the answers work exactly as the OP intended, but the RelativeLayout solution was the closest one. Except that the TextView wasn't centered. But, with layout_centerInParent=true, works like a charm:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:layout_centerInParent="true" />
<Button
android:id="#+id/btnCalls"
android:drawableLeft="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
you have used android:gravity="right|center_vertical" in your textview. Use android:gravity="center".
Try to add empty View inside horizontal LinearLayout between element that you want see left and element that you want to see right, e.g.:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
define layout weight for TextView and LinearLayout
set android:layout_weight="1" to TextView
set android:layout_weight="0" to LinearLayout
and also change the layout_width="wrap_content" to LinearLayout
and set layout_gravity="center" to TextView
I think,gravity means the position of things inside the component(for textview,it means the text you have given)in component where layout_gravity means position of component itself in the whole layout.So...
Try Using:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF"
>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="right"
android:gravity="center_vertical|right"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:gravity="center_vertical|center"
android:layout_weight="0.9"
>
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal|center_vertical"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:gravity="center_vertical|right"
android:paddingTop="5dip"
android:layout_weight="0.1"
>
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon"
android:layout_gravity="center_vertical"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Just use RelativeLayout, and wallaaa!!!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="center" />
<Button
android:id="#+id/btnCalls"
android:drawableLeft="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
The solution for this is-
android:gravity="center_vertical"
Normally you'll also have to take care of its parent's position too to make sure it works.