Scaling a view hides the content

Question

is the view which I have designed with the following code of xml

<LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.8"
                android:weightSum="3">

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">
                 ....
                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    >

                    <ImageView
                        android:layout_width="84dp"
                        android:layout_height="84dp"
                        android:layout_centerInParent="true"
                        android:layout_above="@+id/meal_ln"
                        android:background="@drawable/meal_img_bg_ac"
                        app:layout_aspectRatio="100%"
                        />

                    <TextView
                        android:id="@+id/meal_ln"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lunch"
                        android:textAlignment="center"
                        android:textColor="@color/priTxtLight"
                        android:layout_alignParentBottom="true"
                        android:paddingTop="4dp"
                        android:paddingBottom="4dp"
                        android:fontFamily="casual"/>

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">
                 ....
                </RelativeLayout>
        </LinearLayout>

My target is to design . And for this I added

<RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:scaleX="1.6"
                    android:scaleY="1.6"
                    >

in the second one which result in view cut as

How can I correct this issue?

I want to scale the middle view bigger than other two. In this both the image and text should be visible and should be bigger.

Problem which I found is: Linear layout is hiding the content of overflowing relative layout.

Answer 1

Try using LinearLayout with orientation vertical instead of RelativeLayout

 <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.8" android:weightSum="3"> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> .... </RelativeLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="84dp" android:layout_height="84dp" android:layout_centerInParent="true" android:layout_above="@+id/meal_ln" android:background="@drawable/meal_img_bg_ac" app:layout_aspectRatio="100%" /> <TextView android:id="@+id/meal_ln" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Lunch" android:textAlignment="center" android:textColor="@color/priTxtLight" android:paddingTop="4dp" android:paddingBottom="4dp" android:fontFamily="casual"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> .... </LinearLayout> </LinearLayout>