Android Layout Custom Button Oluşturma (Gradient, radius vb.)

Arkadaşlar Selam,

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.

İlk Açılış

Kırmızı Button Tıklanmış

Mavi 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 🙂