Membuat Toolbar Dengan Efek Collapse Pada AIDE

Jika pada pertemuan-pertemuan sebelumnya kita telah membahas tentang toolbar dan action bar (baca : Membuat Toolbar Material Design dan Menampilkan Icon Aplikasi Pada Action Bar), kali ini kita akan membahas tentang cara membuat toolbar dengan efek collapse pada AIDE yang bernama collapsing toolbar yakni toolbar yang mempunyai efek transisi membuka dan menutup ketika konten dalam activity di scroll. Contoh penggunaan collapsing toolbar ini dapat dilihat pada aplikasi kontak.

Pembuatan collapsing toolbar ini membutuhkan library AppCompat dan library pendukung lainnnya untuk membuat tampilan material design. Penggunaannya sangat cocok untuk aplikasi yang menggunakan database dalam menyimpan gambar. Tak perlu lama-lama lagi, mari kita mulai pembuatannya.

Langkah-langkah membuat toolbar dengan efek collapse pada AIDE

Buat project baru

Jalankan aplikasi AIDE, dan buat project baru.

Name : CollapsingToolbar
Package name : com.colapsing.toolbar

Buka file build.gradle

Sekarang buka file build.gradle, dan sesuaikan kodenya seperti dibawah ini.


apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    buildToolsVersion "27.1.0"

    defaultConfig {
        applicationId "com.colapsing.toolbar"
        minSdkVersion 14
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
 compile 'com.android.support:design:+'
 compile 'com.android.support:support-v4:+'
 compile 'com.android.support:appcompat-v7:+'
        compile fileTree(dir: 'libs', include: ['*.jar'])
}

Perhatikan bahwa kode diatas menggunakan tiga jenis library pada bagian kode dependencies. Cara instalasi ketiga library ini sudah dibahas pada kedua artikel sebelumnya yang terdapat pada link diatas.

Buka file MainActivity.java

Sesuaikan kode didalam file MainActivity.java seperti kode dibawah ini.


package com.colapsing.toolbar;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.graphics.Color;

public class MainActivity extends AppCompatActivity 
{
 CollapsingToolbarLayout col;
 Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  //Menginisialisasikan Collapsing nya dan Toolbar
  col =(CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
  toolbar =(Toolbar)findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

  //settingan CollapsingToolbar
  col.setTitle("CARALIYO");
  col.setContentScrimResource(R.color.ColorPrimaryDark);
  col.setExpandedTitleColor(Color.parseColor("#000000"));

    }
}

Buka file main.xml

Sekarang buka file main.xml yang terdapat dalam folder layout. Salin kode dibawah ini kedalam file main.xml.


<?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: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="400dp"
  android:fitsSystemWindows="true"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

  <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:expandedTitleMarginBottom="32dp"
   app:expandedTitleMarginEnd="64dp"
   app:expandedTitleMarginStart="48dp"
   app:layout_scrollFlags="scroll|exitUntilCollapsed">

   <ImageView
    android:id="@+id/iv_header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="fitXY"
    app:layout_collapseMode="parallax"
    android:background="@drawable/bg"/>

   <android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/AppTheme"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin"
    android:background="#00000000"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    android:elevation="5dp">

   </android.support.v7.widget.Toolbar>

  </android.support.design.widget.CollapsingToolbarLayout>

 </android.support.design.widget.AppBarLayout>

 <include
  layout="@layout/isi"/>

</android.support.design.widget.CoordinatorLayout>

Buat file isi.xml

Masih didalam folder layout, buat sebuah file baru beri nama isi.xml dan salin kode dibawah ini kedalam file tersebut.


<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 android:layout_marginTop="15dp">

 <LinearLayout
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:orientation="vertical">

  <android.support.design.widget.TextInputLayout
   android:id="@+id/til"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">

   <EditText
    android:id="@+id/textDialog"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="Nama Depan"/>

  </android.support.design.widget.TextInputLayout>

  <android.support.design.widget.TextInputLayout
   android:id="@+id/til2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/til">

   <EditText
    android:id="@+id/textDialog2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="Nama Belakang"/>

  </android.support.design.widget.TextInputLayout>

  <android.support.design.widget.TextInputLayout
   android:id="@+id/til3"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/til2">

   <EditText
    android:id="@+id/textDialog3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="Alamat"/>

  </android.support.design.widget.TextInputLayout>

  <ImageView
   android:layout_height="wrap_content"
   android:layout_width="match_parent"
   android:src="@drawable/caraliyo"
   android:baselineAlignBottom="true"/>

 </LinearLayout>

</android.support.v4.widget.NestedScrollView>

Buka file styles.xml

Buka file styles.xml yang terdapat dalam folder values, ubah kodenya menjadi seperti dibawah ini.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/ColorPrimary</item>
  <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
 </style>
</resources>

Buat file colors.xml

Masih didalam folder values, buat sebuah file baru dan beri nama colors.xml. Salin kode dibawah ini kedalam file tersebut.


<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="ColorPrimary">#f2a979</color>
 <color name="ColorPrimaryDark">#f48942</color>
</resources>

Buka file styles.xml dalam folder values-v21

Sekarang pindah ke folder values-v21 dan buka file styles.xml yang terdapat dalam folder tersebut. Salin kode dibawah ini kedalam file styles.xml.


<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 </style>
</resources>

Menambahkan file pendukung

File tambahan ini digunakan untuk melengkapi tampilan toolbar nanti. Untuk membuatnya, masuk kedalam folder res, buat sebuah folder baru bernama drawable. Didalam folder drawable ini masukkan beberapa file gambar yaitu bg.png yang akan digunakan sebagai gambar pada toolbar, ic_menu.png sebagai icon menu pada toolbar yang akan muncul pada sisi sebelah kiri, dan file caraliyo.png hanya sebagai tambahan saja agar tidak terjadi error jika menggunakan semua kode diatas.

Setelah semuanya selesai dikerjakan, silahkan running programnya dan lihat hasilnya. Jika tidak terdapat error, maka aplikasi akan tampak seperti gambar dibawah ini.

Apabila Anda mengalami kesulitan dalam pembuatan project ini, saya sudah menyediakan file projectnya, silahkan download pada link dibawah ini.

Download Project

Sekian dulu pembahasan kita pada postingan kali ini tentang cara membuat toolbar dengan efek collapse pada AIDE, semoga bermanfaat dan selamat mencoba.

Iniah caraliyo.