Android: Bagaimana cara mengubah ukuran Kotak Centang?

93

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

android  checkbox 
— alex2k8.dll
sumber

Jawaban:

57

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 .

— moraes
sumber
11
Ingatlah bahwa perangkat yang berbeda mungkin telah memasang tema khusus. Jika Anda menyesuaikan ukuran dengan menempatkan gambar kustom Anda sendiri, pastikan Anda mengganti setiap kotak centang di aplikasi (meskipun tidak ada perubahan ukuran) atau Anda mungkin berakhir dengan campuran gaya pada perangkat tertentu.
— DougW
Tautan rusak
— Marvin
145

Dimulai dengan API Level 11, ada pendekatan lain:

<CheckBox
    ...
    android:scaleX="0.70"
    android:scaleY="0.70"
/>
— alex2k8.dll
sumber
5
Teknik ini juga akan menskalakan label teks. Untuk mengimbangi ini, saya menyesuaikan ukuran teks sebagai berikut checkBox.TextSize = (int) (TEXT_SIZE / SCALE_FACTOR);
— samis
5
Jika saya melakukan ini untuk meningkatkan, misalnya menskalakannya menjadi "2.0" maka itu menjadi lebih besar, tetapi gambarnya terpotong, saya melihat bagian kanan kotak centang dan bagian kiri teks. Ada cara lain?
— Al Lelopath
4
bagus, itu masih membutuhkan ruang yang sama. Untuk mengatasi itu saya menggunakan margin -ve, seperti: android: layout_marginLeft = "- 10dp"
— M. Usman Khan
Saya mungkin tidak akan ditampilkan dalam pratinjau IDE, tetapi
— Kotak Centang
Ditunjukkan dalam tampilan Desain AS untuk saya. Perbaikan sederhana untuk sesuatu yang seharusnya tidak perlu diperbaiki. Saya pikir API atau perangkat mempengaruhi. menggunakan perangkat Gennymotion di API 22 tampaknya 0,8 adalah Y tertinggi (LinearLayout horizontal), sementara el murahan, Tablet Onix tidak memotong pada 1.
— MikeT
100

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.

— Antoine Bolvy
sumber
2
Menggunakan latar belakang tidak berfungsi jika kotak centang Anda berisi teks.
— Zach Green
@AchGreen ya memang. Tidak memikirkan kemungkinan bahwa itu tidak akan berfungsi jika kotak centang memiliki teks, milik saya tidak. Akan memperbarui jawabannya
— Antoine Bolvy
5
Ini adalah jawaban yang jauh lebih baik daripada jawaban yang diterima.
— vtlinh
di 160dp terlihat seperti berbintik. Tampaknya itu pada resolusi yang terlalu rendah
— Gianluca Demarinis
bagaimana cara mengatur warna untuk kotak centang seperti itu?
— YTerle
16

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

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:

masukkan deskripsi gambar di sini

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

Semoga bisa membantu!

— Ajeet Choudhary
sumber
2
Dalam kasus saya, saya harus mengatur android:button="@null"dan android:background="@drawable/check_box_selector"membuatnya menyesuaikan ukuran kotak centang.
— Artur Szymański
pendekatan ini mematahkan paddings
— Oleh Liskovych
9

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.

— Richard
sumber
Bro, meskipun ukurannya turun - margin tidak berfungsi dalam kasus saya. Gambar kotak centang saya berukuran 173 x 93 - ukuran kotak centang masih menempati ruang itu. Antoine Bolvy adalah solusi yang lebih fleksibel menurut saya.
— Alexey Shevelyov
6

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!

— Chris.Zou
sumber
4

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

— Richard Le Mesurier
sumber
3

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>
— Sagar
sumber
0

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.

— pengguna1334767
sumber
0

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

— Ali Bagheri
sumber
0

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;
}
— Buah
sumber
0

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.

masukkan deskripsi gambar di sini

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 -->
— Vinayak Bevinakatti
sumber
0

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"/>
— jay patoliya
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.