Saturday, April 16, 2016

(Tutorial Android) Floating Action Button Android Material Design


Floating Action Button (FAB) adalah salah satu widget menarik yang diperkenalkan di Android Material Design. Floating Action Button mempunyai ciri khas berbentuk lingkaran dan memiliki efek menarik seperti morphing, launching dan transferring anchor point. Selain itu, pada dasarnya fungsi dari Floating Action Button sama saja dengan fungsi-fungsi tombol biasa, membuat aksi ketika diklik.

Ok, sekarang 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 bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar 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 aksi ketika FAB diklik, dapat dilhat pada kode 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 hasilnya seperti ini.




Source code lengkap dapat dilihat di https://github.com/wimsonevel/AndroidFAB

Sekian dan semoga bermanfaat
Happy Coding :)
Share This
Previous Post
Next Post

Pellentesque vitae lectus in mauris sollicitudin ornare sit amet eget ligula. Donec pharetra, arcu eu consectetur semper, est nulla sodales risus, vel efficitur orci justo quis tellus. Phasellus sit amet est pharetra

0 komentar: