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>

android android-radiobutton android-radiogroup center-align

17.12.2018 17:50

Коллекции (ArrayList , HashSet , HashMap)

1 777

Ответы 2

Используйте 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 рисунка и добавьте вот так: Теперь фоновый рисунок

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

Сейчас MainActivity

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

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

— 18.12.2018 15:05

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

— 19.12.2018 07:21

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

— 19.12.2018 10:26

17.12.2018 19:23

Вы хотите, чтобы 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" 
/>

17.12.2018 19:39

Другие вопросы по теме

Как установить SELECT по умолчанию для радиокнопки в радиогруппе

Форма фона в фокусе RadioButton

Установите значение RadioButton из базы данных Firebase Realtime

Как выровнять радиокнопку с ее текстом?

BaseExpandableListAdapter перезаписывает новые элементы поверх старых

Сохранение выделенного текста RadioButton в классе модели из элемента recyclerview

Динамическое добавление RadioButtons в RadioGroup нарушает взаимоисключающий выбор

Проблема с позицией ListView при прокрутке

Радиокнопка получает только проверенное радио в студии Android

RadioButtons не отображается

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

Ответы 2

Другие вопросы по теме

Похожие вопросы