Tips membuat Collapsing Appbar Android

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 Sekarang

Di Android Studio, buat project baru File => New Project. Buka gradle module dan tambahkan design support library di bagian dependency seperti dibawah ini.

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.

<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.

<?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.

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 !