[Android] I tried using Coordinator Layout.

Hello everyone. ** Dreamwalker **. This time I would like to write about ** Coordinator Layout ** of Android Support Design.

Introduction

After announcing Material Design at GOOGLE about two years ago, it became important for developers to design the UI as well. Coordinator Layout is not a basic API, but a support DESIGN WIDGET. Added from SDK 22.2.0.

Source: https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior

I was surprised to see this first. This time I will make a screen like the one above.

The test environment looks like this:

Main paper

New PROJECT

First of all, I would like to create a new project.

The left side is a security issue, so I deleted it. When you open Android Studio, you will usually see this screen.

1. Click Start a new Android Studio project.

2. Feel free to write the name and domain of the project. click

3. I always start with this setting. Feel free to choose. click

4. Select Empty Activity. click

5. Activity Name freely. .. click

Library added.

Everyone is an android master, so I think it's easy to do.

1. Click ** build.gradle ** to add dependencise.

build.gragle

    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'

2. Sync now

Up to this point, the initial settings are complete without any problems.

Document preparation

I like Keyakizaka in winter, so I referred to the photos and text on the site below.

Winter Illumination at Keyakizaka-dori Street

Prepare the photos and texts you want to use.

1. Paste the photo on drawble.
2. Add icon to use.

--drawble Right click → New → image Asset.

--Select Action Bar and Tab icons for icon type.

• Clip Art icon Click

--Search for the icon you want to use.

In my case I used favorite and access time. Feel free to choose. In addition to this method, icons can be downloaded and added by KOKO!, so let's use a convenient method.

Add string in string.xml.

This is not a fixed thing, so feel free to enter it.

string.xml

 <string name="news_title">WINTER ILLUMINATION AT KEYAKIZAKA-DORI STREET</string>
 <string name="cont">In winter, beautiful illumination shines all over the Tokyo.
                     When I see beautiful illumination, I’m excited even though cold 
                     night.Many other illumination events or installation are held at 
                     Roppongi Hills. All of them ends at December 25th.</string>
 <string name="published_date">2017-05-02 12:13:43</string>

Layout Coding

You can add it in java file, but I want to play with it in xml. ..

1. Click activity_main.xml.

2. Create a component tree.

I did what I thought of as a component tree.

Those who are hard to see can understand by looking down.

3. Coding

AppBarLayout part.

activity_main.xml

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:src="@drawable/keyaki"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:title="@string/news_title"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


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

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

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

This is the NestedScrollView part.

activity_main.xml

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true">

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/news_title"
                    android:textColor="@color/colorPrimaryText"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:contentDescription="@string/app_name"
                        android:src="@drawable/ic_clock" />

                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="9"
                        android:padding="12dp"
                        android:text="@string/published_date"
                        android:textColor="@color/colorPrimaryText"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                </LinearLayout>
                <TextView
                    android:layout_gravity="center_vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:lineSpacingMultiplier="1.5"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/new_cont"
                    android:textSize="13sp"
                    />

            </LinearLayout>


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

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

FloatingActionButton part.

activity_main.xml

<android.support.design.widget.FloatingActionButton
        app:elevation="6dp"
        android:src="@drawable/ic_fav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:pressedTranslationZ="12dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right"/>

Inflation

MainActivity.java

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
    }

Conclusion

I tried RUN.

done. .. ..

The source code is my Github. https://github.com/JAICHANGPARK/Coordinator-Layout101

There are various methods, but I hope you find it helpful for those who have read this far. When constructing a layout in XML, it is important to first write ** Component Tree **. And a lot of practice is needed.

Thank you for reading. See you in the next Post! Have a nice Golden Week

Dreamwalker。

References

1. http://coolphotojapan.com/coolphotojapan/category/culture/current/winter-illumination-at-keyakizaka-dori-street
2. https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
3. https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior