Android Hintergrund + Text + Symbol für eine Schaltfläche

Versuche dies:

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

Versuchen Sie Folgendes: Folgen Sie diesen Anweisungen: 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>

Unter diesem Link wurde eine Klasse namens CenteredIconButton gefunden, die Button erweitert. Arbeitete wie Magie. Wie man ein Bild- und Textzentrum innerhalb eines Buttons hat . Danke an @atomicode

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

speichern Sie den xml-Code unten als round_background.xml und legen Sie ihn in einen Zeichnungsordner. Verwenden Sie diese Option, wenn Sie möchten, Sie können jedoch auch Bilder aus dem Zeichenordner verwenden.

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

Das hatte ich mit folgendem Code erreicht. Kann als einfachere Alternative zu den oben genannten Lösungen verwendet werden.

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

die Schaltflächenansicht ist rot markiert (dies ist kein Listenelement, sondern eine Schaltfläche mit dem obigen Code):

So mache ich Dinge: 

SCHICHTEN

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

WAHLSCHALTER

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

GERUNDETE ECKE

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

Verwenden Sie dies für relatives Layout mit einer Bildansicht und einer Schaltfläche darin

Wenn Ihre Tastenbreite: Android:layout_width="wrap_content" ist, wird Ihr Code folgendermaßen aussehen:

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

Sonst, wenn Ihre Tastenbreite: Android:layout_width="match_parent", dann wird Ihr Code so aussehen:

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

Übrigens Android:paddingLeft="100dp", 100 mit Ihrem passenden Wert ändern.

Versuchen Sie es unter dem 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>

und drawable/round_corner_drawable ist wie folgt:

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

Wenn Sie Ihr Bild als Hintergrund verwenden möchten, geben Sie Android:layout_height="wrap_content" ein und legen Sie es als Hintergrund für das relative Layout fest.

p.s. Wenn Sie unterschiedliche Farbwerte für startColor, centerColor und endColor eingeben, erhalten Sie diesen Verlaufseffekt für Ihre Hintergrundfarbe. Ändern Sie also die Farbwerte entsprechend.

BEARBEITEN:  

Versuchen Sie es unterhalb des Layouts. Ich habe es so bearbeitet, dass es in verschiedene Bildschirmgrößen mit abgerundeten Ecken passt.

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

Überprüfen Sie diesen Link, den ich nützlich fand. http://porcupineprogrammer.blogspot.co.uk/2013/03/Android-ui-struggles-making-button-with.html

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

Sie können paddingLeft und paddingRight verwenden, um die Schaltfläche als Schaltfläche im iPhone zu erhalten

Ich habe gerade diese Art von Button implementiert (und sie wurde in einer großen App implementiert), es ist nicht wirklich kompliziert: Inhalt von 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>

Dann muss ich nur das Include-Tag verwenden: 

<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 ist ein Selektor, der auf die verschiedenen Drawables verweist, die für jeden Schaltflächenstatus verwendet werden sollen

Ich habe ein LinearLayout verwendet, es erlaubt einfach Text und Symbole in der Schaltfläche zu zentrieren. Es sollte auch mit einem GridLayout möglich sein. Wenn Sie sich nur auf den Text konzentrieren möchten (ich glaube nicht, dass er großartig aussieht, aber das ist Ihre Wahl), verwenden Sie ein RelativeLayout.

Sie können Android: paddingLeft, Android: paddingRight und layout_width in fester Breite verwenden, um das Problem zu lösen.

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

Versuchen Sie, TextView zu verwenden,

<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

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

wo das Bild gezeichnet werden kann,

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