I'm creating a gridview that items come from database..
Every thing works well.. but when I try my app I see these merged items in the image below..
So the question is : What is the reason for this and how to fix it ?
This is my xml :
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:horizontalSpacing="10dp"
android:columnWidth="130dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" >
</GridView>
and this is my grid item xml:
<?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="#drawable/round_rect"
android:padding="15dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/categoryIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/categoryName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
android:gravity="center"
android:text="Small Text"
android:textSize="16sp" />
</LinearLayout>
I assume the issue is that every grid cell should have the same size.
since your item has
<ImageView ...
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
a cell is as big as its image.
if you set it to some absolute size all cells should be the same
<ImageView ...
android:layout_width="100dp"
android:layout_height="100dp" />
also make shure that the TextView uses only one line
<TextView ...
android:ellipsize="start"
android:singleLine="true"
... />
Related
Hello stackoverflow members. i am trying to achieve this:http://imgur.com/dqwOAOf
But for some reason the two texts cant take these positions like this http://imgur.com/lyYg8Ei
Could anyone explain what i am doing wrong?
and please forgive my artistic talents.
i have added the whole xml file.
The idea is that the two textviews timer and typegekookt are displayed in the center of backgroundtypegekookt evenly spaced out.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:id="#+id/eggContainer"
android:layout_height="wrap_content"
android:padding="15dp">
<ImageView android:id="#+id/eggtimerimage"
android:src="#drawable/eiwit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center_vertical"
/>
<ImageView android:id="#+id/backgroundtypegekookt"
android:src="#drawable/timerwijzer"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
/>
<TextView
android:id="#+id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="zacht"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_alignTop="#+id/divider2"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10:00"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/divider2"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/eggtimerimage"
android:layout_marginBottom="-30dp"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/backgroundtypegekookt"
android:layout_alignStart="#+id/backgroundtypegekookt"
android:layout_alignRight="#+id/backgroundtypegekookt"
android:layout_alignEnd="#+id/backgroundtypegekookt" />
</RelativeLayout>
Instead of using the ImageView android:id="#+id/backgroundtypegekookt", use a RelativeLayout (or a LinearLayout) with that background (android:background="#drawable/timerwijzer"), and put your TextViews in it
This is what I mean:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/eggContainer"
android:layout_height="wrap_content"
android:padding="15dp"
>
<ImageView
android:id="#+id/eggtimerimage"
android:src="#drawable/eiwit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center_vertical"
/>
<LinearLayout
android:id="#+id/backgroundtypegekookt"
android:background="#drawable/timerwijzer"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:orientation="vertical"
>
<TextView
android:id="#+id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="zacht"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/timer"
android:below="#id/typegekookt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="10:00"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_centerHorizontal="true"
/>
</LinearLayout>
<!-- You can use 2 Views instead of 2 TextViews, more efficiently -->
<!-- Anyway, in your screenshots I only see 1 - I guess you'll have to fix that -->
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-30dp"
/>
<TextView
style="?android:listSeparatorTextViewStyle"
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignLeft="#id/backgroundtypegekookt"
android:layout_alignStart="#id/backgroundtypegekookt"
android:layout_alignRight="#id/backgroundtypegekookt"
android:layout_alignEnd="#id/backgroundtypegekookt"
/>
</RelativeLayout>
I also fixed the deprecated fill_parent to match_parent and #+id (anticipated reference) to #id (reference), where needed.
Also see my comments in the layout avout the 2 last views.
I am having a problem with the layout xml for my fragment... I think it may be because the layout was originally made for just an activity, and then later it was changed to a fragment. It looks like this in my editor:
But in my phone and emulator, it ends up like this:
Can anyone think of a solution for me? I've tried out multiple things but cannot seem to fix it, as i think maybe the rules are a little different when working with fragments? Thank you for all and any help!!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title" />
<EditText android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/body" />
<EditText android:id="#+id/body" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="vertical" />
<Button android:id="#+id/confirm"
android:text="#string/confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Layout file for the activity:
<?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" >
<FrameLayout
android:id="#+id/frame1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginTop="130dp"
android:layout_toRightOf="#+id/textView1" >
</FrameLayout>
</LinearLayout>
Just change android:layout_width to match_parent. This will fill up all the available space horizontally.
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/body" />
<EditText android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="vertical" />
<Button android:id="#+id/confirm"
android:text="#string/confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
For Layout file of activity :
<FrameLayout
android:id="#+id/frame1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginTop="130dp"
android:layout_toRightOf="#+id/textView1" >
</FrameLayout>
You can use the property "ems" to change the size.
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
for your text views and edit views try to match_parent instead of wrapping content
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/title" />
<EditText android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
How do i align the arrows to be right above/below the numbers? Does each arrow need to have it's own linear layout? Is there a way to set this without setting a static amount of padding? I would like this to be generic enough to be used and show up properly on different devices...
I'm relatively new to android development - especially the UI portion of it... so any help would be appreciated!
What I See (Above)
What I Would Like To See (Above)
You can nest another LinearLayout (with orientation:vertical) inside your LinearLayout (with orientation:horizontal).
<?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:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/one"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/two"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
</LinearLayout>
Note that nesting too many layouts inside a layout is discouraged. Reference:
http://developer.android.com/training/improving-layouts/optimizing-layout.html
But having 2 layout hierarchy is totally fine.
You need to nest two vertical LinearLayouts inside of your horizontal LinearLayout. Here's one where I do the same thing but I have empty Views on each side and one in the middle. You can take those out if you don't want them and obviously change your ids, backgrounds, and such
<LinearLayout
android:id="#+id/mpImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/mpLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/mpUpBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/UpArrow"
android:onClick="cycleUp"/>
<TextView
android:id="#+id/mpTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="breakfast"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black"/>
<ImageButton
android:id="#+id/mpDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/catLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/catUpBtn"
style="#style/UpArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleUp" />
<TextView
android:id="#+id/catTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beef"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black" />
<ImageButton
android:id="#+id/catDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
</LinearLayout>
You will notice I have also used weight and a 0dp for the width of the nested LinearLayouts and for the View to give them the separation I wanted and to look right on different screen sizes. You can change those depending on your needs.
You can have nested layouts. Be careful not to have too many, however two should be fine. Here is an example of what I think you are looking for. The arrows and text should be aligned thanks to RelativeLayout.
<?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:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_one"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_two"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/two"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
I have a lot of info to put on one xml page. Now i got what I want in the positions i want. However instead of fitting all my data on 3 key parts without running into each other, It keeps running into the next TextView. I was wondering how to have it auto adjust.
<?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"
android:orientation="vertical" >
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/back" />
<TextView
android:id="#+id/makeup_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginTop="97dp"
android:text="#string/part_section_2" />
<TextView
android:id="#+id/part_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginLeft="19dp"
android:layout_marginTop="38dp"
android:text="put text here for info" />
<TextView
android:id="#+id/part_safety"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_makeup"
android:layout_below="#+id/safety_title"
android:layout_marginTop="28dp"
android:text="put text here for safety" />
<TextView
android:id="#+id/info_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="42dp"
android:text="#string/part_section_1" />
<TextView
android:id="#+id/part_makeup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_info"
android:layout_below="#+id/makeup_title"
android:layout_marginTop="33dp"
android:text="put text here for makeup" />
<TextView
android:id="#+id/safety_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/part_makeup"
android:layout_marginTop="48dp"
android:text="#string/part_section_3" />
<TextView
android:id="#+id/part_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textColor="#b70000"
android:textSize="16sp"
android:text="put text here for part title" />
</RelativeLayout>
would ScrollView work better? and how would switch this from this to ScrollView.
skin is 480x800
density is high(240)
Strings file - http://pastie.org/8534713
Changing to ScrollView (source):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- your Button and TextView widgets -->
</RelativeLayout>
</ScrollView>
Edit:
As well as that, try changing your back button XML to this:
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/part_safety"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/back" />
The problem was android:layout_alignParentBottom="true". The bottom ended up not going to the bottom of the page like you had before. The ScrollView cut back on the bottom of the layout.
Hoping this is a simple one
I want two textviews on the same line aligned to the left.
Currently my layout is as shown:
I want this layout(note i modified the diagram on paint):
here is the xml i currently have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtSetItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:layout_weight="2"
android:textAppearance="?android:attr/textAppearanceLarge"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"/>
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:focusable="false" />
<TextView
android:id="#+id/txtSetAmount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false" />
<TextView
android:id="#+id/txtSetPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"/>
hmm your layout shouldn't compile-- there is no attribute android:layout_width on the TextView objects.
To fix this, remove layout_weight and set layout_width to wrap_content
Anyways, here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this"
/>
</LinearLayout>
Change your first TextView's weight to 0 (or to something smaller than 1). You're giving them equal weight and LinearLayout places them in a way that gives them equal width, which isn't what you want.
Don't use weight.
Use wrap_content on the layout_width.
This will get you what you are looking for:
<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"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This"
android:paddingLeft="10dp" />
</LinearLayout>
one way to go about this would be to use relative layout .
You can change how "close" or "far" apart the two textviews will be using changing the android:layout_marginLeft property on textView2.
The following property:
android:layout_alignBaseline="#+id/textView1"
makes sure that tv2 is aligned with tv1.
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="26dp"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_marginLeft="32dp"
android:layout_toRightOf="#+id/textView1"
android:text="TextView" />
</RelativeLayout>