What's up guys, just a quick question. I'm trying to get my GridView to be center inside it's parent which is a RelativeLayout. I want the entire grid to be centered, not the items. From what I'm seeing, the default alignment is "left-aligned" and it's difficult to change this behavior. I tried a few other solutions suggested in other SO questions found here as well as couple others. This seems like something trivial, and that it shouldn't be such a headache. I tried wrapping the GridView inside a LinearLayout with horizontal orientation but to no avail.
The only semi workaround I've found was to mess around with the left and right padding, but even that approach leaves way too much empty space at the sides.
This image is before I changed the padding
This image is after I messed around with padding, but again..seems a bit hackish and not really what I'm looking for. I'm looking for flush center without the extra padding on the sides
Another reason why this approach is impractical is due to the extra space, the selector appears to be too large..as seen in the image below
Any help on this would great, thanks as always!
Code for the layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridView
android:id="#+id/menuGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/weathermate_lv_background"
android:gravity="center_horizontal"
android:listSelector="#drawable/list_selector"
android:numColumns="3"
android:paddingLeft="30dp"
android:paddingRight="5dp"
android:stretchMode="columnWidth"
android:visibility="invisible" >
</GridView>
</RelativeLayout>
EDIT
As suggest by user, I centered each grid item row inside it's own relative layout..and that gave me the result I was looking for! Here is the updated XML files to reflect the solution
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridView
android:id="#+id/menuGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/weathermate_lv_background"
android:gravity="center_horizontal"
android:listSelector="#drawable/list_selector"
android:numColumns="3"
android:stretchMode="columnWidth"
android:visibility="invisible" >
</GridView>
</RelativeLayout>
This is the layout for the grid row. As you can see, what worked for me was setting the orientation to Horizontal and adding android:layout_centerHorizontal="true" to each child.
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/menuItem"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="#android:drawable/ic_menu_add" >
</ImageView>
<TextView
android:id="#+id/tvMenuItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/menuItem"
android:layout_centerHorizontal="true"
android:text="Option"
android:textColor="#android:color/white" >
</TextView>
</RelativeLayout>
The answear is to center image and text views in each grids as they have separate layout :)
Related
I am trying to get some text vertically aligned within a TextView, but for some reason it just sticks to the top edge of such TextView.
Trust me, I've read several questions here on Stack Overflow regarding the same, or similar, questions and tried applying the provided solutions, but nothing seems to make a change.
For instance, what I thought would solve the issue right away was to add the attribute android:gravity="center_vertical|left", but that didn't help either.
This user's question describes almost exactly my issue, except that his TextView is inside a RelativeLayout which in turn is inside a ScrollView, which I don't (and don't need or want to) use. And the images he provided are also perfectly applicable to what I'm trying to describe and achieve.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical" />
</LinearLayout>
The problem is that your TextView's height is set to wrap_content. This means that the size of the text's container will be the same as the height of the text, thus there really is nowhere within the view to center the content (it is effectively already centered vertically).
If the LinearLayout that you posted only contains the ImageView and the TextView, then you can simple change the height to match_parent and it should work fine.
If the LinearLayout contains other Views, you might want to consider using a RelativeLayout and setting the TextView to align with both the top and bottom of the image.
as your achievement suggest, you only need to change your gravity to layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
</LinearLayout>
You need to set gravity then you set text alignment to gravity
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical"
android:textAlignment="gravity"
/>
As easy as it seems to be, as stubbornly this ListView won't center itself (or it's content within - doesn't matter to me).
This is activity layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.drobiazko.den.mobineon.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#drawable/bg">
<RelativeLayout android:id="#+id/clock_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark">-->
<com.drobiazko.den.mobineon.ListViewRowsHeight
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:scrollbars="none"
android:divider="#null"
android:listSelector="#android:color/transparent"
android:persistentDrawingCache="scrolling|animation"
android:background="#android:color/holo_green_dark" />
<!--</RelativeLayout>-->
</LinearLayout>
This is ListView's item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/btn_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_icon" />
<TextView android:id="#+id/btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_name" />
<TextView android:id="#+id/btn_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_count" />
</RelativeLayout>
I've tried everything (including simplifying layout to max), but it still won't go.
Funny that the first relative layout clock_container - centers like a charm, due to parent LinearLayout's android:gravity="center_horizontal". Why won't ListView?
Added later:
Inspired by FOliveira's answer, I've done some investigation and found that:
everything works fine, parent LinearLayout has android:gravity="center_horizontal" and centers his children respectfully. The reason for ListView's children are left-aligned is that ListView takes all possible width despite his android:layout_width="wrap_content" attribute.
Anyone knows why is that?
First of all , i would remove the first linear layout and stay only with the relative layout as the parent.
After having the relative layout as the main parent , set the CENTER_IN_PARENT attribute to true.
The mistake you are making is that you are setting the gravity of Linear Layout child to center horizontal, which is correct, but the only children being affected by this option is the Relative layout itself.
I have a layout which holds the grid layout as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/gridview_gallery_mine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="10sp"
android:background="#color/background"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="4"
android:padding="4dip"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/empty_list" />
</RelativeLayout>
</RelativeLayout>
The problem is that, the last rows of the grid is being cut to half. I mean the last row is only half visible. I tried giving the gridview and also its parent (RelativeLayout) padding, margin but nothing works. BTW I have this layout inflated inside a fragment with the tabs.
P.S I am learning android design. Thanks.
I had used the combinations of
Android basic actionbar,
tabhost from support library.
The answer to above question was since i had no other options for implementation, Applying padding bottom on the parent node of the content made it work.
I tried another combination with the Toolbar in appcompat v7.21 (or 21), It worked without the extra padding, So i dint get time to investigate who causing the problem, actionbar or tabhost.
~ Hope it helps
I've created a custom spinner using my own ProjectSpinnerAdapter. I've also got another class which just inflates the layout but hasn't been implemented yet so is still using the standard spinner.
I can't seem to get my custom spinner to align the same way as the standard spinner.
I'm also having problems when the length of the item is wider than the table cell as you can see below. Is there not a way to truncate the options if they are over a certain length ? - This doesn't seem like its the correct way to fix this but I can't directly set the width of the widget as this is controlled via the table layout.*
**Fixed, See update*
Screenshots
The standard spinner aligns perfectly with the Button it sits next to (they are both contained within the same TableRow)
layout
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
<TableRow>
<Button
android:id="#+id/selectButton"
android:text="#string/show" />
<Spinner android:id="#+id/projectSpinner" />
</TableRow>
spinner_list_item.xml (Uses maxLength)
<?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="wrap_content"
>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_text_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:maxLength="15"
android:gravity="center"/>
</LinearLayout>
Update
The issue was the layout of the spinner item, in my custom layout spinner_list_item.xml I'd specified a layout all I needed was the textview
spinner_list_item.xml (Uses maxLength)
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_text_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:maxLength="15" />
If I may ask, why did you choose the TableLayout? I think the same could be achieved with a RelativeLayout and layout_toRightOf layout_below, etc. Or a LinearLayout with a weightSum and gravity each child having a layout_weight.
I'm not going to give you a solution that changes your entire layout though ;), but I tested this and this seems to work for me.
<TableRow>
<Button
android:id="#+id/selectButton"
android:maxLength="10"
android:text="sdadadasdfffffffffffffffffffffffff"/>
<Spinner
android:id="#+id/projectSpinner"
android:ellipsize="end"
android:lines="1"
android:scrollHorizontally="true" />
</TableRow>
Hopefully this works and it's a better way than setting a fixed string length
edit
I'm not sure why you're populating the spinner the way you are, but you can try:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:maxLength="15"/>
</RelativeLayout>
android:gravity is wrong too, needs to be android:layout_gravity (but that's LinearLayout only
Last edit :D
try using the default layouts
view = vi.inflate(android.R.layout.spinner_list_item, null);
then
((TextView) view.findViewById(R.id.text1)).setText(title);
As it seems the GridLayout will always push its children to layout corresponding to their needs. for instance the following declaration:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="3"
android:orientation="vertical"
android:rowCount="4"
android:useDefaultMargins="true" >
...
<ImageView
android:id="#+id/main_image"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_row="3"
android:scaleType="fitStart" />
</GridLayout>
The GridLayout declares fill_parent and as such I would expect it to not overflow. The GridLayout should take the size of the parent which in this case is the window (full height). However in hierarchy viewer the GridLayout is set as Wrap_content for both vertical and horizontal.
As such the ImageView (which is a large image) or any text view will be push to fit themself and as such overflow the container.
This can be seen within the hierarchy viewer where the container grid view fits the parent:
while the image view overflow
Reading the documentation, I understand there is a need to set gravity. As far as I can try, I used all kinds of gravity options and image scaling options without much effect. Removing the margins with useDefaultMargins="false" does change the layout overflow which leads the issue towards gridlayout.
My question follows:
Is this a bug or am I using the GridLayout incorrectly
How can I force the GridLayout's children to fit their container and to fill
remaining spaces
The trick in other layouts is to give the first element an android:layout_weight="1.0" and nothing to the other elements. Why it works I have no idea, but it does. Here's a simple XML that displayed an ImageView, a TextView and a Button. Without the layout_weight parameter assigned to the ImageView the text and button were shifted down.
<?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:background="#color/white"
android:orientation="vertical"
android:keepScreenOn = "true" >
<ImageView
android:id="#+id/imageView_surprise"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:scaleType="centerInside"
android:contentDescription="#string/accessibility_imageView_surprise"
android:layout_weight="1.0" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom" >
<TextView
android:id="#+id/textView_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="24sp"
android:gravity="center_horizontal" />
<Button
android:id="#+id/button_share"
style="#style/button_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>