2010-08-22 12 views
8

Estoy tratando de agregar una insignia a uno de los botones de mi Actividad. En este momento estoy tratando de hacer el xml. el botón con la tarjeta de identificación, debe tener este aspecto:Colocando una burbuja de insignia en el lado superior izquierdo de un botón

alt text

que ya han hecho la burbuja y el texto dentro usando un RelativeLayout:

<RelativeLayout android:layout_width="wrap_content" 
      android:layout_height="wrap_content"> 

      <ImageView android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       android:src="@drawable/badge" 
       android:layout_centerInParent="true"/> 

      <TextView android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:textStyle="bold" 
         android:text="2" 
         android:layout_centerInParent="true" /> 
     </RelativeLayout> 

pero no puedo encontrar una manera de colocarlo allí y hacerlo funcionar en vertical y horizontal con el mismo xml.

Los Buttoms en el Activity son así:

<Button android:id="@+id/new_releases_button" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ic_button_selector" 
      android:text="@string/new_releases_title" 
      android:textColor="#FFFFFF" 
      android:textSize="20sp" 
      android:gravity="center_vertical" 
      android:paddingLeft="12dp" 
      android:layout_marginTop="15dp" 
      android:layout_below="@id/coming_soon_button" 
      android:onClick="newReleaseClick" 
      android:layout_centerHorizontal="true" /> 

     <Button android:id="@+id/top_sellers_button" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ic_button_selector" 
      android:text="@string/top_sellers_title" 
      android:textColor="#FFFFFF" 
      android:textSize="20sp" 
      android:gravity="center_vertical" 
      android:paddingLeft="12dp" 
      android:layout_marginTop="15dp" 
      android:layout_below="@id/new_releases_button" 
      android:onClick="topSellersClick" 
      android:layout_centerHorizontal="true" /> 

y aquí están los dos recursos:

alt text alt text

¿Cómo debo hacer el XML?

EDIT: mejor enfoque hasta ahora, pero aún así no funciona:

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 

     <Button android:id="@+id/discounts_button" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/ic_button_selector" 
       android:text="@string/discounts_title" 
       android:textColor="#FFFFFF" 
       android:textSize="20sp" 
       android:onClick="discountsClick" 
       android:layout_marginTop="40dp" 
       android:layout_marginLeft="20dp"/> 

     <RelativeLayout android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="top|left"> 

      <ImageView android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:adjustViewBounds="true" 
        android:src="@drawable/badge" 
        android:layout_centerInParent="true"/> 

      <TextView android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:textStyle="bold" 
          android:text="20" 
          android:layout_centerInParent="true" /> 
     </RelativeLayout> 
</FrameLayout> 

Respuesta

7

Utilice un FrameLayout (en lugar de RelativeLayout) y el botón de imagen y poner en él.

Posición de la imagen (cirle con número) y el botón a través

android:layout_gravity="top|left" 
android:layout_marginTop="Xdp" 
android:layout_marginLeft="Xdp" 

a sus gustos.

+0

Esto se parece a la forma correcta, pero todavía no puede hacer que funcione. Tiene sentido agregar 'marginTop' y' marginLeft' a la insignia, pero deberían ser negativos. Esta posición fuera de la vista. Entonces, en su lugar, agregué 'marginTop' y' marginLeft' positivos al botón, pero esos valores son ignorados. Todavía no podía entender por qué. Editaré la pregunta con el mejor enfoque hasta ahora. – Macarse

+0

sí, correcto. sin margen negativo para la imagen (aunque no lo he intentado si eso funcionara bien), puede trabajar con los márgenes superior/izquierdo tanto para la imagen como para el botón que desee. pero tiene sentido de esta manera: la posición superior izquierda de FrameLayout es la esquina superior izquierda de la imagen, por lo tanto, debe mover el botón un poco hacia la derecha y hacia abajo. –

+0

Cool, agregando 'android: layout_gravity =" top | left "' al botón lo hizo funcionar, pero corta el botón ya que mi ancho y alto de mi padre son "wrap_content". No quiero forzar algo como 'android: layout_height =" 60dp "' que se ve bien. ¿Alguna idea de una mejor manera de resolver esto? – Macarse

3

diría que debería ser fácil con FrameLayout:

<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" android:layout_marginTop="15dp"> 
     <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dip"> 
     <Button android:id="@+id/new_releases_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_button_selector" 
     android:text="@string/new_releases_title" 
     android:textColor="#FFFFFF" 
     android:textSize="20sp" 
     android:gravity="center_vertical" 
     android:paddingLeft="12dp" 
     android:layout_below="@id/coming_soon_button" 
     android:onClick="newReleaseClick"/> 
    </FrameLayout> 
    <RelativeLayout android:layout_width="wrap_content" 
     android:layout_height="wrap_content"> 
     <ImageView android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:src="@drawable/badge" 
      android:layout_centerInParent="true"/> 
     <TextView android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textStyle="bold" 
        android:text="2" 
        android:layout_centerInParent="true" /> 
    </RelativeLayout> 
</FrameLayout> 

Probablemente usted tendrá que ajustar los márgenes.

EDIT:

Adición de la android:layout_gravity="top|left" se verá así:

alt text

+0

Esto no funcionó para mí. La insignia se ve en la parte superior del botón, y el aspecto 'android: layout_marginTop' se ignora de alguna manera. – Macarse

+0

Extraño .. luego intente actualizado xml en la respuesta (es posible que desee ajustar el relleno de FrameLayout interno). También intente usar RelativeLayout como contenedor de nivel superior en lugar de FrameLayout. –

+0

agrega android: layout_gravity = "top | center" a ambos botones y RelativeLayout hace alguna diferencia? el código se ve bien hasta ahora a primera vista. –

Cuestiones relacionadas