I came across this problem while making a launch pad activity. I have a GridView layout that is populated with app icons. I want to center it on the screen but just can not no matter what I've tried. If the icons are not enough to cover the whole screen width the GridView is aligned to the left. I put a white background in the GridView Layout to show the problem.
I change programmaticaly the size of the ImageView and the widthof the GridView column to offer more functionality so I see that increaasing the image size enough makes it look centered. But I want it to be centered regardless of the icons number or size. Can someone help?
(I also tried using a linear layout instead of a reletive for the GridView. no difference)
GridView Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff" >
<GridView
android:id="#+id/gridView1"
android:numColumns="auto_fit"
android:gravity="center"
android:layout_gravity="center"
android:columnWidth="70dp"
android:stretchMode="columnWidth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</GridView>
</RelativeLayout>
Single grid-item layout
<?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" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_height="wrap_content" >
</ImageView>
</LinearLayout>
For centering in the middle of another layout (RelativeLayout), use
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
e.g. for a GridView:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" >
</GridView>
</RelativeLayout>
In order to make your Items fill the whole screen at all times, use match_parent for your item-width and use weights.
Related
In Android development, I have a LinearLayout as follows:
<?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:orientation="horizontal">
<ListView
android:id="#android:id/list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:paddingRight="0dp"/>
<TextView
android:id="#+id/text_inprogress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Congress API"/>
<LinearLayout
android:id="#+id/side_index"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:background="#c3c3c3"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
And index item
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/side_list_item"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="3dp"
android:textSize="12sp" />
I have a side index on the right side. It's A to Z. However the actual UI only shows A to V because no enough space. Padding of each item is 3. How can I make the side index to fit the screen?
If I change the padding to 1dp in index item text view, it will become too small. All I want is automatically fit the screen side. How can I make it happen?
how about making the linearlayout able to scroll vertically ? If the answer is affirmative, then go ahead and add a scrollview outside the linearlayout ~
I am beginner and I what add a text that will change if it was seen in a smaller mobile
I pasted here
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
In the picture, I want it to look like Pic1 and Pic2, the problem is, Im making it like Pic3 and I don't want that!
Please update your xml.
<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"
android:background="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
Main problem is your textView's width is `"fill_parent". Your texts fill screen because of that.
The problem here is the way you have setup your layout is not the right solution if you wan't to have different layouts for different screens. Your outermost view is a Relative layout with width and height set to fill the screen (that's what fill parent does). Now inside that Relative Layout you have a LinearLayout with width and height set to match its parent (RelativeLayout). So this is also filling your screen. Now inside that you have a text view with width and height set to fill it's parent (LinearLayout), and since LinearLayout is taking full screen, your TextView will fill the whole screen.
The best way to support smaller screen is that in your res directory create a layout-small folder and place the same xml layout file in there but change the dimensions of your textView. If you want the text to be as large as its size, you can do "wrap_content" for both width and height. You can also specify android:textSize in dp to play around with different font sizes.
Try using relative units. I really recommend you to read this:
Supporting Multiple Screens
To make a long story short, using "sp" units is the way to go. use the attribute
android:textSize="15sp"
replacing 15 by the size you think it is the most appropriate for your needs.
Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1d72c3"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
I have the following xml:
<?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>
The button1 is used to toggle the visibility of the grid view. But, when the grid view is not visible, the buttons don't fill the screen. They occupy half the screen. When the grid view is visible though, the buttons occupy all of the screen as I want them to. I haven't been able to understand this strange behaviour.
Try to change the width of the Linear layout to match_parent
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
This is happening because you have given width of LinearLayout as wrap_content. You have to define width of LinearLayout as fill_parent or match_parent.
Your button1 aligned on your text_view.
So try to add simple View with height 1dp in top of your parent Layout and make it match_parent width.
That's how I do, when something like this happens.
I'm making a layout (XML file) in Android that has two child views (one on the right side of the screen and one on the left). I want the view on the right to take up a pre-determined space (in dp) and have the view on the left take up all the remaining space up to a limit, at which point it will stop expanding and the two layouts will just move further apart as the screen gets larger.
The odd thing is this would be very easy if I wanted the view on the right side to be the one that expands, and the view on the left to be the one that takes up a preset space. If you set each view to the width you want (in a horizontal linear layout) Android will automatically shrink the one on the left in the event that both views don't fit.
I would like to do this in one layout file; this layout is already designed for displays between sw512dp-land and sw765dp-land.
The code below would work if I could find a way to make Android shrink the layout on the left (when layouts both cannot fit at the size specified). But by default the system will shrink the layout on the right first.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/left"
android:layout_width="150dip"
android:layout_height="fill_parent"
android:background="#color/red" >
</RelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
This code (from #Lokesh) would work if I didn't need the layout on the left to stop expanding at a certain point.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
It would also be nice to know if anyone thinks this isn't possible so I can resort to doing it pragmatically or changing my approach to the layout.
Thanks!
This works for me. I've set the right layout to 100dip, change as per your needs.
<?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="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
EDIT 1: I used the background color just to distinctly show the layouts. Not necessary at all. :)
EDIT 2: If you want a way to expand the left layout upto only a limit then try this -
<?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="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right">
<LinearLayout
android:id="#+id/inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/yellow">
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This will expand only to a limit"
android:maxWidth="300dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#color/red" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
Here you need to place your widgets in inner layout and this is what it looks like in different screens.
3.1in HVGA
5.2in QVGA
Colors used : red(#FFFF00), yellow(#FFFFFF00), green(#FF00FF00).
I have this cell item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="#+id/titleText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#AA000000"
android:gravity="center"
android:textColor="#FFFFFF"/>
</LinearLayout>
and this GridView:
<GridView android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="100dp"
android:layout_weight="1"/>
I want to set linear layout's background image but, according to image size, I get different heigths for cells (I use different images) which is not very good looking...how can I stretch the background to a fixed heigth?
Unfortunately gridview seems not have a columnHeigth attribute...
Solved thanks to chet 's advice: I set heigth and width of linear layout.