Android: चेकबॉक्स का आकार कैसे बदलें?


92

मैं चेकबॉक्स को थोड़ा छोटा / बड़ा करना चाहूंगा, मैं यह कैसे कर सकता हूं?

जवाबों:


57

आपको बस संबंधित ड्रॉबल्स को सेट करके उन्हें चेकबॉक्स में सेट करना होगा:

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

ड्रॉ को सेट करने के तरीके पर चाल है। यहाँ इस बारे में एक अच्छा ट्यूटोरियल है


11
ध्यान रखें कि विभिन्न उपकरणों में कस्टम थीम स्थापित हो सकते हैं। यदि आप अपनी स्वयं की कस्टम छवि रखकर आकार को समायोजित करते हैं, तो सुनिश्चित करें कि आप ऐप में प्रत्येक चेकबॉक्स को बदल दें (भले ही कोई आकार परिवर्तन न हो) या फिर आप कुछ उपकरणों पर शैलियों के मिश्रण के साथ समाप्त हो सकते हैं।
डग डब्लू

141

एपीआई स्तर 11 के साथ शुरू एक और दृष्टिकोण मौजूद है:

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

5
यह तकनीक टेक्स्ट लेबल को भी मापेगी। इसकी भरपाई करने के लिए, मैंने टेक्स्ट साइज़ को चेकबॉक्स के अनुसार समायोजित किया। टेक्स्ट का आकार = (इंट) (TEXT_SIZE / SCALE_FACTOR);
Samis

5
यदि मैं इसे बढ़ाने के लिए करता हूं, उदाहरण के लिए इसे "2.0" पर स्केल करता हूं, तो यह बड़ा हो जाता है, लेकिन छवि को क्लिप किया जाता है, मुझे चेकबॉक्स का दायां आधा और पाठ का बायां आधा दिखाई देता है। इसके आसपास कोई रास्ता?
अल लेलोपैथ

4
अच्छा है, यह अभी भी एक ही जगह लेता है। इसे हल करने के लिए मैंने -वी हाशिये का उपयोग किया, जैसे: android: layout_marginLeft = "- 10dp"
एम। उस्मान खान

मुझे शायद IDE के पूर्वावलोकन में नहीं दिखाया जाएगा, लेकिन चेकबॉक्स को रन टाइम में बढ़ाया जाएगा
Leo Droidcoder

मेरे लिए एएस डिजाइन दृश्य में शो। किसी ऐसी चीज के लिए साधारण फिक्स जिसमें किसी फिक्स की जरूरत न हो। मुझे लगता है कि एपीआई या डिवाइस प्रभावित करता है। एपीआई 22 पर Gennymotion डिवाइस का उपयोग करते हुए यह प्रतीत होता है कि 0.8 उच्चतम Y (क्षैतिज रैखिकलआउट) है, जबकि एल सस्तेो पर, ओनिक्स टैबलेट 1 पर क्लिप नहीं करता है
माइक टी

95

यहां एक बेहतर समाधान है जो ड्रॉ करने योग्य क्लिप और / या धुंधला नहीं करता है, लेकिन केवल तभी काम करता है जब चेकबॉक्स में स्वयं पाठ नहीं होता है (लेकिन आप अभी भी पाठ कर सकते हैं, यह सिर्फ अधिक जटिल है, अंत में देखें)।

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

परिणाम:

क्या पिछले समाधान के साथ scaleXऔर scaleYजैसा दिखता था:

आपके TextViewपास बगल में जोड़कर और पैरेंट लेआउट पर एक क्लिक श्रोता जोड़कर एक टेक्स्ट चेकबॉक्स हो सकता है , फिर चेकबॉक्स को प्रोग्रामेटिक रूप से ट्रिगर किया जा सकता है।


2
यदि आपके चेकबॉक्स में टेक्स्ट है तो बैकग्राउंड का उपयोग करना काम नहीं करता है।
जैच ग्रीन

@ZachGreen वास्तव में हाँ। संभावना के बारे में नहीं सोचा था कि यह काम नहीं करेगा अगर चेकबॉक्स में पाठ था, मेरा नहीं था। उत्तर को अपडेट करेगा
एंटोनी बोल्वी

3
यह स्वीकार किए जाते हैं की तुलना में एक बेहतर जवाब है।
vtlinh

160dp पर दानेदार दिखता है। ऐसा लगता है कि बहुत कम संकल्प पर है
Gianluca Demarinis

मैं ऐसे चेकबॉक्स के लिए टिंट कैसे सेट करूं?
यरले

16

वैसे मुझे कई उत्तर मिले हैं, लेकिन वे पाठ के बिना ठीक काम करते हैं जब हमें पाठ की आवश्यकता होती है जैसे कि मेरे यूआई में चेकबॉक्स के साथयहां छवि विवरण दर्ज करें

यहाँ मेरी UI आवश्यकता के अनुसार मैं TextSize को नहीं बढ़ा सकता, इसलिए मैंने जो अन्य विकल्प आज़माया है वह है स्केल और स्केल (चेक बॉक्स को स्ट्रेच करें) और .Png Images के साथ कस्टम xml चयनकर्ता (यह अलग स्क्रीन आकार के साथ समस्या भी पैदा कर रहा है)।

लेकिन हमारे पास इसके लिए एक और उपाय है, वह है वेक्टर ड्राएबल

इसे 3 चरणों में करें।

चरण 1: अपने ड्रॉएबल फ़ोल्डर में इन तीन वेक्टर ड्रा करने योग्य को कॉपी करें

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>

( ध्यान दें कि अगर आप एंड्रॉइड स्टूडियो के साथ काम कर रहे हैं, तो आप इन वेक्टर ड्रॉबल को वहां से भी जोड़ सकते हैं, अपने ड्रा करने योग्य फ़ोल्डर पर राइट क्लिक करें फिर न्यू / वेक्टर एसेट, फिर वहां से इन ड्रॉएबल का चयन करें )

चरण 2: चेक_बॉक्स के लिए XML चयनकर्ता बनाएं

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>

चरण 3: चेक बॉक्स में उस ड्रा करने योग्य सेट करें

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

अब इसकी तरह:

यहां छवि विवरण दर्ज करें


आप इसकी चौड़ाई और ऊँचाई या व्यूपोर्टहाइट और व्यूपोर्टवेथ और फिलकोलर भी बदल सकते हैं


आशा है कि यह मदद करेगा!


2
मेरे मामले में मुझे सेट करना था android:button="@null"और android:background="@drawable/check_box_selector"इसे चेकबॉक्स के आकार को समायोजित करना था।
Artur Szymański

यह दृष्टिकोण
पैडिंग्स को

9

मैं उपयोग करता हूं

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

चेकबॉक्स के आकार का अन्याय करना

फिर मैंने इस तरह हाशिये पर सेट किया

android:layout_marginLeft="-10dp"

चेकबॉक्स के ths स्थान को समायोजित करने के लिए।


भाई, हालांकि यह इसे आकार देता है - मार्जिन मेरे मामले में काम नहीं करता है। मेरी चेकबॉक्स छवियां 173 x 93 हैं - चेकबॉक्स का आकार अभी भी उस स्थान पर है। एंटोनी बोल्वी मेरी राय का अधिक लचीला समाधान है।
अलेक्सी श्वेलेव

6

यहाँ मैंने जो किया था, पहला सेट:

android:button="@null"

और भी सेट

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

तब आपके जावा कोड में:

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

यह मेरे लिए काम करता है, और उम्मीद है कि यह आपके लिए काम करेगा!


4

अद्यतन : यह केवल एपीआई 17 से आगे काम करता है ...


पहले से दिए गए अन्य शानदार उत्तरों को जोड़ने के लिए, आप केवल चेकबॉक्स को छोटा कर सकते हैं, जैसा कि पाठ आकार की अनुमति देता है।

इस प्रश्न पर मेरे उत्तर के अनुसार: - हम चेकबॉक्स का आकार कैसे कम कर सकते हैं कृपया मुझे एक विचार दें


CheckBox TEXT के साथ-साथ छवि से इसकी ऊंचाई प्राप्त करता है।

इन गुणों को अपने XML में सेट करें:

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

बेशक यह केवल तभी काम करता है जब आप कोई पाठ नहीं चाहते हैं (मेरे लिए काम किया है)।

इन परिवर्तनों के बिना, CheckBoxमुझे अपनी छवि के आसपास एक बड़ा अंतर दे रहा था, जैसा कि जो ने उल्लेख किया है


1

आप अपनी लेआउट फ़ाइल में custom checkboxनिम्नलिखित गुणों को सेट करके आकार बदलने के लिए निम्न समाधान का प्रयास कर सकते हैं Checkbox। मेरे लिए काम किया

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

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

ड्रा करने योग्य फ़ाइल में निम्न पंक्तियाँ जोड़ें

<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

मुझे आपकी स्वयं की छवियां बनाए बिना इसे करने का एक तरीका मिला। दूसरे शब्दों में, सिस्टम की छवि को छोटा किया जा रहा है। मैं यह ढोंग नहीं करता कि समाधान सही है; अगर किसी को कुछ चरणों को छोटा करने का तरीका पता है, तो मुझे यह पता करने में खुशी होगी कि कैसे।

सबसे पहले, मैंने परियोजना के मुख्य गतिविधि वर्ग (वोनएक्टिविटी) में निम्नलिखित डाला। यह सीधे स्टैक ओवरफ्लो से लिया गया था - धन्यवाद दोस्तों !

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

दूसरा, मैंने "स्केल करने योग्य" श्रेणी बनाई। कृपया ध्यान दें कि यह मानक 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);
  }
}

अंत में, मैंने एक चेकबॉक्स क्लास को परिभाषित किया।

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

बस। यदि आप अपने दृश्य में एक वोनचेकबॉक्स डालते हैं और सेटहाइट () लागू करते हैं, तो चेक-बॉक्स छवि सही आकार की होगी।


0

इस कोड का उपयोग करें।

लेआउट में:

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

एक नया योग्‍य जोड़ें: 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"/>

और अंत बनाने के लिए 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"/>

और भी, 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

मान लें कि आपका मूल xml है:

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

फिर बस android:button="@drawable/xml_above"अपने चेकबॉक्स xml में हटा दें , और जावा में प्रोग्रामेटिक रूप से ड्रॉबल स्केलिंग करें ( 150बड़े आकार को अपने इच्छित डीपी में घटाएं ):

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

convertDpToPixelविधि:

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

मुझे अपनी आवश्यकता के लिए प्रासंगिक उत्तर नहीं मिला, जो मुझे लगा। तो, यह उत्तर नीचे दिए गए पाठ जैसे चेकबॉक्स के लिए है, जहां आप चेकबॉक्स को अलग-अलग और पाठ को आकार देना चाहते हैं।

यहां छवि विवरण दर्ज करें

आपको दो PNGs चाहिए cb_checked.png और cb_unchechecked.png उन्हें ड्रा करने योग्य फ़ोल्डर में जोड़ें

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

और, 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>

फिर एक चयनकर्ता XML चेकबॉक्स। 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>

अब इसे इस तरह से अपने Layout.xml में परिभाषित करें

<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

यदि आप चेकबॉक्स में एक कस्टम छवि जोड़ना चाहते हैं तो बटन को शून्य पर सेट करें और बैकग्राउंड को चेकबॉक्स में जोड़ें जो कि हल हो

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.