Pazar , 28 Mayıs 2017
Anasayfa » Android » Android Button Tasarımı

Android Button Tasarımı

 

Merhaba arkadaşlar bu yazımızda Buton tasarımını anlatacağım.
Bir program yazarken her geliştirici tasarıma önem verir bunun sebebi ise uygulamamızı kullanan kullanıcıların tasarıma önem vermesidir. Uygulamanız ne kadar iyi çalışıyor olsa da binlerce satır kod yazmış olsanız da kullanıcı bunu bilmeyecek daha çok tasarıma önem verecektir. Tabi ki tasarım kadar uygulamanın alt yapısı yani yazılımı da sağlam olmalı aksi takdirde sadece tasarımın güzel olması da bir işe yaramaycaktır. Bu söylediklerimi hepiniz biliyorsunuzdur zaten. Ben bugün Android programlamada en çok kullanılan nesnellerden biri olan Button’un tasarımına değineceğim. Buton tasarımı yaparken xml dosyasında kod üzerinde de güzel tasarımlar çıkabilir ancak butona sadece tek renk verebilirsiniz, butonu tıklanma esnasında rengini değiştiremezsiniz, butonu sadece dikey veya kare şeklinde kullanabilirsiniz, daire şeklinde kullanamazsınız, butona çerçeve ekleyemezsiniz. Benim bugün göstereceğim yöntemle bu anlattıklarımın hepsini yapabilecek hale geleceğiz.

Öncelikle Android Studio’nun sol tarafında bulunan dosya seçeneklerinden “drawable” klasörüne faremizin sağ tuşuyla tıklıyoruz ve sırasıyla “new/Drawable resource file” seçeneklerine tıklıyoruz.

buton tasarımı

Daha sonra oluşturacağımız tasarım dosyasına bir isim verip “ok” seçeneğine tıklıyoruz.

Verdiğimiz isimde bir xml dosyası oluşturulacaktır ekranda.

İlk açıldığında dosyada sadece bu kodlar olmaktadır ancak bu kodlardan “<selector” kodunu kaldırıp yerien “<shape” etiketini yerleştireceğiz yani kod aşağıdaki kod gibi olacaktır.

“Selector” etiketini değiştirdikten sonra Buton’un şeklini seçeceğiz. Butonun şeklini seçmek için “<shape>” etiketinin içine aşağıdaki kodu ekleyeceğiz.

Ben Buton’un şeklinin daire olmasını istediğim için “oval” seçeneğini seçtim ama siz şeklin nasıl olmasını istiyorsanız onu seçebilirsiniz. Dikdörtgen için “rectangle” seçeneğini seçiyoruz.

Ben bir tasarım oluşturdum kodlarını da aşağıda vereceğim kodların üzerinde gerekli açıklamalarda bulunacağım.

Yukarıda butonumun daire şeklinde olmasını istedim ve 3 renkli olmasına karar verdim kodları yazdım. “Corners” özelliği dikey veya kare butonları tasarlarken kullanılır çünkü daire şeklindeki butonları kırpamayız ancak ben yinede siz görün diye kodu ekledim. Ayrıca “corners” seçeneğine 2 farklı değer verdim .”Zaten ilk değerde her köşe için geçerli yazmışsın neden ikinci bir değer girdin?” diye düşünebilirsiniz.Bunun nedenini ise şöyle açıklayayım evet ilk kodda her köşe için geçerli yazdım daha fazla değer girmeme gerek kalmıyor ama ben size hem her köşeyi birden kırpmayı hemde her köşeyi tek tek kırpmayı göstermek için yazdım kodları. Her köşeyi birbirinden farklı değerlerde kırpıp tasarlayabilirsiniz.

Bu tasarımı butona yansıtmak için tek yapmanız gereken bu dosyayı buton’un arka planı olarak ayarlamak. Onun için Buton’un koduna aşağıda vereceğim kodu yapıştırmanız yeterlidir.

buton tasarımı2

Buton’nun arkaplanına  tasarladığımız dosyayı koyarsak görüntü böyle oluyor.

Buton tasarlamayı gördük gelin şimdi butonu tıklanma esnasında butonun rengini değiştirip elini çekince yine eski görüntüsüne geri gelmeyi yapalım

Ne demek istediğimi yukarıdaki videoyu izleyerek daha iyi anlayabilirssiniz.

Bu işlemi yapmak için yukarıdaki gibi bir tasarım dosyası daha oluşturuyoruz. Bu tasarım dosyasını anlatmaya gerek yok size kodları vereceğim anlarsınız zaten hemen hemen diğeriyle aynı

2. tasarım dosyamın kodları yukarıdaki gibi. Bu tasarımın ilk tasarımdan farkı renklerin farklı olmasıdır.

Daha sonra tıklanma olayında 2. tasarımın gözükmesi için 3. bir tasarım dosyası daha oluşturuyoruz ama bu sefer bu daha farklı oluyor diğer oluşturduğumuz dosyalardan. Dosyayı oluşturduğumuzda varsayılan olarak “<selector>” etiketi geliyordu ve biz bunu siliyorduk tasarım yaparken bu sefer bunu silmeyeceğiz ve ilk 2 tasarımda olduğu gibi şekil belirlemeyeceğiz. Ben Kodları aşağıda vereyim orada daha iyi anlayacaksınız.

Kodlar bu şekilde arkadaşlar ilk olarak gözükmesini istediğimiz tasarımı “<item>” etiketinin içine yerleştirdik daha sonra butona tıklayınca gözükmesini istediğimiz tasarımı da ikinci “<item>” etiketinin içine yerleştirdik.

Bunu Butonla birleştirip butonun tıklayınca değişmesi için tıpkı ilk tasarımda yaptığımız gibi bu dosyayı arka plan olarak vereceğiz ve güzel bir buton tasarlamış olacağız. Bu yazımda kendi yaptığım projenin kaynak kodlarını da vereceğim indirip inceleyebilirsiniz.

Kaynak Kodu İndirmek İçin Tıklayınız.

Arkadaşlar ben tasarım yaparken genelde renk seçmek için bir site kullanıyorum burada renklerin kodu da bulunuyor siteyi sizlerle de paylaşmak istedim. Siteye gitmek için tıklayın.

 

Hakkında Devrim ÇATAK

İlginizi Çekebilir

Android ListView Kullanımı

Merhaba arkadaşlar bu yazımızda Android platformunda çok kullanılan öğelerden listView’i anlatacağım.   Öncelikle nedir bu …

Bir Cevap Yazın

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