GridView items overlapping each other - java

Please check my attached image. I am facing this issue when the product name is more than one line. I am confused what should i do now.
In my gridview i am facing this issue. How can i solve this? Here is my gridview xml code.
<GridView
android:id="#+id/productGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="4dp"
android:horizontalSpacing="3dp"
android:focusable="true"
android:stretchMode="columnWidth"
android:fitsSystemWindows="true">
</GridView>
Here is my grid item xml
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_productImage"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/avatar"/>
<TextView
android:id="#+id/tv_productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Bread Trimmer"
android:textSize="17sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp">
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/coin"/>
<TextView
android:id="#+id/tv_productPrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1049999999999990"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:textColor="#FAAD18"
android:textSize="17sp"/>
</LinearLayout>
<TextView
android:id="#+id/btn_buy"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_height="wrap_content"
android:text="Get Now"
android:textColor="#FFFFFF"
android:focusable="false"
android:textSize="16sp"
android:gravity="center"
android:background="#drawable/buy_background"
android:textStyle="bold"
android:textAllCaps="false"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
This is single item. I am confused where did i made mistake. Please help. Thanks.

solution 1
you can add this attribute to your tv_productName
android:ellipsize="end"
android:singleLine="true"
android:maxLines="1"
this lines add ... to end of your TextView text
solution 2
use this library for your tv_productName TextView
autofittextview
this library fit your TextView size to prevent overlaping
solution 3
this is a bad solution but it work you can add margin to your parent layout(RelativeLayout)
android:layout_margin="5dp"

I think the problem is. Your text view. The name of the product. As the product name increases the whole text view get divided and spread vertically. Like Rhinestones Rose watch the watch is in the vertical position related to the upper text which is creating the issue. I guess. Try to use small text and check if that's the issue or not and if that's the issue you can easily be able to solve it I guess and plz let me know if it works. Thanks .

Related

Align Bitmap Image inside ImageView - CS50 Pokedex Android

I have been working on CS50 and now I am tracking android. I almost finished my PSet Pokedex, but small thing is bothering me.
I am trying to align bitmap image on top of ImageView, but I could not do it. Could you please help me? I tried "scaletype", "layout_gravitiy" etc. But it does not seem to work. I want image to be just below description stating that this should be changed by the java code.
Please see current view here
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PokemonActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_name"
android:textAlignment="center"
android:textSize="18dp"
android:textStyle="bold"
android:paddingTop="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_number"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type1"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type2"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/pokemon_button_catch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:paddingTop="5dp"
android:textSize="24dp"
android:onClick="toggleCatch"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_description"
android:textAlignment="center"
android:textSize="16dp"
android:textStyle="bold|italic"
android:paddingTop="50dp"
android:text="This is testing something, this should changed by the java code."/>
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Welcome to StackOverFlow !
If there is no special requirement than no need to use match_parent inside ImageView. You can do following adjustment-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PokemonActivity">
..............
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Happy coding !
sorry. I was roasting snow in a furnace. I found out that actually source image is one to blame. Image size does not wrap the content but it has extra space around content. This is the reason when it is enlarged, there is space between text and image.

How to add a number and a frame after textview

I want to add a framed number (#+id/number_ayat) right after the end of the text(#+id/isi_ayat), but it can't if I use textview. So how can I add numbers and frames after the end of the text?
This is my code in custom_isi_ayat.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:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
>
<LinearLayout
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:background="#drawable/frame"
android:gravity="center" />
<TextView
android:gravity="left"
android:textAlignment="textStart"
android:id="#+id/isi_ayat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30dp" />
</LinearLayout>
<TextView
android:id="#+id/translate_bahasa"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:paddingLeft="20dp"
android:id="#+id/terjemahan"
android:textStyle="italic"
android:lineSpacingMultiplier="0.7"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
in capture result :in capture result :
and I want to result is : and I want to result is
Whether this can be solved with java?
Thanks in advance for help with my problem !
I have modeled the layout in Android Studio. I had to force rtl on my layout so there may be some things to correct. The first that I sugest is changing the width of "#+id/isi_ayat" as explained below.
The changes I did were the following:
In the LinearLayout I set gravity to end for the textviews to go to the right.
For android:id="#+id/isi_ayat", I set gravity and textAlignment to end so the text aligns to the end of the TextView, and also set layout_gravity to end and center_vertical for the TextView to also go to the end. And also changed the width from match_parent to wrap_content.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:gravity="center"
tools:text="10"/>
<TextView
android:layout_gravity="end|center_vertical"
android:gravity="end"
android:textAlignment="gravity"
android:id="#+id/isi_ayat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
tools:text="lorem ipsum dolo asd"/>
</LinearLayout>
EDIT I
I removed android:layout_marginRight="10dp" from android:id="#+id/number_ayat".
As you can see in the picture below. There is no more space between the two textviews.
This is the closest you can get without making the number's textview smaller.
EDIT II
I think I understood, if there are more lines the number must be after the last line.
Change android:gravity="end" to android:gravity="end|bottom" in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">

automatic switch textview size by display

Please I have problem with size in textView
I have .xml code, where I use linear/horizontal/frame layout and I have in layout some object (textview) and have same text in textviews.
I need switch text size according to Phone display.
but if I put 130dp is not good for small display.
little of my code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="88"
android:id="#+id/hlc"
android:textSize="130dp"
android:textIsSelectable="false"
android:gravity="end"
android:textStyle="bold" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_weight="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="°"
android:id="#+id/textView15"
android:textSize="#android:dimen/notification_large_icon_width"
android:textIsSelectable="false"
android:textStyle="bold"
android:layout_weight="9"
android:textAlignment="viewStart" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="8"
android:id="#+id/hld"
android:textSize= "#android:dimen/notification_large_icon_width"
android:textStyle="bold"
android:textAlignment="viewStart"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
if i use #android:dimen/thumbnail_width it's too big for my formated display
I need to fill in framelayput with text in textview.
I can't put image here :(
... and how are used values-small, values-large, etc ? example please. example declarate and example use in xml.
Thanks.
What you can do is create different dimension folder for different size with different sp (better to use sp than dp for text size).
check this documentation for better understatement
and also check this

TextView not being displayed / Relative Layout

This might seem like a very easy question for some of you folks, but I can't find a way to display my TextView even after trying numerous solutions proposed on this site. Not that I am using the built-in Eclipse XML tool for Android and that the TextView is visible on this graphical layout. Here's what I've got so far :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:contentDescription="#string/no_of_screens"
android:id="#+id/imageViewHome"
android:layout_width="290dp"
android:layout_height="212dp"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp"
android:src="#drawable/logo" />
<RelativeLayout
android:id="#+id/relativeid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/launch_button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="80dp"
android:text="#string/launch" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/launch_button"
android:entries="#array/num_array"
android:prompt="#string/screen_prompt"
android:textSize="8pt" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/launch_button"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="16dp"
android:layout_toLeftOf="#+id/spinner1"
android:text="#string/no_of_screens"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
As for now, all of the other elements are being displayed correctly. Any help would be greatly appreciated!
Thanks
Where do you want your textView?
I would loose these two:
layout_alignBaseline="#+id/launch_button
layout_alignBottom="#+id/launch_button
and use one of these:
layout_below="#+id/launch_button
layout_above="#+id/launch_button
That will put it either above or below the button.

Android Custom ListViewItem Layout

I dont quite get the layout of my List View Item doesnt show like I want it to.
I hope somone would give me some hints since i cannot make it work for quite some time now.
What i want is as follows:
Here is my approach:
<?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="20dip"
android:padding="6dip">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="3dip">
<TextView
android:id="#+id/nametext"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dip">
<ImageView
android:id="#+id/photo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/toptext"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/middletext"
android:singleLine="true"
android:ellipsize="marquee"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/bottomtext"
android:singleLine="true"
android:ellipsize="marquee"
/>
</LinearLayout>
<ImageView
android:id="#+id/stars"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="6dip"
android:src="#drawable/icon" />
</LinearLayout>
Any help would be appreciated.
I already tried different sizes and a RelativeLayout. No change.
It doesnt look anythik like i thought it should.
edit three blanks missing
edit2 added pic
You could do this with LinearLayouts, but you'll need three nested layouts:
A vertical LinearLayout containing everything.
A horizontal LinearLayout containing everything aside from the heading.
A vertical LinearLayout containing the non-heading TextViews.
The inner vertical LinearLayout will probably need android:layout_weight="1" so it stretches to fill the available space but doesn't squeeze out the right-hand ImageView.
That's all very expensive, particularly when multiplied by the numerous views in a ListView. A RelativeLayout can get this done with only one layout.
<?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="wrap_content"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:textSize="40sp">
</TextView>
<ImageView
android:id="#+id/imageView1"
android:layout_below="#+id/textView1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" >
</ImageView>
<ImageView
android:id="#+id/imageView2"
android:layout_below="#+id/textView1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" >
</ImageView>
<TextView
android:id="#+id/textView2"
android:layout_below="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_below="#+id/textView2"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
<TextView
android:id="#+id/textView4"
android:layout_below="#+id/textView3"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
</RelativeLayout>
Edited for formatting and to add:
This is the result. Of course, text and image sizes need adjusted, but the basic result is what you've described.
Im not sure if you really want to have a 3dip headline and 7dip content...
if you want the stuff inside the outer linearlayout vertical arranged, use
android:orientation="vertical"
in the parent LinearLayout. to arrange the three items in the content part of your layout, you might use android:weight or android:alignParentLeft / Right.
I fear im not sure waht you want to do, so i can not edit your layout :(

Categories

Resources