How to keep the ImageView inside the bounds of screen - android

I have an imageview left aligned with a textview. The width attribute of the textview has value "wrap_content". The problem is whenever the length of the text inside the textview is exceeds a limit the image view goes out of the visible screen. How to set a limit to the width of textview so the imageview remains inside the bounds of screen?
XML layout:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryText"
android:paddingBottom="10dp">
<RelativeLayout
android:id="#+id/user_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/question_title"
android:layout_marginTop="5dp"
android:minHeight="30dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/user_dp"
android:layout_width="34dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:src="#drawable/united_logo"
app:civ_border_color="#color/colorBlack"
app:civ_border_width="1dp" />
<TextView
android:id="#+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/user_dp"
android:layout_toRightOf="#+id/user_dp"
android:text="A small text"
android:textColor="#color/colorBlack" />
<ImageView
android:id="#+id/button"
android:layout_width="15dp"
android:layout_height="17dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/user_name"
android:layout_toRightOf="#+id/user_name"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
<TextView
android:id="#+id/question_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/posted_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/user_info"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:text="5th July, 10:23 IST"
android:textSize="10sp" />
</RelativeLayout>


If all you need is a drawable image at the end of the textview, drop the ImageView and use this for your TextView:
android:drawableEnd="#mipmap/ic_launcher_round"
android:gravity="center"

Related

Android - ImageButton in RelativeLayout not matching parent size

Fairly new to Android dev, I'm having trouble with a RelativeLayout. In the following XML example, I would expect my ImageButton (on the right, with the '+') to match the RelativeLayout height. However, it doesn't, as shown on this image:
Why isn't the right button with the '+' matching the maximum possible height ?
Here's the related code:
<?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:background="#drawable/artist_cell_background">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:src="#drawable/ic_music_note_24dp">
</ImageView>
<ImageButton
android:id="#+id/artist_button"
android:src="#drawable/ic_add_24dp"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/artist_cell_playlist_button_background">
</ImageButton>
<TextView
android:id="#+id/artist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button">
</TextView>
<TextView
android:id="#+id/number_of_albums"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_marginBottom="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button"
android:layout_below="#id/artist_name">
</TextView>
</RelativeLayout>
Thanks for any help or idea.
EDIT: What I want is the right button to occupy the height of the line, i.e. have the same height than the two text zones of the middle plus top and bottom margins, no more no less.

As I can understand from the XML, it seems you want to make the "+" button more clickable.
I would suggest you to have some padding and that should do the job.
EDIT 1 : You may do the following without padding, by aligning Top and Bottom of the ImageView to the relevant 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="wrap_content"
android:background="#drawable/artist_cell_background">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:src="#drawable/ic_music_note_24dp">
</ImageView>
<TextView
android:id="#+id/artist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:layout_alignParentTop="true"
android:paddingTop="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button">
</TextView>
<TextView
android:id="#+id/number_of_albums"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:paddingBottom="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button"
android:layout_below="#id/artist_name">
</TextView>
<ImageButton
android:id="#+id/artist_button"
android:src="#drawable/ic_add_24dp"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignTop="#id/artist_name"
android:layout_alignBottom="#id/number_of_albums"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/artist_cell_playlist_button_background">
</ImageButton>
</RelativeLayout>

Put your relative layout inside a linear layout that should do it
<?xml version="1.0" encoding="utf-8"?>
<LinearLaout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/artist_cell_background">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:src="#drawable/ic_music_note_24dp">
</ImageView>
<ImageButton
android:id="#+id/artist_button"
android:src="#drawable/ic_add_24dp"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/artist_cell_playlist_button_background">
</ImageButton>
<TextView
android:id="#+id/artist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button">
</TextView>
<TextView
android:id="#+id/number_of_albums"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_marginBottom="10dp"
android:layout_toRightOf="#id/imageView"
android:layout_toEndOf="#id/imageView"
android:layout_toLeftOf="#id/artist_button"
android:layout_toStartOf="#id/artist_button"
android:layout_below="#id/artist_name">
</TextView>
</RelativeLayout>
</LinearLayout>

Your image may be small. Use android:scaleType="fitCenter" in the ImageButton.
Also try removing default padding and margin from the ImageButton by setting them to 0dp.

With the help of #rex, I figured out how to do this: enclose the left picture and the 2 TextViews in a RelativeLayout (this sets the size of the main RelativeLayout), and align top and bottom the ImageButton to this layout.
The code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/artist_cell"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/cell_background">
<ImageButton
android:id="#+id/artist_plus_button"
android:src="#drawable/ic_add_24dp"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/artist_infos"
android:layout_alignBottom="#+id/artist_infos"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/plus_button_background"
android:contentDescription="#string/artistPlusButtonCD">
</ImageButton>
<RelativeLayout
android:id="#id/artist_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/artist_plus_button"
android:layout_toStartOf="#id/artist_plus_button">
<ImageView
android:id="#+id/album_cover"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_music_note_24dp"
android:contentDescription="#string/albumCoverContentDescription">
</ImageView>
<TextView
android:id="#+id/artist_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/album_cover"
android:layout_toEndOf="#id/album_cover">
</TextView>
<TextView
android:id="#+id/number_of_albums"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_marginBottom="10dp"
android:layout_toRightOf="#id/album_cover"
android:layout_toEndOf="#id/album_cover"
android:layout_below="#id/artist_name">
</TextView>
</RelativeLayout>
</RelativeLayout>

TextView height stretches in parent with gravity right. why?

I am making chat activity and having issues with right chat bubble. As you can see in the image below. TextView stretches height wise. According to my thinking it should be stretching width wise first then if space is full it should stretch height wise. Please suggest me if it is possible with xml or not. I have seen java code solution but i want to find a solution in xml first.
layout.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="wrap_content"
android:gravity="right"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#drawable/ic_bubble_sent"
android:gravity="right">
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_msg_content"
android:layout_marginTop="-9dp"
android:text="00:33"
android:textColor="#color/colorAppGray"
android:textSize="12sp"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Replace your two TextView with this,
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
I removed all unnecessary alignments from first TextView.
UPDATE
The overall layout looks like,
<?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="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
>
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Note : I removed your background for testing.

How do I align vertically centered a Spinner and a TextView

I have a Spinner and a TextView in my LinearLayour.
I am trying to align the Spinner and a TextView vertically so that the center of both in on the same line:
This is my XML for that element:
<LinearLayout
android:id="#+id/dropdownlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center" />
<TextView
android:id="#+id/ok1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#drawable/white_box"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/ok"
android:textColor="#android:color/black"
android:textSize="#dimen/normale" />
</LinearLayout>
Tried this code as well, same result:
<RelativeLayout
android:id="#+id/dropdownlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:gravity="center" />
<TextView
android:id="#+id/ok1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/spinner1"
android:background="#drawable/white_box"
android:gravity="center"
android:padding="10dp"
android:text="#string/ok"
android:textColor="#android:color/black"
android:textSize="#dimen/normale" />
</RelativeLayout>

Well note that you can't use RelativeLayout with Gravity or Layout_gravity
an example of how i do things. This works perfectly (it's at the right of a list view cell centerred verticaly)
<RelativeLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="4dp" >
<TextView
android:id="#+id/annuaire_distance_etablissement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="4dp"
android:layout_toLeftOf="#+id/arrow_img"
android:singleLine="true"
android:textColor="#color/clr_main_green"
android:textSize="12sp" />
<ImageView
android:id="#+id/arrow_img"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="4dp"
android:src="#drawable/icone_fleche" />
</RelativeLayout>

Try this in Relative Layout like this
[<RelativeLayout
android:id="#+id/dropdownlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="250dp"
android:gravity="center"
android:background="#android:drawable/btn_dropdown"
android:layout_centerVertical="true"
android:layout_height="40dp"
android:layout_gravity="center" />
<TextView
android:id="#+id/ok1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/white_box"
android:gravity="center"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:layout_toRightOf="#+id/spinner1"
android:paddingRight="10dp"
android:text="#string/ok"
android:textColor="#android:color/black"
android:textSize="#dimen/normale" />
</RelativeLayout>]

You can simple wrap the Spinner and TextView inside a LinearLayout like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
Remove the row
android:layout_toRightOf="#+id/spinner1"
and if you want you can make relative the LinearLayout (adding the layout_below, layout_above, etc)
Then, inside both TextView and Spinner add:
android:layout_gravity="center_vertical"

You should stick to the linear layout and try the following on the TextView:
android:layout_gravity="center_vertical"
and then in your TextView you should change
android:layout_height="fill_parent"
into
android:layout_height="wrap_content"

center align imageview with above textview

I want to center align my imageview with the above textview here's an image of what I'm getting.
I need something like this in a relative layout
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/agility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:layout_centerHorizontal="true"
android:text="Agility"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<TextView
android:id="#+id/intl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/agility"
android:layout_alignBottom="#+id/agility"
android:layout_alignParentRight="true"
android:text="Intelligence"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<ImageView
android:id="#+id/img_int"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/img_str"
android:src="#drawable/intelligence" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
<ImageView
android:id="#+id/img_str"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/strength"
android:layout_alignParentLeft="true"
android:src="#drawable/strength" />
This is what i have done but the problem is that i can have the middle imageview centered align but the left and right one are with align to the most right and most left not in the center of above textview

In layout.xml you can use this for each Text+Image:
<TextView ...
android:text="The Text"
android:drawableBottom="#drawable/icon1" />
You could repeat it into an LinearLayout with the horizontal orientation

You can make three Relative Views each containing a Textview and Imageview posited one below the other with the ImageView in the cater of the parent Relative View.
Finally put these three within an outer Relative View to position them as you like.

Try to create three linear layouts with orietation vertical,
Each linear layout will contain textview and imageview with gravity center

You can use LinearLayout as parent Layout having android:orientation="horizontal".
and then use three LinearLayout each contains TextView and ImageView having android:orientation="vertical".
See 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:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
</LinearLayout>

Hope this helps:
<?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:background="#android:color/black" >
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img1"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text1"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img2"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text2"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img3"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text3"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
</RelativeLayout>

This is what you want...
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Check if your ImageView is centered on your layout with this attribute:
android:layout_centerHorizontal="true"
For your TextView, it needs a reference to be aligned above it and also be centered.
So you need this:
android:layout_alignParentEnd="#+id/imageView"
android:layout_alignParentRight="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center"
Create GridView adapter and your done.

Positioning a view under two views (or the lowest view)

I have a RelativeLayout with an ImageView on the left and then a TextView on the right. The TextView is downloaded from a website through their API so it's contents will be different each time.
I want to have another TextView underneath these two but I am having a problem when the TextView length is less than the ImageView. When this happens, the TextView at the bottom will overlap the ImageView because I align the bottom TextView to be below the TextView on the top right.
What I need to happen is to be able to align the bottom TextView under whichever view is the lowest.
This is my layout XML:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<ImageView
android:id="#+id/itemImageView"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/id_image" />
<TextView
android:id="#+id/itemContentsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/itemImageView"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:text="Sample contents\nSample contents\nSample contents" />
<TextView
android:id="#+id/itemIdTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/itemContentsTextView"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="1234" />
</RelativeLayout>

You should create LinearLayout as top parent and make it orientation:vertical. Then first add your relativeLayout and then add your TextView.
So it will looke like this.
<?xml version="1.0" encoding="utf-8"?>
<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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/itemImageView"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/id_image" />
<TextView
android:id="#+id/itemContentsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/itemImageView"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:text="Sample contents\nSample contents\nSample contents" />
</RelativeLayout>
<TextView
android:id="#+id/itemIdTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="1234" />
</LinearLayout>

Wrap the top ImageView and TextView in another RelativeLayout and use that as anchor for your bottom TextView.
Something like this (not tested):
<?xml version="1.0" encoding="utf-8"?>
<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" >
<RelativeLayout
android:id="#+id/wrappingLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/itemImageView"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/id_image" />
<TextView
android:id="#+id/itemContentsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/itemImageView"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:text="Sample contents\nSample contents\nSample contents" />
</RelativeLayout>
<TextView
android:id="#+id/itemIdTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/wrappingLayout"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="1234" />
</RelativeLayout>

Use one more RelativeLayout i have Tested and text Never overlaps
so it Should be :
<RelativeLayout
android:id="#+id/temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/itemImageView"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/itemContentsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/itemImageView"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:text="Sample contents\nSample contents\nSample contents" />
</RelativeLayout>
<TextView
android:id="#+id/itemIdTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/temp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="1234" />

Categories

Resources