Grid view overlapping other views android - android

I need to have a button, a grid view and a button, arranged vertically. I can see the Button and the GridView but can't see the button declared after the grid view. Why's that? This happens with any view below the grid view declaration.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginTop="20dip"
android:text="Fragment1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30dip" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<GridView
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="match_parent"overla
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
</LinearLayout>

As you have taken LinearLayout with vertical orientation, give wrap_content to the height of GridView.
Now, if you want last button at below to the screen, then include android:layout_weight="1" in GridView.

try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1"/>

as you have declared height of gridview as match_parent it should overlap the views declared below it if it can not find enough screen space available to show it.
You should try calling bringtoFront() method on the view declared below gridview.
Other thing from my viewpoint is to try relativeLayout if possible and use android:layout_above and android:layout_below with gridview.

Related

Multiple textviews (over multiple lines) below a gridview

For the UI of my app, I want a Gridview above two lines if Textviews, as shown in the image.
I can manage to get one textview to sit nicely below the gridview (using this method) but I cannot work out how to get the second one to display properly. It always seem to be off the bottom of the screen or incredibly thin down the right hand side of the full height of the screen.
Code:
<GridView
android:id="#+id/gridview"
android:layout_alignParentTop="true"
android:layout_above="#+id/textLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="135dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
<LinearLayout
android:id="#+id/textLinearLayout"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textviewTimerLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Elapsed time: "/>
<TextView
android:id="#+id/textviewTimerTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="00:00:00"/>
<TextView
android:id="#+id/textviewPCUTotalLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total PCU's: "/>
<TextView
android:id="#+id/textviewPCUTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
put the grid layout and other two text fieltds in a linear layout. Then make all of their layout_width attributes match_parent. Finally add weight to the views so that the grid layout has twice as much space as the text fields have. for example grid layout gets weight=2 and the text views get weight=1 each
<LinearLayout
...>
<GridView
...
/>
<LinearLayout
...
android:orientation="vertical"
>
<TextView
...
/>
<TextView
...
/>
<TextView
...
/>
</LinearLayout>
</LinearLayout>
I'm not sure exactly why you're nesting two LinearLayouts together when one should suffice, but all you should need is to set the LinearLayout's orientation to vertical.

vertical layout little issue

I have a LinearLayout (vertical) and it should contain 3 elements in the following order: textview, listview and button. The listview could be really high so in order to keep all the 3 elements visible I put the 3 elements each one inside another layout. So my structure is like:
linear layout (vertical)
linear layout (horizontal)
textview
linear layout (vertial) *
listview
relative layout
button
In order to get it working I set a fixed height to the vertical linearlayout which only contains the listview (*) but I know it is a bad choice because on bigger devices there will be a lot of empty space. How can I fix it?
thanks
User percentage values for the LinearLayout(*), so they take up a percentage of the parent's height,
and for the rest, if you want them to take up remaining space, add attribute: android:layout_weight:1;
Implement your layout this way :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/mTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Header Text" />
<ListView
android:id="#+id/mListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mButton"
android:layout_below="#+id/mTextView" >
</ListView>
<Button
android:id="#+id/mButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1" />
</RelativeLayout>
// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="textview"/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1">
<ListView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0dp"
android:smoothScrollbar="true"
android:id="#+id/listview"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:gravity="center">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button"/>
</LinearLayout>
</LinearLayout>

layout_centerHorizontal is not centering

I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".

Center elements in GridView

I have GridView with 6 images in 2 columns. I want to display this 6 images in the middle of the screen. I set gravity properties to center but this center elements only horizontally. GridView takes whole screen.
<GridView
android:id="#+id/gridview"
android:layout_above="#id/ad" android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:background="#ffffff"
android:gravity="center"
/>
Here is what I did to get the items in the gridview to center (notice the stretchmode, columnwidth, gravity and horizontal and vertical spacing):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="5dp" >
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="100dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:stretchMode="spacingWidthUniform"
android:verticalSpacing="10dp" />
</LinearLayout>
It took me a while to figure it out, but messing with those different values I was able to get them to center.
Try wrapping your GridView in a LinearLayout that has it's child elements centered and change your gridview's layout_height to "wrap_content". ex:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_gravity="center">
<GridView
android:id="#+id/homeGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="3"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</LinearLayout>
Need to set the following attributes:
android:stretchMode="columnWidth"
...and...
android:gravity="center"
well, in case you are using a custom adapter thing to inflate single rowview inside your gridview then try to add android:gravity="center" to the layout of your single_row.. this will do the trick hopefully :)
i.e,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivClrBlock"
android:layout_width="88dp"
android:layout_height="88dp"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
/>
<TextView
android:id="#+id/tvClrName"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/color_name"
android:textSize="15sp" />
</LinearLayout>
Issue occurred when I updated the gridview adapter from:
gridView = inflater.inflate(R.layout.mobile, null);
to
gridView = inflater.inflate(R.layout.mobile, parent, false);
so I just reversed back using a try catch if the old (null) version failed.
Try to change this:
android:layout_height="fill_parent"
into
android:layout_height="wrap_content"
You are now telling your grid view to fill it's parent height and width fully.
Here is my answer:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="100dip"
android:gravity="center"
android:numColumns="3"
android:stretchMode="spacingWidthUniform"
android:verticalSpacing="10dip" />
</LinearLayout>
Don't use padding or horizontalSpacing if you don't need it as it may cause problems with other views.
Note also that fill_parent is already deprecated.
I hope this will solve your problem:
<LinearLayout
android:layout_gravity="center_horizontal"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridLayout
android:id="#+id/gridlayou4x3"
android:rowCount="4"
android:columnCount="3"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="80"
android:minWidth="25px"
android:minHeight="25px" />
</LinearLayout>
I found that you just have the gridlayout wrap content on height and width.
android:layout_centerHorizontal="true"
It will center itself for the size it needs but if you have it matching the parent. You are technically centering it based with a lot of parent empty space offsetting your children.

display the elments in grid view in only one row

I want to display the grid view elements in only one row that means i want horizontal scrolling in grid view.Each time i want to display only 5 elements only in one row.For this give me some suggestions.Thanks in advance.
below is the my layout code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ImageViewlarge"
android:layout_width="wrap_content" android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/TextViewImageName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:editable="false">
</TextView>
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="bottom" android:layout_height="fill_parent">
<ImageView
android:id="#+id/ImageViewLeft"
android:clickable="true"
android:focusable="true"
android:layout_alignParentLeft="true"
android:src="#drawable/leftarrow" android:layout_height="50sp" android:layout_width="30sp" android:layout_gravity="bottom|left">
</ImageView>
<GridView
android:id="#+id/GridView01"
android:scrollbars="horizontal"
android:layout_height="wrap_content"
android:fadingEdge="horizontal"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarAlwaysDrawVerticalTrack="false"
android:numColumns="5" android:layout_gravity="center_horizontal" android:layout_width="260sp">
</GridView>
<ImageView
android:id="#+id/ImageViewRight"
android:clickable="true"
android:focusable="true"
android:src="#drawable/rightarrow" android:layout_width="30sp" android:layout_height="50sp" android:layout_gravity="right"/>
</LinearLayout>
</LinearLayout>
in that above code now i want to remove the that 2 image view and set the horizontal scroll to that grid view elements.For this give me some suggestions,Thanks in advance
I believe the same effect could be achieved by using a LinearLayout with the orientation set to horizontal. The LinearLayout can be embedded in a HorizontalScrollView
The documentation on HorizontalScrollView actually says this:
A HorizontalScrollView is a
FrameLayout, meaning you should place
one child in it containing the entire
contents to scroll; this child may
itself be a layout manager with a
complex hierarchy of objects. A child
that is often used is a LinearLayout
in a horizontal orientation,
presenting a horizontal array of
top-level items that the user can
scroll through.

Categories

Resources