Android: Jak zmienić rozmiar CheckBox?

Chciałbym, aby CheckBox był trochę mniejszy / większy, jak mogę to zrobić?

Musisz tylko ustawić powiązane elementy rysunkowe i ustawić je w polu wyboru:

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

Sztuczka polega na tym, jak ustawić drawables. Oto dobry poradnik na ten temat .

Począwszy od poziomu API 11 istnieje inne podejście:

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

Oto lepsze rozwiązanie, które nie przycina i / lub nie rozmywa elementu do rysowania, ale działa tylko wtedy, gdy pole wyboru nie zawiera samego tekstu (ale nadal możesz mieć tekst, jest to po prostu bardziej skomplikowane, patrz na końcu).

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

Wynik:

Jakie rozwiązanie z poprzedniej scaleXi scaleYwyglądało:

Możesz mieć tekstowe pole wyboru, dodając TextViewobok niego i dodając odbiornik kliknięć w układzie nadrzędnym, a następnie programowo uruchamiając to pole wyboru.

Cóż, znalazłem wiele odpowiedzi, ale działają dobrze bez tekstu, gdy wymagamy tekstu również z polem wyboru, jak w moim interfejsie użytkownika

Tutaj, zgodnie z moim wymaganiem interfejsu użytkownika, nie mogę zwiększyć TextSize, więc inną opcją, którą wypróbowałem, jest scaleX i scaleY (zaznacz pole wyboru) oraz niestandardowy selektor xml z obrazami .png (powoduje to również problem z innym rozmiarem ekranu)

Ale mamy na to inne rozwiązanie, czyli Vector Drawable

Zrób to w 3 krokach.

Krok 1: Skopiuj te trzy grafiki wektorowe do folderu do rysowania

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

( Uwaga, jeśli pracujesz z Android Studio, możesz również dodać stamtąd te Vector Drawable, kliknij prawym przyciskiem myszy folder do rysowania, a następnie New / Vector Asset, a następnie wybierz te do rysowania stamtąd )

Krok 2: Utwórz selektor XML dla check_box

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>

Krok 3: Ustaw to do rysowania w polu wyboru

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

Teraz wygląda na to:

Możesz zmienić jego szerokość i wysokość lub viewportHeight i viewportWidth oraz fillColor również

Mam nadzieję, że to pomoże!

używam

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

aby dostosować rozmiar pola wyboru

następnie ustawiam marginesy w ten sposób

android:layout_marginLeft="-10dp"

aby dostosować położenie tego pola wyboru.

Oto co zrobiłem, pierwszy zestaw:

android:button="@null"

a także ustawić

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

następnie w swoim kodzie Java:

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

U mnie działa i mam nadzieję, że u Ciebie zadziała!

AKTUALIZACJA : działa tylko od API 17 ...

Aby dodać do innych znakomitych odpowiedzi już udzielonych, możesz ustawić pole wyboru tak małe, jak pozwala na to rozmiar tekstu.

Zgodnie z moją odpowiedzią na to pytanie: - jak możemy zmniejszyć rozmiar checkboxa, proszę o pomysł

CheckBox wywodzi swoją wysokość z TEKSTU oraz z obrazu.

Ustaw te właściwości w swoim XML:

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

Oczywiście działa to tylko wtedy, gdy nie chcesz żadnego tekstu (działało dla mnie).

Bez tych zmian CheckBoxdawało mi to duży margines wokół mojego wizerunku, o czym wspomniał Joe

Możesz wypróbować następujące rozwiązanie, aby zmienić rozmiar custom checkbox, ustawiając następujące właściwości Checkboxw pliku układu. Pracował dla mnie

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

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

dodaj następujące wiersze do pliku do rysowania

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

Znalazłem sposób na zrobienie tego bez tworzenia własnych obrazów. Innymi słowy, obraz systemu jest skalowany. Nie udaję, że rozwiązanie jest idealne; jeśli ktoś zna sposób na skrócenie niektórych kroków, z chęcią się dowiem.

Najpierw umieściłem następujące elementy w głównej klasie działań projektu (WonActivity). To pochodzi bezpośrednio ze Stack Overflow - dziękuję wam !

/** 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);
}

Po drugie, stworzyłem klasę, aby „skalować elementy do rysowania”. Proszę zauważyć, że różni się on całkowicie od standardowego ScaleDrawable.

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

Na koniec zdefiniowałem klasę checkbox.

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

Otóż ​​to. Jeśli umieścisz WonCheckBox w swoim widoku i zastosujesz setHeight (), obraz pola wyboru będzie miał właściwy rozmiar.

użyj tego kodu.

w układzie:

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

dodaj nowy do rysowania: 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"/>

i na końcu utwórz 2 do rysowania:

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

a także 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"/>

Załóżmy, że oryginalny plik XML to:

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

następnie po prostu usuń android:button="@drawable/xml_above"w polu wyboru xml i wykonaj skalowanie z możliwością rysowania programowo w java (zmniejsz 150duży rozmiar do żądanego 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);
}

convertDpToPixelsposób:

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

Nie mogłem znaleźć odpowiedniej odpowiedzi na moje wymaganie, które rozgryzłem. Tak więc ta odpowiedź dotyczy pola wyboru z tekstem jak poniżej, w którym chcesz zmienić rozmiar pola wyboru do rysowania i tekstu oddzielnie.

Potrzebujesz dwóch plików PNG cb_checked.png i cb_unchechecked.png, aby dodać je do folderu do rysowania

Teraz utwórz 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>

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

Następnie utwórz 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>

Teraz zdefiniuj go jako swój layout.xml w ten sposób

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

Jeśli chcesz dodać niestandardowy obraz do pola wyboru, ustaw przycisk na null i po prostu dodaj tło do pola wyboru, które jest rozwiązane

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>