my own titlebar (backbutton like on the iphone)

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

my own titlebar (backbutton like on the iphone)

Postby 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
  1.  
  2.         public void onCreate(Bundle savedInstanceState) {
  3.  
  4.                 super.onCreate(savedInstanceState);
  5.  
  6.                 requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
  7.  
  8.                 setContentView(R.layout.my_main);
  9.  
  10.                 getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.my_title);             
  11.  
  12.  
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
  1.  
  2.     <style name="WindowTitleBackground">
  3.  
  4.         <item name="android:background">@android:drawable/title_bar</item>
  5.  
  6.     </style>
  7.  
  8.  
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
Attachments
title_bar.9.png
title_bar.9.png (2.94 KiB) Viewed 31443 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby 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!
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby darolla » Thu Jan 29, 2009 11:31 am

you mean that I should integrate my titlebar into my main.xml?
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby 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
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Top

Postby 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
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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
  1. <linlayout>
  2.  
  3. <MyTitleBar />
  4.  
  5. <linLayout id="@+id/yournewcontentview" />
  6.  
  7. </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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

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

Postby 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
Last edited by pskink on Thu Jan 29, 2009 5:26 pm, edited 1 time in total.
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

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

Postby 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
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Thu Jan 29, 2009 5:51 pm

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

greetings,
darolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Thu Jan 29, 2009 5:55 pm

well, here is something to play with...
Attachments
Title1.zip
(29.06 KiB) Downloaded 1225 times
Title1.png
Title1.png (12.87 KiB) Viewed 31384 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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?
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Thu Jan 29, 2009 6:12 pm

I did it :)

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

greetings
darolla
Attachments
Title2.png
Title2.png (12.7 KiB) Viewed 31379 times
Title2.zip
(30.08 KiB) Downloaded 857 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Thu Jan 29, 2009 6:16 pm

Here comes the clou:

themes.xml:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <resources>
  5.  
  6.         <style name="MyTheme" parent="android:Theme">
  7.  
  8.                 <item name="android:windowTitleSize">54px</item>
  9.  
  10.                 <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>                            
  11.  
  12.         </style>
  13.  
  14. </resources>
  15.  
  16.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


styles.xml:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.  
  4. <resources>
  5.  
  6.     <style name="WindowTitleBackground" parent="android:WindowTitleBackground">    
  7.  
  8.         <item name="android:background">@android:color/transparent</item>        
  9.  
  10.     </style>    
  11.  
  12. </resources>
  13.  
  14.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


MyActivity.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package tut.orial;
  3.  
  4.  
  5.  
  6. import android.app.Activity;
  7.  
  8. import android.os.Bundle;
  9.  
  10. import android.view.KeyEvent;
  11.  
  12. import android.view.View;
  13.  
  14. import android.view.Window;
  15.  
  16. import android.view.View.OnClickListener;
  17.  
  18. import android.widget.TextView;
  19.  
  20.  
  21.  
  22. public class MyActivity extends Activity {
  23.  
  24.  
  25.  
  26.         @Override
  27.  
  28.         public void onCreate(Bundle savedInstanceState) {
  29.  
  30.                 super.onCreate(savedInstanceState);
  31.  
  32.  
  33.  
  34.                 requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);             
  35.  
  36.                 setContentView(R.layout.my);
  37.  
  38.                 getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.my_title);             
  39.  
  40.  
  41.  
  42.                 ((TextView)findViewById(R.id.title)).setText("thanks pskink");
  43.  
  44.                
  45.  
  46.                 findViewById(R.id.back).setOnClickListener(new OnClickListener() {
  47.  
  48.                         public void onClick(View v) {
  49.  
  50.                                 dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN,     KeyEvent.KEYCODE_BACK));
  51.  
  52.                                 dispatchKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_BACK));
  53.  
  54.                         }
  55.  
  56.                 });
  57.  
  58.                
  59.  
  60.                 // ...
  61.  
  62.         }
  63.  
  64. }
  65.  
  66.  
Parsed in 0.038 seconds, using GeSHi 1.0.8.4


my_title.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <RelativeLayout android:id="@+id/header"
  5.  
  6.         xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.         android:layout_height="wrap_content" android:layout_width="fill_parent"
  9.  
  10.         android:background="#d4e9a9">
  11.  
  12.  
  13.  
  14.         <ImageView android:src="@drawable/jetpack"
  15.  
  16.                 android:layout_width="wrap_content" android:layout_alignParentLeft="true"
  17.  
  18.                 android:layout_centerVertical="true" android:id="@+id/back"
  19.  
  20.                 android:layout_height="wrap_content" android:layout_alignParentTop="true" />
  21.  
  22.  
  23.  
  24.         <TextView android:id="@+id/title" android:layout_width="wrap_content"
  25.  
  26.                 android:gravity="center_vertical" android:textSize="20px"
  27.  
  28.                 android:textColor="#ffffff" android:layout_alignParentRight="true"
  29.  
  30.                 android:text="New Title" android:background="#a5c639"
  31.  
  32.                 android:layout_height="wrap_content" android:layout_alignParentTop="true"
  33.  
  34.                 android:padding="9dip" android:layout_margin="5dip" />
  35.  
  36. </RelativeLayout>
  37.  
  38.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


my.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:layout_width="fill_parent" android:layout_height="fill_parent"
  7.  
  8.         android:background="#daf3fc">
  9.  
  10.  
  11.  
  12.         <ImageView android:id="@+id/footer" android:src="@drawable/strokes_blue_developers"
  13.  
  14.                 android:layout_height="wrap_content" android:layout_width="wrap_content"
  15.  
  16.                 android:layout_alignParentBottom="true" />
  17.  
  18.  
  19.  
  20.         <LinearLayout android:id="@+id/content"
  21.  
  22.                 android:layout_height="fill_parent" android:layout_width="fill_parent"
  23.  
  24.                 android:layout_below="@+id/header" android:layout_above="@+id/footer">
  25.  
  26.  
  27.  
  28.                 <TableLayout android:layout_height="wrap_content"
  29.  
  30.                         android:layout_width="wrap_content" android:layout_marginTop="100px">
  31.  
  32.  
  33.  
  34.                         <TableRow>
  35.  
  36.                                 <ImageView android:layout_width="wrap_content"
  37.  
  38.                                         android:layout_height="wrap_content" android:src="@drawable/lil_market"
  39.  
  40.                                         android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
  41.  
  42.  
  43.  
  44.                                 <ImageView android:layout_width="wrap_content"
  45.  
  46.                                         android:layout_height="wrap_content" android:src="@drawable/lil_developers"
  47.  
  48.                                         android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
  49.  
  50.  
  51.  
  52.                                 <ImageView android:layout_width="wrap_content"
  53.  
  54.                                         android:layout_height="wrap_content" android:src="@drawable/lil_opensource"
  55.  
  56.                                         android:padding="6px" android:layout_gravity="center_vertical|center_horizontal" />
  57.  
  58.                         </TableRow>
  59.  
  60.  
  61.  
  62.                         <TableRow>
  63.  
  64.                                 <TextView android:layout_width="wrap_content"
  65.  
  66.                                         android:layout_height="wrap_content" android:text="Market"
  67.  
  68.                                         android:textColor="#669999" android:textSize="20px"
  69.  
  70.                                         android:layout_gravity="center_vertical" android:padding="6px" />
  71.  
  72.  
  73.  
  74.                                 <TextView android:layout_width="wrap_content"
  75.  
  76.                                         android:layout_height="wrap_content" android:text="Developers"
  77.  
  78.                                         android:textColor="#669999" android:textSize="20px"
  79.  
  80.                                         android:layout_gravity="center_vertical" android:padding="6px" />
  81.  
  82.  
  83.  
  84.                                 <TextView android:layout_width="wrap_content"
  85.  
  86.                                         android:layout_height="wrap_content" android:text="Open Source"
  87.  
  88.                                         android:textColor="#669999" android:textSize="20px"
  89.  
  90.                                         android:layout_gravity="center_vertical" android:padding="6px" />
  91.  
  92.                         </TableRow>
  93.  
  94.  
  95.  
  96.                 </TableLayout>
  97.  
  98.  
  99.  
  100.         </LinearLayout>
  101.  
  102.  
  103.  
  104. </RelativeLayout>
  105.  
  106.  
Parsed in 0.009 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top
Next

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 7 guests