Tab Layout на Android часть вторая

В предыдущем топике про табы я показал как создавать их без картинок, честно сказать выглядит оно не так красиво как когда добавим картинки, и по этому я предлагаю еще один пост по теме табов но уже здесь я раскажу как вставить картинки в ваш проект. Вот так будет выглядеть наши табы после всех проделанных операций:




И так начнем. Открываем наш старый проект с табами, создаем папку drawable и три *.xml файла в ней, названия произвольные в моем случае это icon_read.xml, icon_share.xml и icon_other.xml. Теперь нам нужно нарисовать иконки, для примера я выложу свои иконки, можете использовать их в своем проекте, а потом перерисовать как уже захочется.





Вам иконки нужно уменьшить до нужных рахмеров, вот стандарты. В папку drawable_hdpi — размер 48х48px, в drawable_mdpi — размер 32х32px и в drawable_ldpi — размер 24х24px.

В каждой строке по две иконки, просто на белом фоне не видно самих белых иконок. И так, иконки у нас есть, теперь нам нужно их встроить в нашу программу. Для этого в созданные *.xml файлы пишем вот такой код, я напишу только для одного файла, код в принципе не отличается друг от друга, просто разные названия картинок.

icon_read.xml________________________________________________________________

<?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/read_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/read_white" />
</selector>

В остальные файлы просто вставьте этот же код, но поменяйте название картинок, поле выделено жирным

android:drawable="@drawable/read_gray"

Теперь что бы эти картинки отображались у нас в табах — допишем в SimpleActivity.java кое какой код. Раньше строка обращения к классу выглядела так:

TabSpec videospec = tabHost.newTabSpec("tab3");
videospec.setIndicator("Другое");
Intent videosIntent = new Intent(this, SomeClass3.class);
videospec.setContent(videosIntent);

для отображения картинки выглядит:

TabSpec videospec = tabHost.newTabSpec("tab3");
videospec.setIndicator("Другое", getResources().getDrawable(R.drawable.icon_other)); //вот он, вот он!!!
Intent videosIntent = new Intent(this, SomeClass3.class);
videospec.setContent(videosIntent);

Если кто не заметил то добавился во вторую строку код

, getResources().getDrawable(R.drawable.icon_other

который вызывает файл с иконками.

Вот и все, теперь компилируем проект и любуемся красотой.