Tutorial Android Button Circular dengan Icon dan Text di Android


Rounded android button dapat digunakan untuk berbagai tujuan untuk membuat aplikasi yang mengagumkan. Kita bisa melihat banyak aplikasi yang telah menggunakan tombol lingkaran atau sudut bulat. Dalam tutorial ini, saya akan menunjukkan cara membuat tombol android melingkar dan menambahkan ikon / gambar dan teks pada button/tombol.


Untuk membuat tombol melingkar di aplikasi android, Anda tidak memerlukan kode java, kita dapat membuatnya dengan menggunakan XML. tombol bulat juga dapat dibuat dengan menggunakan kode java tetapi memakan waktu dan perlu memiliki pengetahuan muka pemrograman java.

Di sini kita akan belajar untuk membuat Button lingkaran / Sudut Bulat hanya menggunakan XML. 

Contoh Membuat Project Android

1. Pada Android Studio, buatlah project baru.
     => Jika Anda tidak memiliki sebuah project, di layar Welcome klik New Project.
     => Jika Anda telah membuka project, dari menu File, pilih New Project.

    2. Pada Configure your new project, isi kolom berikut seperti di bawah ini.
     => Application name ⇒ ButtonCircular
     => Company domain ⇒ example.com (Misalnya: com.tahukoding.buttoncircular)
     => Project Location ⇒ memilih lokasi untuk project Anda. 


    3. Pada Select the form factors your app will run oncentang untuk Phone and Tablet.

     => Untuk Minimum SDK, pilih API 15: Android 4.0.3 (IceCreamSandwich). klik Next. 


    4. Pada Add an activity to Mobile, pilih Blank Activity dan klik Next.

    Next -> 


    5. Klik tombol Finish untuk membuat project.
    6. Pilih View Anda sebagai Project, Buka file layout untuk kegiatan utama (activity_main.xml) terletak di bawah App  res ⇒ layout.

    activity_main.xml
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="buttonbounce.tahukoding.com.buttonshadow.MainActivity"
        android:background="#f4f4f4">
    
        <TextView
            android:text="@string/tk"
            android:textSize="50sp"
            android:textStyle="bold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:id="@+id/textView2" />
    
        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            app:srcCompat="@drawable/tk"
            android:layout_below="@+id/textView2"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:id="@+id/imageView" />
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="36dp"
            android:layout_below="@+id/imageView"
            android:layout_centerHorizontal="true">
    
            <Button
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/circle"
                android:drawableTop="@android:drawable/ic_menu_add"
                android:paddingTop="20dp"
                android:text="Add"
                android:textColor="#fff"/>
    
            <Button
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/circle"
                android:drawableTop="@android:drawable/ic_input_delete"
                android:paddingTop="20dp"
                android:text="Delete"
                android:textColor="#fff"/>
    
            <Button
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/circle"
                android:drawableTop="@android:drawable/ic_menu_edit"
                android:paddingTop="20dp"
                android:text="Edit"
                android:textColor="#fff"/>
    
        </LinearLayout>
    </RelativeLayout>

    7.  Buka string.xml terletak di app ⇒ res ⇒ value dan copy kode di bawah ini.

    string.xml
    <resources>
    <string name="app_name">Circular Button dengan Icon dan Text</string>
    <string name="tk">Tahu Koding</string>
    </resources>

    8. Membuat drawable file app ⇒ res ⇒ drawable dan copy kode di bawah ini.



    circle.xml 
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="1000dp" />
        <solid android:color="#41ba7a" />
        <stroke
            android:width="2dip"
            android:color="#03ae3c" />
        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
    </shape>

    Untuk menjalankan aplikasi dari Android Studio , klik Run ikon dari toolbar. Oke untuk Tutorial Android Button Circular dengan Icon dan Text di Android telah selesai silahkan belajar tutorial android menarik lainya. bila ada kesulitan bisa orat oret di kolom komentar :D 

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel