Search code examples
androidandroid-linearlayout

LinearLayout horizontal not displayed properly on real device

I am very confuse with LinearLayout in horizontal as it always not display properly in a narrow width screen device. Here is my code.

<LinearLayout
                android:id="@+id/otherLinear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:baselineAligned="false"
                android:gravity="center"
                android:orientation="horizontal"
                android:visibility="visible">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="20dp"
                    tools:ignore="UseCompoundDrawables">

                    <TextView
                        android:id="@+id/availableAction"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:text="@string/add"
                        android:textColor="@color/icon_selected"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/addFriendsBtn"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:contentDescription="@string/welcome"
                        android:src="@drawable/ic_icons8_add_user" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="20dp"
                    tools:ignore="UseCompoundDrawables">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:enabled="false"
                        android:text="@string/report_label"
                        android:textColor="@color/icon_selected"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/reportBtn"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:contentDescription="@string/welcome"
                        android:src="@drawable/icons8_spam" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="20dp"
                    tools:ignore="UseCompoundDrawables">

                    <TextView
                        android:id="@+id/followAction"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:text="@string/follow"
                        android:textColor="@color/icon_selected"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/followBtn"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:contentDescription="@string/welcome"
                        android:src="@drawable/ic_follow" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="20dp"
                    tools:ignore="UseCompoundDrawables">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:enabled="false"
                        android:text="@string/msg"
                        android:textColor="@color/icon_selected"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/msgBtn"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:contentDescription="@string/welcome"
                        android:src="@drawable/ic_icons8_weixin_100" />

                </LinearLayout>
            </LinearLayout>

This is how it looks in AS and this is what I need. enter image description here

But this is what I always ended up for unknown reason. enter image description here

I also check if its was just because of a long textview but it not. The view is correct in AS but on some real device I already test its not. Can someone enlighten me I am dealing with LinearLayout horizontal for a year making adjustment over and over again.

Solution

  • You are using wrap content for your textViews. If your text will be very long so will your view, you can reduce the text size of your textViews in the XML and hope that the text can fit inside 1 line or you can use autofittextview - "A TextView that automatically resizes text to fit perfectly within its bounds".

    Heie is how you use this library :

    In your gradle add this implementation : 

     implementation 'me.grantland:autofittextview:0.2.1'

    Now add your textView : 

       <me.grantland.widget.AutofitTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textSize="12sp"
        app:minTextSize="8sp" />