I have a drawable that I would like to use as a background for a textView. The drawable is declared in the xml as a textView background. I am having a problem when testing the drawable on different screen sizes, as sometimes it stretches out and turns into an oval shape instead of staying as a circle.
So, specifically, my question is as follows: Is there any way to make sure that a drawable is always a circle and does not stretch into an oval? Preferably I would like everything to be done in XML.
I can post some of my code, but I think it is unnecessary because it is a simple drawable that uses the oval shape, and then in the layout I set the drawable to the background of a textView. My attempt to make the drawable to a circle was to use weights and a linear layout, and for the most part it works but it still stretches a bit in some screen sizes.
For completeness, if anyone is interested here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center_horizontal|bottom"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/gradientline1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:src="#drawable/gradient_line" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:gravity="center"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center_horizontal|bottom"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/gradientline2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:src="#drawable/gradient_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="24"
android:orientation="horizontal" >
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="5" >
</View>
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:background="#drawable/circle"
android:gravity="center"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="5" >
</View>
</LinearLayout>
and here is the circle drawable (just layers of circles):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#color/circle_one" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape android:shape="oval" >
<solid android:color="#color/circle_two" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="oval" >
<solid android:color="#color/circle_three" />
</shape>
</item>
<item
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp">
<shape android:shape="oval" >
<solid android:color="#color/circle_two" />
</shape>
</item>
<item
android:bottom="16dp"
android:left="16dp"
android:right="16dp"
android:top="16dp">
<shape android:shape="oval" >
<solid android:color="#color/circle_three" />
</shape>
</item>
<item
android:bottom="28dp"
android:left="28dp"
android:right="28dp"
android:top="28dp">
<shape android:shape="oval" >
<solid android:color="#color/circle_one" />
</shape>
</item>
Use shape="ring" (not oval)
try:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<!-- View background color -->
<solid
android:color="#color/white" >
</solid>
<!-- View border color and width -->
<stroke
android:width="1.6dp"
android:color="#color/beam_grey" >
</stroke>
</shape>
put in your xml file the layout width and height in wrap content.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Related
Is there a way to create these two boxes with XML only (beside the icon of course)
The tob box has rounded bordered around it and shadow but inside it divided to two parts which one is pink background and one is white background (without stroke between them)
Create 2 XML drawables
rect_colored.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccent"/>
<corners android:bottomRightRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
rect_white.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners android:radius="5dp"/>
</shape>
Position the drawables appropriately
This will work differently with different root views. I'm using ConstraintLayout for simplicity
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:background="#drawable/rect_white"
android:id="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
<!--Content here-->
</FrameLayout>
<FrameLayout
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="2dp"
android:layout_marginTop="0dp"
android:background="#drawable/rect_colored"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout">
<!--Content here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The output
Just use a LayerList with the shapes you need nested. May take a little tweaking, but it is simple enough. You can even add in your bitmaps for the left icon if you like. Just make your layers, and adjust from the sides and handle your corners.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#0000FF" />
<corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
</shape>
</item>
<item android:right="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
</shape>
</item>
</layer-list>
Here simply you create a one xml file & drawable file to create shape & border.
MyActivity.Xml
<LinearLayout
android:id="#+id/ll_mobile_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<RelativeLayout
android:id="#+id/rr_verification_code"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_weight="0.3">
<EditText
android:id="#+id/et_verification_code"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ractangle_mobile_white_border"
android:ems="10"
android:hint="Enter Code"
android:drawableLeft="#mipmap/ic_launcher"
android:imeOptions="actionGo"
android:inputType="number|textAutoComplete"
android:maxLength="6"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingTop="16dp"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_country_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tv_verification_code_img"
android:layout_width="38dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/globe"
android:textColor="#color/blue_font_color"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
Drawable:- ractangle_mobile_white_border.xml
[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="360" android:endColor="#android:color/transparent" android:startColor="#android:color/transparent" />
<stroke android:width="1dp" android:color="#android:color/white" />
<corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
<padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Hope this helps you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_marginRight="5dip"
android:src="#anim/linearsavelocationbackground"
android:weightSum="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_marginTop="15dip"
android:layout_weight=".2"
android:src="#drawable/homestatus" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_weight=".6"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Home"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/homeimage"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_marginRight="5dip"
android:layout_marginTop="15dp"
android:layout_weight="0.20"
android:src="#drawable/deletingright" />
</LinearLayout>
<LinearLayout
android:id="#+id/office"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_marginRight="5dip"
android:background="#ffffff"
android:src="#anim/linearsavelocationbackground"
android:weightSum="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_marginTop="15dip"
android:layout_weight=".2"
android:src="#drawable/work" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_weight=".6"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Home"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/homeimage"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_marginRight="5dip"
android:layout_marginTop="15dp"
android:layout_weight="0.20"
android:src="#drawable/deletingright" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
bacground for border
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<solid android:color="#CCCCCC"/>
</shape>
This is my code i am trying to display border top and bottom on Linarlayout but i am unable to show effect i have to set border top and bottom of home Linear Layout and office linear layout i am tried to set that but effect is not coming please check where am doing mistake.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="1dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#android:color/darker_gray" />
<solid android:color="#android:color/transparent" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
Use the above layout as backgroud border. It will give you a very good effect. change the color and padding if you wish. Add this as xml in your drawable folder and make this drawable as background for the layout.
Hope this helps.
This can be done using an LayerList
Create a drawable name border_top_bottom.xml
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/your_border_color" />
</shape>
</item>
<item
android:top="1dp"
android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#color/your_fill_color" />
</shape>
</item>
On LinearLayout background property use
andorid:background:"#drawable/border_top_bottom.xml"
Add a xml in your drawable with the following code & then assign this xml as your linear layout background
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#000" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
I think Your problem is not Your shape, it is how You referred it inside the layout:
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_marginRight="5dip"
android:src="#anim/linearsavelocationbackground"
android:weightSum="1" >
You had set the reference to the anim folder, but it has to be in the drawable folder. If Your shape is inside the anim folder, put it into drawable folder and correct Your LinearLayouts src attribute:
android:src="#drawable/linearsavelocationbackground"
And then if this is not what you want, create a shape with the examples from krunal and EagleEye.
#Edge Please use this code
Let's say name of the xml file linearbg.xml and put it in drawable folder under resources.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#EEEEEE" />
</shape>
</item>
<!-- This is the line -->
<item
android:top="1dp"
android:bottom="1dp">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Now use this linearbg.xml as background in your linear layout as
android:background="#drawable/linearbg".
I need to create a drawable with a 3dp height line/rectangle on top, a black rectangle with 70% opacity and 2dp height line/rectangle on the bottom. How can I do this?
Here is the code I'm using:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:left="0dp" android:right="0dp">
<shape android:shape="rectangle" >
<size android:height="3dp"></size>
<solid android:color="#C81F25"></solid>
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#99000000"></solid>
</shape>
</item>
</layer-list>
PS: Ignore the gray gradient around the image, it's from Android Studio preview.
Case 1: Rectangle inside another rectangle.
Case 2: 3 Rectangles of which 2 are transparent which have negative paddings and strokes. On eclipse previews the case 2 shows wrong but it is correct and works when deployed.
case 1:
actionbarbg.xml in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#F00" />
</shape>
</item>
<item android:top="3dp" android:right="0dp" android:bottom="2dp"
android:left="0dp">
<shape android:shape="rectangle">
<solid android:color="#9000" />
</shape>
</item>
</layer-list>
case 2: (sort of a hack)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#9000" />
</shape>
</item>
<item
android:top="-2dp"
android:left="-2dp"
android:right="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#C81F25" />
</shape>
</item>
<item
android:left="-3dp"
android:right="-3dp"
android:bottom="-3dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="3dp"
android:color="#C81F25" />
</shape>
</item>
</layer-list>
Is it possible to build the layout without drawables using linearlayouts. I dont know which one of the two cases below you ment:
On the top layout there is a black alphamask with top and bottom margins of 2dp/3dp nested inside a red layout.
On the bottom layout there is a rectangle of 3dp height on top of a black alphamask and a rectangle of 2dp height below the alpha mask.
`
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="3dp"
android:background="#9000" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>`
OR
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#C81F25" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#9000" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#C81F25" >
</LinearLayout>
</LinearLayout>`
Here is an example of an app that used XML to design button.
How can i have the same design with XML?
How make my buttons look like it is floating just like in the image below?
I think you will need to use a shape drawable with a layered list, here is an example of a button that has a different color on the top and bottom (the drop shadow effect). You will set this as the background attribute of the Button.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_border_dark" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_border_light" />
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_general_color" />
</shape>
</item>
</layer-list>
Here is the XML of the Button. You can also use custom typeface as well as shadows to make it the way you want.
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#android:color/holo_blue_dark"
android:textColor="#android:color/white"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_gravity="center"
android:shadowColor="#android:color/holo_blue_light"
android:id="#+id/btnClickMe"
android:text="Click Me!"
/>
Use this one....
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#drawable/selected" // selected is the name of your custom file
android:text="Register"
android:textColor="#fff" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#37a8f7"
android:text="Login"
android:layout_marginTop="15dp"
android:textColor="#fff" />
</LinearLayout>
you can make custom file selected.xml in drawable folder for red button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
<corners android:radius="1dp"/>
<padding android:left="3dp" android:top="2dp"
android:right="3dp" android:bottom="2dp" />
</shape>
and set it to your red button.
And you can make same as for your blue button.
I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/. I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.
I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.
Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks
custom_button.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/map"/>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:innerRadiusRatio="1.75"
android:shape="ring"
android:thicknessRatio="25"
android:useLevel="false"
>
<gradient
android:angle="90"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<size
android:width="50dp"
android:height="40dp" />
<solid android:color="#008000" />
</shape>
</item>
</layer-list>
custom_layout (in res/drawable for linearlayout's background)
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#FF000000"
android:endColor="#FFFFFFFF"
android:type= "linear" />
<stroke
android:width="1dp"
android:color="#FF000000" />
<padding
android:left="5dp"
android:right="5dp"
/>
<size
android:height="50dp"
/>
<solid
android:color="#00FF00"
/>
</shape>
header.xml (in res/layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_layout"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:contentDescription="Button"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:background="#drawable/custom_button"
android:scaleType="fitXY"
android:color="#ff0000"
/>
<ImageButton
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Map"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/weather"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Weather"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/citilink"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="CitiLink"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
</LinearLayout>
You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.