Android LinearLayout: добавить границу с тенью вокруг LinearLayout

147

Я хотел бы создать ту же границу этого LinearLayout, как в примере:

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

В этом примере мы видим, что граница не одинакова во всем 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>
wawanopoulos
источник
1
Вы можете использовать backgroundсвойство для этого ... создайте один XML-файл с такой формой, как прямоугольник, цвет и эффект тени для него, и установите его в качестве фона для линейного макета ..
Прагнеш Года,
используйте обводку для серой границы и эффекта отступа
Прагнеш Года '
Я думаю, что это два макета XML, скажем, один линейный макет, а внутренний - относительный макет с отступом
Giru Bhai
@ Prag's Не могли бы вы помочь мне в создании этого файла XML, пожалуйста?
Ваванопулос
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 один -> 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"
funcoder
источник
1
Как я могу скрыть черную линию? Пожалуйста, помогите
Исаак Дарлонг
@Isaac сохранить изображение как my_nine_patch.9.png (.9png - 9-пакетное изображение)
17
ЭТО ЛУЧШЕЕ!
Numanqmr
35

хорошо, я знаю, что уже слишком поздно. но у меня было такое же требование. я решил так

1. Сначала создайте XML-файл (пример: border_shadow.xml) в папке «drawable» и скопируйте в нее приведенный ниже код.

<?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: фон

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

и это сработало для меня.

user3619170
источник
21

Это так просто:

Создайте нарисованный файл с градиентом, как это:

для тени под взглядом 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
Создайте XML-файл under_shadow, затем, по вашему мнению, добавьте «Вид» в свой макет и установите файл background_shadow.xml в качестве фона этого представления
Morteza Rastgoo
Я сделал то же самое, что вы сказали, но мой "вышеуказанный_проводник" не прозрачен, когда я помещаю это представление в пользовательское представление. Работает нормально отдельно. Что я должен делать?
Итак,
18

В качестве альтернативы, вы можете использовать изображение с 9 патчами в качестве фона для макета, что позволяет использовать более «естественные» тени:

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

Результат:

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

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

Кстати, это модифицированный (уменьшенный до минимального размера квадрата) существующий ресурс, который находится в папке ресурсов API 19 SDK.
Я оставил красные маркеры, так как они не кажутся вредными, как показано в инструменте draw9patch.

[РЕДАКТИРОВАТЬ]

Около 9 патчей, на случай, если вы никогда не имели с ними ничего общего.

Просто добавьте его в качестве фона вашего просмотра.

Области, отмеченные черным (слева и сверху), будут растягиваться (вертикально, горизонтально).
Области, помеченные черным (справа, снизу), определяют «область содержимого» (где можно добавить текст или представления - вы можете называть немаркированные области «отступами», если хотите).

Учебное пособие: http://radleymarx.com/blog/simple-guide-to-9-patch/

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

Вы создаете файл .xml в drawable с именем 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" />
Krzynool
источник
2
Что такое поведение на API <21?
CoolMind
1
К сожалению, это не работает до Lollipop, поэтому вы должны использовать некоторые другие ответы на этот вопрос. Но если вы ориентируетесь на новые телефоны, это довольно простой способ, который работает хорошо.
Krzynool
2

1. Сначала создайте xml-файл с именем shadow.xml в папке «drawable» и скопируйте в него приведенный ниже код.

 <?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 все нормально
Судхир Сингх
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) {}. Как видите, это не реализовано. Я действительно сомневаюсь, что это поможет, и действительно удивляюсь, если вы действительно проверили свой собственный ответ, лол
Мрадзински