Beautify Android #1 - Tạo hiệu ứng lượn sóng trong Android (Waves Effect)

Có thể bạn thích

Đây là bài viết đầu tiên trong một series mang tên Beautify Android. Là một series mà mình sẽ viết song song với series Android Cơ Bản.
Trong bài viết này, mình sẽ hướng dẫn cách tạo hiệu ứng lướt sóng trong ứng dụng Android của bạn. Đây là sẽ một điểm cộng lớn cho UI của ứng dụng nếu bạn biết sử dụng đúng cách.

Import thư viện ScrollingImageView

Đầu tiên, bạn cần import thư viện ScrollingImageView vào trong project của bạn.

Thêm các dòng sau vào bên trong file build.gradle (Project):

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" } // Add this line
        mavenCentral() // Add this line
    }
}

Thêm dòng sau vào bên trong dependencies trong file build.gradle (app):

dependencies {
    // ...
    implementation 'com.github.Q42:AndroidScrollingImageView:1.3.3'
    // ...
}

Tạo màu background gradient và hình ảnh lượn sóng

Click chuột phải vào thư mục drawable vào tạo một file xml gradient_background.xml, đây là code ví dụ về cách tạo màu gradient, bạn có thể chỉnh sửa tùy thích:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#8A2387"
        android:centerColor="#E94057"
        android:endColor="#F27121"
        android:angle="135"/>

</shape>

Bạn có thể tham khảo qua trong uiGradients để chọn màu.

Ở đây mình có chuẩn bị một vài hình ảnh lượn sóng, bạn có thể tải về để sử dụng hoặc tự tạo một hình ảnh khác: Ảnh 1 | Ảnh 2 | Ảnh 3
Sau đó bạn copy những file hình này và paste vào bên trong thư mục drawable.

Tiến hành thiết kế hiệu ứng

Bây giờ, bạn hãy vào bên trong file layout activity_main.xml và tiến hành thiết lập hiệu ứng:

Background

<View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"/>

Hình ảnh lượn sóng

<ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@drawable/wave_bot"
        android:layout_alignParentBottom="true"
        android:scaleType="centerCrop"/>
<com.q42.android.scrollingimageview.ScrollingImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        scrolling_image_view:src="@drawable/wave_top"
        scrolling_image_view:speed="1dp"
        android:alpha="0.5"/>
<com.q42.android.scrollingimageview.ScrollingImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        scrolling_image_view:src="@drawable/wave_mid"
        scrolling_image_view:speed="1.5dp"
        android:alpha="0.5"/>

Bạn hãy để ý 2 thuộc tính scrolling_image_view:speed và android:alpha, đây là 2 thuộc tính để set tốc độ di chuyển của hình ảnh và độ trong suốt của hình ảnh.

Full code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:scrolling_image_view="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@drawable/wave_bot"
        android:layout_alignParentBottom="true"
        android:scaleType="centerCrop"/>


    <com.q42.android.scrollingimageview.ScrollingImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        scrolling_image_view:src="@drawable/wave_top"
        scrolling_image_view:speed="1dp"
        android:alpha="0.5"/>
    <com.q42.android.scrollingimageview.ScrollingImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        scrolling_image_view:src="@drawable/wave_mid"
        scrolling_image_view:speed="1.5dp"
        android:alpha="0.5"/>
</RelativeLayout>

BOOM!! Đây là kết quả!

Cảm ơn bạn đã theo dõi bài viết. Nếu bạn cần hỗ trợ hoặc tham khảo Full Project, hãy để lại comment bên dưới kèm với địa chỉ Email của bạn, mình sẽ phản hồi bạn trong thời gian sớm nhất!

GitHub repo: https://github.com/Q42/AndroidScrollingImageView

Thanh Dương