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

2017_05_02_15_46_04_959.gif

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:

software Version
Android Studio 2.3.1
test device 4.4.2
windows 10(64)

Main paper

New PROJECT

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

01.PNG

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.

02.PNG

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

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

03.PNG

  1. Select Empty Activity. click

04.PNG

  1. Activity Name freely. .. click

05.PNG

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'

07.PNG

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.

08.png

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

09.png

10.PNG

--Search for the icon you want to use.

11.PNG

12.PNG

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

13.PNG

  1. Click activity_main.xml.

  2. Create a component tree.

I did what I thought of as a component tree.

image.png

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

14_01.PNG

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

2017_05_02_17_11_25_226.gif

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

Recommended Posts

[Android] I tried using Coordinator Layout.
I tried using Gson
I tried using TestNG
I tried using Galasa
[Android] I quit SQLite and tried using Realm
I tried using azure cloud-init
I tried using Apache Wicket
I tried using Java REPL
I tried using anakia + Jing now
I tried using JOOQ with Gradle
I tried using Java8 Stream API
I tried using Pari gp container
I tried using WebAssembly Stadio (2018/4/17 version)
[Android] [Library] I tried using an animation library called "Before After animation".
I tried using the CameraX library with Android Java Fragment
I tried using Java memo LocalDate
I tried using GoogleHttpClient of Java
I tried using Elasticsearch API in Java
I tried using Realm with Swift UI
I tried using Java's diagnostic tool Arthas
I tried using UICollectionViewListCell added from Xcode12.
I tried using Scalar DL with Docker
I tried using OnlineConverter with SpringBoot + JODConverter
It's new, but I tried using Groonga
I tried using OpenCV with Java + Tomcat
I tried to make a simple face recognition Android application using OpenCV
I tried Spring.
I tried tomcat
I tried youtubeDataApi.
I tried refactoring ①
I tried FizzBuzz.
I tried JHipster 5.1
I tried using Docker for the first time
I tried using Junit on Mac VScode Maven
[For beginners] I tried using DBUnit in Eclipse
I tried barcode scanning using Rails + React + QuaggaJS
[For beginners] I tried using JUnit 5 in Eclipse
I made blackjack with Ruby (I tried using minitest)
[API] I tried using the zip code search API
I tried to implement a server using Netty
I tried using the profiler of IntelliJ IDEA
I tried using "nifty cloud mobile backend" and "Firebase" Authentication on Kotlin + Android
[I tried] Spring tutorial
I tried using the Server Push function of Servlet 4.0
I tried running Autoware
I tried using Alibaba Cloud's KMS (Key Management Service) service
I tried using Google Cloud Vision API in Java
I tried to operate SQS using AWS Java SDK
I tried QUARKUS immediately
I tried using the Migration Toolkit for Application Binaries
Introduction to Android Layout
I tried using Log4j2 on a Java EE server
I tried Spring Batch
I tried using YOLO v4 on Ubuntu and ROS
I tried using Docker Desktop for Windows on Windows 10 Home
I tried node-jt400 (Programs)
I tried using an extended for statement in Java
I tried node-jt400 (execute)
I tried scraping a stock chart using Java (Jsoup)
I tried node-jt400 (Transactions)
I tried to build an environment using Docker (beginner)