control - tabs android studio example

Cómo cambiar las imágenes de pestañas en el TabHost

Question

Estoy utilizando el TabHost en mi aplicación, estoy usando cuatro pestañas en mi aplicación y quiero usar las diferentes imágenes en el TabHost cuando la pestaña particular ha sido seleccionada y no seleccionada. Necesito usar diferentes imágenes para cada pestaña en particular.

Cuando selecciono cualquier pestaña, la imagen es poco brillante y cuando cambio a otra pestaña, la imagen brillante se sombreará en gris.

Implementé TabHost pero no sé cómo cambiar las imágenes en TabHost.

Puede alguien ayudarme en esto.

Gracias, David

Answer 1

@Suchismita es mejor que uses TextView en lugar de TabActivity. Enfrenté estos siguientes problemas en tabactivity

• No pude comenzar otra actividad dentro de la misma pestaña, este es el principal problema que enfrenté

• El siguiente es personalizar la vista de la pestaña, no pude cambiar divisor dibujable.

• Y TabActivity está en desuso en ICS

Después de usar TextView encontré que es muy fácil de manejar eventos y flujo de actividad, aquí Usted tiene control total sobre el comportamiento de la aplicación y también puede personalizar el aspecto de la pestaña como lo desee.

¿Estás interesado en cómo implementar?

Answer 2

Cree un archivo selector xml tabicon.xml y coloque este código

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_enbled" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_default" android:state_selected="false"/>
</selector>

ahora ve a tu TabActivity y pon este código

TabSpec MyTab = tabhost.newTabSpec("MyTab");
MyTab.setIndicator("", getResources().getDrawable(R.drawable.tabicon));
//note:if you give some text in setIndicator sometimes the icon will not be showed. 
Intent tabIntent = new Intent(this, TabOne.class);
TWTTab.setContent(tabIntent);

Answer 3

En this tutorial de TabLayout, se usan diferentes imágenes cuando se selecciona y no se selecciona una pestaña.

Básicamente, debes crear un Statelist . Aquí está el código para el mismo del sitio del desarrollador

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_artists_grey"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_tab_artists_white" />
</selector>

También se invoca setIndicator (CharSequence, Drawable) para configurar el texto y el icono para la pestaña.

Answer 4

En primer lugar, debe tener las dos imágenes, ya que desea cambiar de una a otra, por lo que necesita las dos imágenes, y debe colocarla en las tres carpetas dibujables.

En mi ejemplo, tengo imágenes, una llamada icon1.png e icon2.png .

Después de eso, crea un archivo xml dentro de las carpetas dibujables (el mismo archivo para todas las carpetas dibujables). Este es el archivo:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use icon1 -->
<item android:drawable="@drawable/icon1"
      android:state_selected="true" />
<!-- When not selected, use icon2-->
<item android:drawable="@drawable/icon2" />
</selector>

Puede elegir qué imagen es la que aparecerá cuando se seleccione la pestaña. En este caso, aparecerá el icono 1 , porque lo declaramos en la etiqueta donde state_selected = true .

Entonces, ahora tienes las dos imágenes y el archivo xml dentro de las tres carpetas dibujables. ¡De acuerdo!

Ahora, en la clase que declara las pestañas, agregue esta línea para cada pestaña que desee agregar.

tabHost.addTab(tabHost
.newTabSpec("one")
.setIndicator("The Tab",
  res.getDrawable(R.drawable.yourxmlfile))
.setContent(new Intent(this, YourClass.class)));

Recuerde que R.drawable.yourxmlfile se corresponde con el archivo xml que creó en las carpetas dibujables.

¡Eso es! Espero que esto te ayude.

Answer 5

Para configurar texto e ícono necesitamos usar la propiedad setIndicator.

 tabSpec.setIndicator(Char,Drawable);
 firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.logo));
 secondTabSpec.setIndicator("Second Tab Name",getResources().getDrawable(R.drawable.logo));

usa esto para establecer una imagen separada para cada pestaña

Answer 6

Puede utilizar ImageButton porque es mejor seleccionar un imageView y no seleccionarlo, y el ImageButton puede seleccionarse y presionarse, y otros ....

Answer 7

Si desea cambiar la imagen de la pestaña mediante programación, entonces:

ImageView yourImage= (ImageView)mTabHost.getTabWidget().getChildTabViewAt(youtTabPosition).findViewById(android.R.id.icon);   
yourImage.setImageResource(R.drawable.ic_more_vert_white_24dp);

Answer 8

Si desea utilizar diferentes imágenes para los estados seleccionados y no seleccionados, cree archivos XML ''selector'' en su carpeta de dibujos para cada pestaña, por ejemplo tab1_selector.xml, tab2_selector.xml que debe contener lo siguiente, reemplazando las referencias dibujables de sus imágenes para estados seleccionados y no seleccionados. es decir

    <?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_selected="true"
    android:drawable="@drawable/tab1_selected_image" />
  <item
    android:state_selected="false"
    android:drawable="@drawable/tab2_unselected_image" />
</selector>

Luego, utilizando el método .setIndicator como bharath escribió anteriormente, debe hacer referencia a su nuevo recurso xml drawable.

Answer 9

estos códigos muestran cómo configurar un ícono en el host de pestañas y también establecer la intención

  TabHost tabHost = getTabHost();

        // Tab for Photos
        TabSpec photospec = tabHost.newTabSpec("Photos");
        // setting Title and Icon for the Tab
        photospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_photos_tab));
        Intent photosIntent = new Intent(this, PhotosActivity.class);
        photospec.setContent(photosIntent);

        // Tab for Songs
        TabSpec songspec = tabHost.newTabSpec("Songs");
        songspec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_songs_tab));
        Intent songsIntent = new Intent(this, SongsActivity.class);
        songspec.setContent(songsIntent);


        // Tab for Videos
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_videos_tab));
        Intent videosIntent = new Intent(this, VideosActivity.class);
        videospec.setContent(videosIntent);

        // Adding all TabSpec to TabHost
        tabHost.addTab(photospec); // Adding photos tab
        tabHost.addTab(songspec); // Adding songs tab
        tabHost.addTab(videospec); // Adding videos tab