Android CustomView with 2 texts inside

Question

I need to create a component that looks like this:

And i don't really know how to approach this. I was thinking of creating a custom TextView component(class which extends TextView) but i am not sure what to do from there.

Thanks for your replies, this is my solution :

<LinearLayout
            android:layout_width="@dimen/size_profile_pic"
            android:layout_height="@dimen/size_profile_pic"
            android:id="@+id/playedCounter"
            android:orientation="vertical"
            android:background="@drawable/layout_border"
            android:layout_gravity="center_vertical"
            android:weightSum="4">

            <TextView
                android:id="@+id/times_played_txt"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2.5"
                android:text="18"
                android:textStyle="bold"
                android:gravity="center"
                android:textSize="30sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@android:color/black" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1.5"
                android:text="Played"
                android:gravity="center" />

        </LinearLayout>

Answer 1

Try this

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/my_text_box"
    android:background="@drawable/border"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:layout_margin="10dp"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="Played"
        android:layout_margin="10dp"
        />

</LinearLayout>

In your drawable create border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="2dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
    android:bottom="1dp" />
</shape>

Answer 2

Try this code :

<?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="fill_parent"
    android:background="@android:color/white">

    <RelativeLayout
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="162dp"
        android:background="@drawable/style"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="24dp"
            android:text="played"
            android:textColor="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView1"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="22dp"
            android:text="18"
            android:textColor="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>

</RelativeLayout>

Create border for layout, make style.xml from drawable :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
 <stroke
      android:width="5dp"
      android:color="@android:color/black" />
</shape>

Output :

Answer 3

You need a vertically oriented LinearLayout with a stroked background and a separator between the upper and lower TextView .

res/layout/custom_view.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_bg"
    android:gravity="center">

    <TextView
        android:id="@+id/value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:textStyle="bold"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:text="18" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Played" />

</LinearLayout>

res/drawable/custom_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="@android:color/black" />
</shape>

If you want to go OOP and attach objects to views to use in GridView or ListView , then you can extend the LinerLayout class.

CustomView.java

public class CustomView extends LinearLayout {
    MyObject mObject;

    public CustomView(Context context, MyObject object) {
        super(context);
        LinearLayout.inflate(getContext(), R.layout.custom_view, this);
        initLayout();
    }

    private void initLayout() {
        ((TextView) findViewById(R.id.value)).setText(mObject.getValue().toString());
        ((TextView) findViewById(R.id.status)).setText(mObject.getStatus());
    }

    public void setmObject(MyObject mObject) {
        this.mObject = mObject;
        initLayout();
    }
}

MyObject.java

public class MyObject {
    Integer value;
    String status;

  /* constructors
     getters and setters
   */
}