Фон Android + текст + значок для кнопки

Question

Я хотел бы иметь изображение, установленное для фона, текст на нем и значок в левой части текста. Очень просто в iPhone, но не может понять, как это сделать на Android, чтобы изменить размер этой кнопки и сохранить значок + текстовое положение и расстояние должным образом.

iPhone:

Android У меня есть это:

код XML является:

<Button 
    android:id="@+id/btSettings" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_above="@id/tvWhatever" 
    android:layout_centerHorizontal="true" 
    android:layout_marginBottom="20dp" 
    android:background="@drawable/bt_general" 
    android:drawableTop="@drawable/settings_selected" 
    android:text="@string/settings" 
    android:textColor="#000000" /> 

Взял код из here.

Если я использую android:drawableLeft, то значок будет отображаться в левой части.

Если я начну играть с полу закодированных отступов, чем у меня будет другой взгляд на дифф devives: (телефон и стол)

Если я добавляю android:gravity="left|center_vertical" чем это будет выглядеть следующим образом:

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

Как это сделать правильно?

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

Это не домашнее задание, а коммерческая часть программного обеспечения.

Вот предлагаемый код из ответов:

<RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/bt_general" 
     android:padding="20dip" > 

     <ImageView 
      android:id="@+id/xIcon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="10dip" 
      android:src="@drawable/settings_selected" /> 

     <TextView 
      android:id="@+id/xSettingsTxt" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:text="@string/settings" 
      android:textColor="#000000" /> 
    </RelativeLayout> 

Что вы думаете, как это будет выглядеть android:layout_marginLeft="10dip" на Galaxy s4? Вот предварительный просмотр:

Это не то, что я просил. «dip» или «dp» или «px» не должны использоваться нигде как расстояние от левого, сверху, потому что телефоны имеют HPDI, меньший экран и планшеты имеют MDPI и широкие разрешения. Простой не работает на mdpi и xxhdpi.

Nizam answer очень близко к хорошему решению:

Answer 1

Может быть, вы должны использовать RelativeLayout с закругленными углами, чем ставить TextView и ImageView внутри него.

Answer 2

Try ниже макете

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="100dip" 
android:orientation="horizontal" 
android:background="@drawable/round_corners_drawable" > 

<ImageView 
    android:id="@+id/xIcon" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:layout_marginLeft="10dip" 
    android:layout_centerVertical="true" 
    android:src="@drawable/ic_launcher"/> 

<TextView 
    android:id="@+id/xSettingsTxt" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Settings" 
    android:layout_centerInParent="true" /> 

</RelativeLayout> 

и рисуем/round_corner_drawable, как показано ниже:

<?xml version="1.0" encoding="utf-8"?> 

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 

<solid android:color="#310704"/> 

<corners 
    android:bottomRightRadius="20sp" 
    android:bottomLeftRadius="20sp" 
    android:topLeftRadius="20sp" 
    android:topRightRadius="20sp"/> 

<gradient 
    android:startColor="#99310704" 
    android:centerColor="#99310704" 
    android:endColor="#99310704" 
    android:angle="270" /> 

</shape> 

Кроме того, если вы хотите использовать изображение в качестве фона, дать android:layout_height="wrap_content" и установить его в качестве фона для относительной компоновки.

p.s. Если вы поместите разные значения цвета для startColor, centerColor и endColor, вы получите эффект градиента для вашего фона. Поэтому измените значения цвета соответственно.

EDIT:

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

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:padding="20dip" 
android:background="@drawable/dialog_round_corners" > 

<ImageView 
    android:id="@+id/xIcon" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_toLeftOf="@+id/xSettingsTxt" 
    android:layout_centerVertical="true" 
    android:src="@drawable/ic_launcher"/> 

<TextView 
    android:id="@+id/xSettingsTxt" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Settings" 
    android:layout_centerInParent="true" /> 

</RelativeLayout> 

Answer 3

Попробуйте использовать TextView,

<TextView 
    android:id="@+id/txtSettings" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_above="@id/tvWhatever" 
    android:layout_centerHorizontal="true" 
    android:text="@string/settings" 
    android:textColor="#000000" /> 

В Java

txtView.setBackgroundResources(R.drawable.bt_general); 
txtView.setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top,Drawable right,Drawable bottom); 

где Drawable изображение,

Answer 4

<Button 
    android:id="@+id/btSettings" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/back_button" 
    android:drawablePadding="5dp" 
    android:drawableLeft="@drawable/ic_launcher" 
    android:text="Settings" 
    android:padding="20dp" 
    android:textColor="#000000" /> 

Вы можете использовать paddingLeft и paddingRight, чтобы получить кнопку, как один в Iphone

Answer 5

Вот как я делаю вещи:

СЛОЕВ

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

    <item android:drawable="@drawable/rounded_border"/> 
    <item android:drawable="@drawable/selector_button"/> 

</layer-list> 

---

SELECTOR

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

    <item android:drawable="@color/clr_grey_1" android:state_selected="true" android:state_window_focused="false"/> 
    <item android:drawable="@color/clr_grey_1" android:state_selected="true"/> 
    <item android:drawable="@color/clr_grey_1" android:state_pressed="true" android:state_selected="false"/> 
    <item android:drawable="@color/clr_main_green" android:state_selected="false"/> 

</selector> 

---

закругленный угол

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

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

    <stroke 
     android:width="1dp" 
     android:color="@android:color/white" /> 

    <corners 
     android:bottomLeftRadius="8dp" 
     android:bottomRightRadius="8dp" 
     android:topLeftRadius="8dp" 
     android:topRightRadius="8dp" /> 

    <padding 
     android:bottom="0dp" 
     android:left="4dp" 
     android:right="0dp" 
     android:top="4dp" /> 

</shape> 

Используйте это на относительном макете, с ImageView и кнопкой внутри него

Answer 6

Попробуйте это:

Button button = (Button) findViewById(R.id.button1); 
    Spannable buttonLabel = new SpannableString(" Settings"); 
    buttonLabel.setSpan(new ImageSpan(getApplicationContext(), R.drawable.settings_selected,  
     ImageSpan.ALIGN_BOTTOM), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    button.setText(buttonLabel); 

Answer 7

<Button 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Button Text" 
    android:background="@drawable/round_background" 
    android:drawableLeft="@drawable/icon"/> 

сохранить xml код ниже round_background.xml и наденьте его на папку с выделением. используйте это, если хотите, но вы также можете использовать изображение из выпадающей папки.

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

    <solid android:color="#f5f5f5" /> 

    <corners android:radius="10px" /> 

    <padding 
     android:bottom="0dp" 
     android:left="0dp" 
     android:right="0dp" 
     android:top="0dp" /> 

    <stroke 
     android:width="1dp" 
     android:color="#ccc" /> 

</shape> 

Answer 8

Я просто реализовал этот вид кнопки (и она была развернута в большом масштабе приложение), это не очень сложно: содержание large_button.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/large_button_background" 
    android:clickable="true" 
    android:gravity="center_horizontal" 
    android:orientation="horizontal" > 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="center_vertical" 
     android:layout_marginRight="16dp" 
     android:src="@drawable/some_icon" /> 

    <com.my.app.widget.RobotoTextView 
     android:id="@+id/large_button_text" 
     style="@style/AppName_RobotoBold" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:ellipsize="end" 
     android:focusable="false" 
     android:gravity="center_vertical" 
     android:maxLines="1" 
     android:singleLine="true" 
     android:textColor="@color/text_main" 
     /> 

</LinearLayout> 

Затем, чтобы использовать его я просто использовать тег включают:

<include 
    android:id="@+id/large_button" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/large_button_height" 
    android:layout_marginBottom="@dimen/large_button_vertical_margin" 
    android:layout_marginLeft="@dimen/large_button_horizontal_margin" 
    android:layout_marginRight="@dimen/large_button_horizontal_margin" 
    android:layout_marginTop="@dimen/large_button_vertical_margin" 
    layout="@layout/large_button" /> 

large_button_background является селектор, который указывает на различные вводимого коэффициента использовать для каждого состояния кнопки

Я использовал LinearLayout, он позволяет просто центрировать оба текста & иконки в кнопке. Он также должен быть выполнен с помощью GridLayout. Если вы хотите сосредоточиться только на тексте (я не думаю, что это выглядит здорово, но это ваш выбор), используйте RelativeLayout.

Answer 9

Вы можете использовать android: paddingLeft, android: paddingRight и layout_width с фиксированной шириной, чтобы решить проблему.

<Button 
android:id="@+id/btSettings" 
android:layout_width="148dp" 
android:layout_height="wrap_content" 
android:paddingLeft="32dp" 
android:paddingRight="32dp" 
android:background="@drawable/bt_general" 
android:drawableLeft="@drawable/settings_selected" 
android:text="@string/settings" 
android:textColor="#000000"/> 

Answer 10

Попробуйте это: Следуйте за этим: http://porcupineprogrammer.blogspot.in/2013/03/android-ui-struggles-making-button-with.html

<FrameLayout 
    style="?android:attr/buttonStyle" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:drawableLeft="@android:drawable/ic_delete" 
     android:gravity="center" 
     android:text="Button Challenge" /> 
</FrameLayout> 

Answer 11

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

<Button android:id="@+id/btnUserProfile" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:drawableLeft="@drawable/ic_user_profile" 
    android:background="#6C6C6C" 
    android:drawablePadding="8dp" 
    android:gravity="left|center_vertical"   
    android:text="@string/my_profile" 
    android:textStyle="bold|italic" /> 

вид кнопки отмечены красным цветом (это не элемент списка, а кнопка с кодом выше):

Answer 12

Проверить эту ссылку я нашел полезным. http://porcupineprogrammer.blogspot.co.uk/2013/03/android-ui-struggles-making-button-with.html

Answer 13

Найден класс под названием CenteredIconButton, который расширяет Button по этой ссылке. Работал как магия. How to have Image and Text Center within a Button. Благодаря @atomicode

Answer 14

Если ширина кнопки: android:layout_width="wrap_content", то ваш код будет выглядеть следующим образом:

<Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:drawableLeft="@drawable/img name" 
     android:gravity="left|center" 
     android:text="Button" /> 

Иначе, если ваша ширина кнопки: android:layout_width="match_parent" то ваш код будет выглядеть следующим образом:

<Button 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:drawableLeft="@drawable/img name" 
     android:gravity="left|center" 
     android:text="Button" 
     android:paddingLeft="100dp" 
     /> 

Кстати android:paddingLeft="100dp", смените 100 на подходящее значение.