CODEWITHSUNDEEP
androidandroid-linearlayout
webgenius
webgenius

Reputation: 904

Avoid layout resize

This is my activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#ffffff" >

        <ImageView
            android:id="@id/imgLogo"
            android:layout_width="100dp"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:src="@drawable/logo" />

        <TextView
            android:id="@id/txtCurScore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerInParent="true"
            android:textColor="#000000"
            android:textSize="28sp"
            android:textStyle="bold" />

        <Button
            android:id="@id/btnTopScore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="@string/strBtnTopScore"
            android:textColor="#000000"
            android:textStyle="bold" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button13"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button14"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button15"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />

            <Button
                android:id="@+id/button16"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

The above layout has 4x4 buttons with images (images added in code). When user presses the buttons, when 2 consecutive buttons have the same image, I make the two buttons invisible by calling setVisibility(View.GONE).

However I am facing a problem with this approach: Whenever the buttons are set invisible, the layout re-sizes itself. For example, if button[0][0] is set invisible, the remaining 3 buttons in the first row are pushed to the left. So button[0][1] will now occupy the place of button[0][0]. button[0][2] will occupy the place of button[0][1], and button[0][3] will occupy the place of button[0][2].

Please suggest an approach to avoid the buttons move to the left in the layout when any element to the left of it is made invisible in the linear layout.

I tried modifying a bunch of properties, and also searched online. But I couldn't land with any concrete answer to this problem. Please suggest an approach to solve this problem.

Upvotes: 0

Views: 248

Answers (5)

Bhavdip Sagar
Bhavdip Sagar

Reputation: 1971

Hi As all above suggested used setVisibility(View.INVISBLE) properties of button. I review your layout I modified it let's try below layout code. I am sure will help you.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="40dp"
    android:background="#ffffff" >

    <ImageView
        android:id="@+id/imgLogo"
        android:layout_width="100dp"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:src="@drawable/logo" />

    <TextView
        android:id="@+id/txtCurScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:textColor="#000000"
        android:textSize="28sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btnTopScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="TopScore"
        android:textColor="#000000"
        android:textStyle="bold" />
</RelativeLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:id="@+id/button13"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button14"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button15"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <Button
            android:id="@+id/button16"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center" />
    </LinearLayout>
</LinearLayout>

What i did modified in the the layout, each row should match parent instead of wrap content, make the components of LinearLayout android:gravity=center. Now when you try to hide the button from code, it will only hide the button in his place instead of completely remove from the layout. i hope will help :)

Upvotes: 0

Kirtikumar A.
Kirtikumar A.

Reputation: 4204

as per question it seems you have used setVisibility(View.GONE) for any views so basically what Difference between GONE and INVISIBLE is GONE will hide the element and free the layout space whereas INVISIBLE will only hide the element but its don't free the space that occupied in the memory.

so in your case because of view.gone it provides space to remain buttons and those button get wider or mismatch there position, so please use GONE and INVISIBLE by carefully knowing usage

Upvotes: 0

Myat Min Soe
Myat Min Soe

Reputation: 807

use

View.INVISIBLE

instead of

View.GONE

Upvotes: 1

Kushal
Kushal

Reputation: 8478

Option 1 : Please use View.INVISIBLE instead of View.GONE

There is special difference between above two :

INVISIBLE:

This view is invisible, but it still takes up space for layout purposes.

GONE:

This view is invisible, and it doesn't take any space for layout purposes.

So by using View.INVISIBLE, the space of button[0][0] will be retained in View Hierarchy so button[0][1] , buttton[0][2] and button

Option 2: We can do using java file dynamicaly, when user clicks on any button

I am giving steps of logic :

-> User click on button [0][0]

-> click listener of button [0][0] gets callback from Framework

-> save width of parent layout in some variable i.e. parentWidth and gap between buttons i/e/ gap

-> Apply width equals to ((parentWidth/3) - (2*gap)) to button[0][1], button[0][2] and button[0][3]

This way your all three button will get equal width

Upvotes: 0

krishna
krishna

Reputation: 609

From the doc view

int INVISIBLE This view is invisible, but it still takes up space for layout purposes.

int GONE This view is invisible, and it doesn't take any space for layout purposes.

Upvotes: 0

Related Questions