Belajar Android Membuat Button Cantik Yuk

Sudah fitrah manusia inginnya selalu melihat yang indah-indah dan cantik-cantik. Nah demikian juga pengguna aplikasi, para pengguna cenderung setia dengan aplikasi yang tampilannya (User Interface) Cantik dan Simple.

Pada tutorial kali ini kita akan pelajari tentang styling Button yang tujuannya agar Button terlihat lebih cantik dan enak dilihat. Disini kita menambahkan efek warna gradient pada button

Sekarang Mari Kita mulai.

1. Buat Project dengan nama “LearnGardientButton” dengan nama package net.agusharyanto.learngradientbutton

2. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonmerah.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#ef4444" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ef4444"
                android:endColor="#992f2f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#992f2f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

3. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonbiru.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#449def" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#449def"
                android:endColor="#2f6699"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

4. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonungu.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#a276eb" />
            <stroke
                android:width="1dp"
                android:color="#6a3ab2" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#a276eb"
                android:endColor="#6a3ab2"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#6a3ab2" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

5. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonhijau.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#70c656" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

6. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonoranye.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#f3ae1b" />
            <stroke
                android:width="1dp"
                android:color="#bb6008" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f3ae1b"
                android:endColor="#bb6008"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#bb6008" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

7. Pada folder drawable-hdpi lalu buat file xml baru dengan buttonhitam.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#343434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#343434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

8. pada folder values buat file xml baru dengan nama color.xml lalu ketikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <item name="blue" type="color">#FF33B5E5</item>
    <item name="purple" type="color">#FFAA66CC</item>
    <item name="green" type="color">#FF99CC00</item>
    <item name="orange" type="color">#FFFFBB33</item>
    <item name="red" type="color">#FFFF4444</item>
    <item name="black" type="color">#FF000000</item>

</resources>

9. pada folder values Edit File string.xml lalu ketikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">LearnGradientButton</string>
    <string name="hello_world">Hello world!</string>
    <string name="merah">Merah</string>
    <string name="biru">Biru</string>
    <string name="hijau">Hijau</string>
    <string name="oranye">Orannye</string>
    <string name="ungu">Ungu</string>
    <string name="hitam">Hitam</string>

    <style name="ButtonText">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">3dp</item>
        <item name="android:textSize">30dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:shadowColor">#000000</item>
        <item name="android:shadowDx">1</item>
        <item name="android:shadowDy">1</item>
        <item name="android:shadowRadius">2</item>
    </style>

</resources>

10. Pada folder layout edit activity_main.xml lalu ketikan kode berikut

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${packageName}.${activityClass}" >

   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="match_parent"
       android:layout_height="80dp"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true"
       android:src="@drawable/ic_launcher" />

   <Button
       android:id="@+id/buttonMerah"
       style="@style/ButtonText"
       android:layout_alignParentLeft="true"
       android:layout_below="@+id/imageView1"
       android:background="@drawable/buttonmerah"
       android:text="@string/merah" />

   <Button
       android:id="@+id/buttonBiru"
       style="@style/ButtonText"
       android:layout_alignParentLeft="true"
       android:layout_below="@+id/buttonMerah"
       android:background="@drawable/buttonbiru"
       android:text="@string/biru" />

   <Button
       android:id="@+id/buttonUngu"
       style="@style/ButtonText"
       android:layout_alignParentRight="true"
       android:layout_below="@+id/buttonBiru"
       android:background="@drawable/buttonungu"
       android:text="@string/ungu" />

   <Button
       android:id="@+id/buttonHijau"
       style="@style/ButtonText"
       android:layout_alignParentRight="true"
       android:layout_below="@+id/buttonUngu"
       android:background="@drawable/buttonhijau"
       android:text="@string/hijau" />

   <Button
       android:id="@+id/buttonOranye"
       style="@style/ButtonText"
       android:layout_alignParentRight="true"
       android:layout_below="@+id/buttonHijau"
       android:background="@drawable/buttonoranye"
       android:text="@string/oranye" />

   <Button
       android:id="@+id/buttonHitam"
       style="@style/ButtonText"
       android:layout_alignParentRight="true"
       android:layout_below="@+id/buttonOranye"
       android:background="@drawable/buttonhitam"
       android:text="@string/hitam" />

</RelativeLayout>

11. pada folder src edit MainActiviy.java lalu ketikan kode berikut

package net.agusharyanto.learngradientbutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnClickListener {
	Button btnMerah, btnBiru, btnUngu, btnHijau, btnOranye, btnHitam;
	ImageView imageview;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		btnMerah = (Button) findViewById(R.id.buttonMerah);
		btnMerah.setOnClickListener(this);
		btnBiru = (Button) findViewById(R.id.buttonBiru);
		btnBiru.setOnClickListener(this);
		btnUngu = (Button) findViewById(R.id.buttonUngu);
		btnUngu.setOnClickListener(this);
		btnHijau = (Button) findViewById(R.id.buttonHijau);
		btnHijau.setOnClickListener(this);
		btnOranye = (Button) findViewById(R.id.buttonOranye);
		btnOranye.setOnClickListener(this);
		btnHitam = (Button) findViewById(R.id.buttonHitam);
		btnHitam.setOnClickListener(this);
		imageview = (ImageView) findViewById(R.id.imageView1);

	}

	@Override
	public void onClick(View v) {

		switch (v.getId()) {
		case R.id.buttonMerah:
			imageview.setBackgroundColor(getResources().getColor(R.color.red));
			return;
		case R.id.buttonBiru:
			imageview.setBackgroundColor(getResources().getColor(R.color.blue));
			return;
		case R.id.buttonUngu:
			imageview.setBackgroundColor(getResources().getColor(R.color.purple));
			return;
		case R.id.buttonHijau:
			imageview.setBackgroundColor(getResources().getColor(R.color.green));
			return;
		case R.id.buttonOranye:
			imageview.setBackgroundColor(getResources().getColor(R.color.orange));
			return;
		case R.id.buttonHitam:
			imageview.setBackgroundColor(getResources().getColor(R.color.black));
			return;
		}
	}
}

12. Mari Kita jalankan programya

Sentuh salah satu button maka backgroun gamabar android akan  berubah

Semoga Bermanfaat

Salam Hangat

Agus Haryanto

5 comments to Belajar Android Membuat Button Cantik Yuk

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>