I'm trying to display some items in a GridView. I want each item to fill a relative part of the screen (image B) and all I have is GridView take just the space it needs at the top of the screen (image A). The image:
(I want each item sizes over 15-20% height of the main layout)
EDIT : I found this question Percentage width in a RelativeLayout. 'LadaRaider' gives a good answer but I don't know how to use that solution in my GridView cells. This is my layout.xml:
<?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"
android:background="#drawable/background">
<TextView
android:id="#+id/label_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center_horizontal"/>
<LinearLayout
android:id="#+id/ll_ok"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lbl_choose"
android:textAppearance="?android:attr/textAppearanceMedium" />
<GridView
android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2"
android:columnWidth="100dp"
android:stretchMode="columnWidth"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_wait"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lbl_wait"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
I have also created a custom layout to use in GridView items. It has just a TextView and a background.
Related
how to add images above the image? this is my screen shot http://imgur.com/Yh4DqnJ which have only 1 image in background now i want to add two imagebutton like this image http://imgur.com/XrLXb0L below is my code which have only background image
below is my code which have background imeage onheader Linearlayout how i add two images on left and right side??
<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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/imagelogo2"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:id="#+id/lytContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/txtCopyright"
android:layout_marginTop="10dp"
android:background="#drawable/border2"
android:layout_below="#+id/lytTitlebar"
android:orientation="vertical" >
<ListView
android:id="#+id/listMainMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/listview_selector"
android:dividerHeight="1dip"
android:fadeScrollbars="true" />
</LinearLayout>
</LinearLayout>
Best way to use overlap images is through frame layout
Try this code
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/onlymobilepro"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="This is Frame Layout!!!"
android:textSize="24px"
android:textColor="#cc0000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="top"/>
<TextView
android:text="Learn Android Development At onlyMobilePro.com"
android:textSize="24px"
android:textColor="#00dd00"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
For overlapping images you should probably use Framelayout,
For more info on Frame layout see this link,
In iPhone there is a method on UIImage called stretchableimagewithleftcapwidth which can be used to create a chat bubble to stretch for any size (keeping the corners natural size).
We don't seem to have this in Android so I've set out to make a layout that I can then use as a background image with a FrameLayout. The trouble I'm having at the moment is the top row which consists of 3 columns: the left top corner, the stretchable top, and the right top corner. How do I get the left and right top corners to remain fixed size (11dip) and tell the middle to fill any remaining space in the parent? This is what I have so far.
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout_bubble_container"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_toprow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_top_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_top_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_lefttop" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_top"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_top_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_righttop" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_middlerow"
android:orientation="horizontal"
android:background="#color/WHITE">
<LinearLayout
android:id="#+id/layout_left"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="left"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_left"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_left" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_right"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_right"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_right" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_bottomrow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_bottom_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_bottom_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_leftbottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_bottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_bottom_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_rightbottom" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the layout tree in eclipse if this helps.
Here is what it looks like rendered in the layout editor in eclipse. Note the top and bottom rows not stretching appropriately.
Thanks in advance.
i also needed a chat bubble kind of view in my app so I used a 9 patch drawable as the background image and it is working fine.
check this question:
Why do 9-patch graphics size correctly in the emulator but not on a phone?
And also this link:
http://warting.se/2012/06/04/chat-bubbles-in-android/
How can I split the screen so that the left half of the screen is a Linearlayout and the right half is a Tablelayout.
I've tried applying a layout_weight of 1 to both and a weightSum of 2 to the RelativeLayout wrapper.
Can anyone guide me?
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
>
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/hello2" />
</LinearLayout>
<TableLayout
android:id="#+id/Row1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentRight="true"
>
<TableRow>
<Button android:id="#+id/Modus"
android:text="#string/Mode1"
android:background="#layout/modus_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
/>
<Button android:id="#+id/Modus"
android:text="#string/Mode2"
android:background="#layout/modus_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
Give an id to your LinearLayout and add android:layout_toRightOf="#+id/your_linear_layout" parameter to your TableLayout. Or you may use another LinearLayout instead of RelativeLayout. If you don't need to add more views LinearLayout could be better.
I am creating a calendar using GridView (6 row * 8 column). Each of the cells inside this matrix (6*8) is a TextView (which I create dynamically in my program).
The issue I am facing is, the 6*8 matrix is not filling the entire space available for GridView
I would like to to have the 6*8 matrix take the entire space in GridView rather than leaving some blank space b/w the matrix and the next TextView. Can some one help me on this.
Given below is the xml layout of the Gridview
<?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"
android:layout_weight="1" >
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="8"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:id="#+id/id_worked"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Result 1 ->"
android:layout_weight="0"
android:textSize="20sp"
/>
</LinearLayout>
Remove the
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
from the GridView element. That shoudld reduce the spacing.
Edit: Using LinearLayout you can do this.
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1"
android:weightSum="6">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1">items here</LinearLayout>
</LinearLayout>
I have a image view and grid view in my .xml file. When I am executing this file its getting some space between grid view and image view. How to avoid this space...can any one help me to solve this problem.
thanks in advance...
my xml code is:
android:layout_width="0px"
android:layout_height="0px">
</Button>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/prevMonth"
android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<Button
android:id="#+id/currentMonth"
android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<ImageView
android:id="#+id/nextMonth"
android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/calendarheader"
android:src="#drawable/blue_bg_with_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageView>
</LinearLayout>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</GridView>
You should try setting the android:gravity attribute correctly, and it has to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:gravity="bottom|center_horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:id="#+id/calendarheader" android:src="#color/blue_start"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:minWidth="250dp" android:minHeight="30dp">
</ImageView>
</LinearLayout>
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#color/blue_start">
</GridView>
</LinearLayout>
i'm using here simple color background, and there is no gap:
If you still having the problem, then you should see your blue_bg_with_text2 image, whether it has any empty pixels at the bottom.
ps: ignore the android:minWidth="250dp" android:minHeight="30dp" part, it is there to imitate an image with that size.
Update
Here is the same view using RelativeLayout (it's a bit clearer at least for me):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/selectedDayMonthYear"
android:textColor="#000000" android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0px" android:layout_height="0px" />
<ImageView android:id="#+id/prevMonth" android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/nextMonth" android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<Button android:id="#+id/currentMonth" android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/prevMonth"
android:layout_toLeftOf="#id/nextMonth"
android:layout_alignBottom="#id/prevMonth"
android:layout_alignTop="#id/prevMonth" />
<ImageView android:id="#+id/calendarheader" android:src="#drawable/calendarheader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:layout_centerInParent="true"
android:layout_below="#id/currentMonth"
android:layout_margin="0dp"
android:scaleType="fitXY" />
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/calendarheader"
android:layout_margin="0dp"
android:background="#color/white_fader_end">
</GridView>
</RelativeLayout>
I've added to it my resources as background (two of them are actually screenshots from yours).
What i observed is, you must
either use a static image for your
calendar header background, or,
if you use an xml drawable, you have
to drop the stroke element from it / set its android:width to 0
otherwise it will add an unnecessary gap around your view's drawable, that is as wide as the stroke width you've specified.
my output using static images as backgrounds looks this way:
Update 2
The problem is not between your calendar header and gridView, but inside your gridView.
It has a 'padding' of 5 px inside (not real padding, see how it gets there):
The default selector for the GridView is a 9x9 patch rectangle with a border of 5px.
That 5 px is visible all around your gridView.
You can specify a different listSelector for this grid either by xml:
android:listSelector="#drawable/grid_selector"
or from code (onCreate):
gridView.setSelector(R.drawable.grid_selector);
Now if your grid_selector is an image or is a drawable xml without any margins, then the gap that causes the problem is gone.
You can also hide that gap, by setting a background color to your gridView, that matches or grandients the calendar header's background color.