круглая кнопка с изображением

Question

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

<LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:weightSum="4"> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button2" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button3" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button4" 
      android:layout_weight="1" /> 
    </LinearLayout> 

Round_button.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="false"> 
     <shape android:shape="oval"> 
      <solid android:color="#0dbe00"/> 
     </shape> 
    </item> 
    <item android:state_pressed="true"> 
     <shape android:shape="oval"> 
      <solid android:color="#c20586"/> 
     </shape> 
    </item> 
</selector> 

Что я хочу:

Что у меня есть:

Answer 1

Попробуйте

 <LinearLayout 
    android:orientation="horizontal" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center_horizontal" 
    android:weightSum="4"> 

    <Button 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:background="@drawable/round_button" 
     android:text="1" 
     android:id="@+id/button"/> 

    <Button 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:background="@drawable/round_button" 
     android:text="2" 
     android:id="@+id/button2"/> 

    <Button 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:background="@drawable/round_button" 
     android:text="3" 
     android:id="@+id/button3"/> 

    <Button 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:background="@drawable/round_button" 
     android:text="4" 
     android:id="@+id/button4"/> 
</LinearLayout> 

И round_button:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="false"> 
     <shape android:shape="ring"> 
      <solid android:color="#0dbe00"/> 
     </shape> 
    </item> 
    <item android:state_pressed="true"> 
     <shape android:shape="ring"> 
      <solid android:color="#c20586"/> 
     </shape> 
    </item> 
</selector> 

Answer 2

также я хочу добавить seperator фон их. Я могу создать круг , но я не знаю, как добавить изображение и разделитель на этом.

, чтобы добавить изображение в кнопке вы можете использовать android:src

отделить элементы, которые вы могли бы добавить View между кнопками. Например.

<View 
    android:layout_width="5dp" 
    android:layout_height="match_parent" 
    android:background="@android:color/transparent"/> 

Answer 3

Попробуйте:

<LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <View 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button"/> 

     <View 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button2" /> 

     <View 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button3" /> 
     <View 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/round_button" 
      android:text="New Button" 
      android:id="@+id/button4" /> 

     <View 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" /> 
    </LinearLayout>