making own theme

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

Postby andrewhanson » Sat Jan 17, 2009 8:44 pm

I too would like to be able to theme the tabs. I hope the images are not really hard coded.
andrewhanson
Once Poster
Once Poster
 
Posts: 1
Joined: Sat Jan 17, 2009 8:40 pm

Top

Postby darolla » Sun Jan 18, 2009 9:54 am

I think the tab can be replaced. because these attached graphics are there...

Greetings,
DaRolla
Attachments
tab_press.9.png
tab_press.9.png (2.97 KiB) Viewed 2782 times
tab_focus.9.png
tab_focus.9.png (3.25 KiB) Viewed 2782 times
tab_unselected.9.png
tab_unselected.9.png (825 Bytes) Viewed 2782 times
tab_selected.9.png
tab_selected.9.png (657 Bytes) Viewed 2782 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 18, 2009 9:58 am

and then there are the borders, the small line under the tab. they are build out of small images...

Greetings,
DaRolla
Attachments
tab_focus_bar_right.9.png
tab_focus_bar_right.9.png (2.88 KiB) Viewed 2781 times
tab_focus.9.png
tab_focus.9.png (3.25 KiB) Viewed 2781 times
tab_focus_bar_left.9.png
tab_focus_bar_left.9.png (2.9 KiB) Viewed 2781 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 18, 2009 10:02 am

these graphics are references in tab_bottom_left.xml, tab_bottom_right.xml and tab_indicator.xml

Greetings,
DaRolla

tab_indicator.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  7.  
  8.     <!-- Non focused states -->
  9.  
  10.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
  11.  
  12.     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
  13.  
  14.  
  15.  
  16.     <!-- Focused states -->
  17.  
  18.     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
  19.  
  20.     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
  21.  
  22.  
  23.  
  24.     <!-- Pressed -->
  25.  
  26.     <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
  27.  
  28. </selector>
  29.  
  30.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


tab_bottom_left.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  7.  
  8.     <item android:state_pressed="true" android:drawable="@drawable/tab_press_bar_left"/>
  9.  
  10.     <item android:state_focused="false" android:drawable="@drawable/tab_selected_bar_left"/>
  11.  
  12.     <item android:state_focused="true" android:drawable="@drawable/tab_focus_bar_left"/>
  13.  
  14. </selector>
  15.  
  16.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


tab_bottom_right.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  7.  
  8.     <item android:state_pressed="true" android:drawable="@drawable/tab_press_bar_right"/>
  9.  
  10.     <item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/tab_selected_bar_right"/>
  11.  
  12.     <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/tab_focus_bar_right"/>
  13.  
  14. </selector>
  15.  
  16.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sun Jan 18, 2009 10:07 am

and these three xml files and the graphics can be searched in android-sdk-windows-1.0_r2\tools\lib\res\default\values in styles.xml and themes.xml.

There you can see how the standard theme handles it.

themes.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. ...
  3.  
  4. <item name="tabWidgetStyle">@android:style/Widget.TabWidget</item>
  5.  
  6. ...
  7.  
  8.  
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


styles.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. ...
  3.  
  4.     <style name="Widget.TabWidget">
  5.  
  6.         <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
  7.  
  8.     </style>
  9.  
  10. ...
  11.  
  12.     <style name="TextAppearance.Widget.TabWidget">
  13.  
  14.         <item name="android:textSize">14sp</item>
  15.  
  16.         <item name="android:textStyle">normal</item>
  17.  
  18.         <item name="android:textColor">@android:color/tab_indicator_text</item>
  19.  
  20.     </style>
  21.  
  22. ...
  23.  
  24.  
Parsed in 0.002 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

Postby darolla » Sun Jan 18, 2009 10:10 am

then we have tab_content.xml

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"
  7.  
  8.         android:layout_width="fill_parent" android:layout_height="fill_parent">
  9.  
  10.         <LinearLayout android:orientation="vertical"
  11.  
  12.         android:layout_width="fill_parent" android:layout_height="fill_parent">
  13.  
  14.         <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent"
  15.  
  16.                 android:layout_height="wrap_content" android:layout_weight="0" />
  17.  
  18.         <FrameLayout android:id="@android:id/tabcontent"
  19.  
  20.                 android:layout_width="fill_parent" android:layout_height="0dip"
  21.  
  22.            android:layout_weight="1"/>
  23.  
  24.         </LinearLayout>
  25.  
  26. </TabHost>
  27.  
  28.  
Parsed in 0.003 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

Postby darolla » Sun Jan 18, 2009 10:11 am

and the tab_indicator:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.    android:layout_width="0dip"
  9.  
  10.    android:layout_height="64dip"
  11.  
  12.    android:layout_weight="1"
  13.  
  14.    android:orientation="vertical"
  15.  
  16.    android:background="@android:drawable/tab_indicator">
  17.  
  18.  
  19.  
  20.     <ImageView android:id="@+id/icon"
  21.  
  22.        android:layout_width="wrap_content"
  23.  
  24.        android:layout_height="wrap_content"
  25.  
  26.        android:layout_centerHorizontal="true"
  27.  
  28.    />
  29.  
  30.  
  31.  
  32.     <TextView android:id="@+id/title"
  33.  
  34.        android:layout_width="wrap_content"
  35.  
  36.        android:layout_height="wrap_content"
  37.  
  38.        android:layout_alignParentBottom="true"
  39.  
  40.        android:layout_centerHorizontal="true"
  41.  
  42.        style="?android:attr/tabWidgetStyle"
  43.  
  44.    />
  45.  
  46.  
  47.  
  48. </RelativeLayout>
  49.  
  50.  
Parsed in 0.003 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

Postby darolla » Sun Jan 18, 2009 10:18 am

pskink wrote:
great!!

i'm still fighting with tabs project you uploaded but with no success... i took a look into TabWidget.java sources and it seems (lines 80 & 82) that images are really hardcoded.

i'll ask androId developers group if i'm right...


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.     private void initTabWidget() {
  3.  
  4.         setOrientation(LinearLayout.HORIZONTAL);
  5.  
  6.         mBottomLeftStrip = mContext.getResources().getDrawable(
  7.  
  8.                 com.android.internal.R.drawable.tab_bottom_left);
  9.  
  10.         mBottomRightStrip = mContext.getResources().getDrawable(
  11.  
  12.                 com.android.internal.R.drawable.tab_bottom_right);
  13.  
  14.         // Deal with focus, as we don't want the focus to go by default
  15.  
  16.         // to a tab other than the current tab
  17.  
  18.         setFocusable(true);
  19.  
  20.         setOnFocusChangeListener(this);
  21.  
  22.     }
  23.  
  24.  
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


Seems that you are right.

But can't you extend TabHost and the other classes in order to use your own?

I know, this isn't the "themes are just xml" idea anymore...

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

Postby darolla » Sun Jan 18, 2009 10:31 am

I had the same problem with my own dialog. The theme was ignored, too.

Here is the dialog tutorial: http://www.anddev.org/viewtopic.php?p=16192

1) my manifest which tells to use the EbetTheme for all:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         package="netzprofis.android.sportbet" android:versionCode="7"
  7.  
  8.         android:versionName="1.0.7">
  9.  
  10.  
  11.  
  12.         <uses-sdk android:minSdkVersion="1" />
  13.  
  14.  
  15.  
  16.         <uses-permission android:name="android.permission.INTERNET" />
  17.  
  18.  
  19.  
  20.         <application android:icon="@drawable/ebet" android:label="@string/app_name"
  21.  
  22.                 android:debuggable="true" android:theme="@style/EbetTheme">
  23.  
  24.         </application>
  25.  
  26. </manifest>
  27.  
  28.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


2) the themes.xml with EbetTheme and the new EbetDialogTheme
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <resources>
  5.  
  6.  
  7.  
  8.         <style name="EbetTheme" parent="android:Theme">
  9.  
  10.                 ...
  11.  
  12.         </style>
  13.  
  14.  
  15.  
  16.         <style name="EbetDialogTheme" parent="android:Theme.Dialog">
  17.  
  18.                 ...
  19.  
  20.         </style>
  21.  
  22.  
  23.  
  24. </resources>
  25.  
  26.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


3) my BankDialog which extends Dialog and sets the Theme:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. public class BankDialog extends Dialog {
  3.  
  4.  
  5.  
  6.         ...
  7.  
  8.        
  9.  
  10.         @Override
  11.  
  12.         public void onCreate(Bundle savedInstanceState) {
  13.  
  14.                 super.onCreate(savedInstanceState);
  15.  
  16.                
  17.  
  18.                 this.getContext().setTheme( R.style.EbetDialogTheme );         
  19.  
  20.                
  21.  
  22.                 setContentView(R.layout.bank);
  23.  
  24.                
  25.  
  26.                 ...
  27.  
  28.         }
  29.  
  30.  
  31.  
  32.         ...
  33.  
  34. }
  35.  
  36.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


This was the only solution because the theme was haardcoded inside Dialog.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. public class Dialog implements DialogInterface, Window.Callback, KeyEvent.Callback, OnCreateContextMenuListener {
  3.  
  4.  
  5.  
  6.         ...
  7.  
  8.        
  9.  
  10.     public Dialog(Context context) {
  11.  
  12.         this(context, 0);
  13.  
  14.     }
  15.  
  16.  
  17.  
  18.     public Dialog(Context context, int theme) {
  19.  
  20.         mContext = new ContextThemeWrapper(context, theme == 0 ? com.android.internal.R.style.Theme_Dialog : theme);
  21.  
  22.                 ...
  23.  
  24.     }
  25.  
  26.  
  27.  
  28.         ...
  29.  
  30. }
  31.  
  32.  
Parsed in 0.037 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

Postby pskink » Sun Jan 18, 2009 11:51 am

darolla wrote:
Seems that you are right.

But can't you extend TabHost and the other classes in order to use your own?

I know, this isn't the "themes are just xml" idea anymore...

Greetings,
DaRolla


yes, its not the idea "themes are just xml"...

i think we'll have to wait till google guys fix hard-coded images into themable ones :(
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby pskink » Sun Jan 18, 2009 11:59 am

darolla wrote:so what do the android devlopers say? ;)

I've got a question: do you know how to place a button like image behind every list item?

I wasn't successfull yet :cry:

Greetings,
DaRolla


no answer from android devs :(

for your question: its simple - you have to extend BaseAdapter and override getView see Views/Lists/14 Efficient Adapter in samples
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Sun Jan 18, 2009 12:02 pm

extending an adapter isn't the "themes are xml" idea again :(

shame on the developers...

:)

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

Postby pskink » Sun Jan 18, 2009 12:09 pm

pskink wrote:i think we'll have to wait till google guys fix hard-coded images into themable ones :(


yes, i think i'll wait for next sdk, maybe they'll do something with themes...

but in the meantime i got other 'joy toy', see http://www.anddev.org/new_widget_-_panel-t4400.html latest version is 0.6
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby pskink » Sun Jan 18, 2009 12:30 pm

darolla wrote:extending an adapter isn't the "themes are xml" idea again :(

shame on the developers...

:)

greetings,
darolla


ok, i thought you are asking that question 'off topic' - not related to themes

imho it cannot be done otherwise than in code
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Mon Jan 19, 2009 11:46 am

pskink wrote:for your question: its simple - you have to extend BaseAdapter and override getView see Views/Lists/14 Efficient Adapter in samples


hi mate,

I read those source codes, and I've got some problems.

1) I can change every list item using my own xml, like in the tutorials, no problem at all

2) I want the list items to be felt like buttons. I tried the getView method, but this is ONLY called when painting the list the very first time. after clicks this method isn't called at all

3) I tried onListItemClick, but this is only called AFTER the mouse is released (after beeing pressed). this feels wrong :(

4) using themes wont help, because the orange selection is outside the list item

please help me on this.

simple_list_item_1.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.    android:id="@android:id/text1"
  9.  
  10.    android:layout_width="fill_parent"
  11.  
  12.    android:layout_height="wrap_content"
  13.  
  14.    android:textAppearance="?android:attr/textAppearanceLarge"
  15.  
  16.    android:paddingLeft="6dip"
  17.  
  18.    android:minHeight="?android:attr/listPreferredItemHeight"
  19.  
  20.    android:background="@drawable/btn_default_normal"
  21.  
  22.    android:text="Help me on this" android:gravity="center"/>
  23.  
  24.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


ListTheme.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package tut.orial;
  3.  
  4.  
  5.  
  6. import android.app.ListActivity;
  7.  
  8. import android.content.Context;
  9.  
  10. import android.os.Bundle;
  11.  
  12. import android.util.Log;
  13.  
  14. import android.view.LayoutInflater;
  15.  
  16. import android.view.View;
  17.  
  18. import android.view.ViewGroup;
  19.  
  20. import android.widget.BaseAdapter;
  21.  
  22. import android.widget.ListView;
  23.  
  24. import android.widget.TextView;
  25.  
  26.  
  27.  
  28. public class ListTheme extends ListActivity {
  29.  
  30.  
  31.  
  32.         private static final String[] DATA = { "please", "help", "me", "on", "this" };
  33.  
  34.  
  35.  
  36.         private static class DarollaAdapter extends BaseAdapter {
  37.  
  38.  
  39.  
  40.                 private LayoutInflater mInflater;
  41.  
  42.  
  43.  
  44.                 public DarollaAdapter(Context context) {
  45.  
  46.                         mInflater = LayoutInflater.from(context);
  47.  
  48.                 }
  49.  
  50.  
  51.  
  52.                 @Override
  53.  
  54.                 public int getCount() {
  55.  
  56.                         return DATA.length;
  57.  
  58.                 }
  59.  
  60.  
  61.  
  62.                 @Override
  63.  
  64.                 public Object getItem(int position) {
  65.  
  66.                         return position;
  67.  
  68.                 }
  69.  
  70.  
  71.  
  72.                 @Override
  73.  
  74.                 public long getItemId(int position) {
  75.  
  76.                         return position;
  77.  
  78.                 }
  79.  
  80.  
  81.  
  82.                 @Override
  83.  
  84.                 public View getView(int position, View convertView, ViewGroup parent) {
  85.  
  86.  
  87.  
  88.                         TextView view;
  89.  
  90.  
  91.  
  92.                         if (convertView == null) {
  93.  
  94.                                 view = (TextView) mInflater.inflate(
  95.  
  96.                                                 R.layout.simple_list_item_1, parent, false);
  97.  
  98.  
  99.  
  100.                                 view.setText(DATA[position]);
  101.  
  102.  
  103.  
  104.                                 // this should only happen if its clicked, not all the times <img src="http://www.anddev.org/images/smilies/sad.png" alt=":(" title="Sad" />
  105.  
  106.                                 // view.setBackgroundResource( R.drawable.btn_default_selected
  107.  
  108.                                 // );
  109.  
  110.                         } else {
  111.  
  112.                                 view = (TextView) convertView;
  113.  
  114.                         }
  115.  
  116.  
  117.  
  118.                         Log.d("LIST THEME", "getView     position: " + position);
  119.  
  120.  
  121.  
  122.                         return view;
  123.  
  124.                 }
  125.  
  126.         }
  127.  
  128.  
  129.  
  130.         @Override
  131.  
  132.         public void onCreate(Bundle savedInstanceState) {
  133.  
  134.                 super.onCreate(savedInstanceState);
  135.  
  136.  
  137.  
  138.                 setListAdapter(new DarollaAdapter(this));
  139.  
  140.                 getListView().setDivider(null);
  141.  
  142.         }
  143.  
  144.  
  145.  
  146.         @Override
  147.  
  148.         public void onListItemClick(ListView l, View v, int position, long id) {
  149.  
  150.                 Log.d("LIST THEME", "onListItemClick position: " + position);
  151.  
  152.  
  153.  
  154.                 // this occurs AFTER the mouse is released <img src="http://www.anddev.org/images/smilies/sad.png" alt=":(" title="Sad" />
  155.  
  156.                 // v.setBackgroundResource( R.drawable.btn_default_selected );
  157.  
  158.         }
  159.  
  160. }
  161.  
  162.  
Parsed in 0.045 seconds, using GeSHi 1.0.8.4


greetings,
darolla
Attachments
device.png
device.png (7.92 KiB) Viewed 2749 times
Theme List.zip
(31.93 KiB) Downloaded 106 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top
PreviousNext

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 4 guests