CoordinatorLayout dan Cara Membuat Tampilan Parallax ActionBar Android

Ini adalah postingan di blog pribadi saya http://www.viyatampaksiring.blogspot.com, Saya posting disini ya karena ini wordpress saya dan hanya ingin menyebarkan informasi agar lebih cepat dilihat. Bukan plagiat ya

Google I/O telah merilis Support Library yang baru dimana didalamnya mengimplementasikan beberapa komponen dengan Material Design’s Spec. Diantara komponen-komponen tersebut, bisa dilihat ViewGroup-viewGroup nya, diantaranya :

  1. CoordinatorLayout
  2. AppBarLayout
  3. CollapsingToolBarLayout

Untuk lebih lengkapnya silakan baca di Mastering-Coordinator

Parallax bisa terjadi karena karena ketiga view diatas, struktur dari layout parallax yang kalian harus paham. Kira-kira prosesnya seperti dibawah ini :

source : google image

Struktur layoutnya seperti ini, sehingga tercipta parallax :

<CoordinatorLayout>
                <AppbarLayout>
                <CollapseToolbarLayout>
                    disini ini dengan gambar dan dibawahnya ada <Toolbar/>
                </CollapseToolbarLayout>
                <AppBarLayout/>
            <NestedScrollView>
                isikan dengan apa saja untuk kontent body aplikasi
            </NestedScrollView>
                <FloatingActionButton/>
</CoordinatorLayout>

Ya setidaknya ada gambaran lah bagaimana proses paralax tersebut.


Mari kita buat tampilan seperti video diatas, yang diperlukan cuma 1 layout , 1 Class Java dan tambahkan beberapa style di style.xml

  1. activity_main.xml
  2. MainActivity.java
  3. edit style.xml

Untuk code activity_main.xml seperti ini :

<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:id="@+id/coordinator"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/mainappbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/maincollapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="48dp"
            app:expandedTitleMarginStart="10dp"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginBottom="16dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/CollapsedAppBarTopic">
            >

            <ImageView
                android:id="@+id/mainbackdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/background2"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/maintoolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                />
        </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"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/loremss"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/btn_add"
        app:layout_anchor="@id/mainappbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

Tambahkan beberapa kode di style.xml menjadi seperti dibawah ini

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- ini tambahannya-->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:actionButtonStyle">@style/MyCustomAppBar</item>
    </style>

    <style name="CollapsedAppBarTopic" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:layout_marginLeft">-100dp</item>
    </style>

    <style name="MyCustomAppBar" parent="AppTheme">
        <item name="android:minWidth">20dip</item>
        <item name="android:padding">0dip</item>
    </style>

</resources>

Karena saya menggunakan tulisan yang cukup panjang, maka saya akan simplat di strings.xml, nanti ketika mau menggunakannya saya tinggal panggil saya dengan cara @string/loremss 

<resources>
    <string name="app_name">CoordinatorLayout</string>
    <string name="loremss">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</string>
</resources>

Yang terakhir adalah MainActivity.java, kodingannya seperti dibawah ini :

package com.example.putuguna.coordinatorlayout;

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


public class MainActivity extends AppCompatActivity {

    private CoordinatorLayout coordinatorLayout;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private Toolbar toolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initToolbar();

        coordinatorLayout =(CoordinatorLayout) findViewById(R.id.coordinator);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.maincollapsing);
        collapsingToolbarLayout.setTitle("putuguna");

    }

    private void initToolbar(){
        toolbar = (Toolbar) findViewById(R.id.maintoolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

OK saya kira segitu aja tidak ada logic-logic yang berarti, cuma kalian harus paham struktur layouting dari parallax yang menggunakan CoordinatorLayout, AppBarLayout dan CollapsingToolbarLayout.

Happy coding! have fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s