Android View Shadow Effect

Các phần tử giao diện người dùng Android có thể được định cấu hình để vẽ bóng bằng thuộc tính độ cao. Độ cao của chế độ xem có thể được đặt trong mã bằng cách gọi phương thức setElevation và trong xml sử dụng thuộc tính độ cao. Hình ảnh bên dưới hiển thị các chế độ xem văn bản có độ cao và không có độ cao.

 <TextView

    android:layout_width="match_parent"

    android:layout_height="100dp"

    android:background="@android:color/white"

    android:elevation="8dp"

    android:gravity="center"

    android:text="Show Elevation"></TextView>

<android.support.v4.widget.Space

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:text=""></android.support.v4.widget.Space>

<TextView

    android:layout_width="match_parent"

    android:layout_height="100dp"

    android:background="@android:color/white"

    android:gravity="center"

    android:text="Without Elevation"></TextView>

Android View Elevation Shadow Shape

Đối tượng phác thảo đại diện cho hình dạng của bóng chế độ xem. Nhà cung cấp phác thảo tạo đối tượng phác thảo xác định hình dạng bóng đổ. Nhà cung cấp đường viền chế độ xem mặc định coi hình dạng nền của một chế độ xem là hình dạng bóng. Bạn có thể thay đổi hành vi này bằng cách tạo nhà cung cấp phác thảo tùy chỉnh cho các dạng xem. Hình ảnh dưới đây cho thấy sự thay đổi hình dạng của bóng với sự thay đổi của nền. Khi bạn đặt nền của một chế độ xem thành hình ảnh có góc tròn, độ cao sẽ vẽ bóng đổ vào góc tròn.

custom_rect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <solid android:color="@android:color/white"/>

    <corners android:radius="16dp" />

</shape>

Elevation shadow background shape

<TextView

    android:layout_width="match_parent"

    android:layout_height="100dp"

    android:background="@drawable/custom_rect"

    android:elevation="2dp"

    android:gravity="center"

    android:text="Round Cornered Image Background"></TextView>

<android.support.v4.widget.Space

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:text=""></android.support.v4.widget.Space>

<TextView

    android:layout_width="match_parent"

    android:layout_height="100dp"

    android:background="@android:color/white"

    android:elevation="2dp"

    android:gravity="center"

    android:text="Rectange Background"></TextView>

Android View Elevation Custom Shadow Shape

Như đã học ở trên, nhà cung cấp phác thảo chế độ xem mặc định vẽ bóng dựa trên hình nền. Nếu bạn muốn vẽ bóng theo một cách khác, bạn cần cung cấp nhà cung cấp đường viền chế độ xem tùy chỉnh. Bạn có thể tạo nhà cung cấp phác thảo dạng xem tùy chỉnh bằng cách mở rộng lớp ViewOutlineProvider và ghi đè phương thức getOutline (). Sau đó, đặt nhà cung cấp phác thảo tùy chỉnh cho dạng xem bằng cách sử dụng phương thức setOutlineProvider ().

Custom ViewOutlineProvider Example

Ví dụ dưới đây cho thấy cách tạo nhà cung cấp đường viền chế độ xem tùy chỉnh. Nó cung cấp phác thảo hình chữ nhật có góc tròn cho chế độ xem mà nó được thiết lập.

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.widget.TextView;

public class ShadowActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.shadow_activity);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);

        setSupportActionBar(myToolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        TextView textView = (TextView) findViewById(R.id.shadow_txt);

        textView.setOutlineProvider(new ZoftinoCustomOutlineProvider(8));

        textView.setClipToOutline(true);

    }

}

Custom view outline provider

import android.graphics.Outline;

import android.view.View;

import android.view.ViewOutlineProvider;

public class ZoftinoCustomOutlineProvider extends ViewOutlineProvider {

    int roundCorner;

    public ZoftinoCustomOutlineProvider(int round) {

        roundCorner = round;

    }

    @Override

    public void getOutline(View view, Outline outline) {

        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), roundCorner);

    }

}

Layout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/shadow_activity"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="com.zoftino.materialdesign.ShadowActivity">

    <android.support.v7.widget.Toolbar

        android:id="@+id/z_toolbar"

        android:layout_width="match_parent"

        android:layout_height="?attr/actionBarSize"

        android:background="?attr/colorPrimary"

        android:elevation="4dp"></android.support.v7.widget.Toolbar>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        android:background="@android:color/white"

        android:paddingBottom="@dimen/activity_vertical_margin"

        android:paddingLeft="@dimen/activity_horizontal_margin"

        android:paddingRight="@dimen/activity_horizontal_margin"

        android:paddingTop="@dimen/activity_vertical_margin">

        <TextView android:id="@+id/shadow_txt"

            android:layout_width="match_parent"

            android:layout_height="100dp"

            android:elevation="2dp"

            android:gravity="center"

            android:text="Round Cornered Shadow with Cutom Outline Provider"></TextView>

    </LinearLayout>

</LinearLayout>