Bugün sizlere android uygulamalarınızı geliştirirken static değerli imagebutton vb. bağlı kalmadan nasıl button oluşturabileceğini anlatacağım.
Bunun faydalarından biri her ekran çözünürlüğü için static ve farklı imageler değerler kullanmanızdan sizleri kurtarır,ekranı landscape ve portrait kullanma durumlarında çözünürlük vb konulardan dolayı sorun çıkarmaz, diğer yandan geliştirmesi ve düzenlemesi kolay olduğu için sizlere zaman kazandırır. (Üst seviye şekil vb. içeren butonlar için imagebutton ve farklı boyutlarda imageler bir yerde kaçınılmaz oluyor, eklemek isterim !)
Buttonları oluştururken birçok bileşenden yararlanacağız. Gradient, çerçeve kenarlığı, renk derinliği açısı, radius vb. türlerden oluşturduğumuz xml dosyalarından kombinelerle butonlar oluşturacağız.
Bu işleme başlamadan önce adımları detaylandırayım.
- İlk olarak buttonlarımızın renklendirmek için kullanacağımız ve benim daha önce anlattığım renk kaynaklarını projemize ekleyelim. Yazıya buradan ulaşabilirsiniz. (renkcumbusu.xml)
- Kullanacağımız buttonları gradient_kirmizi.xml, gradient_kirmizi_pressed.xml formatında oluşturacağız
- Oluşturuduğumuz buttonların kombinasyonlarına tıklanma, focus olma vb. durumlara göre yapılacak seçimlere karar vereceğiz ve button_kirmizi.xml formatında o button bileşenlerimizi oluşturacağız.
- Oluşturduğumuz buttonları layout***.xml içinde buttonların backgroundcolor değeri olarak tanımlayıp kullanacağız.
Aşağıda projemde buttonlarla ilgili kullandığım xml’leri hiyerarşik bir şekilde görebilirsiniz. Konunun anlaşılması adına açıklayıcı olacağını düşünüyorum.
Ekran Çıktıları
Uygulamanın çalışmasıyla ilgili ekran çıktıları aşağıda bulabilirsiniz. XMLdosyalarında birçok değişiklik yaparak çok farklı tıklama, focus olma yöntemleri geliştirebilirsiniz. Örneğin ben gradient açısını değiştiriyorum. Sizler renklerini bir ton koyulaştırıp açabilir veya buton ölçülerinde değişiklik yapıp farklı kullanımlar elde edebilirsiniz.
Kırmızı Button Tıklanmış
-.-.-.
Kaynak Kod:
Uygulamanın bazı kısımlarının açık kaynak kodu aşağıdaki gibidir. Sayfanın alt kısmında proje kodlarının tamamına ulaşabileceğiniz bir dosya mevcut.
MainActivity.java
package com.ders.custombuttonshape; /* * Coded By Tugrul Aşık * Visit tugrulasik.com for more information * 28.01.2013 */ import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
activitymain_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@color/Black" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="@dimen/top_margin" android:text="@string/text_ornek" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="@dimen/sperator" android:layout_marginLeft="@dimen/left_right_margin" android:layout_marginRight="@dimen/left_right_margin" android:layout_marginTop="@dimen/top_margin" android:background="@drawable/button_kirmizi" android:text="@string/button_name" android:textColor="@color/Black" /> <Button android:id="@+id/button2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="@dimen/sperator" android:layout_marginLeft="@dimen/left_right_margin" android:layout_marginRight="@dimen/left_right_margin" android:background="@drawable/gradient_sari" android:text="@string/button_name" android:textColor="@color/Black" /> <Button android:id="@+id/button3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="@dimen/sperator" android:layout_marginLeft="@dimen/left_right_margin" android:layout_marginRight="@dimen/left_right_margin" android:background="@drawable/gradient_turuncu" android:text="@string/button_name" /> <Button android:id="@+id/button4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="@dimen/sperator" android:layout_marginLeft="@dimen/left_right_margin" android:layout_marginRight="@dimen/left_right_margin" android:background="@drawable/button_mavi" android:text="@string/button_name" android:textColor="@color/White" /> </LinearLayout> |
dimens.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="top_margin">10dip</dimen> <dimen name="sperator">3dip</dimen> <dimen name="left_right_margin">5dip</dimen> </resources> |
button_kirmizi.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/gradient_kirmizi_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/gradient_kirmizi" android:state_focused="true" /> <item android:drawable="@drawable/gradient_kirmizi" /> </selector> |
button_mavi.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/gradient_mavi_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/gradient_mavi" android:state_focused="true" /> <item android:drawable="@drawable/gradient_mavi" /> </selector> |
gradient_kirmizi_pressed.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="180" android:centerColor="@color/Bisque" android:endColor="@color/Red" android:startColor="@color/Red" /> <stroke android:width="1dip" android:color="@color/Black" /> <corners android:radius="3dip" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
gradient_kirmizi.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="270" android:centerColor="@color/Bisque" android:endColor="@color/Red" android:startColor="@color/Red" /> <stroke android:width="1dip" android:color="@color/Black" /> <corners android:radius="3dip" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
gradient_mavi_pressed.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="90" android:endColor="@color/Aqua" android:startColor="@color/Blue" /> <stroke android:width="4dip" android:color="@color/BlueViolet" /> <corners android:radius="25dip" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
gradient_mavi.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="180" android:endColor="@color/Aqua" android:startColor="@color/Blue" /> <stroke android:width="4dip" android:color="@color/BlueViolet" /> <corners android:radius="25dip" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
gradient_sari.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="0" android:centerColor="#e7e7e8" android:endColor="#cfcfcf" android:startColor="@color/Yellow" /> <corners android:radius="15dip" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
gradient_turuncu.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="180" android:endColor="@color/Orange" android:startColor="@color/OrangeRed" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> |
Tıklama farkını aşağıdakilerde görebilirsiniz.
Keyifli geliştirmeler, iyi çalışmalar 🙂