Question

I have the following xml file for navigation bar layout:

navigation_bar.xml

EDIT: I simplified this layout by removing table layout. but sill….

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/NavigationBar" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_marginLeft="10dp"
        android:src="@drawable/htc" />

    <TextView
        android:id="@+id/dummy"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="" />

    <Button
        android:id="@+id/btn_home"
        style="@style/NavigationButton"
        android:layout_marginRight="10dp"
        android:drawableTop="@drawable/btn_home"
        android:text="" />

</LinearLayout>

and the following is my styles.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="NavigationBar">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@drawable/top</item>
        <item name="android:dither">true</item>
    </style>


    <style name="NavigationButton">
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:background">@null</item>
    </style>   

</resources>

Also, following is the drawable button: btn_home.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home_pressed"
        android:state_focused="true"
        android:state_pressed="true" />
    <item android:drawable="@drawable/home_pressed"
        android:state_focused="false"
        android:state_pressed="true" />
    <item android:drawable="@drawable/home_selected" android:state_focused="true" />
    <item android:drawable="@drawable/home_default"
        android:state_focused="false"
        android:state_pressed="false" />
</selector>

And I get the following result:

See, the home button is displayed on top. But I want it to be center vertically. For that, I specified <item name="android:layout_gravity">center_vertical</item> on styles.xml file. I tried android:layout_gravity="center_vertical|left" also on navigation_bar.xml. But no result. How can I get the home picture to the center? Any help is appreciated!

Answer 1

At last I found a solution, although I don’t feel it’s best. Here is the solution I found out.

Using the values wrap_content, fill_parent, match_parent are all useless here. They always put the image on top whatever values I set for android:layout_gravity and android:gravity. And, at last, specifying the size of image as height has done the trick.

This is the new style for NavigationButton from styles.xml

<style name="NavigationButton">
    <item name="android:layout_gravity">center_vertical</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">25dp</item>
    <item name="android:background">@null</item>
</style>   

See the layout_height? It is now 25dp. Also, following is the Button entry from navigation_bar.xml.

<Button
    android:id="@+id/btn_home"
    style="@style/NavigationButton"
    android:layout_marginRight="10dp"
    android:drawableTop="@drawable/btn_home" />

And the result is