Discussion :

[italia57]

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

[nicroman]

Il faut avoir le style !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 ?

[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...)

[italia57]

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

[xouzi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[italia57]

tu définis les fonctions là à l'endroit ou tu déclares ton tabHost et tous les onglets qu'il va contenir ?

[xouzi]

Sa dépend :

• createTabView est differant pour chaque onglet

• setTabColor est commun a tout les onglets

[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 ?

[xouzi]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[italia57]

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

[xouzi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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

[xouzi]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[xouzi]

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

Tu as bien changer les couleur ex:
tab_pressed_bg:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

tab_notpressed_bg :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[italia57]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
res.getDrawable(R.drawable.menu)

ça ne change pas, ça fonctionne quand même pas

[xouzi]

Pour changer les couleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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é.

[xouzi]

Dsl je n'avais pas compris. Je me rappelle avoir eu le problème
Regarde du coter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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