I'm writing an android app and in it I want to have a sort of title bar including the name of the game, the score, and things like that. Then below that I want to have an grid of image views, which will kind of be like tiles on which I can display different characters in my game.
I have the following xml layout, but when I run it and I get a black screen:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/app_name"
/>
<TextView android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/score"
/>
<TextView android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="0"
/>
<TextView android:id="#+id/robotsLeft"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/robots"
/>
<TextView android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="0"
/>
</LinearLayout>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
GridView is initialized as per this tutorial:
http://developer.android.com/resources/tutorials/views/hello-gridview.html
ie. in my main activity's onCreate():
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
Can anyone see anything I've done wrong?
Thanks!
Well, that's invalid XML, because there's no root element. Also, all of your TextView widgets have android:layout_height="fill_parent", which is rather strange. You might also consider using hierarchyviewer to examine your layout more closely and see what else may be going wrong.
you should put a (linear)layout underneath them, as your xml is invalid.
Related
I am trying to create a grid layout of cards similar to what is used in google play like this
The layout i am using and the layout obtained are these:
For GridView:
<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"
tools:context=".MainActivity"
android:background="#e5e5e5"
>
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="60dp"
android:numColumns="2"
android:layout_marginLeft="2dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</RelativeLayout>
for GridItem:
<?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"
android:background="#drawable/bg_card"
>
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:textSize="17sp"
android:layout_below="#id/imgIcon"
android:layout_marginTop="35dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
The output that I get is this:
The image size that i am using is 356x500. (I do get a somewhat well sized grid on using 300x300)
The issues that i am facing are:
1.As this image shows, the cards are too big with lots of white spaces around the image and the image does not fit like in the
google play store. How do i make the card be propotional to the
image. The amount of white space changes with change in image size.
The card is "stuck" to the left edge of the screen . How do i keep spacing between the edge of the screen and the card.
Please help me in rectifying this issue.
Thanks
Space are bacause you used
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
Also edit your
<ImageView
android:id="#+id/imgIcon"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
in gridview use
android:stretchMode="none" instead of android:stretchMode="columnWidth"
Put android:scaleType="fitStart" inside your
Use imgIcon.setAdjustViewBounds(true);
You can also do the same in the xml
I'm trying to show a list of images in a GridView, and I want to crop only the center of the images in this list. So below is the layout of each image item:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/place_image"
android:src="#drawable/ic_res"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"/>
And here is the layout that contains the grid view:
<?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="vertical" >
<LinearLayout android:id="#+id/upload_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#f6f6f6"
android:padding="10dp"
android:visibility="gone">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton android:id="#+id/photo_select"
android:layout_width="50dp"
android:layout_height="40dp"
android:scaleType="fitXY"
android:src="#drawable/ic_photo"/>
<EditText android:id="#+id/photo_caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/caption"
android:inputType="textMultiLine"/>
</LinearLayout>
<TextView android:id="#+id/photo_path"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<Button android:id="#+id/photo_upload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/upload_photo"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_gravity="right"/>
</LinearLayout>
<TextView android:id="#+id/no_photos"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textStyle="bold"
android:textSize="20dp"
android:text="#string/no_photos"
android:visibility="gone" />
<GridView android:id="#+id/grid_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:columnWidth="120dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</LinearLayout>
And here is the result I got:
This is weird because the images are all cropped in a strange way like that. Below is one of my original images:
I've never encountered this problem so if any of you are familiar with this, please help me find the reason of this. Thank you!
P.s: I guess this can only be the problem of the xml layout so I don't think it is necessary to include my android source code here. But if it really is, please let me know where the problem may come from and I'll edit this question with my code.
The reason is GridView clears all the layout params set for the tiles and it set its own layout params so better you add your ImageView inside a RelativeLayout. This is the same with all the AdapterView like ListView,Gallery etc.
I have a layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<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:layout_above="#+id/textView2"
android:layout_below="#+id/textView1" android:columnWidth="90dp"
android:gravity="center" android:horizontalSpacing="10dp"
android:numColumns="3" android:stretchMode="spacingWidth"
android:verticalSpacing="10dp" />
<TextView android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" android:text="Level 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp" android:text=""
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
So I want to have same layout when user scrolls right. There will be again gridview and textviews with different images. However I could not achieve it even if I looked examples. I tried to convert it to Linear Layout but again I could not create scroolview.
In other words, I have a layout like this one:
And when user scrolls right I want to have another gridview that holds different images. When user scrolls nothing changes but just images. Any help?
As I understood you want to make it possible to scroll your images in GridView horizontally. You can't achieve it with ScrollView. Try to use TwoWayGridLayout. Or you can use ViewPager and Fragments. Choose one that is more convenient for your purposes.
What i want is to have the gridview filling whole screen. And when you scroll it down, at the end would appear a layout with 2 buttons. Ive been reading and couldnt figure how to get it. I could fix it on the top of the screen and the bottom (over the gridview). And also trying the layout with the button wont even appear when the gridview is filled.
Ive been playing with weights, aligns, etc. But cant find whats wrong. Heres the xml:
<?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:background="#drawable/fondo">
<GridView android:layout_width="fill_parent"
android:id="#+id/gridView1"
android:layout_height="wrap_content"
android:numColumns="2"
android:listSelector="#00000000">
</GridView>
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_below="#id/gridView1">
<ImageView android:id="#+id/botonAtras"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:onClick="onBotonAtrasClick">
</ImageView>
<ImageView android:id="#+id/botonAdelante"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:onClick="onBotonAdelanteClick">
</ImageView>
</LinearLayout>
</RelativeLayout>
As far as I can tell you can't easily do this. You can do it with a plain ListView using addFooter(), but sadly GridView doesn't have this method. Also you can't implement your own GridView because it uses a lot of private APIs.
However, there is a horrible hack used here that might work:Android Pull to refresh
Apparently it uses a LinearLayout containing the header view and the ListView and moves them both. (According to this page.) As that guy says, a lot of work for a horrible horrible hack.
The only other way I can think to do it, is to give up on GridView and use a ListView where each row is a horizontal LinearLayout. Still very hacky though.
set LinearLayout below GridView by setting android:layout_below:"#+id/gridView" inside id/linearLayout
I solve this problem like this:
<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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fillViewport="true" >
<GridView
android:id="#+id/myGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="60dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:padding="10dp"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
</LinearLayout>
<Button
android:id="#+id/bacth_button"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:layout_marginTop="2dip"
android:text="Uninstall Selected Apps"
android:textColor="#000000"
android:textSize="16dip"
android:textStyle="bold" />
</LinearLayout>
include GridView in linearlayout,then i's work as you like.
Hi all,
I'm a newbie to Android and having problems displaying items using a Linear layout and wondering if anyone can help me. The item list and pictures display fine but the textbox and search button are displayed for each item rather than getting displayed once. My code looks like:
<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:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:id="#+id/selection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/searchHeader"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/searchItem"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/search"
android:onClick="Search"/>
</LinearLayout>
</LinearLayout>
With this XML you should only see exactly one imageview and not a list of images as you discribed. Do you alter this layout programmatically in order do display various images? Maybe there you also add again the items you only want once.
Try moving the textview and search button outside of the linearlayouts they are in.