Android View тінь

Я обшукував, і не міг знайти належного способу зробити це. Я хочу мати такі тіньові ефекти на свої погляди:

Якщо чесно, я не знаю, чи робиться цей другий, застосовуючи ефект тіні. Якісь ідеї?

Я знаю, що на це питання вже відповіли, але я хочу, щоб ви знали, що я знайшов drawableтему, Android Studioяка дуже схожа на фотографії, які у вас є в запитанні: Погляньте на це:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Це виглядає приблизно так:

Сподіваюся, це буде корисним

Редагувати

Наведений вище варіант призначений для старих версій, Android Studioтому ви можете не знайти його. Для новіших версій:

android:background="@android:drawable/dialog_holo_light_frame"

Більше того, якщо ви хочете мати власну власну форму, пропоную скористатися програмним забезпеченням для малювання, як Photoshopі намалювати.

Не забудьте зберегти його як .9.pngфайл (приклад my_background.9.png:)

Прочитайте документацію: Намалюйте 9-патч

Редагуйте 2

Ще кращим і менш працьовитим рішенням є використання CardViewта встановлення app:cardPreventCornerOverlap="false"для запобігання перегляду, щоб перекрити межі:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

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

Також переконайтеся, що ви включили останню версію до build.gradleпоточної

compile 'com.android.support:cardview-v7:26.0.0'

Я використовую Android Studio 0.8.6, і я не зміг знайти:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

тому я знайшов це замість цього:

android:background="@android:drawable/dialog_holo_light_frame"

і це виглядає приблизно так:

розміщення фону @android:drawable/dialog_holo_light_frame, дає тінь, але ви не можете змінити колір тла, а також стиль межі, тому краще скористатися його тінню, поки все-таки зможете розмістити фон за допомогою шару-списку

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

збережіть його в папці, що витягується, під словом say shadow.xml

щоб призначити його перегляду, у файлі макета xml встановіть його фон

android:background="@drawable/shadow"

Створіть card_background.xml у папці res / dravable із таким кодом:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Потім додайте наступний код до елемента, до якого потрібно розмістити карту

android:background="@drawable/card_background"

наступний рядок визначає колір тіні для картки

<solid android:color="#BDBDBD"/>

CardView дає справжню тінь в android 5+ і має підтримку бібліотеки. Просто оберніть його своїм поглядом і все закінчено.

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

Це вимагає наступної залежності.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

Використовуйте властивість піднесення для досягнення тіньового впливу:

<View ...
    android:elevation="2dp"/>

Це лише для минулого v21, перегляньте це посилання: http://developer.android.com/training/material/shadows-clipping.html

Це може бути пізно, але для тих, хто все ще шукає відповіді на це, я знайшов проект на git hub, і це єдиний, який насправді відповідає моїм потребам. андроїд матеріалів

Просто додайте цей рядок у залежність від build.gradle

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

ура. великі пальці для творця! щасливі кодировки

Я знаю, що це дурно хакі,
але якщо ти хочеш підтримати в v21, ось мої досягнення.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Ось результат:

Під v21 (це ви створили з xml)

Вище v21 (реальне відображення висоти)

• Важлива відмінність полягає в тому, що вона займе внутрішній простір з виду, тому ваша фактична площа вмісту може бути меншою, ніж > = пристрої льодяника .

Якщо вам потрібні тіні, щоб правильно їх наносити, вам слід зробити наступне.

Розглянемо цей погляд, визначений фоном, який малюється:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Фон, що малюється, визначається як прямокутник із закругленими кутами:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Це рекомендований спосіб нанесення тіней, перевірте це https://developer.android.com/training/material/shadows-clipping.html#Shadows

Використовуйте властивість піднесення для тіньового впливу:

<YourView
    ...
    android:elevation="3dp"/>

Створіть такий малюнок, як цей, щоб показати округлу тінь.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Це питання може бути старим, але для тих, хто хоче в майбутньому простого способу досягнення складних тіньових ефектів, ознайомтеся з моєю бібліотекою https://github.com/BluRe-CN/ComplexView

Використовуючи бібліотеку, ви можете змінювати кольори тіней, обробляти краї тощо. Ось приклад для досягнення того, чого ви прагнете.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

Щоб змінити колір тіні, використовуйте додаток: shadowColor = "ваш колірний код".

використовувати цю форму як тло:

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>