Fondo Android + texto + icono para un botón

Me gustaría tener un conjunto de imágenes a fondo un texto en él y un icono en el lado izquierdo del texto. Muy fácil en el iPhone, pero no puede averiguar cómo hacerlo en Android, para ser redimensionable que el botón y mantener el icono + posición de texto y la distancia correctamente.

IPhone:

IPhone

Android Tengo esto:

Androide

El código xml es:

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

Tomó el código de aquí .

Si utilizo android:drawableLeft , que el icono irá a la parte más izquierda.

Introduzca aquí la descripción de la imagen

Si empiezo a jugar con paddings semi hardcoded, que tendré diferentes mirar dif devives: (teléfono y tabla)

Si añado el android:gravity="left|center_vertical" que se verá así:

Introduzca aquí la descripción de la imagen

El texto es variable: cambiará cuando el usuario cambie el idioma.

¿Cómo hacerlo correctamente?

No quiero negar la respuesta de nadie, pero por favor, lea la pregunta y no sugiera lo que he probado ya. También dijo que los arreglos codificados no funcionan bien.

Esto no es una tarea, sino una parte de software comercial.

Aquí hay un código sugerido de las respuestas:

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

¿Qué piensas cómo se verá como el android:layout_marginLeft="10dip" en Galaxy s4? Aquí está una vista previa:

Introduzca aquí la descripción de la imagen

Esto no es lo que he preguntado. "Dip" o "dp" o "px" no debe utilizarse en cualquier lugar como la distancia desde la izquierda, arriba, porque los teléfonos tiene HPDI, pantalla más pequeña y Tabletas tiene MDPI y resoluciones de ancho. Simple no funciona en mdpi, y xxhdpi.

Nizam respuesta está muy cerca de una buena solución:

Introduzca aquí la descripción de la imagen

Tal vez usted debe usar RelativeLayout con esquinas redondeadas, que poner TextView y ImageView dentro de él.

Prueba esto:

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

Pruebe esto: Siga este: 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> 

Aquí es cómo hago cosas:

CAPAS

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

ESQUINA REDONDA

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

Utilícelo en el diseño relativo, con una vista de imagen y un botón dentro de él

Intente abajo el diseño

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

Y drawable / round_corner_drawable es como abajo:

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

Además, si desea utilizar su imagen como fondo, déle android:layout_height="wrap_content" y android:layout_height="wrap_content" como fondo para el diseño relativo.

Ps Si pone diferentes valores de color para startColor , centerColor y endColor , obtendrá ese efecto de degradado para su fondo dibujable. Así que cambie los valores de color en consecuencia.

EDITAR:

Intente abajo la disposición, lo edite para caber en diversos tamaños de la pantalla con la esquina redondeada 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> 
 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button Text" android:background="@drawable/round_background" android:drawableLeft="@drawable/icon"/> 

Guarde el código xml que round_background.xml continuación como round_background.xml y póngalo en una carpeta round_background.xml . Utilice esto si lo desea, pero también puede utilizar la imagen de la carpeta dibujable.

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

Lo había conseguido con el siguiente código. Puede ser utilizado como una alternativa más fácil a las soluciones anteriores.

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

La vista del botón está marcada en rojo (esto no es un elemento de lista, sino un botón con el código anterior):

Introduzca aquí la descripción de la imagen

Encontrado una clase llamada CenteredIconButton que extiende el botón en este enlace. Trabajó como la magia. Cómo tener el centro de la imagen y del texto dentro de un botón . Gracias a @atomicode

Si el ancho de su botón: android:layout_width="wrap_content" entonces su código será así:

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

De lo contrario, si el ancho de su botón: android:layout_width="match_parent" entonces su código será así:

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

Por cierto android:paddingLeft="100dp" , cambie 100 con su valor adecuado.

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

Puede utilizar paddingLeft y paddingRight para obtener el botón como el de iphone

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

En Java

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

Donde la imagen Dibujable es,

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

Acabo de implementar este tipo de botón (y se ha implementado en una aplicación de gran escala), no es realmente complicado: el contenido de 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> 

Entonces, para usarlo sólo tengo que usar la etiqueta de inclusión:

 <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 es un selector que apunta a los diferentes trazos que se deben utilizar para cada estado del botón

Utilicé un LinearLayout, permite centrar simplemente el texto y los iconos en el botón. También debe ser factible con un GridLayout. Si desea centrarse sólo en el texto (no creo que se ve bien, aunque eso es su elección), utilice un RelativeLayout.

Puedes usar android: paddingLeft, android: paddingRight y layout_width con un ancho fijo para resolver el problema.

 <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"/> 
  • Ajustes redimensionables en Android 3.1
  • Botón uniformemente espaciado en Layout
  • Establecer el estilo de fuente en negrita del menú de la barra de herramientas appcompat
  • XML Lista de permisos de Android completa
  • ¿Es posible acceder a un elemento de string-array en Android?
  • XML dentro de un recurso de cadena de Android?
  • Error al analizar etiquetas XML no coincidentes
  • Tutorial en el analizador DOM
  • ¿Cómo puedo crear un diseño con pestañas completamente en XML?
  • SurfaceView personalizado que causa NoSuchMethodException
  • Mover mi barra de progreso con una imagen android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.