Кнопка с drawableLeft внутри GridLayout

Question

У меня есть GridLayout с 6 кнопками внутри:

Когда я пытаюсь установить свойство drawableLeft для кнопок, я имею следующие поведения:

Как автоматически масштабировать отрисовку, чтобы все кнопки были видны?

Расположение:

  <GridLayout
    android:orientation="horizontal"
    android:background="#AFAFAF"
    android:layout_width="match_parent"
    android:layout_margin="20dp"
    android:columnCount="4"
    android:rowCount="3"
    android:layout_weight="10"
    android:layout_height="0dp">
    <Space 
    android:layout_column="0"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Space 
    android:layout_column="2"
    android:layout_columnWeight="2"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Space 
    android:layout_column="3"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />   
    <Button
        android:id="@+id/PageHome_Learn"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:drawableLeft="@drawable/MenuLearn"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_LearnText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Piano"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_PianoText"
        style="@style/Button" />
    <Space 
    android:layout_column="3"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Button 
        android:id="@+id/PageHome_SimpleGame"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_PractiseText"
        style="@style/Button" />
    <Button 
        android:id="@+id/PageHome_AgainstTheClock"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_AgainstTheClockText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Scores"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_ScoreText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Settings"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_SettingsText"
        style="@style/Button" />

Стиль Button не влияет на поведение.Я не нашел ни одного свойства, ограничивающего высоту кнопки до высоты кнопки.

Answer 1

Вот что я получил из следующего кода, и я думаю, что вы хотите добиться того же.Просто с помощью Compound TextView.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_rowSpan="12"
    android:columnCount="3"
    android:layout_weight="3"
    android:rowCount="3">

    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
</GridLayout>


// the code for ButtonStyle in the styles.xml file
<style name="ButtonStyle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:drawableStart">@drawable/ic_library</item>
    <item name="android:drawableLeft">@drawable/ic_library</item>
    <item name="android:drawablePadding">8dp</item>
    <item name="android:layout_columnWeight">1</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

Answer 2

Ваши рисунки очень большие по размеру.Потому что, когда вы используете свойство типа drawableLeft, андроид отображает чертеж в полном размере.

Если необходимо установить drawable только в xml, вам нужно использовать ImageView слева от кнопки и управлятьизмерение, давая ширину и высоту ImageView.

Или вы можете установить Drawable из кода и можете контролировать их размеры, например:

Drawable btnOneDrawable = ContextCompat.getDrawable(R.drawable.MenuLearn);
btnOneDrawable.setBounds(0,0,40,40);
buttonOne.setCompoundDrawables(btnOneDrawable, null, null, null);

Обновление
Попробуйте это в XML.Измените часть кнопки с этим в макете.Также вам нужно установить контур, который можно нарисовать для этого RelativeLayout вместо кнопки.

<RelativeLayout
    android:id="@+id/PageHome_Learn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_columnWeight="2"
    android:layout_row="0"
    android:layout_rowWeight="1"
    android:layout_margin="@dimen/TextPadding">


    <Button
        android:id="@+id/btnPageHome_Learn"
        android:layout_centerInParent="true"
        android:text="@string/PageHome_LearnText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:src="@drawable/MenuLearn"
        android:layout_toLeftOf="@+id/btnPageHome_Learn"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>