Develop Reference

Centering a layout in a ListView

I dont get it - I cannot align the RelativeLayout in the ListView - that is I want to center the RelativeLayout that holds and image and some textviews.
The RelativeLayout is still on the lefthand-side of the screen, though the listview-width should match the parent. What could be wrong?
Here's the xml, for the list item layout in the adapter.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/os_listview_imageview1_id"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="10dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher_background"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/os_listview_imageview1_id"
android:orientation="vertical"
android:layout_centerVertical="true">
<TextView
android:id="#+id/os_listview_name_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nougat"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_version_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="7.0"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_api_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="24"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/os_listview_release_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="2016"
android:layout_centerVertical="true"/>
</LinearLayout>
</RelativeLayout>
And the ListView is here in the following 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
tools:context="se.listview.stude.listviewtest180303.MainActivity">
<ListView
android:id="#+id/os_listView_id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Edit: this is how it looks the list item in the design-mode in android-studio.

Use this as rootLayout of your item :-
<RelativeLayout
xmlns:android
="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
>
You would get the same output..
Also in your activity put listView width as match_parent

I think here's the layout that you want. Keeping it as simple as possible.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout_os_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/os_listview_imageview1_id"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/os_listview_imageview1_id"
android:orientation="vertical">
<TextView
android:id="#+id/os_listview_name_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nougat" />
<TextView
android:id="#+id/os_listview_version_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.0" />
<TextView
android:id="#+id/os_listview_api_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="24" />
<TextView
android:id="#+id/os_listview_release_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2016" />
</LinearLayout>
</RelativeLayout>

How to limit from scrolling of an image (in scrollview) into the white space?

I am a beginner in Android Studio and android development in general. I want the scrollview to allow scrolling only till the end of the image but its scrolling into the white space. I tried quite a few things but I am just not getting it where I am going wrong.
The scrollable image,
Image showing scrolling into the white space
Here is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
tools:context="com.android101.chroniclesofnarutouzumaki.MainActivity">
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/naruto_uzumaki"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:id="#+id/naruto" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Never Give Up!" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/text1"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="438dp"
android:text="What to Add?" />
</RelativeLayout>
</ScrollView>

The reason for getting extra whitespace in Layout is In TextView you mentioned the marginTop attribute as android:layout_marginTop="438dp" and also you didn't set adjustViewbounds to ImageView.
More Over the intention of image is to show on layout background means you can set the image as background to relative layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:overScrollMode="never"
>
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/naruto"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Never Give Up!" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/text1"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:layout_alignParentBottom="true"
android:text="What to Add?" />
</RelativeLayout>
</ScrollView>

try this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:overScrollMode="never"
>
<RelativeLayout
android:id="#+id/relative_layout"
android:layout_width="match_parent"
android:background="#drawable/naruto_uzumaki"
android:layout_height="wrap_content">
<!-- <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:id="#+id/naruto" />
-->
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Never Give Up!" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/text1"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="438dp"
android:text="What to Add?" />
</RelativeLayout>
</ScrollView>

If i understand what you want, you need the white space to be fixed height or to be visible always(text1,text2) and only scroll the image ,if that's the case, you need to use linear layout and inside it put a scroll view with weigh 1 and the text1 and text 2 give them height wrap content here's the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/naruto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/bassma_avatar" />
</ScrollView>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Never Give Up!" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/text1"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="What to Add?" />
this will make the image stretch in a way that still text1 and 2 be visible , if it's larger than this limit you will be able to scroll then

textview overlapping in relativeLayout

I m having a Custom List for a chat application.
It has basically Two imageView in the either side and textView for the "chat message" in the middle.
Below all the three above there is textview for time at the bottom.
The screenshot below would better suffice.
The problem here is the time textView is overlapping over the imageView if the text of the "chat message" is only line.
This problem is better corrected with html-css as float clear:both.
I went through another answer for this with a nested RelativeLayout within LinearLayout here but i want to keep it clean with a single RelativeLayout.
The layout xml is as below -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/icon1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/msgText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textSize="20sp"
android:layout_marginLeft="42dp"
android:layout_marginRight="42dp"
android:text="this is a test" />
<ImageView
android:id="#+id/icon2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/timeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40px"
android:layout_marginTop="10dp"
android:layout_below="#+id/msgText"
android:layout_alignParentRight="true"
android:gravity="right"
/>
</RelativeLayout>
The screenshot for this as below -

You have this:
android:layout_below="#+id/msgText"
Change to this:
android:layout_below="#id/icon2"
EDIT
Put a minHeight on your message TextView which is equal to the image height and don't change as I told you above.

You should use LinearLayout instead
The layout example which avatar on the left side
<?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="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:background="#ff0000"
android:layout_height="50dp" />
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:text="content here"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:text="date here"
android:layout_height="wrap_content" />
</LinearLayout>
The layout example which avatar on the right side
<?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="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:text="content here"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:background="#ff0000"
android:layout_height="50dp" />
</LinearLayout>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:text="date here"
android:layout_height="wrap_content" />
</LinearLayout>

place a linearLayout in center of a wrap_content relativeLayout

I have a listView, and view of each item of the list should be like this (a background image and group name) :
but when i set layout_centerInParent="true" to linearLayout, it placed in center of screen(not in center of image).like this :
and there is my 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="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/linear_category_name"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="16dp"
android:paddingLeft="16dp">
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"/>
</LinearLayout>
</RelativeLayout>
How can i place linearLayout in center of relaytiveLayout ??

For your scenario, I think it's a lot easier to use FrameLayout instead.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/gold_image"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/white_border"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gold"
android:textColor="#android:color/white"
android:textSize="18sp"/>
</LinearLayout>
</FrameLayout>
I've tested this and it looked exactly like what you're trying to achieve.

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:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

Try this
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/test"/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:layout_centerInParent="true"
android:text="Gold"/>

Bottom align a textview with an ImageView in a GridView

So far this is the result of my layout
I am trying to put the textview at the bottom of my ImageView (not below it). The textview should BottomAlign with the ImageView.
The image of my ImageView is a square. If the content of the textview turns out to be longer that the width of my ImageView, the content should continues to the next line.
At the moment i don't care if the content of the ImageView does not scaled proportionally (i.e. gets stretched, etc).
This is the XML that i have:
<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignBottom="#+id/textItem"
android:scaleType="fitXY"
android:padding="0dip"
android:src="#drawable/shout_ic"/>
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="11sp"
android:text="Motorcycles"
android:textColor="#FFF"
android:background="#8888"/>
</RelativeLayout>
How can i achieve the result i want?
EDIT 1:
I think i am making a progress... (but not exactly like what i have in mind
<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/iconItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:padding="0dip"
android:src="#drawable/thumbqoo_launcher_ic"/>
<TextView
android:id="#+id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignBottom="#+id/iconItem"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="11sp"
android:text="Motorcycles"
android:textColor="#FFF"
android:background="#8888"/>
</RelativeLayout>

Change your parent layout to FrameLayout with orientation vertical like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:padding="0dip"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#8888"
android:gravity="center"
android:layout_gravity="bottom"
android:text="Motorcycles"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFF"
android:textSize="11sp" />
</FrameLayout>

remove this line android:layout_alignBottom="#+id/textItem" from your imageview and try adding line android:layout_alignBottom="#+id/iconItem"in your TextView
set width of ImageView to width of your row layout

http://i.stack.imgur.com/HUY4o.png Check the sample image...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/album_item"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/cover"
android:layout_width="148dp"
android:layout_height="148dp"
android:src="#drawable/empty_photo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cover"
android:background="#70000000"
android:padding="6dp" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>

<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/iconItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignBottom="#+id/textItem"
android:padding="0dip"
android:scaleType="fitXY"
android:src="#drawable/shout_ic" />
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#8888"
android:gravity="center"
android:text="Motorcycles"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFF"
android:textSize="11sp" android:layout_alignBottom="#id/iconItem"/>
</RelativeLayout>