Как я могу построить такую ​​кнопку?

Question

Мне нужно реализовать такую ​​кнопку для моего приложения для Android. Было бы здорово сделать это без использования полного изображения в качестве кнопки.
Я сделал почти ту же кнопку, используя <shape> с <gradient>. Единственное, что мне нужно, это добавить нижнюю синюю тень кнопки и включить изображение.

Возможно ли это?

Заранее спасибо.

Answer 1

Вы можете сделать это, комбинируя Shable Drawables внутри Layered Drawable. Для этого у вас будет 3 xml-файла, как показано ниже:

• button.xml (тот, который у вас уже есть, я думаю)

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
  
      <corners android:radius="16dp" />
  
      <gradient
          android:angle="270"
          android:centerColor="#FFFFFF"
          android:endColor="#CAEBF8"
          android:startColor="#FFFFFF"
          android:type="linear" />
  
      <padding
          android:bottom="8dp"
          android:left="8dp"
          android:right="8dp"
          android:top="8dp" />
  
      <stroke
          android:width="2dp"
          android:color="#FFFFFF" />
  
  </shape>
  

• button_bg.xml (чтобы добавить синюю рамку под кнопкой)

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

• layered_button.xml (чтобы объединить предыдущий xml и рисунок, который можно использовать в качестве фона для кнопки)

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <item android:drawable="@drawable/button_bg"/>
      <item
          android:bottom="2dp"
          android:drawable="@drawable/button"/>
  
  </layer-list>
  

Более подробную информацию о Списке слоев вы найдете в Документациях для рисования

Answer 2

Сделайте атрибут вашей кнопки android:background, чтобы указать желаемое изображение. Создайте свое изображение с текстом и значком маленького человека. Невозможно поместить текст и изображение одновременно внутри кнопки.

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

Answer 3

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

android:drawableRight

Что касается тени, я не уверен, как это достигается.