ImageButton not appearing when used with List View

Question

So I am trying to show twitter posts utilizing tweetUi, however, the image button is not showing up in the relative layout,but it performs the intended action if the general region is clicked(edit: the textview is visible int the relative layout though). Moreover, I have noticed that this is only an issue when used with the listview, because for my other views the image button shows up within the relative layout when used with photoviews and webviews.

<LinearLayout
    android:id="@+id/TartanDailyLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.ghsapp.TwitterAnnouncements"
    android:background="#D32E32"
    android:orientation="vertical"
    android:weightSum="9"
    android:statusBarColor="#D32E32">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight=".5">

        <TextView
            android:id="@+id/TartanDailyHeader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#C52C33"
            android:text="Announcements"
            android:gravity="center"/>
        <ImageButton
            android:id="@+id/BackButton1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:backgroundTint="@android:color/transparent"
            android:tint="@android:color/white"
            app:srcCompat="?android:attr/actionModeCloseDrawable"
            android:onClick="onStartAction"/>

    </RelativeLayout>
    <ListView android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="9"
        android:divider="#e1e8ed"
        android:dividerHeight="1dp"
        android:drawSelectorOnTop="false">
    </ListView>
</LinearLayout>

This is what it looks like in android studio

This is what it looks like in the emulator

@ JustADeveloper TextView with id TartanDailyHeader is visible or not? — Bhagyashri, Jul 12 '18 at 06:29
If textview is visible then to you then just change the `app:srcCompat` with different image or replace attribute with `android:background` so that image will be assinged to imagebutton — Bhagyashri, Jul 12 '18 at 06:41
The text view is visible but the image button is not, will try the options — JustADeveloper, Jul 12 '18 at 15:21
I also noticed that the image button is working just not appearing, because if you click the general region where the button is supposed to be it performs the intended action. — JustADeveloper, Jul 12 '18 at 15:38
Hope you added: vectorDrawables.useSupportLibrary = true to allow to use VectorDrawables, for details see this: https://stackoverflow.com/a/40624625/6726650 — Sudhanshu Vohra, Jul 12 '18 at 15:44
I tried your option @SudhanshuVohra, but it doesn't work, I believe that it is a problem when used with the listView, because I have implemented the same code for the back image button with webviews and imageviews and the imagebutton shows up. — JustADeveloper, Jul 12 '18 at 15:51

score 1 · Accepted Answer · answered Jul 12 '18 at 16:05

Use android.support.v7.widget.AppCompatImageButton instead of ImageButton like this:

<LinearLayout
    android:id="@+id/TartanDailyLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.ghsapp.TwitterAnnouncements"
    android:background="#D32E32"
    android:orientation="vertical"
    android:weightSum="9"
    android:statusBarColor="#D32E32">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight=".5">

        <TextView
            android:id="@+id/TartanDailyHeader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#C52C33"
            android:text="Announcements"
            android:gravity="center"/>
        <android.support.v7.widget.AppCompatImageButton
            android:id="@+id/BackButton1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:backgroundTint="@android:color/transparent"
            android:tint="@android:color/white"
            app:srcCompat="?android:attr/actionModeCloseDrawable"
            android:onClick="onStartAction"/>

    </RelativeLayout>
    <ListView android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="9"
        android:divider="#e1e8ed"
        android:dividerHeight="1dp"
        android:drawSelectorOnTop="false">
    </ListView>
</LinearLayout>

Also, make sure to do the following: Setup your build.gradle

android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }

You can refer this answer for more details.

vectorDrawables.useSupportLibrary = true - is obsolete way also using of AppCompatImageButton really bad practice. From doc "This will automatically be used when you use ImageButton in your layouts and the top-level activity / dialog is provided by appcompat. You should only need to manually use this class when writing custom views." you should just write android:src="@drawable/some_drawable" istead of app:srcCompat — , Jul 12 '18 at 16:15
With androidx it is androidx.appcompat.widget.AppCompatImageButton. — Dabbler, Jan 31 '22 at 20:14

ImageButton not appearing when used with List View

1 Answers1