TUTORIAL TRANSISI ANDROID BUTTON HOVER SEDERHANA FREE DOWNLOAD

Kali ini SaungIT akan memberikan sedikit tutorial mengenai tutorial hover button pada aplikasi android
Sebelum kita lanjutkan, mungkin dari teman teman ada yang belom tau apa itu hover, nah sedikit penjelasa hover itu adalah suatu efek transisi yang jika kita menekan Button maka tampilan button saat belum di tekan, dan sesudah di tekan akan berubah tampilanya, tampilan disini tentu tampilan buttonya.









ok pertaama langsung aja , lets goo

1. Buka eclipsenya masing" buat project baru ==> File new, android project pada eclipse . saya sendiri menggunakan eclipse juno tampilan nya seperti ini ketikan aplication name, project name dengan nama    saungIt package name nya juga diisi jangan lupa. Untuk build sdk nya teserah mau temen" pilihnya apa sesuaiain aja, nah nanti tampilanya bakalan seperti ini


2. tamilan selanjutnya yaitu memilih icon untuk aplikasi yang akan dibuat berikut tampilanya


3.langkah selanjutnya yaitu memberi nama class utama yang akan digunakan nanti dan nama .xml nya



4. setelah itu selesai maka tahap selanjutnya yaitu membuat class yang akan digunakan
class yang pertama yaitu class utamanya berikut source nya:


package saungit.org;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.widget.Button;

public class SaungIt extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.saungit);
    

      //button saung
    Button btn_saung = (Button) findViewById(R.id.btn_saung);
    /**
     * Handling all button click events
     * */

    // Listening to PROVINSI button click
    btn_saung.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            // Launching News Feed Screen
            Intent i = new Intent(getApplicationContext(), SaungRoom.class);
            startActivity(i);
        }
    });
    
    
   
    //button bandung
    
    Button btn_bandung = (Button) findViewById(R.id.btn_bandung);
    /**
     * Handling all button click events
     * */

    // Listening to PROVINSI button click
    btn_bandung.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            // Launching News Feed Screen
            Intent i = new Intent(getApplicationContext(), BandungRoom.class);
            startActivity(i);
        }
    });
    
   
    }

}

 simpan file diatas dengan nama SaungIt.java

5.  buat file class baru dengan nama BandungRoom .java 

package saungit.org;

import android.app.Activity;
import android.os.Bundle;

 public class BandungRoom extends Activity{
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.bandungroom);
   
   
  }

 }
 
simpan dengan nama BandungRoom.java



6. buat file class baru dengan nama SaungRoom.java 

package saungit.org;


import android.app.Activity;
import android.os.Bundle;


public class SaungRoom extends Activity{
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.saungroom);
  
  
 }
 
}


jika sudah

lanjut ke pembuatan layout nya
ada 4 layout yang harus teman buat

1. buat layout dengan nama bandungroom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BANDUNG ROOM"
        android:textColor="#ffffff"
        android:textSize="50dp" />

</LinearLayout>





2. buat layout dengan nama designing_layout.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/home_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <!-- Include Action Bar -->
 
        <!--  Include Fragmented dashboard -->
    <include layout="@layout/saungit" android:layout_height="301dp"></include>    
 
        
</LinearLayout>




2. buat layout dengan nama saungit.xml


<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/AbsoluteLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background" >


    
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SaungIT.org"
        android:textColor="#ffffff"
        android:textSize="50dp" />
    
    <Button
        android:id="@+id/btn_saung"
        android:layout_width="118dp"
        android:layout_height="104dp"
        android:layout_x="27dp"
        android:layout_y="145dp"
        android:background="@drawable/btn_saung" />

    <Button
        android:id="@+id/btn_bandung"
        style="@style/DashboardButton"
        android:layout_width="122dp"
        android:layout_height="104dp"
        android:layout_x="162dp"
        android:layout_y="146dp"
        android:background="@drawable/btn_bandung" />

</AbsoluteLayout>



2. buat layout dengan nama saungroom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SAUNG ROOM"
        android:textColor="#ffffff"
        android:textSize="50dp" />
    
</LinearLayout>



selanjutnya tambahkan .xml baru pada resources\value dengan nama style.xml


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


    <style name="DashboardButton">
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:textSize">16dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#ff29549f</item>
        <item name="android:background">@null</item>
    </style>    

   <style name="FooterBar">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">#dedede</item>
    </style>
   
   <style name="Paceh">
        <item name="android:background">#dedede</item>
        <item name="android:textSize">15dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#000000</item>
    
    </style>
    
</resources>



jika semua sudah

maka tinggal kita jalankan aplikasinya pada emulator, hasilnya akan tampak seperti gambar di bawah ini



setelah kita memilih aplikasi nya maka akan muncul menu utamanya seperti pada gambar di bawah ini

tampilan sebelum menekan button


tampilan sesudah ditekan


berikut tampilan yang muncul jika button saungIT yang di tekan


yaahh mundkin sekian tutorial sederhana membuat button hover pada aplikasi android
semoga bermanfaat yaa..
maju terus programmer mobile :)


download full zip aplikasi






4 komentar:

  1. Anonim mengatakan...:

    bagus tutorialnya

  1. Anonim mengatakan...:

    wah mantap gan skripsi saya terselamatkan...

  1. eko alfia mengatakan...:

    wah mantap, ahirnya dapet juga tutorial buat bikin hover nya...

  1. gie mengatakan...:

    wah kk eko selamat yaah,,akhirnya dapet juga,,
    nantikan tips" menarik lainya
    dari tim SaungIT :D

Posting Komentar

 
Komunitas TIK Bandung Jawa Barat Indonesia © 2015 | Desain oleh Cheap TVS