Develop Reference

Creating Complex Android XML Component

I'm trying to make the following xml list:
original list
By the time, I've got this:
my component (which will go inside a list)
Here is my XML component code:
list_item_issue.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="#dimen/_5dp"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:src="#drawable/circle_line_shape"
android:tint="#color/colorGray" />
<com.daasuu.bl.BubbleLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="#dimen/_5dp"
android:padding="3dp"
app:bl_arrowDirection="left"
app:bl_arrowHeight="14dp"
app:bl_arrowPosition="10dp"
app:bl_arrowWidth="8dp"
app:bl_cornersRadius="0dp"
app:bl_strokeWidth="0.5dp">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/_5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/parent_list_issue_title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="3dp"
android:text="Titulo de la incidencia"
android:textSize="12sp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/parent_list_issue_subtitle_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/parent_list_issue_title_text_view"
android:textColor="#color/grey_semi_transparent"
android:textSize="10sp"
android:text="Subtitulo de la incidencia - Texto de prueba aplicación" />
<ImageButton
android:id="#+id/parent_list_item_expand_arrow"
android:layout_width="30dp"
android:layout_height="25dp"
android:src="#drawable/arrow_drop_down_circle"
android:paddingRight="5dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:background="#color/white"/>
</RelativeLayout>
</com.daasuu.bl.BubbleLayout>
Here is my circle_line_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/ic_circle"
android:gravity="center" />
</item>
</layer-list>
Problem is that I have no idea of how to make those circles + vertical lines aligned with the BubbleLayout like you can see on the original list image.
¿Shall I change my layout structure?
Thank you very much!

Use a RelativeLayout, not a Linear. Make the image view match_parent height. Make the bubble layout_toEndOf the image view. Make the relative_layout itself wrap_content. This will make the relative layout the hight of the bubble layout, and the image the height of the relative layout.

Android custom row layout issue

Sorry in advance I need to include a few pictures to make my problem a little easier to understand. I am using a linear layout for my custom rows and it is giving me lots of trouble trying to get the rows to look how I want. Currently it looks like this
Please forgive the quick paint picture I am about to show but it is how I would like the layout to look.
I would like to add the name textbox above the dog picture, and a time stamp textbox above each of the 1 and 2. Whenever I try to add textboxes to display this it really messes with the layout. The textbox above the dog picture always wants to go to the right or left of the dog image and push the image to the middle of the page and the buttons get spread out further. I do not have much experience with this layout I typically do relative layout where I can drag and drop pieces. Any advise or help is greatly appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="150dip"
android:layout_height="150dip"
android:id="#+id/dogimage"
android:clickable="true"
android:layout_alignParentLeft="true"
android:background="#drawable/dogpic"
android:onClick="sendProfile"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num1"
android:background="#drawable/num1"
android:clickable="true"
android:onClick="NumberOne"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num2"
android:background="#drawable/num2"
android:clickable="true"
android:onClick="NumberTwo"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
</LinearLayout>

You need to wrap your imageview/textview combo in a LinearLayout. And you should set the imageButton using src, not background. Do it like this:
<?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="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/dogimage"
android:layout_width="150dip"
android:layout_height="150dip"
android:clickable="true"
android:onClick="sendProfile"
android:scaleType="fitXY"
android:src="#drawable/dogpic" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num1"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num1" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num2"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num2" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Why my image on my custom Actionbar has unwanted left padding

I customized the ActionBar by inflating a custom view.
and my custom action bar XML layout is:
<?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:layout_gravity="fill_horizontal"
android:background="#drawable/actionbar_bg" >
<TextView
android:id="#+id/ab_main_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:gravity="right|center_vertical"
android:text="heaer_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/ab_main_img0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:clickable="true"
android:src="#drawable/ab_main_img_layer_list" />
</RelativeLayout>
but I don't know why there is an unwanted left padding for my ImageView at run time!!! like image below:
anybody know?

It seems that when you use "wrap_content" or "match_parent" in your ImageView (not TextView) on your custom action bar xml layout, you will have padding in your action bar, otherwise you don't have.
So please try changing your xml as below: setting fixed size to the ImageView (and you can also add some margin_left for a better look).
<?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:layout_gravity="fill_horizontal"
android:background="#drawable/actionbar_bg" >
<TextView
android:id="#+id/ab_main_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:gravity="right|center_vertical"
android:text="heaer_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/ab_main_img0"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:clickable="true"
android:src="#drawable/ab_main_img_layer_list" />
</RelativeLayout>
EDIT: Just edited my answer for a more accurate explanation of the issue :). Hope it will help others as well.

You should try this
android:layout_marginLeft="5dp"
inside ImageView
<ImageView
android:id="#+id/ab_main_img0"
android:layout_width="50px"
android:layout_height="50px"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:clickable="true"
android:layout_marginLeft="5dp"
android:src="#drawable/ab_main_img_layer_list" />

Android: Adding a divider into a list item with dynamic height

I'm currently trying to create a list item similar to the one in the official design guidelines. Still missing is the vertical divider next to the button/image on the right side of each item. Most people seem to use a separate View with a fixed width for that, but the height doesn't scale in my case. It's only shown when I set a fixed height for the divider itself or the parent RelativeLayout. Is it possible to let it scale automatically?
My layout XML for the list item looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/sensors_list_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="10dp" />
<TextView
android:id="#+id/sensors_list_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_toRightOf="#id/sensors_list_img"
android:paddingTop="5dp" />
<TextView
android:id="#+id/sensors_list_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_below="#id/sensors_list_name"
android:layout_toRightOf="#id/sensors_list_img"
android:paddingBottom="5dp" />
<ImageView
android:id="#+id/sensors_list_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:padding="10dp"
android:src="#drawable/ic_angle_right" />
<View
android:id="#+id/sensors_list_divider"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/sensors_list_details"
android:background="#ff0000" />
</RelativeLayout>

Try to assign an height related to the image like:
android:alignTop="#id/myimage"
android:alignBottom="#id/myimage"
otherwise you can create a xml drawable and use it with an ImageView :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#000000"/>
</shape>
Update
Remember android:shape="line" doesn't work without stroke

Let's go with a LinearLayout as a parent:
<?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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/sensors_list_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:paddingTop="5dp" />
<TextView
android:id="#+id/sensors_list_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:paddingBottom="5dp" />
</LinearLayout>
<View
android:id="#+id/sensors_list_divider"
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#ff0000" />
<ImageView
android:id="#+id/sensors_list_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/ic_angle_right" />
</LinearLayout>

Check this
listView.setDividerHeight(1);

what RelativeLayout properties should i use?

i want to design a layout for my app as shown below in image
but im getting problem which is that the properties im applying for relative layout are not going right as in below my xml code there is horizontal ruler image having centerInParent property and a verticle ruler image also having property of centerInParent by doing this the both rulers come to accurate place but when i put a child above the horizontal ruler or a child toLeftOf verticle ruler they dont appear as the graphical view of xml file shows the reason that although by applying centerInParent the both rulers come to center but their reference remains at edges thats why by using layout_above or layout_toLeftOf the childs go outside of layout
My xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginTop="2.5dip"
android:src="#drawable/smicon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#id/icon_img"
android:layout_marginTop="3dip"
android:text="Welcome To JEM"
android:textStyle="bold"
android:id="#+id/wcm_id"
android:textSize="18dip"
android:textColor="#FFFFFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/wcm_id"
android:layout_alignParentRight="true"
android:layout_marginRight="5dip"
android:text="APPS BY SAM"
android:id="#+id/app_by"
android:textSize="16dip"
android:textColor="#FFFFFF"
/>
</RelativeLayout>
<!-- This relative layout which is showing the main cross and icon around it -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_hr"
android:layout_centerInParent="true"
android:src="#drawable/horizontal"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_vr"
android:layout_centerInParent="true"
android:src="#drawable/verticle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/getuser"
android:src="#drawable/adduser"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/set"
android:src="#drawable/set"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/get"
android:src="#drawable/get"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/ico"
android:src="#drawable/icon"
/>
</RelativeLayout>
</LinearLayout>
so guys please tell me how can i achive this main cross and icon to lef,right and above,below it as shown in image

Try this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/vertical_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
/>
<ImageView
android:id="#+id/horizontal_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/horizontal_ruler"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
android:layout_below="#id/horizontal_ruler"
/>
May be it helpful for you..

You could use a TableLayout embedded in a RelativeLayout. The RelativeLayout can be used to center the TableLayout on the screen and in the TableLayout you can add your pictures/buttons and state how many rows and colums you want the TableLayout to have.