Tuesday, May 1, 2012

Custom title bar without padding (Android)


So I am using the techniques in this thread to use a custom background for my titlebar. Unfortunately the framework places my layout inside a FrameLayout ( title_container ) which has padding as seen below.



alt text



Is there anyway to remove the grey borders? The frame layout is defined in com.android.internal.R.id.title_container , so accessing the frame by ID would be fragile.


Source: Tips4all

3 comments:

  1. There is actually no need to use a custom layout to customise the background image. The following code in theme.xml will work:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <style name="TitlebarBackgroundStyle">
    <item name="android:background">@drawable/header_bg</item>
    </style>
    <style name="Theme.OTPMain" parent="android:Theme">
    <item name="android:windowTitleBackgroundStyle">@style/TitlebarBackgroundStyle</item>
    </style>
    </resources>


    However, if you do actually want to use a custom title bar, then the following code will remove the margin:

    ViewGroup v = (ViewGroup) findViewById(android.R.id.title);
    v.setPadding(0, 0, 0, 0)


    title_bar_background was set as the ID of the background image in the XML. I set android:scaleType="fitXY".

    ReplyDelete
  2. I was struggling with this same issue and now I have the answer!

    As you probably have seen several places, you need to create a themes.xml resource:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <style name="MyTheme" parent="android:Theme">
    <item name="android:windowTitleSize">44dip</item>
    <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>
    </style>
    </resources>


    Note it is not often mentioned in the sites talking about custom title bars you need to select this theme at the view, activity, or application level. I do it at the application level by adding android:theme property to the application:

    <application android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/MyTheme">


    You also need a styles.xml to define that WindowTitleBackgroundStyle. Unlike the various versions of this file I have seen floating aroung the web, I have added one additional line to the file that sets the padding to 0 which gets rid of the padding you are complaining about:

    <?xml version="1.0" encoding="UTF-8"?>
    <resources>
    <style name="WindowTitleBackground">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:padding">0px</item>
    </style>
    </resources>

    ReplyDelete
  3. There is a lenghty thread over on anddev.org that may be able to help you out

    http://www.anddev.org/my_own_titlebar_backbutton_like_on_the_iphone-t4591.html

    I have followed it and successfully created my own title bar which allows me to set the padding.

    Xml for my title bar:



    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout android:id="@+id/header"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="38px" android:layout_width="fill_parent"
    android:background="@drawable/gradient">

    <TextView android:id="@+id/title" android:layout_width="wrap_content"
    android:gravity="center_vertical" style="@style/PhoneText"
    android:layout_alignParentLeft="true"
    android:text="New Title" android:background="@android:color/transparent"
    android:layout_height="wrap_content" android:layout_alignParentTop="true"
    android:padding="5dip" android:layout_marginBottom="7px"/>

    <TextView android:id="@+id/time" android:layout_width="wrap_content"
    android:gravity="center_vertical" style="@style/PhoneText2"
    android:layout_alignParentRight="true"
    android:text="Test Text" android:background="@android:color/transparent"
    android:layout_height="wrap_content" android:layout_alignParentTop="true"
    android:padding="4dip" android:layout_marginBottom="7px"/>
    </RelativeLayout>




    The above creates a small gray bar with text aligned to the right and left sides

    ReplyDelete