Anasayfa / Android Dersleri / Android Dersleri 21 : Resim Galerisi Oluşturma

Android Dersleri 21 : Resim Galerisi Oluşturma

Merhaba. Bu yazımda, resim galerisi oluşturmayı anlatacağım. Resimleri kaydırdığımız bir kısım olacak ve tıklanan resim alt kısımda daha büyük şekilde gözükecek. Tasarıma önem verenler için kullanışlı olan bu aracın anlatımına başlayalım.

“Resim Galerisi” adında bir Android projesi (Android Application Project) oluşturdum ve karşıma gelen xml sayfasının Graphical Layout kısmına gelerek tasarım yapmaya başlıyoruz.

İlk olarak ben bir arka plan resmi oluşturdum. Bunu drawable klasörüne attım ve daha sonra sayfamın Properties kısmından bu resmi seçerek arka plan olarak atadım. Sonra soldaki panelden bir imageview ve Gallery araçları ekledim. Siz bunların düzenli olmasını istiyorsanız çeşitli layoutları kullanabilirsiniz. Layoutlar ile ilgili bilginiz yoksa ilk derslerde bulabilirsiniz.

Bunları yaptıktan sonra sayfamın xml kısmı aşağıdaki gibi olacaktır.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/resim"
tools:context=".MainActivity" >
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="176dp"
android:layout_marginLeft="77dp" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:maxWidth="500dp"
android:src="@drawable/resim1" />
</RelativeLayout>

Burada en altta bulunan src özelliği, varsayılan olarak bir resim gelmesi için yapıldı. Ayrıca fill_parent gibi değerler ise, sayfaya genişlik olarak tam oturması için yapıldı.

Daha sonra bilgisayarımdan 4 adet resim seçiyorum ve bunları yine drawable klasörüne atıyorum. İsimleri küçük harfle olmalı. Ben isimlerini resim1,resim2,resim3,resim4 olarak belirledim. Bu resimleri bilgisayardan değil de bir linkten ya da veritabanından da alabiliriz. Bunu kod kısmında yapıyoruz. Ben onu anlatmayacağım. Nasıl yapıldığını, yabancı sitelerden araştırıp öğrenebilirisiniz. Bu işlemlerden sonra sayfamın görünümü şu şekilde olacaktır. 

galeri

Buradaki Gallery nesnemiz şuanlık görünmüyor. Uygulamamız çalıştığında gözükecek. Şimdi de son olarak uygulamamızın MainActivity.java dosyasındaki kodlarını verelim.

galeri

1 => Burada Gallery ve ImageView nesneleri oluşturduk.

2 => Burada bu nesneleri id’leri ile bağladık.

3 => Eğer bu kısmı açarsak, resimler arasında boşluğu ayarlayabiliriz.

4 => Galerimizi doldurmak için adaptör belirledik. Adaptörümüzü ise ImageAdapter sınıfı olarak belirledik. Bu sınıftaki işlemler ile galerideki işlemleri ve doldurulacak resimleri belirleyeceğiz. Şuan bu sınıfı tanımlamadık. Burası hata verecektir.

5 => Galeri için bir Listener oluşturduk.

6 => Resimler için bir click olayı oluşturduk. Buradaki parametrelerden bize lazım olan position parametresidir. Bu parametreye göre, hangi resme tıklandığını anlayacağız.

7 => Hangi resme tıklandığını anlamak için tıklanan resmin id’sini switch ile kontrol ettik.

8 => Case‘ler yardımıyla, hangi resme tıklandıysa ona göre imageview içerisinde o resmin görüntülenmesini sağladık. Bizim ImageView nesnemizin adı resimler‘dir.

Şimdi de Galerimiz için bir xml dosyası oluşturmamız gerekiyor. Bunun için values dosyasına sağ tıklayıp bir Xml dosyası ekleyeceğiz. Adını da attrs koyalım. İçerisini ise aşağıdaki gibi kodlayalım.

galeri

Bu işlemlerden sonra şimdi de ImageView sınıfımızı oluşturalım. Bu sınıfı, OnCreate() metodunun bittiği yerden itibaren yazıyoruz.

galeri

1 => Burada bize lazım olan değişkenleri tanımladık. İlk değişken, attrs içinde bulunan değişkendir. Diğeri ise Context tipinde değişkendir.

2 => Burada, resimlerin id’lerinden oluşan integer tipinde bir dizi tanımladık.

3 => Bir adaptör tanımladık.

4 => Burada galeri için stil verdik.

5 => Burada 3 adet, override edilmesi gereken metodları yazdık. Bunları sağa tıklayıp Source->implements/overrides metod diyerek otomatik olarak ekleyebilirsiniz.

6 => imageview nesnesi için tıklanan resmi imageview içine atmayı sağladık.

7 => Galeri için genişlik ve yükseklik değerleri belirttik.

8 => Galeri için içindeki resimlerin kutucuğa nasıl yerleştirileceği belirtildi.

9 => Galeri için arkaplan stili belirlendi.

Ekran Çıktıları

galeri galeri

Hakkında Mehmet Kirazlı

İstanbul Eyüp'te ikamet ediyorum. Giresun Alucra'lıyım. Bilgisayar Mühendisi bölümünden 2013 yılında mezun oldum. "Yeni Başlayanlar için Java 8" kitabının yazarıyım. Şuanda özel bir firmada Mobil Yazılım Geliştirme Uzmanı olarak çalışıyorum.

İlginizi Çekebilir

android dersleri

Android Dersleri 26 : Veritabanı İşlemleri-3 ve SQLite Arayüzü Kullanımı

Merhaba. Bu yazımda, deneyenlerin bazılarının hata aldığını söylediği veritabanı kullanımını tekrar anlatacağım ve SQLite kullanımına …

36 Yorumlar

  1. Mehaba..Androidde bir uygulama geliştirmeye başladım.Ama bi yerde takıldım.Bir linkten verileri nasıl çekebilirim?Yardımcı olursanız sevinirim…

  2. karikatür,fıkra benzeri şeyleri bi veri tabanı ya da linkten çekeceğim.ama hiç bilmiyorum. Mesela linkten çekersem uygulama internet olmadan çalışmaz de mi?

    • Bir linkten çekerseniz internet olmadan çalışmaz. Bir defalığına çektikten sonra internetsiz kullanabilirsiniz. Bir veritabanından belli bir formattaki bilgileri çekmek için JSON kullanabilirsiniz. Bunu biraz daha detaylı araştırınca kafanızda birşeyler oluşacaktır.

  3. Peki buna örnek bi uygulama yazsanız..Linkten veri tabanına , veri tabanından uygulamaya şeklinde:) Ya da bunu anlatan bi sayfa varsa linkini atsanız…Çok şey istedim…Teşekkür ederim…Siteniz gerçekten faydalı…

  4. İyi günlen öncelikle paylaşımlarınız için teşekkürler.Bir sorum olacaktı bn bir sitedeki sadece resimleri çekmek istiyorum bunu hangi arac ve yöntemle yapabilirim yardımcı olabilirmisiniz ?

  5. mustafa göksu

    hocam java kitabınızı aldım elinize sağlık, sizden ricam android programlama üzerine de bir kitap çıkarmanız olacak yalnız temel den başlayıp orta düzeyi biraz geçen bir içerikle çıkarsa şahane olur 🙂 iyi çalışmalar

  6. Teşekkürler hocam, sizden ricam android derslerinizi video desteğiyle verirseniz daha etkili olacaktır.

  7. Merhabalar android galeri de oluşturduğumuz resimleri otomatik geçiş sağlama şansımız var mı? Şimdiden teşekkürler…

  8. merhaba arkadaşlar kaç gündür urasıyorum bi türlü yapamadım ya kafayı yicem nolur anlayan biriniz yardım etsin eclipse’de yukardaki mainactiviy.java dosyasına yazıorm hepsini bazı yerleri fln hatalı gösterio emülatörü çalıştırmıo bu hatalar yüzünden resim galerisi yapmak istiyorum tam ekran olcak resim ileri geri buton olcak bide

  9. merhaba sorunumu çözdüm fakat resim tablette küçük kalıyor tam ekran nasıl yaparız ?

  10. Merhaba. eclipse de yapacağımız uygulamada bir resmi arkaplan yap diye bir seçenek eklemek istiyorum. nasıl yapabilirim?

  11. Hocam çok fotoğraf koyunca program şişip patlıyor peki ben asset e atsam resimleri ordan çeksem nasıl yapabilirim.yapmaya çağırdığımda assetdeki imageleri static int olarak tutamıyorum.yardımcı olursanız çok minnettar olacağım.Çalışmalarınızda Başarılar

    • Bu hataya ben de rastladım. Çözüm olarak 800 piksel olarak sakladım resimleri. 80 kb ye kadar düşürdüm boyutlarını. Bunun dışında çözüm bulamadım. Pek aramadım da açıkçası o yüzden bir şey diyemeyeceğim. Static int olarak da tutsanız sizin proje boyutunuz büyük olduğu için yine hata verecektir. Kolay gelsin.

  12. Hocam iyi çalışmalar öncelikle çalışmanızı çok begendim ancak benim programımda IMAGEADAPTER satırında hata alıyorum ve hiç düzelmiyor.s yardımcı olursanız sevinirim

  13. hocam merhaba;
    fotograf galerisi örnegini josupla image galley yapma ımkanınız var mıdır? Bir kaç arkadasta bu konuda yardım istemekte sizden yardımcı olursanız eğer memnun oluruz.

  14. Hocam merhaba
    uygulamayı yapmaya çalışıyorum ama bir hata var
    galeri.setAdapter(new ImageAdapter(this));
    bu kodu yazınca ImageAdapter altı kırmızı çizgi çıkıyor kabul etmiyor bu kodu
    bu sorun neden dolayı olabilir

  15. usta direk programı yollasana sürekli hata alıyorum

  16. abi dedigin herşeyi yaptım ve programı çalıştırdım fotograf çek butonuna tıklıyorum ve çekilen fotoyuda imageviewe kaydediyorum fakat bana bişey daha lazım ben bu çekilen fotoyu imageviewe kaydettim ve şimdide parmagımla imageview de dokundugum yere resim çizmek istiyorum bunu nasıl yapabilirim ? şimdiden teşekkürler

  17. yazdım hepsi hatalı imageview tanımıyor hepsine add uniplemnts ne tarzı uyarı veriyor resim yerine direk kopyalanabilir kodu koysaydınız keşke oncliklistener hiçbirini tanımıyor

  18. Şu decode byte array şeklinde resimleri sunucuya ekleyıp cekme hakkında bır ders anlatsanız? ya da kıtabınızda bu konu varsa kıtabı alıcaktım onda da yok. Şu konu hakkında yardımcı olsanız super olurdu yahu.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir