Develop Reference

How to achieve the following layout on Android

I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>

RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.

Android viewpager overlap ImageView from next and previous with the current page

What I am trying to do is, using the viewpager, create a photo album that when the user slides to next/previous, the opacity(Alpha) of the current image decreases and the opacity of the next/previous increases based on the sliding progress. The point is to give the impression that all the images are stacked and that they just fade from beneath the current picture. However, the title of the image, shows from left or right as a normal viewpager would do. Any ideas ?
My page fragment layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ImageView
android:id="#+id/slider_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
/> <!-- #FFF #000 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/slider_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="-80dp"
android:text="All-in-one"
android:textColor="#FFF"
android:textSize="32sp" />
<TextView
android:id="#+id/slider_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="image desc"
android:textColor="#FFF"
android:textSize="14sp" />
</LinearLayout>

You need to implement a PageTransformer similar to the examples here: http://developer.android.com/training/animation/screen-slide.html#depth-page
The extra step you need to do, is when you get the View in the pageTransform() method you need to get the Views you want to animate - ImageView in your case (using view.findViewById(R.id.slider_image)) and change the alpha value.

How to dynamically add a TextView/ImageView to a ListView item in Android

I am creating a chatting app in Android.
I was able to create the normal text chat list view with the following as the list item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/chat_msg_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/msg_send_time"
android:layout_width="250dp"
android:layout_height="20dp"
android:layout_below="#+id/chat_msg_view"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
<TextView
android:id="#+id/msg_status"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_below="#+id/msg_send_time"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
</RelativeLayout>
But now i am trying to send images as well via chat. So now i need to replace the first TextView in the above layout to ImageView if content being sent is IMAGE.
What is a good approach to do this.

There are lots of approaches you can use. If you are using a list view adapter you can use itemType to change the entire list item layout (good if you are changing the entire layout, but can be a bit complicated) or you can place an image view at the same location in your layout as the text view and show or hide which ever one you are using. I.E. If showing image, show the image view and hide the text view, if you are showing the text view, show the text and hide the image. Then you don't need to insert/remove views at run time, which is a little more complicated.
Your layout might look a bit like 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" >
<TextView
android:id="#+id/chat_msg_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<ImageView
android:id="#+id/chat_image_view"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"/>
<TextView
android:id="#+id/msg_send_time"
android:layout_width="250dp"
android:layout_height="20dp"
android:layout_below="#+id/chat_msg_view"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
<TextView
android:id="#+id/msg_status"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_below="#+id/msg_send_time"
android:layout_margin="2dp"
android:paddingTop="2dp"
android:textColor="#android:color/holo_blue_dark" />
</RelativeLayout>
Notice how chat_image_view is also aligned to parent left.. it will be on top of the text view, but it has visibility "gone" so you wont see it.
Hope this helps, good luck.

Android RelativeLayout Design issues

I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>

From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.

I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.

Margin on ListView items in android

I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.

I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.

A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"

See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view

In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);

I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
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:padding="15dp"/>