ImageButton not visible on Android Studio on Emulator or physical device

Question

Hello the great community. I am new to Android and trying to build a calculator and this is the first time I am having this problem, not sure what is wrong. I have added buttons and they look fine on emulator except image button. The code is below, I was hoping to get help.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:weightSum="4">

        <Button
            android:id="@+id/button16"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:background="#00000000"
            android:text="7"
            android:textColor="@android:color/background_dark"
            android:textSize="30sp"/>

        <Button
            android:id="@+id/button5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:background="#00000000"
            android:text="8"
            android:textColor="@android:color/background_dark"
            android:textSize="30sp"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:background="#00000000"
            android:text="9"
            android:textColor="@android:color/background_dark"
            android:textSize="30sp"/>

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:background="#00000000"
            android:textColor="@android:color/background_dark"
            app:srcCompat="@drawable/divide"/>
    </LinearLayout>

The last button divide is not visible and I have added four such linear layouts with 1, 2, 3, minus, 4, 5, 6, multiply buttons, all these multiply, divide, plus and minus buttons aren't visible unfortunately. I am just starting out and was hoping to know where am I wrong and what is that I need to fix.

UPDATE

See the above image I have attached. In this visible Views in the emulator are Buttons if I change them to ImageButton the views like the equal sign. I have change my png's file but I can't get what I am doing wrong

Thank you

this code is working at my side may be the problem is in your svg image — UltimateDevil, Oct 01 '17 at 06:27
I guess you are right, I changed these to plain buttons and it has worked all fine, image buttons are also working when background is changed, looking for other images to see if it fixes, thanks — Pankaj Dhawan, Oct 01 '17 at 06:34
they are png. I just created new png myself and tried to add image button again but it is still not visible on the emulator or physical device when it is showing up on the screen. What could be the cause? — Pankaj Dhawan, Oct 01 '17 at 18:16
try `android:src="@drawable/divide"/>` at the place of `app:srcCompat="@drawable/divide"/>` — UltimateDevil, Oct 01 '17 at 18:20
It screwed the image up even further, image gone and grey background appears on a shrunken place. I have attached the screenshot. In blueprint, all those with white border are showing up but all other imageButtons with grey border aren't. I changed the image and still not worked. I even tried with imageview instead of imagebutton, still not worked. — Pankaj Dhawan, Oct 01 '17 at 18:25
and try icons from [here](https://www.flaticon.com/search?word=add) — UltimateDevil, Oct 01 '17 at 18:42
I am not sure how to post screenshot here. Attaching above with question. — Pankaj Dhawan, Oct 01 '17 at 19:22
Visible symbols arent imageButtons but normal buttons. equal symbol is only imagebutton which is not visible. Not sure why. Please see — Pankaj Dhawan, Oct 01 '17 at 19:26
No Vikas, I tried imagebutton on two more projects, different than calculator, on one, it worked, on another, it didn't. I am going crazy now :( — Pankaj Dhawan, Oct 02 '17 at 16:10
Can you upload your code on github then I will able to examine... what's going wrong...may be possible then I will help you better — UltimateDevil, Oct 02 '17 at 16:14
here you go Vikas - https://github.com/therisingsun39/CalceeApp The imageButtons need to be there instead of buttons for add multiply divide etc — Pankaj Dhawan, Oct 02 '17 at 17:18

UltimateDevil · Accepted Answer · 2017-10-03T09:42:25.960

3

I have solved this issue and this is working now, as I have changed only one line to your every ImageButton is android:src="@drawable/equalsymbol" instead of app:srcCompat="@drawable/equalsymbol" which I have already mention to you in comment section

See the Screen Shot attached below-:

EDIT

Now, The Question is why app.srcCompat not working

This because you have extend your MainAcyivity.java with Activity

You have to Extend with AppCompatActivity

and need to update your gradle.build

You have to add following lines -:

vectorDrawables {
      useSupportLibrary = true
    }

see the detailed answer here

Then, I make again some changes to your app

Change 1

MainActivity.java

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

Change 2

style.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <!--<item name="android:colorPrimary">@color/colorPrimary</item>-->
    <!--<item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>-->
    <!--<item name="android:colorAccent">@color/colorAccent</item>-->
</style>

Change 3

build.gradle

 android {
  defaultConfig {
    vectorDrawables {
      useSupportLibrary = true
    }
  }
}

Now, you can use app:srcCompat="@drawable/equalsymbol" in your app

See, Second screenshot below I have used app:srcCompat and now this is working

Now, Everything is working fine.

So, make changes as mentioned above. Happy Coding

edited Oct 03 '17 at 09:42

answered Oct 03 '17 at 05:52

UltimateDevil

2,807
2
18
31

You simply are genius Vikas, it did work, I was going mad to see all the answers weren't working and searching on internet was in vain, you are angel, thank you again. – Pankaj Dhawan Oct 03 '17 at 23:35
I am not genius nor angel...man...glad it works for you... Happy Coding – UltimateDevil Oct 04 '17 at 01:31
Thank you again Vikas, you are awesome and kind! – Pankaj Dhawan Oct 04 '17 at 05:07
Hahahaha...Welcome @PankajDhawan By the way I am also from Delhi. – UltimateDevil Oct 04 '17 at 06:20
Buddy, I am facing challenges but I am interested in learning this Android thing. I wasn't sure where to begin with since YouTube was too fast for me and I couldn't understand them. Bought course on Udemy since my job can't allow me to study due to time constraint but I really want to be more fluent. Any tips or suggestions? Plus I really would love to meet you in person to thank you, people like you deserve a treat for sure as thanks is not enough :) – Pankaj Dhawan Oct 04 '17 at 07:21
we cant talk here. So, [here](http://ultimatedevil17.blogspot.in/) is my blog you can get my email from here. lets talk on hangout. – UltimateDevil Oct 04 '17 at 07:33

score 0 · Answer 2 · answered Oct 01 '17 at 04:11

0

Use width(or height for vertical LinearLayout) of 0dp if you are using weight.

android:layout_width = "0dp"
android:layout_height ="80dp"
android:layout_weight ="1"

answered Oct 01 '17 at 04:11

Nabin Bhandari

15,949
6
45
59

Thanks Nabin but this hasn't worked. It moved the button further to left but didn't show the imagebuttons. – Pankaj Dhawan Oct 01 '17 at 05:21
Did you do that for all 4 buttons in the row? – Nabin Bhandari Oct 01 '17 at 05:23
yes Nabin, I just retried as you suggested. In the blueprint in activity_main, I see all the buttons bordered white and they are visible but these imagebuttons are bordered gray and they are all invisible. I have also attached image of how it is looking on emulator and on studio. – Pankaj Dhawan Oct 01 '17 at 05:36
You have used `android:background ="#00000000"` in your ImageButton, which means transparent background. Try different color to see what's happening. Also your image may be small. Use scaleType fitCenter in your ImageButton – Nabin Bhandari Oct 01 '17 at 05:45
As you suggested, I changed the hex code for background to #006699 and it got blue box, at least showed something but not the divide symbol. Do you think there is problem with drawable image or something to do with it – Pankaj Dhawan Oct 01 '17 at 06:21
The problem is surely with the image. Did you try the fitCenter scaleType? – Nabin Bhandari Oct 01 '17 at 07:45
Hey Nabin, I tried that too and tried new image as well. Just any imagebutton anywhere on the main activity is not working on emulator. – Pankaj Dhawan Oct 01 '17 at 18:18

score 0 · Answer 3 · answered Oct 02 '17 at 00:00

0

Did you declare the botton in your Java class, also your Drawable has the file in png it's the best way to work with img files.

answered Oct 02 '17 at 00:00

Pedro Duarte

37
10

I haven't got into java class yet, my imagebuttons are not visible in layout on physical device or emulator. Do you think declaring in MainActivity.java might help? – Pankaj Dhawan Oct 02 '17 at 16:11

ImageButton not visible on Android Studio on Emulator or physical device

3 Answers3