How to align a TextView according to its length

Question

i have an interface with two ImageButtons and a TextView among them. The TextView contains a number and the two ImageButtons control that number, adding or removing 1. The problem is when the number becomes two digits: the TextView width increase and one of two ImageButtons moves.

As you can see when the number is one digit there isn't any type of problem, but when it becomes two digits the ImageButton moves from his place. I already tried with android:layout_gravity and with android:gravity but they doesn't function. There is a way to keep the TextView "centered" and make sure the ImageButton doesn't move?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:autofit="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingStart="5dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/foodName"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="10dp"
            android:gravity="center_vertical"
            android:hint="food_name"
            android:maxLines="2"
            android:textAllCaps="false"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:gravity="end"
        android:orientation="horizontal"
        android:padding="5dp">

        <ImageButton
            android:id="@+id/addFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            app:srcCompat="@drawable/ic_add_black_40dp" />

        <TextView
            android:id="@+id/foodQuantity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|center_horizontal"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:gravity="center|center_horizontal"
            android:maxLength="2"
            android:text="0"
            android:textColor="#707070"
            android:textSize="20sp"
            android:textStyle="bold" />

        <ImageButton
            android:id="@+id/removeFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            app:srcCompat="@drawable/ic_remove_black_40dp" />

    </LinearLayout>

</LinearLayout>

This is my code and this is the layout of a RecyclerView member, because I created a personalized element. Thanks a lot.

Answer 1

...
...
<LinearLayout
   android:id="@+id/layout_count"
   android:layout_width="200dp"
   or android:layout_width="match_parent
   android:layout_height="wrap_content"
   android:orientation="vertical">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:gravity="center_vertical">

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_complete" />

       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:gravity="center"
           android:layout_height="wrap_content"
           android:text="1" />

      <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_complete" />

   </LinearLayout>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:gravity="center_vertical">

       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_complete" />

       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:gravity="center"
           android:layout_height="wrap_content"
           android:text="1" />

      <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/ic_complete" />

   </LinearLayout>

</LinearLayout>

Answer 2

Since you have wrap_content on your foodQuantity TextView, addFood is going to move to accommodate for the extra spacing required to add multiple digits. If you want to keep the position of the button fixed, and make sure the buttons don't move, then you are going to have to give your TextView a fixed width to accommodate for the maximum number of characters you can expect.

Answer 3

I would suggest you to use android:layout_weight so you can define which element is filling the remaining space if necessary. So when setting the TextView a layout_weight of 1 and the ImageButtons a layout_weight of 0 you can afterwards set the android:gravity of the TextView that is defining the gravity inside of the TextView to center and it will always be centered.

BUT: you need to set the width of the LinearLayout to match_parent so it fills the parent. Without that the LinearLayout will never get some remaining space since it always shrinks to the size that all elements need together