Android: Bagaimana cara mengubah ukuran Kotak Centang?

Saya ingin membuat Kotak Centang sedikit lebih kecil / lebih besar, bagaimana cara melakukannya?

Anda hanya perlu menyetel drawable terkait dan menyetelnya di kotak centang:

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

Triknya adalah tentang cara menyetel drawable. Berikut tutorial bagus tentang ini .

Dimulai dengan API Level 11, ada pendekatan lain:

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

Berikut adalah solusi yang lebih baik yang tidak memotong dan / atau mengaburkan drawable, tetapi hanya berfungsi jika kotak centang tidak memiliki teks itu sendiri (tetapi Anda masih dapat memiliki teks, hanya lebih rumit, lihat di bagian akhir).

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

Hasil:

Apa solusi sebelumnya dengan scaleXdan scaleYseperti apa:

Anda dapat memiliki kotak centang teks dengan menambahkan TextViewdi sampingnya dan menambahkan pemroses klik pada tata letak induk, lalu memicu kotak centang secara terprogram.

Yah saya telah menemukan banyak jawaban, Tetapi mereka berfungsi dengan baik tanpa teks ketika kami memerlukan teks juga dengan kotak centang seperti di UI saya

Di sini sesuai persyaratan UI saya, saya tidak dapat meningkatkan TextSize sehingga opsi lain yang saya coba adalah scaleX dan scaleY (Beri centang pada kotak) dan pemilih xml kustom dengan Gambar .png (ini juga menimbulkan masalah dengan ukuran layar yang berbeda)

Tetapi kami memiliki solusi lain untuk itu, yaitu Vector Drawable

Lakukan dalam 3 langkah.

Langkah 1: Salin ketiga Vector Drawable ini ke folder drawable Anda

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>

( Perhatikan jika Anda bekerja dengan Android Studio, Anda juga dapat menambahkan Vector Drawable ini dari sana, Klik kanan pada folder drawable Anda lalu New / Vector Asset, lalu pilih drawable ini dari sana )

Langkah 2: Buat pemilih XML untuk 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>

Langkah 3: Setel kotak centang itu ke dalam

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

Sekarang seperti:

Anda dapat mengubah lebar dan tingginya atau viewportHeight dan viewportWidth dan juga fillColor

Semoga bisa membantu!

saya menggunakan

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

untuk menyesuaikan ukuran kotak centang

lalu saya atur margin seperti ini

android:layout_marginLeft="-10dp"

untuk menyesuaikan lokasi kotak centang.

Inilah yang saya lakukan, set pertama:

android:button="@null"

dan juga mengatur

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

lalu di kode Java Anda:

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

Ini berhasil untuk saya, dan semoga berhasil untuk Anda!

UPDATE : ini hanya berfungsi dari API 17 dan seterusnya ...

Untuk menambah jawaban cemerlang lainnya yang telah diberikan, Anda hanya dapat membuat kotak centang sekecil yang diizinkan ukuran teks.

Sesuai jawaban saya atas pertanyaan ini: - bagaimana kita bisa mengurangi ukuran kotak centang tolong beri saya ide

CheckBox mendapatkan ketinggiannya dari TEXT serta gambar.

Setel properti ini dalam XML Anda:

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

Tentu saja ini hanya berfungsi jika Anda tidak menginginkan teks (berhasil untuk saya).

Tanpa perubahan ini, CheckBoxitu memberi saya margin besar di sekitar gambar saya, seperti yang disebutkan oleh Joe

Anda dapat mencoba solusi berikut untuk mengubah ukuran custom checkboxdengan mengatur properti berikut ke Checkboxdalam file tata letak Anda. Bekerja untuk saya

android: scaleX = "0.8" android: scaleY = "0.8"

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

tambahkan baris berikut ke file drawable

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

Saya menemukan cara untuk melakukannya tanpa membuat gambar Anda sendiri. Dengan kata lain, citra sistem sedang diskalakan. Saya tidak berpura-pura bahwa solusinya sempurna; jika ada yang tahu cara mempersingkat beberapa langkah, saya akan dengan senang hati mengetahui caranya.

Pertama, saya meletakkan yang berikut ini di kelas aktivitas utama proyek (WonActivity). Ini diambil langsung dari Stack Overflow - terima kasih teman-teman !

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

Kedua, saya membuat kelas untuk "menskalakan drawable". Harap perhatikan bahwa ini sangat berbeda dari ScaleDrawable standar.

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

Akhirnya, saya mendefinisikan kelas kotak centang.

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

Itu dia. Jika Anda meletakkan WonCheckBox dalam tampilan Anda dan menerapkan setHeight (), gambar kotak centang akan memiliki ukuran yang tepat.

gunakan kode ini.

dalam tata letak:

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

tambahkan drawable baru: 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"/>

dan akhirnya buat 2 drawable:

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

dan juga, 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"/>

Asumsikan xml asli Anda adalah:

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

kemudian cukup hapus android:button="@drawable/xml_above"di kotak centang xml Anda, dan lakukan penskalaan drawable secara terprogram di java (kurangi 150ukuran besar ke dp yang Anda inginkan):

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

yang convertDpToPixelmetode:

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

Saya tidak dapat menemukan jawaban yang relevan untuk kebutuhan saya yang saya temukan. Jadi, jawaban ini untuk kotak centang dengan teks seperti di bawah ini di mana Anda ingin mengubah ukuran kotak centang drawable dan teks secara terpisah.

Anda membutuhkan dua PNG cb_checked.png dan cb_unchechecked.png menambahkannya ke folder drawable

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

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

Kemudian buat kotak centang XML pemilih.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>

Sekarang tentukan layout.xml Anda seperti ini

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

Jika Anda ingin menambahkan gambar khusus ke kotak centang kemudian setel tombol ke nol dan cukup tambahkan latar belakang ke kotak centang yang diselesaikan

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