Very custom listview row?

Question

i a have a specific design in my photoshop, but i cant figure out how to make it in android for a table row. As you can see bellow in the picture, i need a list of alarms. So i was thinking to make it as table row for every row same so i can input stuff to that table row via *.java.

Heres picture

and here is my code what i have now

<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="match_parent"
android:background="#162030"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="76dp" 
    android:background="#131b29"

    >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="774dp"
        android:orientation="vertical"  >

        <TableRow
            android:id="@+id/TableRow04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="0dp"
            android:background="#162030"
            android:minHeight="60dp" >
        </TableRow>

        <TableRow
            android:id="@+id/TableRow05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="0dp"
            android:background="#162030"
            android:minHeight="60dp" >
        </TableRow>

</TableLayout>
</ScrollView>

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="76dp"
    android:shadowColor="#62f1fa"
    android:shadowDx="0.0"
    android:shadowDy="0.0"
    android:shadowRadius="20"
    android:text="0:00"
    android:textColor="#5ee6ef"
    android:textSize="50sp" />

Answer 1

Make your main xml layout as this :

<RelativeLayout 
android:layout_width="match_parent"
android:layout_height="match_parent" ... >

 <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"   ... />

Create a layout for your custom styled item list (alarm_item.xml in layout folder) :

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- This is your clock icon -->
    <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

    <!-- This is your alarm clock name -->

    <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

    <!-- Create imageview and textview for all other needed data -->

</RelativeLayout >

Create an adapter to fill listview with item (take a look there for more details) :

public class AlarmAdapter extends BaseAdapter {

    Context context;
    Arraylist data;
    private static LayoutInflater inflater = null;

    public yourAdapter(Context context, Arraylist  data) {
        // TODO Auto-generated constructor stub
        this.context = context;
        this.data = data;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }



    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // Get object from list that contains Alarm data for this view
        // I assume that your alarm data correspond to an object name AlarmData

        AlarmData alarmData = getItem(position)

        View rootView = convertView;
        if (rootView == null)
            rootView = inflater.inflate(R.layout.alarm_item, parent, false);

        TextView alarmClockName= (TextView) rootView.findViewById(R.id.alarm_clock_name);
        ImageView clockIcon = (ImageView ) rootView.findViewById(R.id.alarm_clock_name);

        // Set your data there

       clockIcon.setImageResource(iconRes);
       alarmClockName.setText(alarmData.getName());

        return rootView;
    }
}

Finally get and fill listview with items in MainActivity :

public class AlarmActivity extends Activity {

   // I assume that your alarm data correspond to an object name AlarmData
   // so I define a Arraylist that will contains all alarms to display

    ArrayList<AlarmData> alarmList = new ArrayList<Alarmdata>();     

    ListView listview;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // Get listivew from main layout
        listview = (ListView) findViewById(R.id.listview);

        // Add alarm to display in alarmlist
        alarmList.add(new AlarmData());
        alarmList.add(new AlarmData());

        // Create alarm listview adapter with current context (this) and alarmlist
        AlarmAdapter alarmAdapter = new AlarmAdapter(this, alarmList);

        // Set previous adapter on listview
        listview.setAdapter(alarmAdapter);
    }
}

This is just a simple example of Custom listview adapter, hope this helps you.

After creating this mecanisme you just have to work on your item layout