Wie ändere ich die Größe eines drawableLeft-Symbols auf einer Schaltfläche?

76

Ich habe einige Symbole auf 4 Schaltflächen hinzugefügt, die neben der Schaltfläche so groß aussehen. Wie kann ich die Größe ändern? Ich habe drawableLeft auf den Schaltflächen verwendet, um Symbole hinzuzufügen.

Die Drawables heißen Deal, Trophäe, Puzzle und Megaphon. Die Symbole sind zu groß. Die Datei content_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="tr.k12.evrim.evrimnews.MainActivity"
    tools:showIn="@layout/activity_main">




    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Giriş Yap"
                android:onClick="SignIn"
                android:textStyle="bold"
                style="@style/Widget.AppCompat.Button.Colored"/>




            </LinearLayout>


    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/frameLayout"
        android:orientation="vertical">



    <Button
        android:text="Duyurular"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/frameLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:id="@+id/button2"
        android:drawableLeft="@drawable/megaphone" />

    <Button
        android:text="Kadromuz"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/button2"
        android:layout_alignEnd="@+id/button2"
        android:layout_marginTop="13dp"
        android:id="@+id/button3"
        android:drawableLeft="@drawable/puzzle"/>

        <Button
            android:text="Başarılarımız"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginTop="12dp"
            android:id="@+id/button5"
            android:drawableLeft="@drawable/trophy"/>


    <Button
        android:text="Ortaklarımız"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_marginTop="12dp"
        android:id="@+id/button4"
        android:drawableLeft="@drawable/deal"/>




    </LinearLayout>

</RelativeLayout>
android Arda Çebi
quelle
Können Sie etwas über Ihr Problem klären? vielleicht ein paar Bildschirme und Code hochladen?
Przemyslaw Jablonski
1
Ändern Sie die Größe des Symbols selbst ..?
JamesSwinton
@ JamesSwinton Ja, dass ich neben dem Button geputtet habe.
Arda Çebi
@PrzemyslawJablonski Details Screenshot hinzugefügt.
Arda Çebi
1
Ja, ich wollte das eigentliche Zeichenmaterial nehmen und das Bild auf die gewünschte Größe verkleinern.
JamesSwinton

Antworten:

194

Wickeln Sie Ihre Ressource in ein Zeichen, das Ihre gewünschte Größe definiert, ähnlich wie:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item
      android:drawable="@drawable/icon"
      android:width="@dimen/icon_size"
      android:height="@dimen/icon_size"
      />

</layer-list >

Verwenden Sie danach dieses Zeichen in Ihrem android:drawableLeftTag

DroidBender
quelle
81
@MuhammedRefaat Seien Sie vorsichtig mit dieser Lösung. Das Attribut width and height ist nur mit API 23 oder neuer kompatibel, daher funktioniert es nicht mit Lollipop und unter Version.
Eduardo ER
1
@ EduardoE.R. Wow, das wusste ich nicht, ich bin froh, dass du es mir gesagt hast, danke
Muhammed Refaat
@ EduardoE.R. Kannst du mir zeigen, wie man kompatible Attributbreite und -höhe mit einer Version unter 23 macht, damit ich das Symbol in Lollipop und unter Version als gleich groß anzeigen kann? Vielen Dank im Voraus
Amit Verma
1
@AmitVerma diese Lösung ist kompatibel mit unter 23 Version, ich meine, es wird nicht abstürzen, aber die wird nicht die gleiche Größe haben. Ich weiß wirklich nicht, ob es einen anderen besseren Ansatz gibt. Vielleicht können Sie ein anderes Layout für diese API-Version verwenden und ein Image-Tag verwenden, dem ein Schaltflächenverhalten zugewiesen wurde. Sie wissen, onclick-Ereignis, onPress-Ereignis ... Entschuldigung, wenn nicht eine wirklich gute Lösung klingt.
Eduardo ER
1
Arbeitet wie eine Kirche!
Tzegenos
7

Sie können Grenzen programmgesteuert festlegen ( hier ). Dies sieht folgendermaßen aus

Drawable img = ActivityName.this.getContext().getResources().getDrawable(
            R.drawable.blue_line);
img.setBounds(left, top, right, bottom);
button.setCompoundDrawables(img, null, null, null);
Umlaufbahn
quelle
6

Versuche Folgendes. Deklarieren Sie die Drawables als die Symbole, die Sie verwenden möchten

    Drawable drawable = getResources().getDrawable(R.mipmap.youricon);
    drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
            (int) (drawable.getIntrinsicHeight() * 0.6));
    ScaleDrawable sd = new ScaleDrawable(drawable, 0, 40, 40);
    youredittext1.setCompoundDrawables(null, null, sd.getDrawable(), null);
    drawable = getResources().getDrawable(R.mipmap.yourothericon);
    drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
            (int) (drawable.getIntrinsicHeight() * 0.6));
    sd = new ScaleDrawable(drawable, 0, 40, 40);
    youredittext2.setCompoundDrawables(null, null, sd.getDrawable(), null);
Revipod
quelle
5

Hinzufügen zu DroidBenders großartiger Antwort. Seine Lösung stürzt auf API 21 nicht ab, sodass sie auch ohne Hinzufügen von Build.VERSION.SDK_INTCode verwendet werden kann. So sieht die Lösung mit einem Standard-Image-Asset auf API 21 aus (unter Verwendung der Texthöhe als Bemaßungseinstellung).

Geben Sie hier die Bildbeschreibung ein

Und so sieht es auf API 23+ aus

Geben Sie hier die Bildbeschreibung ein

Es ist immer noch eine wirklich gute Option, auch wenn die min API <23 ist.

Suche nach Stille
quelle
1
Nun, das hängt sehr vom Drawable ab, es kann einfach versteckt oder enorm sein. Derzeit liegt API <23 bei etwa 15% außerhalb der USA.
Htafoya
1
@htafoya Guter Punkt. Ich denke, ich hätte speziell das Bildobjekt sagen sollen. Ich habe meinen Beitrag aktualisiert.
Suche nach Stille
@seekingStillness Nein, es wird NICHT in allen Fällen auf API <23 korrekt angezeigt. Ich habe es nur überprüft und mein Symbol bedeckte die Hälfte des Bildschirms. Für API <23 funktioniert die
Orbite-
@CDrosos Ich hatte in meiner Antwort "Verwenden eines Standard-Image-Assets" erwähnt. Ich vermute, Sie verwenden kein standardmäßiges importiertes Bildelement aus Android Studio.
Suche nach Stille
Was ist ein Standard-Image-Asset? Ich habe ein Bitmap-PNG-Bild verwendet. Meiner Meinung nach ist es besser, den anderen Ansatz unter API 23 zu verwenden. Besser auf
Nummer
5

Verwenden einer Kotlin-Erweiterung:

Fügen Sie dies hinzu, um Ihren Code sauber und wiederverwendbar zu halten. Wenn Sie nichts oder 0 für id übergeben, wird das Drawable gelöscht. (Schaltfläche erweitert TextView)

buttonView.leftDrawable(R.drawable.my_icon, R.dimen.icon_size)

// Button extends TextView
fun TextView.leftDrawable(@DrawableRes id: Int = 0, @DimenRes sizeRes: Int) {
    val drawable = ContextCompat.getDrawable(context, id)
    val size = resources.getDimensionPixelSize(sizeRes)
    drawable?.setBounds(0, 0, size, size)
    this.setCompoundDrawables(drawable, null, null, null)
}
Gibolt
quelle
4

Solange das Symbol ein Vektor-Asset ist, gehen Sie in die Vektordatei und ändern Sie android:widthund android:heightzu etwas wie @dimen/icon_size. Definieren Sie diese Ressource dann in Ihren dimension.xml-Dateien für mehrere Bildschirmgrößen. Klappt wunderbar

OzzyTheGiant
quelle
Dies ist eine gute Alternative - insbesondere für einen einzelnen Anwendungsfall. Stellen Sie sich vor, Sie schreiben Codezeilen, um eine so kleine Änderung zu erreichen.
Chef
0

Diese Lösung funktioniert in allen Anwendungsfällen, in denen Sie ein Vektorgrafiksymbol verwenden, und ist auch mit Versionen unter 23 kompatibel.

Öffnen Sie das Zeichen-Symbol in XML

Original Icon zeichnbar:

<vector 
    android:height="24dp"
    android:tint="?attr/colorControlNormal" 
    android:viewportHeight="24"
    android:viewportWidth="24" 
    android:width="24dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
</vector>

Umschließen Sie nun Ihre Pfad-Tags mit dem Gruppen-Tag und fügen Sie die Attribute scaleX, scaleY, pivotX und pivotY in das Gruppen-Tag ein, um die Symbolgröße wie folgt zu verkleinern:

<vector 
    android:height="24dp"
    android:tint="?attr/colorControlNormal" 
    android:viewportHeight="24"
    android:viewportWidth="24" 
    android:width="24dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:pivotX="12"
        android:pivotY="12">
        <path
        android:fillColor="@android:color/white"
        android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
    </group>
</vector>

Sie können die Größe des Symbols steuern, indem Sie scaleX und scaleY ändern.

Dies ist nicht nur bei Drawables nützlich, sondern auch an jedem Ort, an dem ein Symbol verwendet wird und an dem es nicht einfach ist, Styling-Lösungen zu finden, um die Symbolgröße zu reduzieren, wie beispielsweise bei einem AlertDialogue.

Sid Shinde
quelle