Bagaimana cara menampilkan kotak centang android di sisi kanan?

146

Secara default kotak centang android menunjukkan teks di sisi kanan dan kotak centang di kiri
saya ingin menampilkan kotak centang di sisi kanan dengan teks di sebelah kiri

bagaimana saya mencapai ini?

android layout checkbox UMAR-MOBITSOLUSI
sumber

Jawaban:

41

Saya tidak bisa memikirkan cara dengan penataan, tetapi Anda bisa mengatur teks kotak centang menjadi kosong, dan meletakkan TextView di sebelah kiri kotak centang dengan teks yang Anda inginkan.

xil3
sumber
saya punya pertanyaan tentang ini: ketika Anda mengklik tata letak, itu harus menunjukkan (untuk waktu yang sangat singkat) bahwa seluruh baris dipilih. bagaimana Anda melakukan itu dan mensimulasikan bahwa itu adalah efek asli?
pengembang android
sudahlah - saya telah mengatur pemilih ke tata letak dan sekarang tidak apa-apa.
pengembang android
@androiddeveloper, bisakah Anda memposting solusi pemilih?
Fouad Wahabi
1
@FouadWahabi Anda dapat membuat xml drawable di "res / drawable", seperti: stackoverflow.com/a/2038086 , dan mengatur latar belakang tampilan / tata letak menjadi file yang dapat digambar ini. Anda mungkin perlu membuatnya diklik juga. Saya pikir saya juga melihat kuliah Google IO tentang hal itu. tidak yakin. sangat merekomendasikan memeriksa videonya.
pengembang android
1
@FouadWahabi Baiklah Anda dapat memperluas kelas tata letak yang Anda pilih, dan menambahkan logika ini sendiri. Anda dapat membahas semua tampilan anak dan mengubah statusnya. Anda dapat menggunakan tautan itu untuk membantu Anda: developer.android.com/samples/CustomChoiceList/src/… , antoine-merle.com/blog/2013/07/17/… . tambahkan clickListener, dan alihkan tanda centang, dan di dalam "setChecked" atur keadaan tampilan anak sesuai tetapi hanya jika mereka menerapkan Checkable.
pengembang android
362

Saya pikir sudah terlambat untuk menjawab pertanyaan ini, tetapi sebenarnya ada cara untuk mencapai tujuan Anda. Anda hanya perlu menambahkan baris berikut ke kotak centang Anda:

android:button="@null"
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"

Anda juga dapat menggunakan drawable yang dapat disesuaikan untuk kotak centang.

Dan untuk radioTombol:

android:button="@null"
android:drawableRight="@android:drawable/btn_radio"

Dan jika Anda ingin melakukannya secara terprogram:

Tetapkan tata letak dan beri nama RightCheckBox dan salin baris berikut:

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    android:text="hello"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:button="@null"
    android:drawableRight="?android:attr/listChoiceIndicatorMultiple"/>

dan ketika Anda perlu menambahkannya secara terprogram Anda hanya perlu mengembangnya ke Kotak centang dan menambahkannya ke tampilan root.

CheckBox cb = (CheckBox)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(R.layout.check_right_checkbox,null);
rootView.addView(cb);
Hazhir
sumber
5
Dan untuk kotak centang, Anda dapat menggunakan android:drawableRight="?android:attr/listChoiceIndicatorMultiple". Saya pikir ini adalah solusi terbaik untuk kotak centang di sebelah kanan yang saya temukan sejauh ini.
Pierre-Luc Paour
7
Harap dicatat bahwa Android 5.0 SDK akan menampilkan peringatan tentang perangkat RTL. Untuk membuatnya pergi, cukup tambahkan android:drawableEnddi samping android:drawableRight(dengan nilai yang sama).
Quentin S.
6
Solusi ini bekerja cukup baik untuk menyelesaikan masalah. Pada Android 5. +, namun, sementara widget standar berisi riaknya yang dapat digambar ke area kecil di sekitar cek, widget yang dimodifikasi ini memungkinkan riak untuk meluas melampaui batas widget itu sendiri. Jika menggunakan teknik ini, saya sarankan untuk mengatur latar belakang menggunakan riak yang dapat digambar dengan topeng persegi panjang.
Justin Pollard
2
Android menyediakan banyak objek tampilan, yang semuanya dapat diubah untuk menggambar drawable android atau drawable custom. Jika Anda ingin efek riak (5.0+) pada objek, cukup setel latar belakangnya menjadi drawable XML yang memungkinkan riak. Tautan berikut menunjukkan beberapa objek sampel tampilan, CheckedTextView, CheckBox, ToggleButton, dll dengan set drwable yang tepat. landenlabs.com/android/uicomponents/uicomponents.html#checkbox
LanDenLabs
6
Ini menunjukkan riak bundar di tengah teks, tetapi tidak di drawable kanan, sehingga terlihat jelek pada versi Android modern
Leo Droidcoder
122

Anda dapat melakukan

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center"//or "center_vertical" for center text
android:layoutDirection="rtl"
android:text="hello" />

Mengikuti garis sudah cukup 

android:layoutDirection="rtl"
Mahesh Lad
sumber
3
Hacky dan elegan pada saat bersamaan. Bersulang!
Roman Samoilenko
Trik yang bagus! jangan lupa gravitasi: android: gravity = "right | center" untuk mendapatkan efek mirroring yang diharapkan.
Tobliug
3
ini bukan cara yang benar, karena jika perangkat Anda menggunakan bahasa RTL, itu tidak akan terlihat benar.
Martin Marconcini
cb.setLayoutDirection (Kotak Centang.LAYOUT_DIRECTION_RTL);
paakjis
1
Perlu diatur android:gravity="end|center_vertical"untuk membuat tampilan teks di sebelah kiri karena tata letak dimulai sekarang.
Serge
52

Anda dapat menambahkan android:layoutDirection="rtl"tetapi itu hanya tersedia dengan API 17.

Berga
sumber
19

Cukup salin ini:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your text:"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            />
    </LinearLayout>

Selamat codding! :)

Ivo Stoyanov
sumber
14

Teks kotak centang mungkin tidak selaras dengan kiri

android:button="@null"
android:drawableRight="@android:drawable/btn_radio"

di beberapa perangkat. Dapat menggunakan CheckedTextView sebagai pengganti untuk menghindari masalah,

<CheckedTextView
    ...
    android:checkMark="@android:drawable/btn_radio" />

dan tautan ini akan membantu: Sejajarkan teks ke kiri, centang kotak kanan

cfh008
sumber
Itu adalah tombol radio. Bagaimana dengan kotak centang untuk materi?
Monica Aspiras Labbao
1
Untuk penggunaan kotak centangandroid:checkMark="?android:attr/listChoiceIndicatorMultiple"
Philipp
Untuk penggunaan radiobuttonandroid:checkMark="?android:attr/listChoiceIndicatorSingle"
Philipp
13 
    <android.support.v7.widget.AppCompatCheckBox
  android:id="@+id/checkBox"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="10dp"
  android:layoutDirection="rtl"
  android:text="text" />`
Kerim FIRAT
sumber
Itu juga membuat teks rata, jadi jika tampilan kotak centang cocok dengan lebar induk, itu akan terlihat aneh.
David Rektor
6

Seperti yang disarankan oleh @The Berga Anda dapat menambahkan android:layoutDirection="rtl"tetapi itu hanya tersedia dengan API 17.
untuk implementasi dinamis, begini saja

chkBox.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
Sri Kanth
sumber
3

selanjutnya dari Hazhir imput, untuk masalah ini perlu menyuntikkan properti itu di kotak centang xml konfigurasi android: paddingLeft = "0dp", ini untuk menghindari ruang kosong di sisi kiri kotak centang.

zeusboy
sumber
3

Menambahkan jawaban lain untuk pertanyaan ini yang menggunakan CheckedTextView Jika ada yang mencoba melakukannya secara terprogram. Ini juga memiliki opsi untuk menggunakan gambar khusus untuk kotak centang. Dan bisa dilakukan dalam satu tampilan

final CheckedTextView checkBox = new CheckedTextView(getApplicationContext());
    checkBox.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    checkBox.setId(1);
    checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_off_background);
    checkBox.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (checkBox.isChecked()){
                checkBox.setChecked(false);
                checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_off_background);
            }else{
                checkBox.setChecked(true);
                checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_on_background);
            }
        }
    });
    checkBox.setTextColor(Color.BLACK);
    checkBox.setGravity(Gravity.LEFT);
    checkBox.setText("hi");

Dari XML jika Anda ingin memulai - 

<CheckedTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkMark="@android:drawable/checkbox_off_background"
        android:checked="false"
        android:text="Hi from xml"/>
Kapil G
sumber
0

Tautan berikut menunjukkan cara merender beberapa objek tampilan Android Standar dengan kotak centang animasi di sebelah kanan dengan mengatur drawable yang tepat.

Atur latar belakang untuk mendapatkan efek riak.

[tautan ke situs web dengan contoh kotak centang di sisi kanan dan kiri.] [1] http://landenlabs.com/android/uicomponents/uicomponents.html#checkbox

         <Button
            android:id="@+id/p2Button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="Button"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/p2Button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="AppCompatButton"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <TextView
            android:id="@+id/p2TextView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:hapticFeedbackEnabled="true"

            android:text="TextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/p2TextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:hapticFeedbackEnabled="true"

            android:text="AppCompatTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/white" />

        <CheckBox
            android:id="@+id/p2Checkbox1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:button="@null"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="CheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatCheckBox
            android:id="@+id/p2Checkbox2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:button="@null"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="AppCompatCheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatCheckedTextView
            android:id="@+id/p2Checkbox3"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checkMark="@drawable/checkline"
            android:checked="true"
            android:gravity="left|center_vertical"
            android:text="AppCompatCheckedTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <!--  android:checkMark="?android:attr/listChoiceIndicatorMultiple" -->
        <CheckedTextView
            android:id="@+id/p2Checkbox4"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checkMark="@drawable/checkline"
            android:checked="true"
            android:gravity="left|center_vertical"
            android:text="CheckedTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <CheckBox
            android:id="@+id/p2Checkbox5"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:gravity="center_vertical|end"
            android:text="CheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/white" />


        <ToggleButton
            android:id="@+id/p2ToggleButton1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="center_vertical|left"
            android:textAllCaps="false"
            android:textColor="@android:color/white"

            android:textOff="ToggleButtonOff"

            android:textOn="ToggleButtonOn"
            android:textSize="@dimen/buttonTextSize" />

        <ToggleButton
            android:id="@+id/p2ToggleButton2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:drawableRight="@drawable/btn_check_material_anim"
            android:gravity="center_vertical|left"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textOff="ToggleBtnnAnimOff"
            android:textOn="ToggleBtnnAnimOn"
            android:textSize="@dimen/buttonTextSize" />

Contoh checkline.xml (dalam drawable, lihat tautan untuk versi animasi di drawable-v21)

Contoh transparent_ripple.xml (dalam drawable-v21)

<!-- Limit ripple to view object, can also use shape such as oval -->
<item android:id="@android:id/mask" android:drawable="@android:color/white" />

<item>
    <selector xmlns:android="http://schemas.android.com/apk/res/android"
        android:enterFadeDuration="200"
        android:exitFadeDuration="200">

        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <solid android:color="#80c0c000" />
            </shape>
        </item>
    </selector>
</item>

Contoh transparent_ripple.xml (dalam drawable, sorot saja tidak ada riak yang tersedia 

<item android:state_pressed="true">
    <shape android:shape="rectangle">
        <solid android:color="#80c0c000" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

LanDenLabs
sumber
0

Jika tidak wajib untuk menggunakan, CheckBoxAnda bisa menggunakan Switchsaja. Sakelar menunjukkan teks di sisi kiri secara default.

Oliver Kranz
sumber
0

Anda dapat menggunakan ini juga,

<CheckBox
       android:layout_width="match_parent"     
       android:layout_height="@dimen/button_height_35"
       android:text="@string/english"
       android:checked="true"
       android:paddingEnd="@dimen/padding_5"
       android:paddingStart="@dimen/padding_5"
       android:layoutDirection="rtl"
       android:drawablePadding="@dimen/padding_5"
       android:drawableEnd="@drawable/ic_english"
       style="@style/TextStyleSemiBold"
       android:textSize="@dimen/text_15"
       android:button="@drawable/language_selector"/>
Tejas Kanani
sumber
Itu selalu kredit tambahan untuk memasukkan sedikit detail atau referensi untuk belajar lebih lanjut.
Jadikan
-1 
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/location_permissions"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@android:color/black" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <CheckBox
                android:id="@+id/location_permission_checkbox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="8dp"
                android:onClick="onLocationPermissionClicked" />

        </RelativeLayout>
    </LinearLayout>
FAHAD HAMMAD ALOTAIBI
sumber