How To Create Custom Ui Like Pulse In Android

I am trying to crate a Custom UI similar to pulse android app. As I understand, to start with I have to first create a custom button as shown on the below image marked. My button

Solution 1:

You could compose a simple layout from an ImageView and a TextView aligned to the bottom with black text and some transparency. Both views should be placed inside a RelativeLayout. Then you set a click listener for the RelativeLayout and take appropriate action on click.

Ex:

<RelativeLayoutandroid:id="@+id/item"android:layout_width="150dp"android:layout_height="150dp" ><ImageViewandroid:layout_width="150dp"android:layout_height="150dp"android:src="@drawable/my_test_image" /><TextViewandroid:layout_width="fill_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:background="#4000"android:text="Giorgio Armany Galaxy S"android:textColor="#FFF" /></RelativeLayout>

Then in your program:

RelativeLayout item=(RelativeLayout)findViewById(R.id.item);
    item.setOnClickListener(newOnClickListener() {
        @OverridepublicvoidonClick(View v) {
            // take action
        }
});

This is one scenario. Another scenario is to extend the Button and compose your custom UI component if you would like, which will involve some more coding but instead you'll have a unique component.

Solution 2:

Please accept the answer if it answered your question.

Now about the part with grid integration: save the XML content of the example above (RelativeLayout + ImageView + TextView), into a new XML file, let it be layout/grid_item.xml. Add a unique id for the ImageView and TextView

Then in the getView() method of your adapter inflate that layout and find the ImageView and TextView by id, and set appropriate content.

Note, this is not full source code, but a basic scheleton should look like this:

public View getView(int position, View convertView, ViewGroup parent) {
    ....
    convertView = mInflater.inflate(R.layout.grid_item, null);
    ....

    ImageView myImage=(ImageView)convertView.findViewById(R.id.my_image);
    TextView myTextView=(TextView)convertView.findViewById(R.id.my_textview);

    myImage.setImageResource(...);
    myTextView.setText(...);
    ...

    return convertView
}