Background pour Tabhost

Version imprimable

16/07/2012, 17h52
italia57

Background pour Tabhost

Bonjour à tous,

j'aurai voulu savoir s'il était possible de changer le background de chaque bouton du tabhost ? J'ai cherché mais je n'ai pas trouvé la propriété et Eclipse ne me donne pas de résultat satisfaisant dans le liste des fonctions proposées...

Je vous remercie

Il faut avoir le style !

Voici la définition d'un tabwidget sous 4.0.4:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    <style name="Widget.TabWidget">
        <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
        <item name="ellipsize">marquee</item>
        <item name="singleLine">true</item>
        <item name="android:tabStripLeft">@android:drawable/tab_bottom_left</item>
        <item name="android:tabStripRight">@android:drawable/tab_bottom_right</item>
        <item name="android:tabStripEnabled">true</item>
        <item name="android:divider">@null</item>
        <item name="android:gravity">fill_horizontal|center_vertical</item>
        <item name="android:tabLayout">@android:layout/tab_indicator</item>
    </style>

16/07/2012, 22h53
italia57

étant donné que je développe sur 2.2 ça risque d'être compliqué. Comment puis-je faire du coup ?

Autre questions sous-jacente du coup:

comment faire pour que l'application tourne plus ou moins bien sur toutes les versions Android ?
16/07/2012, 23h04
nicroman

En regardant la version 2.2 du fichier styles.xml de Android ?

https://github.com/android/platform_...ues/styles.xml

(il y a plein de resources drawable "tab_selected" etc...)
23/07/2012, 15h56
italia57

Ce n'est pas faute d'avoir essayer, mais je n'ai toujours pas réussi à modifier le background des onglets du tabHost.

Moi j'utilise un fonction pour mettre du texte est une image et une autre pour mettre une couleur de fond et redessiner les carré.

Code:

1
2
3
4
5
6
7
 
	View tabview = createTabView(tabHost.getContext());
spec = tabHost.newTabSpec("nom").setIndicator(tabview).setIndicator(tabview)                    
			                  .setContent(intent);
 
tabHost.addTab(spec);
setTabColor(tabHost);

createTabView

Code:

1
2
3
4
5
6
7
8
9
 
private View createTabView(Context context) {
		TextView tv = null;
		View view = null;
 
 
			view = LayoutInflater.from(context).inflate(R.drawable.tabs_bg2, null);
			//tv = (TextView) view.findViewById(R.id.tabsText);
		}

setTabColor

Code:

1
2
3
4
5
 
public static void setTabColor(TabHost tabhost) 
{
tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
}

Permet de mettre une image
drawable/tabs_bg2.xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?xml version="1.0" encoding="utf-8"?>
 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabsLayout" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:orientation="vertical">
 
 
         <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/image"
            android:layout_gravity="bottom|center"
             />
 
 
 
</LinearLayout>

//Permet un dégrader et dessiner les carré

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="0dp" >
 
 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" 
     > 
 
     <gradient android:startColor="#00000000" 
 				android:centerColor="#808080"
         		android:endColor="#ffffff"
         		android:angle="270"
         		/> 
 
    <corners android:bottomRightRadius="7dp" 
        	android:bottomLeftRadius="7dp" 
     		android:topLeftRadius="7dp" 
     		android:topRightRadius="7dp"
 
     		/> 
 
</shape> 
</item></layer-list>

23/07/2012, 17h24
italia57

tu définis les fonctions là à l'endroit ou tu déclares ton tabHost et tous les onglets qu'il va contenir ?
23/07/2012, 17h29
xouzi
Sa dépend :
- createTabView est differant pour chaque onglet
- setTabColor est commun a tout les onglets
23/07/2012, 22h09
italia57

J'aurai aimé savoir également si tu as réussi à gérer le fait que quand l'on est sur un onglet la couleur est différente des autres ?

Pour changer la couleur pendant la selection je mais une boucle dans mon setTabColor

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public static void setTabColor(TabHost tabhost) 
	{
	    for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++)
	    {
 
	    	tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
 
 
		}
 
	    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundResource(R.drawable.tab_pressed_bg);
 
 
	}

Je créer 2 fichiers xml tab_notpressed_bg et tab_pressed_bg

24/07/2012, 16h26
italia57

je pourrais savoir ce qu'ils contiennent, on peut pas mettre directement une image ?

Citation:

on peut pas mettre directement une image

Dans createTabView j'utilise le fichier xml : tabs_bg2 c'est lui qui insère l'image

Code:

view = LayoutInflater.from(context).inflate(R.drawable.tabs_bg2, null);

Dans le xml j'ai une image (c'est l'image home).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabsLayout" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:orientation="vertical">
 
 
         <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/image"//image home
            android:layout_gravity="bottom|center"
             />
 
</LinearLayout>

24/07/2012, 17h00
italia57

Mais c'est pas tes fichier xml tab_notpressed_bg et tab_pressed_bg si ?

Car eux je sais pas ce qu'ils contiennent.

Je te remercie

Je te l'ai mit dans le mon premier post
tab_notpressed_bg.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  //espace
 <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> //bouton de forme rectangle
//degarder
     <gradient android:startColor="#00000000" 
          	   android:centerColor="#F7D798"
               android:endColor="#FEE57E"
 
               android:angle="270"/> 
//arrondi les bords 
    <corners android:bottomRightRadius="7dp" 
        	 android:bottomLeftRadius="7dp" 
     		 android:topLeftRadius="7dp" 
     		 android:topRightRadius="7dp"
 
     		 /> 
</shape> 
</item></layer-list>

tab_notpressed_bg c'est le même sauf que tu change la couleur ou autre.

24/07/2012, 17h33
italia57

ah oui excuse moi. Par contre je rencontre un petit problème c'est que j'arrive bien à naviguer entre les onglets mais l'onglet sélectionner reste le même. C'est à dire que l'application est utilisable normalement mais l'onglet qui est en pressed reste le même tous le temps.

EDIT: la couleur du texte passe bien de grise à blanche avec le focus mais pas le carré... enfin rectangle ici.

Tu n'as pas mi une image avec un fond de couleur ?

Tu as bien changer les couleur ex:
tab_pressed_bg:

Code:

1
2
3
4
5
6
 
 <gradient android:startColor="#00000000" 
          	   android:centerColor="#F7D798"
               android:endColor="#FEE57E"
 
               android:angle="270"/>

tab_notpressed_bg :

Code:

1
2
3
4
5
6
 
 <gradient android:startColor="#FEE57E" 
          	   android:centerColor="#F7D798"
               android:endColor="#00000000"
 
               android:angle="270"/>

Oui j'ai bien changer les couleurs. J'ai juste une image en faisant ça:
Code:

1 2 3 4 5 6 intent = new Intent().setClass(this, Menu.class); intent.putExtras(objetbunbleBis); spec = tabHost.newTabSpec("Menu").setIndicator("Menu", res.getDrawable(R.drawable.menu)).setContent(intent); tabHost.addTab(spec);
Mais si j'enlève:
Code:

1 2 res.getDrawable(R.drawable.menu)
ça ne change pas, ça fonctionne quand même pas

Pour changer les couleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public static void setTabColor(TabHost tabhost) 
	{
	    for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++)
	    {
 
	    	tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
 
 
		}
 
	    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundResource(R.drawable.tab_pressed_bg);
 
 
	}

Code:

1
2
tabHost.addTab(spec);
setTabColor(tabHost);

26/07/2012, 10h24
italia57

c'est bien ce que je fais mais le problème comme je t'ai dit c'est que le focus reste le même malgré que j'ai accès à tous les onglets

EDIT:

Voilà ce que ça donne, pourtant je suis sur l'onglet infos là et c'est toujours menu (celui ou j'arrive directement dessus depuis l'autre activité) qui est sélectionné.

http://www.restomaniak.com/media/dev...-26-105354.png
26/07/2012, 14h41
xouzi
Dsl je n'avais pas compris. Je me rappelle avoir eu le problème
Regarde du coter :
Code:

1 2 3 tabHost.setOnTabChangedListener(this); tabHost.addTab(spec);

j'ai donc quelque chose de ce style là pour le premier onglet:
Code:

1 2 3 4 5 6 intent = new Intent().setClass(this, Menu.class); intent.putExtras(objetbunbleBis); spec = tabHost.newTabSpec("Menu").setIndicator("Menu", res.getDrawable(R.drawable.menu)).setContent(intent); tabHost.setOnTabChangedListener((OnTabChangeListener) this); tabHost.addTab(spec);
mais j'ai l'erreur suivante sur cette ligne que tu m'as conseillé de rajouté:
Code:

1 2 tabHost.setOnTabChangedListener((OnTabChangeListener) this);
Eclipse me force à faire le cast.

Voici l'erreur:

http://www.restomaniak.com/media/erreurSet.PNG

26/07/2012, 15h22
Hizin

Si tu transtypes une classe dans un type qui lui est inconnu, c'est normal !

Soit tu fait en sorte que ta classe implémente l'interface OnTabChangedListener, soit tu fais une classe dédiée à ça (plus propre selon moi).
26/07/2012, 15h41
italia57

Si l'activité hérité de TabActivity cela ne suffit pas comme c'est une accesseur sur un tabHost ?
26/07/2012, 15h43
Hizin

Si ça suffisait, tu n'aurais pas cette erreur x)

TabActivity est juste un wrapper faisant 2-3 méthodes. En soit, il ne fait pas grand chose.
27/07/2012, 10h38
italia57

je n'ai toujours à réussi à faire fonctionner cette pauvre ligne de code...

Tu as bien implémenter ta classe ?

Code:

1
2
 
public class "Ta class" extends TabActivity implements OnTabChangeListener

Code:

1
2
3
4
5
6
 
public void onTabChanged(String tabName) {
 
	    setTabColor(getTabHost());
 
	}

02/08/2012, 09h58
italia57

Ton deuxième bout de code faisant parti d'une interface crée spécifiquement c'est ça ?

Non c'est la décalaration de mon tabHost
Décalaration Dans mon activité :
Code:

1 2 3 TabHost tabHost = getTabHost(); // Activité TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab
setTabColor:
Code:

1 2 public static void setTabColor(TabHost tabhost)
Code:

1 2 setTabColor(getTabHost());

06/08/2012, 09h23
italia57

Je te remercie, ça fonctionne à présent.

J'ai une autre petite question, voici la tête de mon tabHost:

http://www.restomaniak.com/media/tabHost.png

D'ou vient la ligne grise qui est en dessous de chaque onglet qui n'a pas le focus ? Peut-on changer sa couleur ?

Autre question, comment pourrais-je faire pour qu'il y est comme une petite séparation entre chaque onglet, mettre un petit trait blanc ou quelque chose du genre.

Je vous remercie

Pour les carée
tab_notpressed_bg.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="0dp" >
 
 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" 
     > 
 
     <gradient android:startColor="#00000000" 
 				android:centerColor="#808080"
         		android:endColor="#ffffff"
         		android:angle="270"
         		/> 
 //ici tu peux mettre des dimentions pour faire des carré
    <corners android:bottomRightRadius="7dp" 
        	android:bottomLeftRadius="7dp" 
     		android:topLeftRadius="7dp" 
     		android:topRightRadius="7dp"
 
     		/> 
 
</shape> 
</item></layer-list>

et il faut aussi le modifier tab_pressed_bg.xml ce qui permet de mettre des bouton plus gros quand ils sont presser.

Pour la bar grise je ne sais pas mais je pense que sa doit venir de ton xml ou tu as décalaré ton tab

09/08/2012, 11h54
italia57

Bizarre cette ligne grise. Je comprend pas. Je te remercie.
09/08/2012, 12h00
Hizin

Cette barre est là par défaut sur le composant de la barre d'onglet.

On la vire généralement avec un margin bottom négatif.
09/08/2012, 13h24
italia57

Merci je vais tenter ça alors. Un margin Bottom sur l'onglet ?
09/08/2012, 13h36
Hizin

Sur le TabWidget.
J'ai remarqué qu'un margin bottom de -6 dip passait bien.

Ps : si quelqu'un à une solution plus propre, je suis preneur.
09/08/2012, 14h03
italia57

Effectivement ça fonctionne mais du coup je trouve que le texte contenu dans l'onglet est trop proche de ce qu'il suit. Y aurait-il une solution pour combler ça ? Soit remonter le texte etc...
10/08/2012, 14h29
Substitut

Un padding bottom positif ? Puisque ca met une marge intérieur a ta View ca devrait fonctionner je pense.
10/08/2012, 23h27
italia57

Un padding bottom positif sur les onglets du tabHost ?