Android LinearLayout: додайте межу з тінню навколо LinearLayout


147

Я хотів би створити ту саму межу цього LinearLayout як приклад:

введіть тут опис зображення

У цьому прикладі ми бачимо, що межа не однакова навколо лінійного макета. Як я можу створити це за допомогою XML-файла, що малюється?

На даний момент я лише в змозі створити просту межу навколо LinearLayout так:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

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

</shape>

1
ви можете використовувати backgroundвластивість для цього ... створити один XML-файл з такою формою, як прямокутник, колір і тіньовий ефект, і встановити його як тло для лінійного макета ..
Pragnesh Ghoda, シ

також використовуйте штрих для сірого
облямування

Я думаю, що його два макети xml, скажімо, один лінійний макет, а внутрішній - відносний макет, що має набивання
Giru Bhai

@ Prag's Чи можете ви мені допомогти створити цей XML-файл?
wawanopoulos

1
Альтернативним способом може бути використання 9 патч-зображення як фону для вашого макета. Це дозволило б отримати дійсно гладку, згасаючу тінь (на мою думку, дуже реалістичну).
Phantômaxx

Відповіді:


257

Спробуйте це..

<?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="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

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

@Hariharan Дякую велике! Я спробував ваш код, і здається, добре. Але є ще одне, що потрібно зробити, як я можу додати тонку межу (1dp) зліва та праворуч від лінійного діаметра? (як приклад)
wawanopoulos

2
@wawanopoulos Просто замініть "0dp"з "1dp"у відповідь Харіхаран в.
Phantômaxx

ви можете додати колір #EAEAEA до батьківського макета, так що це буде саме як зображення питання
Samad

3
Я б також запропонував для цього, ви можете використовувати <gradient>його <shape>для посилення ефекту кордону, а також якщо це дійсно ефект, який потрібен ваш інтерфейс, а не просто суцільна кольорова рамка.
patrickjason91

переконайтесь, що у вас внутрішній макет з match_parent, тоді дайте межу 1 внутрішній макет
Shaktisinh Jadeja

82

Ось чому CardView існує. CardView | Розробники Android
Це просто FrameLayout, який підтримує висоту на пристроях, що попередньо льодяники.

<android.support.v7.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardUseCompatPadding="true"
    app:cardElevation="4dp"
    app:cardCornerRadius="3dp" >

    <!-- put whatever you want -->

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

Для цього вам потрібно додати залежність до build.gradle:

compile 'com.android.support:cardview-v7:23.+'

як можна змінити колір тіні
Адітай Каушал

тінь дуже слабкий stackoverflow.com/questions/49076188 / ...
user924

1
дуже дивна поведінка в пристроях з 4.4.4 (або подібними). Великий запас додається до перегляду карт і робить інтерфейс дуже некрасивим.
Мортеза Растгу

Це має бути прийнятою відповіддю. Хоча одне невелике оновлення. Ви повинні використовувати androidx one -> androidx.cardview.widget.CardView
bogdan

59

Я отримую найкращі результати, використовуючи графіку 9 патчів.

Ви можете просто створити окрему графіку з 9 патчів, скориставшись таким редактором: http://inloop.github.io/shadow4android/

Приклад:

Графіка 9 патчів:

Графіка 9 патчів:

Результат:

введіть тут опис зображення

Джерело:

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

1
Як я можу приховати чорну лінію? Будь ласка, допоможіть
Ісаак Дарлонг

@Isaac Зберегти зображення як my_nine_patch.9.png (.9.png 9 пакетного файлу)
Arun

ЦЕ НАЙКРАЩЕ!
Numanqmr

35

гаразд, я знаю, що це занадто пізно. але у мене була така ж вимога. я вирішив так

1. Спочатку створіть файл xml (наприклад: border_shadow.xml) у папці "dravable" та скопіюйте в нього код нижче.

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

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="-1dp"
            android:top="-1dp" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

2.значте на макеті, де ви хочете тінь (наприклад: LinearLayout) додайте це в android: background

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

і це працювало на мене.


20

Це так просто:

Створіть файл, що малюється, з таким градієнтом:

для тіні нижче подання below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

для тіні над видом above_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="90" >
</gradient>
</shape>

і так далі для правої та лівої тіні просто змініть кут нахилу :)


куди я дзвоню нижче тіні? тло виду?
Артур Мело

1
Створіть файл нижче_shadow xml, а потім, на ваш погляд, додайте "View" у свій макет і встановіть below_shadow.xml як фон цього виду
Morteza Rastgoo

Я зробив так само, як ви сказали, але мій "верхній_тінь" не прозорий, коли я помістив цей погляд у спеціальний вигляд. Це добре працює окремо. Що я повинен зробити?
SoYoung

18

В якості альтернативи ви можете використовувати 9 патч-зображення в якості фону для вашого макета, що забезпечує більше "природних" тіней:

введіть тут опис зображення

Результат:

введіть тут опис зображення

Помістіть зображення у свою /res/drawableпапку.
Переконайтеся, що розширення файлу.9.png , ні.png

До речі, це модифікований (зменшений до мінімального розміру квадрат) існуючий ресурс, знайдений у папці ресурсів API 19 sdk.
Я залишив червоні маркери, оскільки вони не здаються шкідливими, як показано в інструменті draw9patch.

[EDIT]

Близько 9 патчів, якщо ви ніколи нічого з ними не мали.

Просто додайте його як тло перегляду.

Ділянки, позначені чорним кольором (зліва і вгорі) будуть розтягуватися (вертикально, горизонтально).
Області, позначені чорним кольором (справа, внизу), визначають "область вмісту" (куди можна додати текст або Перегляди - ви можете назвати немарковані регіони "накладкою", якщо хочете).

Підручник: http://radleymarx.com/blog/simple-guide-to-9-patch/


1
Просто додайте його як тло перегляду. Ділянки, позначені чорним кольором (зліва і вгорі) будуть розтягуватися (вертикально, горизонтально). Області, позначені чорним кольором (справа, внизу), визначають «область вмісту» (куди можна додати текст або «Перегляди» - назвіть це «замітка», якщо хочете). Підручник: radleymarx.com/blog/simple-guide-to-9-patch
Phantômaxx

9

Ви створюєте файл .xml з можливістю вимкнення з іменем drop_shadow.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Тоді:

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

3

Використовуйте цей єдиний рядок і, сподіваємось, ви досягнете найкращого результату;

використання: android:elevation="3dp" регулюйте розмір стільки, скільки вам потрібно, і це найкращий і найпростіший спосіб досягти тіні, як кнопки та інші тіні для Android за замовчуванням. Дайте мені знати, чи спрацювало це!


@ MichałZiobro Використовуйте його для своїх макетів, як якщо у вас є макет над іншим, який менший, і ви хочете показати тінь. це має працювати. Можливо, ви побачите, що ваші тексти та кнопки стають непомітними, але коли ви запустите програму, ви побачите найкращу тінь. Я не впевнений, що це якась помилка чи щось таке, але в моєму випадку, коли я використовую цей код, це робить усі мої перегляди невидимими в попередньому перегляді AS, але найкраще працює в додатку, коли я налагоджую / запускаю його на своєму пристрої. Дайте мені знати, працювало чи ні. Дякую.
Тамім

3

Якщо у вас вже є межа з форми, просто додайте висоту:

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

2
Яка поведінка в API <21?
CoolMind

1
На жаль, це не працює перед Lollipop, тому ви повинні використовувати деякі інші відповіді з цього питання. Але якщо ви орієнтуєтесь на новіші телефони, це досить простий спосіб зробити це, який працює добре.
Krzynool

2

1. Спочатку створіть ім'я файлу xml shadow.xml у папці "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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

        <item
            android:bottom="6dp"
            android:left="0dp"
            android:right="6dp"
            android:top="0dp">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    </layer-list>

Потім додайте список шарів як фон у LinearLayout.

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

дякую, сер, ваш код здається нормальним ...
Джон дахат

1
@Johndahat його нормально
Sudhir singh

1

Ya Mahdi aj --- для RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="3dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="40dp"
                android:top="40dp"
                android:right="10dp"
                android:left="10dp"
                >
            </padding>
            <solid android:color="@color/Whitetransparent"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

1

Я знаю, що це пізно, але це може комусь допомогти.

Ви можете використовувати constraintLayout і додати наступне властивість у xml,

        android:elevation="4dp"

0

Я знайшов найкращий спосіб вирішити це.

  1. Потрібно встановити суцільний фон прямокутника на макеті.

  2. Використовуйте цей код - ViewCompat.setElevation(view , value)

  3. На батьківському наборі макета android:clipToPadding="false"


2
У разі , якщо ви не знаєте, це поточна реалізація ViewCompat.setElevation()методу на класі ViewCompat: public void setElevation(View view, float elevation) {}. Як бачите, він не реалізований. Я дуже сумніваюся, що це допоможе, і я справді цікавлюсь, чи справді ви перевірили власну відповідь, lol
mradzinski
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.