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:
- ¿Cómo puedo analizar un espacio de nombres con el analizador SAX?
- Cambiar el tamaño de una casilla de verificación en android
- Android Hexágono forma botón que tiene hexágono táctil
- org.xml.sax.SAXParseException: Token inesperado al analizar XML
- Cómo subrayar el texto del botón en Android?
Android Tengo esto:
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.
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í:
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:
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:
- El fondo xml no cambia cuando uso la tableta
- Cómo establecer la línea como un fondo utilizando xml (forma) a continuación para EditText?
- ¿Cómo hacer lo contrario de atributo de preferencia android: dependencia?
- Cómo configurar el fondo del botón seleccionado / no seleccionado en el archivo XML
- convertir la interfaz de usuario de Android a código
- El botón no está llamando a OnClickListener con el primer clic
- Obligar a un botón a permanecer en la parte inferior de la pantalla del teléfono
- Superscript and Subscript en la aplicación de Android XML
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):
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"/>
Compruebe este enlace que me pareció útil. http://porcupineprogrammer.blogspot.co.uk/2013/03/android-ui-struggles-making-button-with.html
- Cómo crear un acceso directo que conduce a una actividad de no lanzador?
- ¿Por qué no puedo lanzar una excepción mientras uso el operador ternario