Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Belajar Android Studio
Membuat Efek Animasi pada Button
Agus Haryanto
agus.superwriter@gmail.com
http://agusharyanto.net
B...
android:repeatCount="1"
android:repeatMode="reverse" />
</set>
5. Masih pada directory anim buat lagi resource baru dengan...
8. Sekarang kita ke bagian layout pada directory res/layout edit layout activity_main lalu
ketikan kode berikut.
<?xml ver...
package net.agusharyanto.buttonanimation;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
impor...
Belajar Android Studio Memberi Efek animasi pada Button
Upcoming SlideShare
Loading in …5
×

Belajar Android Studio Memberi Efek animasi pada Button

6,999 views

Published on

Belajar Android Studio Memberi Efek animasi pada Button

Published in: Education
  • Wah artikelnya bagus sekali. saya juga di bagian training tapi sayangnya fokus di hacking / pentesting http:://hadsec.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Belajar Android Studio Memberi Efek animasi pada Button

  1. 1. Belajar Android Studio Membuat Efek Animasi pada Button Agus Haryanto agus.superwriter@gmail.com http://agusharyanto.net Belajar Android Studio kali ini akan memepelajari tentang pemberian efek animasi pada button. Manfaatnya adalah aplikasi kita menjadi lebih responsif dimata user karena apabila button di sentuh buttonnya akan bergoyang-goyang. Untuk pembuatannya sendiri cukup mudah. Sekarang mari kita mulai. 1. Pada Android studio buat project baru, isi Application Name dengan ButtonAnimation , Company Domain dengan net.agusharyanto Klik Next sampai pada pilihan Activity, pilih Empty Activity. 2. Selanjutnya adalah kita siapkan xml untuk animasinya. untuk itu pada directory res buat directory baru dengan nama anim 3. Pada directory anim buat resource file baru lalu beri nama dengan anim_alpha lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="500" android:repeatCount="1" android:repeatMode="reverse" /> </set> 4. Masih pada directory anim buat lagi resource baru dengan nama anim_rotate lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="500" android:startOffset="0"
  2. 2. android:repeatCount="1" android:repeatMode="reverse" /> </set> 5. Masih pada directory anim buat lagi resource baru dengan nama anim_scale lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:fromXScale="1.0" android:toXScale="3.0" android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%" android:pivotY="50%" android:duration="500" android:repeatCount="1" android:repeatMode="reverse" /> </set> 6. Masih pada directory anim buat lagi resource baru dengan nama anim_translate lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="500" android:repeatCount="1" android:repeatMode="reverse"/> </set> 7. Sekarang kita ke bagian layout pada directory res/layout edit layout activity_main lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="500" android:repeatCount="1" android:repeatMode="reverse"/> </set>
  3. 3. 8. Sekarang kita ke bagian layout pada directory res/layout edit layout activity_main lalu ketikan kode berikut. <?xml version="1.0" encoding="utf-8"?> <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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="net.agusharyanto.buttonanimation.MainActivity"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Sentuh Button !" android:id="@+id/textView1"/> <Button android:id="@+id/alpha" android:layout_width="200dp" android:layout_height="wrap_content" android:text="Menghilang" android:layout_below="@+id/textView1" android:layout_centerHorizontal="true" /> <Button android:id="@+id/scale" android:layout_width="200dp" android:layout_height="wrap_content" android:text="Membesar" android:layout_below="@+id/alpha" android:layout_alignLeft="@+id/alpha" android:layout_alignStart="@+id/alpha" /> <Button android:id="@+id/rotate" android:layout_width="200dp" android:layout_height="wrap_content" android:text="Berputar" android:layout_below="@+id/scale" android:layout_centerHorizontal="true" /> <Button android:id="@+id/translate" android:layout_width="200dp" android:layout_height="wrap_content" android:text="Ke kanan" android:layout_below="@+id/rotate" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout> 9. Tiba waktunya kita ke otak aplikasinya, Edit MainActivity lalu ketikan kode berikut
  4. 4. package net.agusharyanto.buttonanimation; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final Animation animTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_translate); final Animation animAlpha = AnimationUtils.loadAnimation(this, R.anim.anim_alpha); final Animation animScale = AnimationUtils.loadAnimation(this, R.anim.anim_scale); final Animation animRotate = AnimationUtils.loadAnimation(this, R.anim.anim_rotate); Button btnKekanan = (Button)findViewById(R.id.translate); Button btnMenghilang = (Button)findViewById(R.id.alpha); Button btnMembesar = (Button)findViewById(R.id.scale); Button btnBerputar = (Button)findViewById(R.id.rotate); btnKekanan.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { v.startAnimation(animTranslate); } }); btnMenghilang.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { v.startAnimation(animAlpha); }}); btnMembesar.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { v.startAnimation(animScale); }}); btnBerputar.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { v.startAnimation(animRotate); }}); } } 10. Tiba waktunya untuk menjalankan projectnya. Demo hasilnya bisa dilihat di https://www.youtube.com/watch?v=sYIlZK-lfN8 11. Untuk yang masih kesulitan mengkuti tutorialnya bisa download sourcenya di https://github.com/jatisari/ButtonAnimation 12. Sudah selesai semua, saatnya kita minum kopi dan makan roti.

×