Android RadioButton с значком и выравниванием по центру

Можно ли создать горизонтальную RadioGroup с RadioButtons, где каждая кнопка включает переключатель, значок и текст, и эти три элемента выровнены по центру друг друга по вертикали?

Я пытался установить gravity и layout_gravity на RadioGroup и RadioButtons, а также layout_weight на каждую кнопку и т. д., но безрезультатно. ПОЧЕМУ это так сложно на Android?

^ Я хочу, чтобы переключатели располагались по центру значков и заголовков.

Мне нужно, чтобы можно было выбрать всю область, поэтому мне бы очень хотелось установить значок RadioButton и текстовые значения, а не добавлять отдельные ImageViews в пользовательский интерфейс. Я хочу использовать RadioGroup, потому что я использую это в пользовательском элементе Preference, поэтому выбор и постоянство обрабатываются для меня хорошо.

Вот XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/widget_frame"
    style="@style/AppTheme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:theme="@style/AppTheme"
    tools:context=".settings.homeScreenPreference">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="@string/set_home_screen" />

    <!--Settings icon-->
    <ImageView
        android:id="@+id/settingsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/settings_icon_description"
        android:drawable="@drawable/ic_settings"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/settingsTitle"
        app:layout_constraintEnd_toStartOf="@+id/diidsIcon"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_settings" />

    <!--Cards icon-->
    <ImageView
        android:id="@+id/diidsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/my_cards_icon_description"
        android:drawable="@drawable/ic_my_cards"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerIcon"
        app:layout_constraintStart_toEndOf="@+id/settingsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_my_cards" />

    <!--Scanner icon-->
    <ImageView
        android:id="@+id/scannerIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/scanner_icon_description"
        android:drawable="@drawable/ic_scan_qr"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_scan_qr" />

    <!--Settings title-->
    <TextView
        android:id="@+id/settingsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/settings"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/diidsTitle"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/settingsIcon" />

    <!--Cards title-->
    <TextView
        android:id="@+id/diidsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/my_cards"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerTitle"
        app:layout_constraintStart_toEndOf="@+id/settingsTitle"
        app:layout_constraintTop_toBottomOf="@id/diidsIcon" />

    <!--Scanner title-->
    <TextView
        android:id="@+id/scannerTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/scan_code"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsTitle"
        app:layout_constraintTop_toBottomOf="@id/scannerIcon" />

    <!--Radio group-->
    <RadioGroup
        android:id="@+id/home_screen_radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/settingsTitle">

        <!--Settings radio-->
        <RadioButton
            android:id="@+id/settingsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Cards radio-->
        <RadioButton
            android:id="@+id/diidsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Scanner radio-->
        <RadioButton
            android:id="@+id/scannerButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent"/>
    </RadioGroup>
</android.support.constraint.ConstraintLayout>

jungledev 17.12.2018 источник

Ответы (2)

arrow_upward
2
arrow_downward

Используйте CheckedTextView вместо RadioButton И вы получите это

XML макета

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

 <CheckedTextView
    android:id="@+id/one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Settings"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/two"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="My DIID"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/three"
    app:layout_constraintStart_toEndOf="@+id/one"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/three"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Scan Code"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/two"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Сделайте 2 доступными для рисования и добавьте вот так: Now Background Drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/ic_android_black_24dp" 
   android:state_checked="false" />

   <item android:drawable="@drawable/ic_android_green_24dp" 
   android:state_checked="true" 
/>
</selector>

Теперь основная активность

public class MainActivity extends AppCompatActivity {
CheckedTextView one,two,three;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    one = findViewById(R.id.one);
    two = findViewById(R.id.two);
    three = findViewById(R.id.three);
    mDrawable = getResources().getDrawable(R.drawable.ic_android_black_24dp);
    one.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (one.isChecked()){
                one.setTextColor(getResources().getColor(R.color.black));
                one.setChecked(false);
            }else{
                one.setTextColor(getResources().getColor(R.color.colorPrimary));
                one.setChecked(true);
            }
        }
    });
    two.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (two.isChecked()){
                two.setTextColor(getResources().getColor(R.color.black));
                two.setChecked(false);
            }else{
                two.setTextColor(getResources().getColor(R.color.colorPrimary));
                two.setChecked(true);
            }
        }
    });
    three.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (three.isChecked()){
                three.setTextColor(getResources().getColor(R.color.black));
                three.setChecked(false);
            }else{
                three.setTextColor(getResources().getColor(R.color.colorPrimary));
                three.setChecked(true);
            }
        }
    });
}
}

Tejas Soni 17.12.2018

comment

Я вижу, вы оставили мне два подробных ответа, и я их проверяю. Мне нужно иметь возможность настроить размер значка, и я еще не понял, как это сделать. Вот почему я еще не выбрал ни один из ваших ответов в качестве правильного решения. Я действительно хотел бы сохранить как можно больше стилей кода в XML, чтобы свести код .kt к минимуму. - jungledev; 18.12.2018

comment

Не проблема, если вам это нравится, используйте его, если есть что-то, что я могу сделать, спросите меня. - Tejas Soni; 19.12.2018

comment

Было бы здорово, если бы вы могли ответить на этот другой вопрос, который у меня есть... stackoverflow.com/questions/53834600/ - jungledev; 19.12.2018

arrow_upward
0
arrow_downward

Вы хотите, чтобы RadioButton располагался по центру, а текст над ним был таким.

Вот код XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:checked="true"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />
  </RadioGroup>
</android.support.constraint.ConstraintLayout>

И используйте 2 фоновых рисунка для проверки и снятия отметки состояния

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/ic_android_black_24dp" 
android:state_checked="false" />

<item android:drawable="@drawable/ic_android_green_24dp" android:state_checked="true" 
/>

Tejas Soni 17.12.2018

Android RadioButton *с* значком и выравниванием по центру

Ответы (2)

Вопросы по теме

Android RadioButton с значком и выравниванием по центру