Android, Yazılım

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

10_android_ozel_button3Arkadaş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.

10_Android_project_exp

 

 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ış 10_Android_ozel_button1

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

10_android_ozel_button2

Mavi Button Tıklanmış10_android_ozel_button3

 

-.-.-.

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.

10_Android_ozel_button1 10_android_ozel_button2 10_android_ozel_button3

 

 

 

 

 

 

 

 

 

download

 

 

Keyifli geliştirmeler, iyi çalışmalar 🙂