my own titlebar (backbutton like on the iphone)

darolla · by **darolla** » Wed Jan 28, 2009 5:05 pm

hi,

I'd like to build my own titlebar. and I'd like to have my own backbutton there.

This way I start in Java with my_title:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
 
                setContentView(R.layout.my_main);
 
                getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.my_title);              
 
Parsed in 0.031 seconds,  using GeSHi 1.0.8.4

But right now we've got a problem, huston.

The titlebar can only be 25px height.

It seems that android-sdk-windows-1.0_r2\tools\lib\res\default\drawable\title_bar.9.png is the background, and its 25px height (with 2px border for the .9.png lines).

Inside android-sdk-windows-1.0_r2\tools\lib\res\default\drawable\styles.xml it's referenced:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
    <style name="WindowTitleBackground">
 
        <item name="android:background">@android:drawable/title_bar</item>
 
    </style>
 
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

Using themeing I was able to put my own background gfx there, but the height is clipped after 25px.

Is there a way to change the 25px ?

Using G1 a backbutton in the titlebar is too small...

Greetings,
DaRolla

MrSnowflake · by **MrSnowflake** » Thu Jan 29, 2009 10:00 am

Just drop the real title bar and have a your TitleBar widget at the top of each Activity you start!

darolla · by **darolla** » Thu Jan 29, 2009 11:31 am

you mean that I should integrate my titlebar into my main.xml?

MrSnowflake · by **MrSnowflake** » Thu Jan 29, 2009 11:36 am

Indeed. I think that's the only way to circumvent the problems you describe, and it proabably gives you more freedom. Maybe you could make a CustomTitleView with a backbutton, which you add to the android-custom-widgets (or what was psink's repo's name?), so we all can have a nice title bar with a backbutton, which makes a lot of apps look the same.

darolla · by **darolla** » Thu Jan 29, 2009 11:47 am

my application has already 14 different activities. with your solution I will have to change them all.

writing my own widget would just shift this problem because I have to change all my 14 activities again inserting some xml (like linearlayout with button and text).

greetings & thanks,
darolla

MrSnowflake · by **MrSnowflake** » Thu Jan 29, 2009 11:51 am

Yes you would need to change you whole activities, but you should also do this if you could use the normal titlebar override functionality.

To ease the pain of altering the 14 activities, you could make a base activity MyTitleBarActivity, which sets the as titlebar in the onCreate and override the setContentView() to add the content view the inheriting activity to the layout under the TitleBar, so the only thing you should change is changing the extends Activity to extends MyTitleBarActivity.

darolla · by **darolla** » Thu Jan 29, 2009 2:55 pm

I like your idea.

But there is one thing I dont know how do handle.

Lets say we've got a title.xml (height 50px linearlayout) and we use this as setContentView(R.layout.title);

Now we've got something like main.xml (height and width fill_parent, with a textview "hello world").

how can I add this main.xml to the contentview using java?

greetings,
darolla

MrSnowflake · by **MrSnowflake** » Thu Jan 29, 2009 3:44 pm

What you should do in that case: This would be what you title.xml should look like:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<linlayout>
 
<MyTitleBar />
 
<linLayout id="@+id/yournewcontentview" />
 
</linlayout>
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

and then you add your main xml to yournewcontentview, by first inflating main.xml.

pskink · by **pskink** » Thu Jan 29, 2009 4:58 pm

darolla wrote:hi,

I'd like to build my own titlebar. and I'd like to have my own backbutton there.

But right now we've got a problem, huston.

The titlebar can only be 25px height.

darolla,

try using themes
<item name="android:windowTitleSize">100dip</item>

by default windowTitleSize is defined in res/values/themes.xml and set to 25dip

pskink · by **pskink** » Thu Jan 29, 2009 5:21 pm

pskink wrote:darolla,

try using themes
<item name="android:windowTitleSize">100dip</item>

also take a look into layout/screen.xml and layout/screen_custom_title.xml in your SDK

darolla · by **darolla** » Thu Jan 29, 2009 5:51 pm

nice hint, pskink... how can I use screen_custom_title.xml as my own?

greetings,
darolla

darolla · by **darolla** » Thu Jan 29, 2009 5:55 pm

well, here is something to play with...

pskink · by **pskink** » Thu Jan 29, 2009 6:00 pm

darolla wrote:nice hint, pskink... how can I use screen_custom_title.xml as my own?

greetings,
darolla

i think (am not sure) you cannot, but i think (again) that this layout is used internally by android when you request feature of custom titlebar. then you can use R.id.title to get your title View

and yes i'll be glad if you add your back-title-bar to my repo

did you try to change windowTitleSize?

darolla · by **darolla** » Thu Jan 29, 2009 6:12 pm

I did it

thanks go to... well, please look at the screenshot

greetings
darolla

darolla · by **darolla** » Thu Jan 29, 2009 6:16 pm

Here comes the clou:

themes.xml:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
        <style name="MyTheme" parent="android:Theme">
 
                <item name="android:windowTitleSize">54px</item>
 
                <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>                             
 
        </style>
 
</resources>
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

styles.xml:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="UTF-8"?>
 
<resources>
 
    <style name="WindowTitleBackground" parent="android:WindowTitleBackground">    
 
        <item name="android:background">@android:color/transparent</item>        
 
    </style>    
 
</resources>
 
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

MyActivity.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
package tut.orial;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.view.KeyEvent;
 
import android.view.View;
 
import android.view.Window;
 
import android.view.View.OnClickListener;
 
import android.widget.TextView;
 
public class MyActivity extends Activity {
 
        @Override
 
        public void onCreate(Bundle savedInstanceState) {
 
                super.onCreate(savedInstanceState);
 
                requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);              
 
                setContentView(R.layout.my);
 
                getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.my_title);              
 
                ((TextView)findViewById(R.id.title)).setText("thanks pskink");
 
                findViewById(R.id.back).setOnClickListener(new OnClickListener() {
 
                        public void onClick(View v) {
 
                                dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN,     KeyEvent.KEYCODE_BACK));
 
                                dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_BACK));
 
                        }
 
                });
 
                // ...
 
        }
 
}
 
Parsed in 0.037 seconds,  using GeSHi 1.0.8.4

my_title.xml

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<RelativeLayout android:id="@+id/header"
 
        xmlns:android="http://schemas.android.com/apk/res/android"
 
        android:layout_height="wrap_content" android:layout_width="fill_parent"
 
        android:background="#d4e9a9">
 
        <ImageView android:src="@drawable/jetpack"
 
                android:layout_width="wrap_content" android:layout_alignParentLeft="true"
 
                android:layout_centerVertical="true" android:id="@+id/back"
 
                android:layout_height="wrap_content" android:layout_alignParentTop="true" />
 
        <TextView android:id="@+id/title" android:layout_width="wrap_content"
 
                android:gravity="center_vertical" android:textSize="20px"
 
                android:textColor="#ffffff" android:layout_alignParentRight="true"
 
                android:text="New Title" android:background="#a5c639"
 
                android:layout_height="wrap_content" android:layout_alignParentTop="true"
 
                android:padding="9dip" android:layout_margin="5dip" />
 
</RelativeLayout>
 
Parsed in 0.004 seconds,  using GeSHi 1.0.8.4

my.xml

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<?xml version="1.0" encoding="utf-8"?>
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
        android:layout_width="fill_parent" android:layout_height="fill_parent"
 
        android:background="#daf3fc">
 
        <ImageView android:id="@+id/footer" android:src="@drawable/strokes_blue_developers"
 
                android:layout_height="wrap_content" android:layout_width="wrap_content"
 
                android:layout_alignParentBottom="true" />
 
        <LinearLayout android:id="@+id/content"
 
                android:layout_height="fill_parent" android:layout_width="fill_parent"
 
                android:layout_below="@+id/header" android:layout_above="@+id/footer">
 
                <TableLayout android:layout_height="wrap_content"
 
                        android:layout_width="wrap_content" android:layout_marginTop="100px">
 
                        <TableRow>
 
                                <ImageView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:src="@drawable/lil_market"
 
                                        android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
 
                                <ImageView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:src="@drawable/lil_developers"
 
                                        android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
 
                                <ImageView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:src="@drawable/lil_opensource"
 
                                        android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
 
                        </TableRow>
 
                        <TableRow>
 
                                <TextView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:text="Market"
 
                                        android:textColor="#669999" android:textSize="20px"
 
                                        android:layout_gravity="center_vertical" android:padding="6px" />
 
                                <TextView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:text="Developers"
 
                                        android:textColor="#669999" android:textSize="20px"
 
                                        android:layout_gravity="center_vertical" android:padding="6px" />
 
                                <TextView android:layout_width="wrap_content"
 
                                        android:layout_height="wrap_content" android:text="Open Source"
 
                                        android:textColor="#669999" android:textSize="20px"
 
                                        android:layout_gravity="center_vertical" android:padding="6px" />
 
                        </TableRow>
 
                </TableLayout>
 
        </LinearLayout>
 
</RelativeLayout>
 
Parsed in 0.009 seconds,  using GeSHi 1.0.8.4

Greetings,
DaRolla

my own titlebar (backbutton like on the iphone)

my own titlebar (backbutton like on the iphone)

Re: my own titlebar (backbutton like on the iphone)

Re: my own titlebar (backbutton like on the iphone)

Who is online