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.
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.
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> </selector> |
İ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.
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> </shape> |
“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.
|
1 2 3 |
android:shape="oval" |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient//Burada geçişli renk kullanacağımızı belirledik. android:startColor="#B2DFDB"//Burada başlangıç rengini belirledik. android:centerColor="#009688"//Burada ortada bulunacak rengi belirledik. android:endColor="#004D40"//Burada sonda bulunacak rengi belirledik. /> <stroke//Burada çerçeve olacağını belirledik. android:color="#000000"//Burada çerçeveye bir renk verdik. android:width="5dp"//Burada çerçevenin /> <corners//Burada butonu kenarlardan kırpıcağımızı belirliyoruz.Bu kod için aşağıda daha detaylı yazı yazacağım. android:radius="20dp"//Burada butonun her köşesinden "20dp" değerinde kırpma yapılacağını belirledik. android:bottomLeftRadius="20dp"//Burada sol alt köşeyi "20dp" değerinde kırptık /> <size//Burada da butona yükseklik ve genişlik değerleri verdik. android:width="100dp" android:height="100dp" /> </shape> |
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.
|
1 2 3 |
android:background="@drawable/arkaplan"//arkaplan yazılan yere siz kendi dosyanızın ismini yazın. |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:startColor="#1A237E" android:centerColor="#00BCD4" android:endColor="#B2EBF2" /> <stroke android:color="#F44336" android:width="5dp" /> <size android:width="100dp" android:height="100dp" /> </shape> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/arkaplan2" android:state_pressed="true"/> <item android:drawable="@drawable/arkaplan"/> </selector> |
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.
