Hay guys, kali ini kita akan belajar bagaimana membuat Collapsing Appbar dari android support library. Collapsing Appbar mudah di implementasikan dan dapat berjalan dibanyak versi Android. Hasil akhirnya seperti ini.
Langkah-langkah:
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangDi Android Studio, buat project baru File => New Project. Buka gradle module dan tambahkan design support library di bagian dependency seperti dibawah ini.
|
1 2 3 4 |
dependencies { compile 'com.android.support:appcompat-v7:25.1.0' compile 'com.android.support:design:25.1.0' } |
Kemudian buka folder res => values => styles.xml dan ubah menjadi noActionBar seperti di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 |
<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Buka layout layout Main Activity kalian (Activity_Main.xml) dan tambahkan kode dibawah ini kedalam layout tersebut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" android:padding="8dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:src="@drawable/dicoding_banner" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/activity_horizontal_margin"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:text="Hello World!"/> </RelativeLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> |
Terakhir, kita terapkan Appbar nya secara programmatically di file Activity java (MainActivity.java). Kodenya seperti ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle("Dicoding"); collapsingToolbarLayout.setCollapsedTitleTextColor( ContextCompat.getColor(this, R.color.white)); collapsingToolbarLayout.setExpandedTitleColor( ContextCompat.getColor(this, R.color.colorPrimary)); } } |
Selesai! Silahkan run dan lihat hasilnya.
Semoga bermanfaat ya, learners. Ingin belajar lebih banyak? Yuk langsung cek Dicoding Academy Belajar Membangun Aplikasi Android Native (www.dicoding.com/academies/26), materi yang dibuat oleh Google Developer Expert Indonesia.
Tunggu tips kami selanjutnya !
