web-dev-qa-db-fra.com

Fond Android + texte + icône pour un bouton

Je voudrais avoir une image définie en arrière-plan avec un texte dessus et une icône sur le côté gauche du texte. Très facile avec iPhone, mais je ne vois pas comment le faire sur Android, pour être redimensionnable ce bouton et conserver la position et la distance de l'icône, du texte.

iPhone:

iPhone

Android j'ai ceci:

Android

Le code XML est:

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

A pris le code de ici .

Si j'utilise Android:drawableLeft, l'icône ira à la partie la plus à gauche. 

enter image description here

Si je commence à jouer avec des rembourrages semi-codés, je verrai différemment les différences: (téléphone et table)

Si j'ajoute le Android:gravity="left|center_vertical", cela ressemblera à ceci:

enter image description here

Le texte est variable: il changera lorsque l'utilisateur changera de langue.

Comment le faire correctement?

Je ne veux sous-estimer la réponse de personne, mais veuillez lire la question et ne suggérez pas ce que j'ai déjà essayé. De plus, les correctifs codés en dur ne fonctionnent pas bien.

Ce n'est pas un devoir, mais une partie d'un logiciel commercial.

Voici un code suggéré à partir des réponses:

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

À quoi ressemblera le Android:layout_marginLeft="10dip" sur Galaxy s4? Voici un aperçu:

enter image description here

Ce n'est pas ce que j'ai demandé. "dip" ou "dp" ou "px" ne doivent être utilisés nulle part, car les téléphones ont HPDI, un écran plus petit et les tablettes ont des résolutions MDPI et larges. Simple ne fonctionne pas sur mdpi et xxhdpi.

Nizam answer est très proche d'une bonne solution:

enter image description here

javaandroidxmllayoutuser-interface
10
user529543

Vous devriez peut-être utiliser RelativeLayout avec des coins arrondis, puis mettre TextView et ImageView à l'intérieur. 

11
subasa

Essaye ça:

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

Essayez ceci: Suivez ceci: 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>
3
Amit Prajapati

A trouvé une classe appelée CenteredIconButton qui étend Button à ce lien. A travaillé comme par magie. Comment avoir Image et Text Center dans un bouton . Merci à @atomicode

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

enregistrez le code xml ci-dessous sous le nom round_background.xml et placez-le dans un dossier pouvant être dessiné. utilisez-le si vous le souhaitez, mais vous pouvez également utiliser une image du dossier pouvant être dessiné.

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

Je l'avais réalisé avec le code suivant. Peut être utilisé comme une alternative plus facile aux solutions ci-dessus.

<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 vue des boutons est marquée en rouge (ce n'est pas un élément de la liste mais un bouton avec le code ci-dessus):

enter image description here

1
Dexter

Voici comment je fais les choses: 

COUCHES

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

S&EACUTE;LECTEUR

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

COIN TOURNÉ 

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

Utilisez ceci sur une disposition relative, avec une imageview et un bouton à l'intérieur

1
An-droid

Si la largeur de votre bouton est: Android:layout_width="wrap_content", votre code ressemblera à ceci:

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

Sinon, si la largeur de votre bouton est: Android:layout_width="match_parent", votre code ressemblera à ceci:

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

Au fait, Android:paddingLeft="100dp", changez 100 avec la valeur qui vous convient.

1
Ahmed Soliman Flasha

Essayez ci-dessous la disposition

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

et drawable/round_corner_drawable est comme ci-dessous:

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

De même, si vous souhaitez utiliser votre image comme arrière-plan, donnez Android:layout_height="wrap_content" et définissez-le comme arrière-plan pour la disposition relative.

p.s. Si vous définissez des valeurs de couleur différentes pour startColor, centerColor et endColor, vous obtiendrez cet effet de dégradé pour votre arrière-plan. Alors changez les valeurs de couleur en conséquence.

MODIFIER:  

Essayez ci-dessous mise en page, je l'ai édité pour s'adapter à différentes tailles d'écran avec des coins arrondis dessinables.

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

Vérifiez ce lien que j'ai trouvé utile. http://porcupineprogrammer.blogspot.co.uk/2013/03/Android-ui-struggles-making-button-with.html

0
Feay Jarana Manotumruksa
<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" />

Vous pouvez utiliser paddingLeft et paddingRight pour obtenir un bouton identique à celui de l'iphone

0
Piyush

Je viens de mettre en place ce type de bouton (et il a été déployé dans une application à grande échelle), ce n'est pas vraiment compliqué: Contenu 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>

Ensuite, pour l'utiliser, il me suffit d'utiliser la balise 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 est un sélecteur qui pointe vers les différents dessinables à utiliser pour chaque état de bouton

J'ai utilisé LinearLayout, cela permet de centrer simplement le texte et les icônes du bouton. Cela devrait également être faisable avec GridLayout. Si vous voulez vous centrer uniquement sur le texte (je ne pense pas qu'il soit beau mais c'est votre choix), utilisez un RelativeLayout.

0
Teovald

Vous pouvez utiliser Android: paddingLeft, Android: paddingRight et layout_width sur une largeur fixe pour résoudre le problème.

<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"/>
0
Jason Huh

Essayez d'utiliser 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);

où image Drawable est,

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