Develop Reference

Setting a row of images in the bottom-right corner of a listview item

I have a custom listview in which I want to place four images in the bottom right corner of each item of a scrollable listview.
However with my current XML, the imageview array is showing at the top-right instead of the bottom-right of each element of the listview. As per my knowledge, I am using the right attributes, but still getting this misplaced output.
Layout XML:
<?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="wrap_content" >
<ImageView
android:id="#+id/id1"
android:layout_width="85dp"
android:layout_height="85dp"
android:padding="10dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/id2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#android:style/TextAppearance.Medium"
android:textStyle="bold"
android:textColor="#color/colorPrimaryDark"
android:layout_toRightOf="#id/id1"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right|bottom" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/id3"
android:background="#drawable/img1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id3"
android:id="#+id/id4"
android:background="#drawable/img2"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id4"
android:id="#+id/id5"
android:background="#drawable/img3"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id5"
android:id="#+id/id6"
android:background="#drawable/img4"/>

Try setting layout_height of LinearLayout as wrap_content and set layout_alignParentBottom to true.
<?xml version="1.0" encoding="utf-8"?><?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">
<ImageView
android:id="#+id/id1"
android:layout_width="85dp"
android:layout_height="85dp"
android:padding="10dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/id2"
style="#android:style/TextAppearance.Medium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/id1"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="right|bottom"
android:orientation="horizontal">
<ImageView
android:id="#+id/id3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img1" />
<ImageView
android:id="#+id/id4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id3"
android:src="#drawable/img2" />
<ImageView
android:id="#+id/id5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id4"
android:src="#drawable/img3" />
<ImageView
android:id="#+id/id6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/id5"
android:src="#drawable/img4" />
</LinearLayout>
</RelativeLayout>

Image, text/text and image in Android

I am trying to get the following design. Consider that it is a list item.
But my following design, it does not give me that design.The textviews come on the top of left image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black_24dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:id="#+id/userimage" />
<TextView
android:text="Text1"
android:layout_toRightOf="#id/userimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/username"/>
<TextView
android:text="Text2"
android:layout_below="#id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_keyboard_arrow_right_black"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout >

Instead of a LinearLayout use a RelativeLayout, and for the TextViews use:
android:layout_toRightOf="#id/userimage" and
android:layout_alignTop="#id/userimage" or
android:layout_alignBottom="#id/userimage"

Here you go:
<?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="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal">
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_person_black_24dp"
tools:background="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#id/userimage"
android:layout_toEndOf="#id/userimage"
android:layout_toStartOf="#id/arrow"
android:orientation="vertical">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text1" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text2" />
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_keyboard_arrow_right_black"
tools:background="#mipmap/ic_launcher" />
</RelativeLayout>
Try to play with different layouts when you have time, it will help you greatly in the future.
Edit:
Better solution for centering TextViews.

Your problem in text2 use it , it would work
<TextView
android:text="Text2"
android:layout_below="#id/username"
android:layout_toRightOf="#id/userimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip" >
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_person_black_24dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_keyboard_arrow_right_black" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#id/secondline"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:gravity="center_vertical"
android:text="Example username"
android:textSize="16sp" />
<TextView
android:id="#+id/secondline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
</RelativeLayout>
I used some dp sizes that you did not use and added a few other things, but I guess you can change it so that it suits your desire. I did try use the same names as you did. Overall this should work if you tweak it a bit.

How to overlay image in layout in android

I have two image in layout .I want to show second image in bottom edge curve of first image .Can anybody tell how to do like overlay image
Thanks

Use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/imgSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:src="#drawable/ic_launcher"/>
</FrameLayout>

Use a RelativeLayout, simple put the second ImageView below the first ImageView. Then what you have to do is to set the marginTop attribute of the second image to a negative value, and this value is the overlaying size, like this android:layout_marginTop="-1dp".
A sample code right below:
<?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"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/firstImage"
android:src="#drawable/myimage1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="-1dp"
android:layout_height="wrap_content"
android:id="#+id/secondImage"
android:layout_below="#+id/firstImage"
android:src="#drawable/myimage2"
/>
</RelativeLayout>

You can do it without Frames, only using RelativeLayout, if you make use of the alignParentalXXX tags as in the following example
<?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="match_parent"
android:background="#E4E3CE"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="75">
<ImageView
android:id="#+id/backgroundImageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#ffffff" />
<ImageView
android:id="#+id/imageView"
android:layout_width="66dp"
android:layout_height="66dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:background="#40000000"
android:gravity="center_vertical"
android:paddingHorizontal="3dp"
android:paddingVertical="1dp"
android:text="Header Text"
android:textColor="#ffffff"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
You can see how this layout looks like in the following image:

Use Frame Layout like sample below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/black"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ic_drawer"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="14dp"
android:src="#drawable/menu" />
<ImageView
android:id="#+id/ic_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/textView1_detail"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:src="#drawable/ic_drawer" />
<TextView
android:id="#+id/textView1_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Reports"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/overlay_favorite"
android:layout_width="215dp"
android:layout_height="134dp"
android:layout_gravity="right"
android:background="#drawable/overlay_favorite"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>

Prevent image and button overlapping

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/showImg"
android:text="#string/photo"
/>
</RelativeLayout>
When I run above code image view come over the photo button.
How should I avoid it?

You have two options:
1- Use LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/photo" />
</LinearLayout>
2- Use attribute layout_below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/showImg"
android:text="#string/photo"
/>
</RelativeLayout>
I'm assuming you want Image above button. Otherwise you can use layout_above, layout_toLeftOf or layout_toRightOf.

Using layout as a sublayout & accessing it programatically in android?

I have a layout called thumb_unit.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="320dp"
android:layout_height="240dp"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/thumbImage"
android:layout_marginLeft="10dp"
android:layout_width="160dp"
android:layout_height="220dp"
android:scaleType="fitXY"
android:src="#drawable/app_icon"
android:layout_marginTop="20dp"/>
<LinearLayout
android:layout_width="160dp"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:orientation="vertical" >
<TextView
android:id="#+id/issueName"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="Summer 2012"
android:textSize="18dp"
android:layout_marginLeft="6dp"
/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="151dp"
android:layout_marginLeft="6dp"
android:text="Description"
android:textSize="14dp"
android:textStyle="italic" />
<Button
android:id="#+id/view_download"
android:layout_marginTop="5dp"
android:layout_width="80dp"
android:layout_marginLeft="5dp"
android:layout_height="30dp"
android:text="View"
android:textSize="14dp"
android:textColor="#drawable/push_button_text_color"
android:background="#drawable/push_button"
android:layout_marginBottom="40dp"
/>
</LinearLayout>
</LinearLayout>
and another layout called grid_unit.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="170dp"
android:layout_height="130dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/thumbImage"
android:layout_width="77dp"
android:layout_height="105dp"
android:src="#android:drawable/ic_menu_gallery"
android:layout_marginTop="10dp"
/>
<LinearLayout
android:layout_width="73dp"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
>
<TextView
android:id="#+id/issueName"
android:layout_width="77dp"
android:layout_marginTop="5dp"
android:layout_height="30dp"
android:text="South Louisiana PnK"
android:layout_marginLeft="3dp"
android:textSize="11dp"
android:textStyle="bold" />
<TextView
android:id="#+id/productName"
android:layout_marginTop="5dp"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_marginLeft="3dp"
android:text="South Louisiana PnK"
android:textSize="9dp" />
<Button
android:id="#+id/viewButton"
android:layout_width="70dp"
android:layout_height="20dp"
android:text="View"
android:textSize="9dp"
android:textColor="#drawable/push_button_text_color"
android:background="#drawable/push_button"
android:layout_marginTop="5dp"
android:layout_marginLeft="3dp"
/>
</LinearLayout>
</LinearLayout>
and now finally, I have main activity_main.xml, I want to use the combination of these as
<?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="wrap_content"
android:layout_height="440dp"
android:orientation="vertical"
tools:context="com.mirabel.activities.MainActivity" >
<include layout="#layout/thumb_unit" android:id="#+id/main_thumb"/>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<include layout="#layout/grid_unit" android:id="#+id/left_grid"/>
<include layout="#layout/grid_unit" android:id="#+id/right_grid"/>
</LinearLayout>
</LinearLayout>
sublayout in the activity_main.xml and programatically I want to set the image, text for all these things. How to do that?

You can do it in the Activity file for activity_layout.xml in the following way:
View view = findViewById(R.id.left_grid);
ImageView image = view.findViewById(R.id.thumbImage);
image.setBackgroundResource(R.id.image)); //or whatever you wish to set
TextView text = view.findViewById(R.id.issueName);
text.setText("Whatever text you want to set);
In this way, you can access all the Views in the included layout.