#6 – Android Layouts: Tab Layout


Merhaba bir önceki yazımda Grid View layoutu anlatmıştım. Bu yazımda Tab Layoutu anlatacağım.

Tab Layout

Tab layout adından da anlaşılacağı üzere tabların kullanıldığı şablondur. Örneğimizle daha iyi anlayacaksınız. Örneğimiz 3 tane tab içerecek, tabların kendilerine ait isimleri ve simgeleri olacak. Ve de tabların kendi içerikleri de olacak.

kodu_indir

Örneğimizin emulatör çıktısı şöyle olacak:

tablayout

Gerekli Adımlar:

1. Yeni bir proje oluşturup (1. derste anlatmıştım.) adına TabLayout diyoruz.

2. activity_main.xml dosyasına aşağıdaki kodu girin.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost>

3. Aşağıda verdiğim fotoğrafları /res/drawable-hdpi dosyasına kaydedin, isimleri sırasıyla:home, music, photos olmalı.

home   music    photos

4. res altındaki layout klasörüne sağ tıklayıp 3 tane yeni android xml dosyası açın, isimleri şöyle olmalı: home.xml, music.xml, photo.xml (sıra önemli değil)

Sırasıyla bu xml dosyalarına aşağıdaki kodları girin.

home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/anaSayfaView"
        android:layout_width="185dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.19"
        android:text="ANASAYFA İÇERİK"
             android:textSize="20dp" />

</LinearLayout>

music.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/muzikView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MÜZİK İÇERİK" 
             android:textSize="20dp"/>

</LinearLayout>

photo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/fotoView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FOTOĞRAF İÇERİK"
        android:textSize="20dp" />

</LinearLayout>

5. drawable-hdpi klasörü altına üç tane android xml dosyası açın. Sırasıyla şu isimleri verin: hometab, musictab, phototab. Ve aşağıdaki kodları girin:

hometab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/home"
          android:state_selected="true" />

    <item android:drawable="@drawable/home" />
</selector>

musictab.xml

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

phototab.xml

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

6. Madem 3 farklı tabımız olacak o zaman 3 tane farklı .java dosyamız olmalı, çünkü biz bu üç tabın içinde farklı şeyler olsun istiyoruz. src klasörü altındaki paket dosyanıza sağ tıklayarak üç tane yeni sınıf oluşturun isimleri şöyle olsun: HomeActivity.java, MusicActivity.java, PhotoActivity.java

Sırasıyla aşağıdaki kodları girin:

HomeActivity.java

package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class HomeActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.home);}}

MusicActivity.java

package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class HomeActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.home);}}

PhotoActivity.java

package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class PhotoActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.photo);}}}

7. Şimdi de MainActivity.java dosyasında tabları ve tabların isimlerini oluşturup tabhost a ekleyeceğiz. Aşağıdaki kodu MainActivity.java dosyasına girin.

package com.androidhocam.tablayout;import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;public class MainActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);TabHost tabHost = getTabHost();TabSpec homespec = tabHost.newTabSpec("Anasayfa");
homespec.setIndicator("Anasayfa", getResources().getDrawable(R.drawable.hometab));
Intent videosIntent = new Intent(this, HomeActivity.class);
homespec.setContent(videosIntent);TabSpec photospec = tabHost.newTabSpec("Fotoğraflar");photospec.setIndicator("Fotoğraflar", getResources().getDrawable(R.drawable.phototab));
Intent photosIntent = new Intent(this, PhotoActivity.class);
photospec.setContent(photosIntent);TabSpec songspec = tabHost.newTabSpec("Müzik");
songspec.setIndicator("Müzik", getResources().getDrawable(R.drawable.musictab));
Intent songsIntent = new Intent(this, MusicActivity.class);
songspec.setContent(songsIntent);

tabHost.addTab(homespec);
tabHost.addTab(photospec);
tabHost.addTab(songspec);

}
}

8. Şimdi de 6. adımda ek olarak oluşturduğumuz aktiviteleri AndroidManifest.xml dosyasına activite olarak giriyoruz. Şu kodları manifeste ekleyin:

 <activity android:name=".PhotoActivity" />
        <activity android:name=".HomeActivity" />
        <activity android:name=".MusicActivity" />

9. Herşey hazır, şimdi projemize sağ tıklayıp Run as -> Android Application diyoruz. Sonuç aşağıda görülüyor.

Tab Layout Emülatör Çıktısı

tablayout

Android Evreni’nin bir yazısının daha sonuna geldik.Bütün Android Evreni ziyaretçilerine yararlı olmasını umarım.
Bir dahaki yazımda ListView anlatılacaktır.

Şunlar da ilginizi çekebilir

9 yorum

  • erkan
    18 Mart 2014 at 02:28

    ellerine sağlık dostum

    • MUSTAFA DEMİR
      18 Mart 2014 at 07:05

      teşekkürler yorum yapıp değerlendirmenizi ilettiğiniz için.

  • sunal
    26 Mart 2014 at 18:47

    Eline sağlık Kardeşim yazılar çok güzel senden bir ricada bulunmak istiyorum kusruma bakma anlamak için bunu söylüyorum çok kafama takılan nokta oluyor ondan örnek “Intent photosIntent” kodlar arasında böyle bir kod bölümü var daha önceki derslerde de mainActivity.javada genellikle oluyor bu tarz farklı kodaların açıklamsını yapa bilirmisin ezbere gitmek istemiyorum o yüz den bu yorumu yaptım teşekkürler.

    • MUSTAFA DEMİR
      11 Mayıs 2014 at 06:34

      Öneriniz için teşekkürler, normalde bütün kodların açıklamasını yaparım bunu kaçırmışım herhalde.

  • Rabia
    29 Mart 2014 at 16:39

    Merhaba,
    Yazılarınızın bir çoğunu daha yeni okuma fırsatı buldum. Hepsi ayrı ayrı çok yararlı oldu. Android ile son senemde ilgilenmeye başladım bitirme projemden dolayı. O yüzden birçok konuda eksiğim var. Bir sorum olcaktı yardımcı olabilirseniz çok sevinirim. Şimdi bu tablayout uygulamasını android te yaptım. Aynı ebat ve içeriklerde bir uygulamayı da Pc tarafı için java kullanarak yaptım. Şimdi asıl sorunum benim her iki uygulamayı da eş zamanlı olarak wifi üzerinden birbirine bağlamam gerek. Şunu yapmam gerek, pc tarafındaki uygulamada örneğin bir taba tıkladığımda, android teki uygulamada aynı şekilde tıklanmış olsun. Yani Pc den android i kontrol edebileyim ama sadece bu uygulama için. Daha temel konularda bile eksiğim varken bunu nasıl yapacağımı bir türlü çözemedim. Bu konuda yardımcı olabilirseniz çok sevinirim. Android konusunda daha tecrübeli biri olarak en azından buna benzer gördüğünüz. bir uygulama var mı ? Bu istediğimin teknik olarak bir karşılığı var mı ? nasıl arayabilirim? Bu konularda yardımcı olabilirseniz gerçekten baya bi makbule geçer :)
    Şimdiden teşekkürler..

  • Muhammet
    10 Mayıs 2014 at 23:10

    Merhabalar hocam ben bunu denedim ama tablette resimler gözükmüyor telefonda gözüyor bunu her ekran için ayarlamak ne yapabiliriz

    • MUSTAFA DEMİR
      11 Mayıs 2014 at 06:37

      merhaba,

      res klasörü altında drawable isminde bir klasör açın ve tablara ait resimleri bu klasör içine de kopyalayın. Bu şekilde problemin çözülmesi gerekiyor. drawable, drawable-hdpi, drawable-xhdp, drawable-xxhdpi, drawable-xxxhdpi klasörlerini biraz araştırırsanız daha iyi anlayacağınıza eminim.

      İyi Çalışmalar.

  • Emre
    25 Haziran 2015 at 20:12

    Hocam çok sagolun çok işime yaradı fakat ben actionbarıda gostermesini istiyorum oncreateoptionsmenu yazdım olmadı ?

  • mehmet
    31 Aralık 2015 at 13:00

    herkes teşekkür etmiş de bi ben mi salağım
    getTabHost() metodu nerde hocam böyle bir metod yok

LEAVE A COMMENT