Why is there extra padding on the bottom of my row? - android

I have the following layout. This defines a row in my ListView. I noticed that the text is not centered in the row. There seems to be extra bottom padding. How can I make the text appear in the center, vertically, so there is no padding?
<?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/stocks_gradient">
<TextView
android:id="#+id/nameText"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Symbol" android:textStyle="bold" android:textSize="24sp" android:layout_width="100dp" android:textColor="#4871A8" android:paddingLeft="5dp"/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100" android:textStyle="bold" android:textSize="24sp" android:textColor="#4871A8"/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:textSize="18sp" android:text="3.07(+1.08%)" android:padding="7dip"/>
</RelativeLayout>

Did you try setting the layout_gravity to center_vertical?
Also, you may have a reason for doing so, but the layout you show would be much simpler as a horizontal LinearLayout. There is no need for a RelativeLayout here.

Related

layout_gravity isn't working as expected - just partially

I have the following layout:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/title_day"
android:textStyle="bold"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="end|center_vertical" />
</LinearLayout>
</LinearLayout>
And this looks like this:
And I want the last TextView with id tv_fail to be pinned to right end of screen. I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end. How to fix it?
I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end.
This is due to how LinearLayout works; your understanding of layout_gravity is generally correct.
LinearLayout takes its children and lays them out in a line, and the children will all be packed towards the "start" of the LinearLayout. In other words, a horizontal LinearLayout will ignore the horizontal component of the layout_gravity attribute of a child.
There are a few ways to work around this. The one that I think works best for your scenario is to make the TextView stretch to fill all the remaining space in the LinearLayout (using layout_weight), and then have the TextView position its text at the end of its content area (using gravity).
<TextView
android:id="#+id/tv_fail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="end"/>
If you just want to set text inside of your last TextView to end then you should use :
android:gravity="end"
for TextView gravity use:
android:layout_gravity="center"
Difference between android:gravity & android:layout_gravity is that first one arrange content inside of any view with given gravity while second one arranges view according to given gravity.
Updated code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="title_day"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="+22"
android:textSize="16sp" />
</LinearLayout>

Relative Layout, align center of parent and right of view with no overlap

I am trying to align a TextView to be centered in a relative layout but also to the right of an ImageView. I would like it to look like this.
[-(image)-----some text here------------]
I'm able to do this with the code below, but if the text becomes too long it overlaps the image.
<?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:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_centerInParent="true" />
</RelativeLayout>
I have tried aligning the TextView to the right of the ImageView but it stops centering in parent if I do that. Any help is appreciated
You could try something like this. I used a radio group instead of a linear layout for this but it should still work. Have a the linear layout horizontal as you already do and then make the layout gravity center then just put the image first then the text view
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:paddingTop="20dp">
<RadioButton
android:id="#+id/radio_student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_student"
android:onClick="onRadioButtonClicked"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"/>
<RadioButton
android:id="#+id/radio_teacher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_teacher"
android:onClick="onRadioButtonClicked"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"/>
</RadioGroup>
EDIT:
I don't know if the margin attributes for the buttons I have work on text views but padding left on the text might work
try this:
<?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:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="`enter code here`true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_toRightOf="#+id/navMenu"
android:alignParentRight="true"
android:gravity="center" />
</RelativeLayout>
You could (and should, for performance sake), use a compound drawable for the TextView (and get rid of the ImageView)
You want the image to stay on the Left part of the TextView, so use android:drawableLeft:
<?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:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White"
>
<TextView
android:id="#+id/actionBarTitle"
android:drawableLeft="#drawable/home_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:centerInParent="true"
android:gravity="center"
/>
</RelativeLayout>

RelativeLayout with two textviews on one horizontal line with ellipsis support

I am trying to setup a RelativeLayout where two TextView are shown on one line. The first TextView should be aligned to the left. The second TextView should be aligned to the right. If the second TextView text would expand to overlap the first TextView then I want to ellipsize the text in the middle. I don't want to ellipsize the first TextView.
This is what I have come up with. The problem is the second TextView is directly to the right of the first TextView instead of being aligned to the far right. It seems like I cannot use alignParentRight and toRightOf at the same time.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[DetailedType]"/>
<TextView
android:id="#+id/Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/Left"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:ellipsize="middle"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[CustomerName]"/>
</RelativeLayout>
The basic idea to achieve this id to add a dummy invisible view in the horizontal center of your RelativeLayout and the tell the left TextView to be to the left of it and the right TextView to be to the right of it... see below
About your problem with aligning it to the right, you should stretch the TextView to take half of the screen and then set android:gravity="right" on the TextView
<?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">
<View
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/Left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/dummy"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/Left"
android:gravity="right"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</RelativeLayout>
But you can always use LinerLayout to the job
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/Left"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
From what I understand you only miss android:gravity="right" on your right view.

android listView minimize a gap between text and subtext

minimize the gap that I have between two TextViews (main text and subtext) that are in a linear layout and vertical. I tried to pad the subtext to the top, change the hight of the subtext and change the top margin but the gap remains, and I just get a row with an unnecessary hight. My XML is attached
<?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"
android:padding="10dp">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitStart"
android:layout_marginTop="5dp"
android:layout_marginRight= "10dp"
android:gravity="center_vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#000000"
android:textSize="20sp"
/>
<TextView
android:id="#+id/subString"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
this is a picture of what it should look like
but what I actually have is a big gap between IMDB and account
Your screenshot isn't showing up, but one thing you can try that's worked for me before is to set the bottom margin of your title and top margin of your subString to negative; i.e.
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginBottom="-10dp"
android:textColor="#000000"
android:textSize="20sp" />

RelativeLayout margin problem, text bleeding into other "fields"

been trying to figure out Android layouts and having a bit of an issue. i got as far as figuring out how to get the objects in the places i want, using a RelativeLayout (tried LinearLayout and TableLayout combinations, only to find that gravity and attributes weren't doing things i thought they would...) but i've run into an issue with text bleeding behind other text.
the second item demonstrates the problem. i'd like to have this same layout without the text bleeding. here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:layout_alignParentLeft="true"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
Put first your item_text_count and text_count items (I mean, put them above the text_count in the XML)... then:
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#id/text_count"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
As you see, the difference is android:layout_toLeftOf="#id/text_count".
Set a maxEms attribute on the product TextView so that it's width can never exceed n ems.
That way should be the best solution.
I think you just have to add android:layout_toRightOf="#id/item_text_product" to the second textView, but can't try it right now.
The issue is with wrap_content, with it the view is going to expand to fit its content.
What about shrinking the text and using nested Linear Layouts?
You might try and use a LinearLayout if you don't want overlapping behavior.
Something like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
layout_weight="1" causes that view to expand to fill the available space not taken up by the right-hand views.

Categories

Resources