Java Android 背景 + 文本 + 按钮图标

Question

提问by

I would like to have an image set to background a text on it and an icon on the left side of the text. Very easy in iPhone, but can't figure out how to do it at Android, to be resizable that button and keep the icon + text position and distance properly.

我想将图像设置为背景文本和文本左侧的图标。在 iPhone 中很容易，但无法弄清楚如何在 Android 上做到这一点，调整该按钮的大小并正确保持图标 + 文本位置和距离。

iPhone:

苹果手机：

iPhone

苹果手机

Android I have this:

安卓我有这个：

Android

The xml code is:

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" />

Took the code from here.

从这里拿了代码。

If I use android:drawableLeft, than the icon will go to most left part.

如果我使用android:drawableLeft，则图标将位于最左侧。

enter image description here

在此处输入图片说明

If I start playing with semi hardcoded paddings, than I will have different look at diff devives: ( phone and table)

如果我开始使用半硬编码的填充，那么我会对差异设备有不同的看法：（手机和桌子）

If I add the android:gravity="left|center_vertical"than it will look like this:

如果我添加android:gravity="left|center_vertical"比它看起来像这样：

enter image description here

在此处输入图片说明

The text is variable: it will change, when the user change the language.

文本是可变的：当用户改变语言时它会改变。

How to do it properly?

如何正确地做到这一点？

I don't want to downvote anybody's answer, but please read the question and don't suggest what I have tryed already. Also told the hardcoded fixes doesn't work well.

我不想贬低任何人的答案，但请阅读问题，不要建议我已经尝试过的内容。还告诉硬编码修复效果不佳。

This is not a homework, but a commercial software part.

这不是作业，而是商业软件部分。

Here is a suggested code from answers:

这是来自答案的建议代码：

<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>

What do you think how it will look like the android:layout_marginLeft="10dip"on Galaxy s4? Here is a preview:

你觉得它android:layout_marginLeft="10dip"在 Galaxy s4 上会是什么样子？这是一个预览：

enter image description here

在此处输入图片说明

This is not, what I have asked. "dip" or "dp" or "px" shouldn't be used anywhere as distance from left, top, because phones has HPDI, smaller screen and Tablets has MDPI and wide resolutions. Simple doesn't work on mdpi, and xxhdpi.

这不是，我问过的。"dip" 或 "dp" 或 "px" 不应该用在距离左边、顶部的任何地方，因为手机有 HPDI，屏幕更小，平板电脑有 MDPI 和宽分辨率。Simple 不适用于 mdpi 和 xxhdpi。

Nizam answeris very close to a good solution:

Nizam 的回答非常接近一个好的解决方案：

enter image description here

在此处输入图片说明

Answer 1

采纳答案by subasa

Maybe you should use RelativeLayout with rounded corners, than put TextView and ImageView inside of it.

也许您应该使用带有圆角的 RelativeLayout，而不是将 TextView 和 ImageView 放在其中。

Answer 2

回答by subasa

Try below layout

试试下面的布局

<?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>

and drawable/round_corner_drawable is as below:

和 drawable/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>

Also, if you want to use your image as a background, give android:layout_height="wrap_content"and set it as a background for relative layout.

此外，如果您想将图像用作背景，android:layout_height="wrap_content"请将其设置为相对布局的背景。

p.s. If you put different color values for startColor, centerColorand endColor, you will get that gradient effect for your background drawable. So change the color values accordingly.

ps 如果您为startColor,centerColor和设置不同的颜色值endColor，您将获得可绘制背景的渐变效果。因此，相应地更改颜色值。

EDIT:

编辑：

Try below layout, i edited it to fit in different screen sizes with rounded corner 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

回答by No_Rulz

Try to use TextView,

尝试使用 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" />

In Java

在 Java 中

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

where Drawable image is,

可绘制图像在哪里，

Bitmap bitmap= BitmapFactory.decodeResource(context.getResources(), 
    R.drawable.settings_selected);
BitmapDrawable drawable=new BitmapDrawable(getResources(), bitmap);

Answer 4

回答by Piyush

<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" />

You can use paddingLeft and paddingRight to get button as the one in iphone

您可以使用 paddingLeft 和 paddingRight 来获取按钮作为 iphone 中的按钮

Answer 5

回答by An-droid

Here is how i do things :

这是我做事的方式：

LAYERS

层

<?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>

ROUNDED CORNER

圆角

<?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>

Use this on relative layout, with an imageview and button inside it

在相对布局上使用它，里面有一个图像视图和按钮

Answer 6

回答by Nizam

Try this:

尝试这个：

    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

回答by CENT1PEDE

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

save the xmlcode below as round_background.xmland put it on drawable folder. use this if you want, but you can also use image from the drawable folder.

将xml下面的代码另存为round_background.xml并将其放在 drawable 文件夹中。如果需要，可以使用它，但您也可以使用 drawable 文件夹中的图像。

<?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

回答by Teovald

I just implemented this kind of button (and it has been deployed in a large scale app), it is not really complicated : content of large_button.xml :

我刚刚实现了这种按钮（并且已经部署在大型应用程序中），它并不复杂： 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>

Then, to use it I just have to use the include tag :

然后，要使用它，我只需要使用 include 标签：

<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 is a selector that points to the different drawables to use for each button state

large_button_background 是一个选择器，指向用于每个按钮状态的不同可绘制对象

I used a LinearLayout, it allows to simply center both text & icons in the button. It should also be doable with a GridLayout. If you want to center just on the text (I don't think it looks great though but that's your choice), use a RelativeLayout.

我使用了 LinearLayout，它允许简单地将按钮中的文本和图标居中。使用 GridLayout 也应该可行。如果您只想以文本为中心（我认为它看起来不太好，但这是您的选择），请使用 RelativeLayout。

Answer 9

回答by Jason Huh

You can use android:paddingLeft, android:paddingRight and layout_width at a fixed width to solve the issue.

您可以使用固定宽度的 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

回答by Amit Prajapati

Try this: Follow this : http://porcupineprogrammer.blogspot.in/2013/03/android-ui-struggles-making-button-with.html

试试这个：按照这个：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>

Java Android 背景 + 文本 + 按钮图标

提问by

采纳答案by subasa

回答by subasa

回答by No_Rulz

回答by Piyush

回答by An-droid

回答by Nizam

回答by CENT1PEDE

回答by Teovald

回答by Jason Huh

回答by Amit Prajapati

相关推荐

最近更新

标签

Java Android 背景 + 文本 + 按钮图标

提问by

采纳答案by subasa

回答by subasa

回答by No_Rulz

回答by Piyush

回答by An-droid

回答by Nizam

回答by CENT1PEDE

回答by Teovald

回答by Jason Huh

回答by Amit Prajapati

相关推荐

java中的前置条件与后置条件？

Java 如何更改 Eclipse SpringSource 插件使用的 Gradle 版本？

Java ORA-00907: SQL 中缺少右括号

Java System.getProperty("user.timezone") 不起作用

相关推荐

最近更新

标签