2

It is my firs time that I try to design a good UI instead of debugging apps, so I am new to this type of stuff.

I have three buttons under each other and the text should be aligned correctly. So that the "F" of Favorites starts at the same horizontal point as the "E" of Equalizer. The way I did it, is not satisfying. I worked with paddingEnd and just tried out until it looked almost equal on the horizontal axis.

One other idea was to make the gravity center_vertical|left and instead use drawablePadding. This did not work because the width of the buttons is defined as match_parent. But also when I change the buttons to android:layout_width="wrap_content" and remove android:paddingStart and android:paddingEnd for testing, it does not work.

I got these info out of android:drawableLeft margin and/or padding

There should be a way to make it "easy" to fulfill the design I require. Has someone an idea what I am making wrong and has a solution for me?

The code of the xml layout file and a screenshot of the result are attached.

If something else is required to solve this question, then just ask me straight away.

Screenshot of the buttons

<androidx.constraintlayout.widget.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">

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/border"
        android:paddingEnd="0.3dip"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/favButton"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:insetTop="1dp"
            android:insetBottom="1dp"
            android:paddingStart="50dp"
            android:paddingEnd="15dp"
            android:background="@drawable/rectangle"
            android:drawableLeft="@drawable/ic_bxs_heart"
            android:text="@string/favorites"
            android:textColor="#000000"
            android:textSize="16sp"/>

        <Button
            android:id="@+id/eqzButton"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:insetTop="1dp"
            android:insetBottom="1dp"
            android:paddingStart="50dp"
            android:background="@drawable/rectangle"
            android:drawableLeft="@drawable/ic_equalizer"
            android:text="@string/equalizer"
            android:textColor="#000000"
            android:textSize="16sp"/>

        <Button
            android:id="@+id/settingsButton"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:insetTop="1dp"
            android:insetBottom="1dp"
            android:paddingStart="50dp"
            android:paddingEnd="27dp"
            android:background="@drawable/rectangle"
            android:drawableLeft="@drawable/ic_settings"
            android:text="@string/settings"
            android:textColor="#000000"
            android:textSize="16sp"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
Lars
  • 21
  • 2
  • Try to use the material native library https://material.io/develop/android/components/buttons And another tip, in this case to could to use a constraint layout as parent group view and remove the LinearLayout – Manuel Mato Oct 26 '20 at 16:14
  • What does it mean: *the text should be aligned correctly* ? – Gabriele Mariotti Oct 26 '20 at 16:14
  • @ManuelMato I When using it as an icon, it is working with the ``iconPadding``. With that I should be able to align all text the same. @GabrieleMariotti I meant that the "F" of Favorites starts at the same horizontal point as the "E" of Equalizer. – Lars Oct 26 '20 at 17:03

0 Answers0