Как сделать кнопки похожими на список

Question

В моем приложении у меня есть кнопки, которые выглядят так:

Я хочу, чтобы они выглядели так:

Мой background.xml выглядит следующим образом:

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

solid.xml выглядит следующим образом:

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

А shape.xml выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" /> 
    <stroke android:width="3dp" color="#ff000000" /> 
    <corners android:radius="15dp" /> 
    <padding 
        android:left="10dp" 
        android:top="10dp" 
        android:right="10dp" 
        android:bottom="10dp" /> 
</shape>

Как получить желаемый вид кнопок?

Answer 1

Верхняя форма:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <padding
        android:left="3dp"
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Средняя форма:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <padding
        android:left="3dp"
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Нижняя форма:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp" />
    <padding
        android:left="3dp"
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Пример:

<Button
    android:background="@drawable/top"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Top" />
<Button
    android:background="@drawable/middle"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="-2dp"
    android:text="Middle" />
<Button
    android:background="@drawable/bottom"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="-2dp"
    android:text="Bottom" />

Посмотрите на android:layout_marginTop="-2dp" - вам нужно, чтобы он перекрывал границу верхней кнопки с рамкой нижней кнопки

Результат (изображение не очень хорошее, сри):

После некоторой настройкиу вас будет форма, как вы ожидаете.

Мой твик:

Answer 2

Я использую другой подход для этого.

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

Это должно сделать то, что вы хотите, простым способом.

Answer 3

Вы можете сделать это с растровыми изображениями или изображениями.Вам нужно три изображения.Один для верхней кнопки, один для средних кнопок и один для нижней кнопки.Затем просто установите кнопки для соответствующих фоновых изображений.