(Tutorial Android) Floating Action Button Android Material Design
Floating Action Button (FAB) yakni salah satu widget menarik yang diperkenalkan di Android Material Design. Floating Action Button mempunyai ciri khas berbentuk bulat dan mempunyai efek menarik menyerupai morphing, launching dan transferring anchor point. Selain itu, intinya fungsi dari Floating Action Button sama saja dengan fungsi-fungsi tombol biasa, menciptakan agresi dikala diklik.
Ok, kini kita coba praktekkan langsung.
Pertama, tambahkan library support design yang diperlukan.
Buat beberapa layout berikut :
activity_main.xml : Pada layout ini kita tambahkan widget floating action button
content_main.xml
activity_add.xml
Selanjutnya buat activity berikut :
MainActivity.java
package wim.example.com.androidfab; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { private FloatingActionButton fab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AddActivity.start(MainActivity.this); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action kafe if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action kafe item clicks here. The action kafe will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
Untuk menambahkan agresi dikala FAB diklik, sanggup dilhat pada arahan listener berikut.
fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AddActivity.start(MainActivity.this); } });
Kemudian, buat kelas AddActivity.java
package wim.example.com.androidfab; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; /** * Created by wim on 4/16/16. */ public class AddActivity extends AppCompatActivity { public static void start(Context context) { Intent intent = new Intent(context, AddActivity.class); context.startActivity(intent); } @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_add); } }
Terakhir, jalankan aplikasi maka alhasil menyerupai ini.
Source code lengkap sanggup dilihat di https://github.com/andronut/AndroidFAB
Sekian dan biar bermanfaat
Happy Coding :)
Comments
Post a Comment