ImageView on a GridView - android

I have a GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:orientation="horizontal" >
<GridView
android:id="#+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/DarkSlateGray"
android:layout_weight="1"
android:columnWidth="200dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="none" >
</GridView></LinearLayout>
I want to add an ImageView on top of this.
Tried <include>:
<include layout="#layout/connection"/>
connection.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_connection"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:src="#drawable/globe_connected_icon_48"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /></RelativeLayout>
But result looks like this:
Is there a way to show it on top of the GridView like this:

Change the Linear Layout to a Relative Layout, then have both the grid view and the image view align to the top left of the parent. Make sure the the image view is below the grid view so that it appears on top.

Change your LinearLayout orientation to vertical and place the ImageView above the GridView code. For LinearLayout you can provide attributes to define where in the layout a view will be, such attributes: gravity and layout_gravity. RelativeLayout provides similar attributes: ex.layout_alignParentTop. Also, use android:background="#null" in your ImageView if you want the white boarder around your image to be transparent.

Related

Use of setGravity() in GridView

I can't understand the use of android:gravity and setGravity() of GridView.
android:gravity
Specifies the gravity within each cell.
center_horizontal - Place object in the horizontal center of its container, not changing its size.
setGravity(int gravity)
Set the gravity for this grid. Gravity describes how the child views are horizontally aligned. Defaults to Gravity.LEFT
gravity int: the gravity to apply to this grid's children
I am trying to center the last row as mentioned in this question, but I can't get it.
So, I tried to understand the use of android:gravity and setGravity().
I tried this code.
<GridView
android:id="#+id/grid_view"
android:stretchMode="none"
android:numColumns="auto_fit"
android:columnWidth="140dp"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="match_parent" />
its child view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/chapter_item_layout"
android:minHeight="120dp"
android:background="#color/red">
<ImageView
android:id="#+id/thumbnail_image"
android:layout_width="68dp"
android:layout_height="68dp"
android:scaleType="fitXY"
android:src="#drawable/icon" />
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textSize="16sp"
android:textColor="#color/black"
android:maxLines="2"
android:ellipsize="end"
android:id="#+id/title" />
</LinearLayout>
and it coming like this
if changed the stretchMode="columnWidth" and it is coming like this
The first image denoting that the child rows are not aligning right.
The second image denoting that the contents inside the child are not aligning right
Then what is the use of setting gravity?
I tried gridView.setGravity(Gravity.CENTER).
I need to display the dynamic items in the GridView.
How can I display the 3rd item in the center, if I have 3 items?
I tried setting layout_width="wrap_content" & putting my GridView inside
LinearLayout and setting layout_gravity:center
RelativeLayout and setting layout_centerInParent=true
Both cases not worked.
I cannot use TableLayout because I need to load more data on scroll to bottom, so I need to set OnScrollListener
Thanks in advance
put your GridView inside a RelativeLayout and then set GridView's layout_centerInParent property to true.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/grid_view"
android:stretchMode="columnWidth"
android:numColumns="2"
android:columnWidth="140dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</RelativeLayout>
Because :
RelativeLayout gives you much better control over positions of children.
UpDate :
Try to change this two property
android:stretchMode="columnWidth"
android:numColumns="2"
Remove this property if you add in the GridView android:gravity="right".

Android - Center Grid View in Linear Layout AND use Horizontal Spacing

I have an Android app in which I am trying to center a grid view in a linear layout. I don't have to use the linear layout, but I prefer to if possible.
I want to set the horizontal spacing (space between columns) in the grid view, as well as center the grid view in the parent.
When I use android:stretchMode="none" in the XML, the horizontal spacing works. However when I do this the grid view is left aligned. Using android:stretchMode="columnWidth" the grid view is centered, but the horizontal spacing does not work.
How can I have both?
Sample of my XML below (horizontal spacing works, centering does not):
<LinearLayout 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:orientation="vertical"
android:gravity="center_horizontal">
<GridView
android:id="#+id/myList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:horizontalSpacing="1dp"
android:columnWidth="400dp"
android:stretchMode="none"
android:layout_gravity="center_horizontal">
</GridView>
</LinearLayout>
If you want to center a component as GridView, the best way is to use RelativeLayout.
You could use layout_centerInParent to center both horizontal & vertical or layout_centerHorizontal to center horizontal only.
For instance:
<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" >
<GridView
[...]
android:layout_centerInParent="true"
android:layout_centerHorizontal="true" >
</GridView>
</RelativeLayout>

Android allow layout cut off higher child

How i can insert an textview with height=100dp in parent layout with height=60 and display cropped textview?
I want to resize parent layout without resizing textview inside.
Set a negative value to the layout_marginTop of your TextView, and after resizing the parent you should also set that layout_marginTop to zero. The layout is like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_marginTop="-40dp"
android:layout_height="100dp"
android:text="text" />
</LinearLayout>

add listView and imageView at its end

I want to create the layout to be like what in the diagram
how can I make the listView Scroll independently and make the textView and ImageView stead?
just replace your xml layout like below code:
<?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:background="#android:color/white"
android:padding="5dp"
android:weightSum="2"
android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:layout_gravity="right"
android:textColor="#android:color/black"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/yourimg" />
</LinearLayout>
above xml given output below screenshot:
For the Lower Steady Image View you can use : Create a footer view
layout consisting of text that you want to set as footer and then try
View footerView = ((LayoutInflater) ActivityContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.footer_layout, null, false);
ListView.addFooterView(footerView);
For Header: The solution that works for me is to create a TableLayout
that has a row with the heading and a row with the list like this:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include layout="#layout/header" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</TableLayout>
Please make sure that the ListView has #android:id/list as the ID.
OR
Rather google adding header and footer to listview in android that
will help u much better
Sorry for the pseudo code, I can try a better attempt later on, but you need:
RelativeLayout
TextView - align top
ImageView - align bottom
ScrollView - align above ImageView, align below TextView
Create a linear layout with orientation as vertical. Add textview listview and imageview with the weight as you want. Remember to give layout_height as 0dp for all the three components.
Add Header And Footer To the Listview,Like
ListView mList=getListView();
mList.addHeaderView(View v);//Your textView
and
mList.addFooterView(v);//your imageview

centerHorizontal does not centre the image correctly

Here is the 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/bg"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal" //CENTER 01
>
<!--center button-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" //CENTER 02
/>
//...
</RelativeLayout>
</LinearLayout>
<include android:id="#+id/banner" layout="#layout/banner"
android:layout_weight="1"
android:layout_gravity="bottom"/>
</LinearLayout>
The center button is centered, but not in the real center of the screen, but rather approx 50px to the right of the center. If I remove centerHorizontal CENTER01, then this does not happen.
Does anyone know why is this happening?
Please try for //CENTER 02:
android:layout_centerInParent="true"
This issue may be due to using of both Relative Layout and Linear Layout inside a xml file.
Change all Linear Layout to Relative Layouts so that Image View will be centered as you expected.
I too mingled both Linear Layout and Relative Layout in single XML and faces this kind of issue. Once i replaces all Linear Layout to Relative Layout my problem Resolved.
Try it.Thanks.Venky
Its because in Relative Layout center_horizontal isn't the command. that works for views wrapped in linear Layout. for RelativeLayout you need to use
android:layout_centerInParent="true";
as the center gravity command in linear
or
android:layout_centerHorizontal="true"
as the gravity center_horizontal in linear.
When you set android:gravity="center_horizontal" on a parent, it influences the behaviour of its children. Hence, your ImageView gets effected, creating the effect you see after already being placed in the center by other properties.
You can see this effect for yourself by placing a TextView in there with android:layout_width="fill_parent".

Categories

Resources