StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Create a ViewGroup (e.g. LinearLayout/RelativeLayout/etc) that contains the image and text, etc. </p> <p>Make this ViewGroup clickable (e.g. by assigning it an OnClicListener).</p> <p>Assign a <strong>background</strong> drawable to this ViewGroup. </p> <p>Make sure that this background drawable is a state-list drawable: <a href="https://developer.android.com/reference/android/graphics/drawable/StateListDrawable.html" rel="nofollow">https://developer.android.com/reference/android/graphics/drawable/StateListDrawable.html</a> <a href="http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList" rel="nofollow">http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList</a></p> <p>Assign the appropriate drawable to the various states (most importantly state_pressed, but you may want to handle other states as well).</p> <p>When the user presses the button, the appropriate drawable will be shown and will appear as if the ViewGroup is a button (something that can be pressed). </p> <p><strong>Update after OP showing new image for pressed state:</strong></p> <p>Add a View that is on top of your image/text/etc, with a background that has a StateListDrawable:</p> <pre><code><RelativeLayout > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/somerealpngfile" ... /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" ... /> <View android:id+"@+id/clickable_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/selectable_background" android:clickable="true" ... /> </RelativeLayout> </code></pre> <p><strong>res/drawable/selectable_background.xml</strong></p> <pre><code><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@color/grid_state_pressed"/> <item android:state_focused="true" android:drawable="@color/grid_state_focused"/> <item android:drawable="@android:color/transparent"/> </selector> </code></pre> <p>res/values/colors.xml</p> <pre><code><?xml version="1.0" encoding="utf-8"?> <resources> ... <color name="grid_state_pressed">#BB7dbcd3</color> <color name="grid_state_focused">#777dbcd3</color> ... </resources> </code></pre> <p>where colors <code>grid_state_pressed</code> and <code>grid_state_focused</code> are semi transparent (i.e. their alpha is less than 255).</p> <p>When the user clicks your 'button' the View with <code>R.id.clickable_view</code> will handle the onClick and will change its background color, causing the image and text shine through in a semi transparent way.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload