wake-up-neo.net

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

Ich hätte gerne ein Bild als Hintergrund für einen Text und ein Symbol auf der linken Seite des Textes. Sehr einfach im iPhone, kann aber nicht herausfinden, wie es bei Android zu tun ist Ändern Sie die Größe der Schaltfläche und behalten Sie das Symbol + die Textposition und den Abstand korrekt bei.

iPhone:

iPhone

Android Ich habe folgendes:

Android

Der XML-Code lautet:

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

Übernahm den Code von hier .

Wenn ich Android:drawableLeft verwende, geht das Symbol zum linken Teil. 

enter image description here

Wenn ich anfange, mit halb hartcodierten Paddings zu spielen, werde ich die Unterschiede abweichend betrachten: (Telefon und Tabelle)

Wenn ich den Android:gravity="left|center_vertical" hinzufüge, sieht es folgendermaßen aus:

enter image description here

Der Text ist variabel: Er ändert sich, wenn der Benutzer die Sprache ändert.

Wie mache ich das richtig?

Ich möchte die Antwort von niemandem ablehnen, aber bitte lesen Sie die Frage und schlagen Sie nicht vor, was ich bereits versucht habe. Die Hardcoded Fixes funktionieren auch nicht gut.

Dies ist keine Hausaufgabe, sondern ein kommerzieller Softwareteil.

Hier ist ein vorgeschlagener Code aus Antworten:

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

Wie denken Sie, wie es mit dem Android:layout_marginLeft="10dip" auf dem Galaxy S4 aussehen wird? Hier ist eine Vorschau:

enter image description here

Das ist nicht was ich gefragt habe. "dip" oder "dp" oder "px" sollte nirgendwo als Abstand von links oben verwendet werden, da das Telefon HPDI, einen kleineren Bildschirm und Tablets MDPI und weite Auflösungen hat. Bei mdpi und xxhdpi funktioniert Simple nicht.

Nizam Antwort kommt einer guten Lösung sehr nahe:

enter image description here

10
user529543

Vielleicht sollten Sie RelativeLayout mit abgerundeten Ecken verwenden, als TextView und ImageView hineinzulegen. 

11
subasa

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

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>
3
Amit Prajapati

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

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

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

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

enter image description here

1
Dexter

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

1
An-droid

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

0
Piyush

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.

0
Teovald

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

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