Android: Wie ändere ich die Größe der CheckBox?


92

Ich möchte CheckBox etwas kleiner / größer machen. Wie kann ich das machen?

Antworten:


57

Sie müssen nur die zugehörigen Drawables festlegen und sie im Kontrollkästchen festlegen:

<CheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:text="new checkbox" 
    android:background="@drawable/my_checkbox_background"
    android:button="@drawable/my_checkbox" />

Der Trick besteht darin, wie die Drawables eingestellt werden. Hier ist ein gutes Tutorial dazu .


11
Beachten Sie, dass auf verschiedenen Geräten möglicherweise benutzerdefinierte Designs installiert sind. Wenn Sie die Größe anpassen, indem Sie ein eigenes benutzerdefiniertes Bild platzieren, stellen Sie sicher, dass Sie jedes Kontrollkästchen in der App ersetzen (auch wenn sich die Größe nicht ändert). Andernfalls kann es auf bestimmten Geräten zu einem Stilmix kommen.
DougW

141

Ab API Level 11 gibt es einen anderen Ansatz:

<CheckBox
    ...
    android:scaleX="0.70"
    android:scaleY="0.70"
/>

5
Diese Technik skaliert auch die Textbeschriftung. Um dies zu kompensieren, habe ich die Textgröße wie folgt angepasst: checkBox.TextSize = (int) (TEXT_SIZE / SCALE_FACTOR);
Samis

5
Wenn ich dies zum Erhöhen mache, z. B. auf "2,0" skaliere, wird es zwar größer, aber das Bild wird abgeschnitten. Ich sehe die rechte Hälfte des Kontrollkästchens und die linke Hälfte des Textes. Wie kann man das umgehen?
Al Lelopath

4
schön, es nimmt immer noch den gleichen Platz ein. Um das zu lösen, habe ich -ve Ränder verwendet, wie: android: layout_marginLeft = "- 10dp"
M. Usman Khan

Ich werde wahrscheinlich nicht in der IDE-Vorschau angezeigt, aber CheckBox wird in der Laufzeit skaliert
Leo Droidcoder

Zeigt in AS Design Ansicht für mich. Einfache Korrektur für etwas, das keine Korrektur benötigen sollte. Ich denke, die API oder das Gerät wirken sich aus. Bei Verwendung des Gennymotion-Geräts bei API 22 scheint 0,8 das höchste Y (horizontales LinearLayout) zu sein, während Onix Tablet el cheapo nicht bei 1
abschneidet.

94

Hier ist eine bessere Lösung, die das Zeichenelement nicht ausschneidet und / oder verwischt, sondern nur funktioniert, wenn das Kontrollkästchen keinen Text selbst enthält (Sie können jedoch weiterhin Text verwenden, es ist nur komplizierter, siehe am Ende).

<CheckBox
    android:id="@+id/item_switch"
    android:layout_width="160dp"    <!-- This is the size you want -->
    android:layout_height="160dp"
    android:button="@null"
    android:background="?android:attr/listChoiceIndicatorMultiple"/>

Das Ergebnis:

Wie die vorherige Lösung aussah scaleXund scaleYwie sie aussah:

Sie können ein Text-Kontrollkästchen aktivieren, indem Sie ein TextViewdaneben hinzufügen und einen Klick-Listener zum übergeordneten Layout hinzufügen und das Kontrollkästchen dann programmgesteuert auslösen.


2
Die Verwendung des Hintergrunds funktioniert nicht, wenn Ihr Kontrollkästchen Text enthält.
Zach Green

@ ZachGreen ja in der Tat. Ich dachte nicht an die Möglichkeit, dass es nicht funktionieren würde, wenn das Kontrollkästchen Text hätte, meiner nicht. Wird die Antwort aktualisieren
Antoine Bolvy

3
Dies ist eine viel bessere Antwort als die akzeptierte.
vtlinh

bei 160dp sieht es körnig aus. Scheint, dass die Auflösung zu niedrig ist
Gianluca Demarinis

Wie stelle ich den Farbton für ein solches Kontrollkästchen ein?
YTerle

16

Nun, ich habe viele Antworten gefunden, aber sie funktionieren gut ohne Text, wenn wir Text auch mit Kontrollkästchen wie in meiner Benutzeroberfläche benötigenGeben Sie hier die Bildbeschreibung ein

Hier kann ich gemäß meiner UI-Anforderung TextSize nicht erhöhen. Eine andere Option, die ich ausprobiert habe, ist scaleX und scaleY (Aktivieren Sie das Kontrollkästchen) und die benutzerdefinierte XML-Auswahl mit .png-Bildern (dies führt auch zu Problemen mit unterschiedlichen Bildschirmgrößen).

Aber wir haben eine andere Lösung dafür, nämlich Vector Drawable

Mach es in 3 Schritten.

Schritt 1: Kopieren Sie diese drei Vector Drawable in Ihren Drawable-Ordner

checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.11,0 2,-0.9 2,-2L21,5c0,-1.1 -0.89,-2 -2,-2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>

un_checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,5v14H5V5h14m0,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V5c0,-1.1 -0.9,-2 -2,-2z" />
</vector>

( Hinweis: Wenn Sie mit Android Studio arbeiten, können Sie diese Vector Drawable auch von dort aus hinzufügen. Klicken Sie mit der rechten Maustaste auf Ihren Drawable-Ordner und dann auf New / Vector Asset, und wählen Sie diese Drawable von dort aus aus. )

Schritt 2: Erstellen Sie einen XML-Selektor für das Kontrollkästchen

check_box_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/checked" android:state_checked="true" />
<item android:drawable="@drawable/un_checked" />
</selector>

Schritt 3: Aktivieren Sie das Kontrollkästchen

<CheckBox
android:id="@+id/suggectionNeverAskAgainCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:button="@drawable/check_box_selector"
android:textColor="#FF000000"
android:textSize="13dp"
android:text="  Never show this alert again" />

Jetzt ist es wie:

Geben Sie hier die Bildbeschreibung ein


Sie können auch die Breite und Höhe oder das Ansichtsfenster Höhe und Ansichtsfenster Breite und Füllfarbe ändern


Hoffe es wird helfen!


2
In meinem Fall musste ich die Checkbox-Größe einstellen android:button="@null"und android:background="@drawable/check_box_selector"anpassen.
Artur Szymański

Dieser Ansatz bricht Polster
Oleh Liskovych

9

ich benutze

android:scaleX="0.70" android:scaleY="0.70"

um die Größe des Kontrollkästchens anzupassen

dann setze ich solche Ränder

android:layout_marginLeft="-10dp"

um die Position des Kontrollkästchens anzupassen.


Bro, obwohl es die Größe verkleinert - der Rand funktioniert in meinem Fall nicht. Meine Kontrollkästchenbilder sind 173 x 93 - die Größe des Kontrollkästchens belegt immer noch diesen Platz. Antoine Bolvy ist meiner Meinung nach eine flexiblere Lösung.
Alexey Shevelyov

6

Folgendes habe ich getan:

android:button="@null"

und auch eingestellt

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

dann in Ihrem Java-Code:

Drawable d = mCheckBox.getCompoundDrawables()[0];
d.setBounds(0, 0, width_you_prefer, height_you_prefer);
mCheckBox.setCompoundDrawables(d, null, null, null);

Es funktioniert für mich und hoffentlich funktioniert es für Sie!


4

UPDATE : Dies funktioniert nur ab API 17 ...


Um die anderen bereits gegebenen brillanten Antworten zu ergänzen, können Sie das Kontrollkästchen nur so klein machen, wie es die Textgröße zulässt.

Gemäß meiner Antwort auf diese Frage: - Wie können wir das Kontrollkästchen verkleinern? Bitte geben Sie mir eine Idee


CheckBox leitet seine Höhe sowohl aus dem TEXT als auch aus dem Bild ab.

Legen Sie diese Eigenschaften in Ihrem XML fest:

android:text=""
android:textSize="0sp"

Das funktioniert natürlich nur, wenn Sie keinen Text wollen (hat bei mir funktioniert).

Ohne diese Änderungen CheckBoxgab mir das einen großen Spielraum um mein Image, wie von Joe erwähnt


1

Sie können die folgende Lösung ausprobieren, um die Größe zu ändern, custom checkboxindem Sie die folgenden Eigenschaften Checkboxin Ihrer Layoutdatei festlegen. Hat für mich gearbeitet

android: scaleX = "0,8" android: scaleY = "0,8"

android:button="@null"
android:scaleX="0.8"
android:scaleY="0.8"
android:background="@drawable/custom_checkbox"

Fügen Sie der zeichnbaren Datei die folgenden Zeilen hinzu

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="false"
      android:drawable="@drawable/unchecked_img" />
<item android:state_checked="true"
      android:drawable="@drawable/checked_img" />
</selector>

0

Ich habe einen Weg gefunden, dies zu tun, ohne eigene Bilder zu erstellen. Mit anderen Worten wird das Systemabbild skaliert. Ich gebe nicht vor, dass die Lösung perfekt ist; Wenn jemand eine Möglichkeit kennt, einige der Schritte zu verkürzen, werde ich gerne herausfinden, wie.

Zuerst habe ich Folgendes in die Hauptaktivitätsklasse des Projekts (WonActivity) eingefügt. Dies wurde direkt von Stack Overflow übernommen - danke Jungs !

/** get the default drawable for the check box */
Drawable getDefaultCheckBoxDrawable()
{
  int resID = 0;

  if (Build.VERSION.SDK_INT <= 10)
  {
    // pre-Honeycomb has a different way of setting the CheckBox button drawable
    resID = Resources.getSystem().getIdentifier("btn_check", "drawable", "android");
  }
  else
  {
    // starting with Honeycomb, retrieve the theme-based indicator as CheckBox button drawable
    TypedValue value = new TypedValue();
    getApplicationContext().getTheme().resolveAttribute(android.R.attr.listChoiceIndicatorMultiple, value, true);
    resID = value.resourceId;
  }

  return getResources().getDrawable(resID);
}

Zweitens habe ich eine Klasse erstellt, um "ein Drawable zu skalieren". Bitte beachten Sie, dass es sich vollständig vom Standard ScaleDrawable unterscheidet.

import android.graphics.drawable.*;

/** The drawable that scales the contained drawable */

public class ScalingDrawable extends LayerDrawable
{
  /** X scale */
  float scaleX;

  /** Y scale */
  float scaleY;

  ScalingDrawable(Drawable d, float scaleX, float scaleY)
  {
    super(new Drawable[] { d });
    setScale(scaleX, scaleY);
  }

  ScalingDrawable(Drawable d, float scale)
  {
    this(d, scale, scale);
  }

  /** set the scales */
  void setScale(float scaleX, float scaleY)
  {
    this.scaleX = scaleX;
    this.scaleY = scaleY;
  }

  /** set the scale -- proportional scaling */
  void setScale(float scale)
  {
    setScale(scale, scale);
  }

  // The following is what I wrote this for!

  @Override
  public int getIntrinsicWidth()
  {
    return (int)(super.getIntrinsicWidth() * scaleX);
  }

  @Override
  public int getIntrinsicHeight()
  {
    return (int)(super.getIntrinsicHeight() * scaleY);
  }
}

Schließlich habe ich eine Checkbox-Klasse definiert.

import android.graphics.*;
import android.graphics.drawable.Drawable;
import android.widget.*;

/** A check box that resizes itself */

public class WonCheckBox extends CheckBox
{
  /** the check image */
  private ScalingDrawable checkImg;

  /** original height of the check-box image */
  private int origHeight;

  /** original padding-left */
  private int origPadLeft;

  /** height set by the user directly */
  private float height;

  WonCheckBox()
  {
    super(WonActivity.W.getApplicationContext());
    setBackgroundColor(Color.TRANSPARENT);

    // get the original drawable and get its height
    Drawable origImg = WonActivity.W.getDefaultCheckBoxDrawable();
    origHeight = height = origImg.getIntrinsicHeight();
    origPadLeft = getPaddingLeft();

    // I tried origImg.mutate(), but that fails on Android 2.1 (NullPointerException)
    checkImg = new ScalingDrawable(origImg, 1);
    setButtonDrawable(checkImg);
  }

  /** set checkbox height in pixels directly */
  public void setHeight(int height)
  {
    this.height = height;
    float scale = (float)height / origHeight;
    checkImg.setScale(scale);

    // Make sure the text is not overlapping with the image.
    // This is unnecessary on Android 4.2.2, but very important on previous versions.
    setPadding((int)(scale * origPadLeft), 0, 0, 0);

    // call the checkbox's internal setHeight()
    //   (may be unnecessary in your case)
    super.setHeight(height);
  }
}

Das ist es. Wenn Sie eine WonCheckBox in Ihre Ansicht einfügen und setHeight () anwenden, hat das Kontrollkästchen die richtige Größe.


0

Verwenden Sie diesen Code.

im Layout:

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/my_checkbox"  *** here
        android:checked="true"/>

Fügen Sie eine neue Zeichnungsdatei hinzu: my_checkbox.xml

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

<item
    android:state_checked="false"
    android:drawable="@drawable/checkbox_off_background"/>

<item
    android:state_checked="true"
    android:drawable="@drawable/checkbox_on_background"/>

und Ende erstellen 2 zeichnbar:

checkbox_off_background.xml

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

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"   *** your size
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_off_background"/>

und auch checkbox_on_background.xml

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

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_on_background"/>


0

Angenommen, Ihre ursprüngliche XML ist:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@drawable/tick_img" />
    <item android:state_checked="false"
        android:drawable="@drawable/untick_img" />
</selector>

Entfernen android:button="@drawable/xml_above"Sie dann einfach die XML-Datei in Ihrem Kontrollkästchen und skalieren Sie programmierbar in Java (verkleinern Sie die 150Größe auf den gewünschten dp):

CheckBox tickRememberPasswd = findViewById(R.id.remember_tick);

//custom selector size
Drawable drawableTick = ContextCompat.getDrawable(this, R.drawable.tick_img);
Drawable drawableUntick = ContextCompat.getDrawable(this, R.drawable.untick_img);
Bitmap bitmapTick = null;
if (drawableTick != null && drawableUntick != null) {
    int desiredPixels = Math.round(convertDpToPixel(150, this));

    bitmapTick = ((BitmapDrawable) drawableTick).getBitmap();
    Drawable dTick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapTick, desiredPixels, desiredPixels, true));

    Bitmap bitmapUntick = ((BitmapDrawable) drawableUntick).getBitmap();
    Drawable dUntick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapUntick, desiredPixels, desiredPixels, true));

    final StateListDrawable statesTick = new StateListDrawable();
    statesTick.addState(new int[] {android.R.attr.state_checked},
            dTick);
    statesTick.addState(new int[] { }, //else state_checked false
            dUntick);
    tickRememberPasswd.setButtonDrawable(statesTick);
}

die convertDpToPixelMethode:

public static float convertDpToPixel(float dp, Context context) {
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return px;
}

0

Ich konnte keine relevante Antwort für meine Anforderung finden, die ich herausgefunden habe. Diese Antwort bezieht sich also auf das Kontrollkästchen mit dem folgenden Text, bei dem Sie die Größe des Kontrollkästchens zum Zeichnen und des Textes separat ändern möchten.

Geben Sie hier die Bildbeschreibung ein

Sie benötigen zwei PNGs, cb_checked.png und cb_unchechecked.png, die Sie zum zeichnbaren Ordner hinzufügen

Erstellen Sie nun cb_bg_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cb_checked"
        android:height="22dp" <!-- This is the size of your checkbox -->
        android:width="22dp"  <!-- This is the size of your checkbox -->
        android:right="6dp"   <!-- This is the padding between cb and text -->
        tools:targetApi="m"
        tools:ignore="UnusedAttribute" />
</layer-list>

Und cb_bg_unchecked.xml

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
        <item android:drawable="@drawable/cb_unchechecked"
            android:height="22dp" <!-- This is the size of your checkbox -->
            android:width="22dp"  <!-- This is the size of your checkbox -->
            android:right="6dp"   <!-- This is the padding between cb and text -->
            tools:targetApi="m"
            tools:ignore="UnusedAttribute" />
    </layer-list>

Erstellen Sie dann eine Selektor-XML-Checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cb_bg_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/cb_bg_unchecked" android:state_checked="false"/>
</selector>

Definieren Sie nun Ihre layout.xml so

<CheckBox
  android:id="@+id/checkbox_with_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:checked="true"
  android:button="@drawable/checkbox"
  android:text="This is text"
  android:textColor="@color/white"
  android:textSize="14dp" /> <!-- Here you can resize text -->

-1

Wenn Sie dem Kontrollkästchen ein benutzerdefiniertes Bild hinzufügen möchten, setzen Sie die Schaltfläche auf null und fügen Sie dem zu lösenden Kontrollkästchen einfach Hintergrund hinzu

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.