2
\$\begingroup\$

I want to design a row of the following style in my Android project:

Walt Disney's birthday 05 Dec 14 (In 3 Days)

I have the following code for this: 

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example"
    android:id="@+id/relativePrime"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants" >

    <RelativeLayout
        android:id="@+id/relative_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/relative_right" >

        <View
            android:id="@+id/leftView"
            android:layout_width="05dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/relative_img"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="#560978" />

        <RelativeLayout
            android:id="@+id/relative_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="04dp" >

            <RelativeLayout
                android:id="@+id/Relativeprogress"
                android:layout_width="78dp"
                android:layout_height="78dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:padding="0dp" >

                <!--
                    <com.pkmmte.circularimageview.CircularImageView
                    android:id="@+id/imgDoge"
                    android:layout_width="78dp"
                    android:layout_height="78dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="true"
                    android:layout_centerVertical="true"
                    android:src="@drawable/icon_default"
                    app:border="true"
                    app:border_color="#FFFFFFFF"
                    app:border_width="4dp"
                    app:selector="true"
                    app:selector_stroke_color="#aa5677fc"
                    app:selector_stroke_width="4dp"
                    app:shadow="true" />
                -->

                <ProgressBar
                    android:id="@+id/loading"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:padding="01dp" />

                <com.example.RoundedImageView
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/imageView2"
                    android:layout_width="72dp"
                    android:layout_height="72dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/icon_default"
                    android:contentDescription="@string/imageviewContactus"
                    android:scaleType="centerCrop"
                    app:riv_border_color="#BDBDBD"
                    app:riv_border_width="0dip"
                    app:riv_corner_radius="38dip"
                    app:riv_mutate_background="true"
                    app:riv_oval="true" />
            </RelativeLayout>

            <TextView
                android:id="@+id/dateText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/Relativeprogress"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="03dp"
                android:text="TextView"
                android:textColor="#466289"
                android:textSize="11sp" />

            <TextView
                android:id="@+id/dateplaceholder"
                android:layout_width="wrap_content"
                android:layout_height="04dp"
                android:layout_below="@+id/dateText"
                android:layout_centerHorizontal="true" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relative_txt"
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/relative_img"
            android:layout_alignTop="@+id/relative_img"
            android:layout_gravity="bottom"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="05dp"
            android:layout_toLeftOf="@+id/imageView1"
            android:layout_toRightOf="@+id/relative_img" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:ellipsize="marquee"
                android:lines="1"
                android:maxLines="2"
                android:text="Mike Anderson"
                android:textColor="#000000"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/textView2"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/textView2"
                android:layout_marginTop="02dp"
                android:textColor="#000000"
                android:textSize="12sp"
                android:textStyle="bold"
                android:visibility="visible" />
        </RelativeLayout>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="0dp"
            android:src="@drawable/icon_pet_2x" />

        <RelativeLayout
            android:layout_width="125dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/relative_txt"
            android:layout_alignParentBottom="true"
            android:layout_alignRight="@+id/relative_txt"
            android:layout_marginRight="20dp" >

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:contentDescription="@string/imageviewContactus"
                android:src="@drawable/icon_email" />

            <Button
                android:id="@+id/Button01"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="02dp"
                android:layout_marginRight="12dp"
                android:layout_toLeftOf="@+id/firstView"
                android:background="@drawable/share_variant" />

            <TextView
                android:id="@+id/placeholder"
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:layout_below="@+id/Button01"
                android:layout_centerHorizontal="true" />

            <Button
                android:id="@+id/Button02"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="12dp"
                android:layout_toRightOf="@+id/secondView"
                android:background="@drawable/icon_call" />

            <View
                android:id="@+id/firstView"
                android:layout_width="01dp"
                android:layout_height="21dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="11dp"
                android:layout_toLeftOf="@+id/imageView3"
                android:background="#999999" />

            <View
                android:id="@+id/secondView"
                android:layout_width="01dp"
                android:layout_height="21dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="11dp"
                android:layout_toRightOf="@+id/imageView3"
                android:background="#999999" />
        </RelativeLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relative_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/relative_left"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/relative_left" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relative_right"
        android:layout_width="85dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/relative_center"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <TextView
            android:id="@+id/textViewx"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/image_sticker" />

        <TextView
            android:id="@+id/textView3_mock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="-30dp"
            android:gravity="center"
            android:paddingRight="12dp"
            android:paddingTop="02dp"
            android:textColor="#466289"
            android:textSize="14sp" />
    </RelativeLayout>

</RelativeLayout>

I know the above is not perfect. How do I improve on it?

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

The good

This seems quite fine:

  • You're using RelativeLayout instead of nested LinearLayout, that's a good thing
  • There is not a lot of duplication in the formatting, so not much potential benefits of using styles. That's good in the sense that there are not many wasted opportunities, but bad in the sense that if you want to make changes, you have to carefully consider it's side effects, due to the lack of general styles.

The bad

The biggest problem I see is the naming of the element ids:

  • There is no consistent convention:

    • there is camelCase (for example leftView)
    • there is snake_case (for example relative_img)
    • there is unrecognizable like Relativeprogress

    Pick a style you prefer and use it consistently.

  • Few of the ids are meaningful (dateText, loading), most of them are poorly named (relative_txt, imageView1 (and 2 and 3), Button01, many others). Well-named ids could make this much more readable.

Using styles

To reduce duplication, and the make future changes easier, it's good to use styles when possible. In the given layout, there are not a lot opportunities for generalization, but I still see a few points where you would benefit from using styles:

  • The styling of the sharing buttons: they all have the same width, height, color
  • The color of the date text seems to be the same as the sharing buttons

Minor issues

Android lint raises a couple of minor issues that would be good to improve:

  • Don't hardcode strings, as in android:text="TextView"
  • Text size smaller than 12sp is not recommended, for example in android:textSize="11sp"
  • ImageView should have contentDescription attribute
\$\endgroup\$
2
  • \$\begingroup\$ This is insightful, I had posted one more question and most of the suggestions there and here are about naming conventions, guess I need to pick up a book about this topic! \$\endgroup\$
    – User3
    Commented Dec 9, 2014 at 6:18
  • \$\begingroup\$ However there is one problem I face here, the triangle at the top left of the row is an image, I tried drawing it using paint, however I cannot define clear boundaries so that my text does not overlap the image. In the above I have omitted text but there are three lines of text below the red sticker. Do you have any suggestion for me? \$\endgroup\$
    – User3
    Commented Dec 9, 2014 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.