Android Imagebutton is clipped - android

I'm having issues with my Activity and an ImageButton inside it. It looks like it is clipping:
This is the XML of the corresponding activity:
<?xml version="1.0" encoding="utf-8"?>
<!-- A RecyclerView with some commonly used attributes -->
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/todo_linear_layout"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
app:srcCompat="#android:drawable/ic_input_add" />
<EditText
android:id="#+id/edittodo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20px"
android:layout_weight="5"
android:textColor="#android:color/black" />
</LinearLayout>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/todo_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" >
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Additionally the Layout Designer in Android Studio shows the Layout correctly:
Where is the problem here? I already tried to change margin or padding values but the Button is still clipping in the running app on my android device.

I believe that what's happening is that the device you're running your app on doesn't have the #android:drawable/ic_input_add drawable.
I tried running the code you posted, and everything worked for me. However, if I delete the app:srcCompat attribute from the <ImageButton> tag, then I get the same behavior you posted in your first screenshot.
In general, you can't rely on 100% of devices having #android: resources. Some manufacturers remove resources, and others replace the values with nonsense (I've seen #android:color/white come through as gray, for example).
I recommend creating your own drawable (maybe even just manually copying the one from Android and adding it to your project), and referencing that instead.
app:srcCompat="#drawable/your_own_add"

Changing the app:srcCompat to:
android:src="#android:drawable/ic_input_add" did it! So the issue was, that the device didn't find that icon and displayed just something gray.

Related

Android Studio App Dev. Relative Layout does not get background color in full device size

Many similar questions were posted here, and I took my time to read them all. Majority of these posts uses ScrollView like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CACACA"
android:fillViewPort="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</RelativeLayout>
</ScrollView>
But i dont want to use scrollview. I only use Relative layout which has 2 childs, lottiefile animation and textview to display No Internet Error page. In Android Studio preview shows white background on device size as I expected, but when I test it on my Pocophone F1, relativelayout does not take any background color (even though white color is set). What am I missing here ? Can RelativeLayout fill the device screen background color at all ?
Here are screenshots and code I am working on:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/noInternetAnimation"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/internet_error" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#id/noInternetAnimation"
android:layout_centerHorizontal="true"
android:text="#string/no_internet"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
Check the screenshot, app preview on the right has white background as expected.
Now, check this when it is installed on my phone in real device.
Did you try changing your RelativeLayout to a ConstraintLayout just to see if it works? Your XML doesn't look complex at all, so I don't see why is not working

Android RelativeLayout zIndex not working (anymore)

I don't understand this issue. I'm pretty sure I used to do this, yet in this case, the zindex ordering is not followed, and the TextView below is hidden behind the button:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="50dp" />
<TextView
android:textColor="#color/black"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
I have restarted Android Studio, but even worse, this is the same on my device too, so its not an Android Studio bug. What is the issue here exactly?
Please use the elevation
android:elevation="10dp"
here is you can see your solution
If you add any views to Relative Layout, It places your view above another view if you don't use layout alignment like layout_above/layout_below/layout_leftof or rightof etc

Error: Android-XML:Placing a <WebView> in a parent element that uses a wrap_content size can lead to subtle bugs; use match_parent

I am a beginner in Android and building a linear layout and getting an error in the layout XML file like this,
Error
Placing a <WebView> in a parent element that uses a wrap_content size can lead to subtle bugs; use match_parent
Error is shown in this part of the code
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/browse"
/>
Here is my full code of the XML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100" >
<EditText
android:id="#+id/url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="70"
android:ems="10" >
</EditText>
<Button
android:id="#+id/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="30"
android:text="GO" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="8"
>
<Button
android:id="#+id/backpage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Go Back" />
<Button
android:id="#+id/forwardpage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Forward Page" />
<Button
android:id="#+id/Refreshpage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Refresh Page" />
<Button
android:id="#+id/clearhistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Clear History" />
</LinearLayout>
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/browse"
/>
</LinearLayout>
Can anyone tell me what is wrong in my code and how can I get rid of the error ?
I think this might be a very basic question but I tried and could not figure it out.
Details:
API Level : API 19: Android 4.2.2
Contrary to what most answers imply, this is not a bug in Eclipse resp. Android Studio, but a fair warning. It's produced by a LINT check on your layout.
You can remove the warning and work around the 'subtile bugs' like so:
Add tools:ignore="WebViewLayout" to your WebView (thanks to #StefanDeitmar) and make the tools namespace known by adding xmlns:tools="http://schemas.android.com/tools" to your outmost layout element.
In your code, add a WebViewClient to your WebView and implement the OnPageFinished() callback to invoke a requestLayout() on your wrapping layout element.
mWebView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView webView, String url) {
super.onPageFinished(webView, url);
mSurroundingLayout.requestLayout();
}
}
The issue is mainly because in the parent LinearLayout, you have provide layout_width and layout_height as wrap_content. It should be match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
Actually I think that this is a bug in Eclipse, or the latest version 20 Android SDK.
I have screen designs that are made up of stacked web views because their contents come from different sources. My screen layouts "wrap content" for height so that the user always sees what information is returned from the various sources without vast areas of blank. Its an unusual design, but one that has worked well for 4+ years on many similar applications. Yup, I know that I have to be careful about heights, etc, but I'm happy to take on that responsibility.
Eclipse is essentially creating a "Nanny State" - that's not the way we normally do it so its wrong. Pardon me but I differ in opinion.
The way I got around this was to close the XML file and completely clean the project. This way Eclipse forgets that it ever "nanny nagged" about this issue and everything is good again.
I had the same issue before, I had to set the height to 250dp, but I couldn't, so what I did was just wrap it into a FrameLayout and set the custom height to it, you can set the height you want to the wrapper (just not wrap_content) and it will work with no problem:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="250dp">
<WebView
android:id="#+id/web_view_tutorial"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>

Cannot set background image in android

I am trying to change my background image. I thought i was doing something wrong so i searched for the answer and found it here
My code does exactly as the answer suggest however it does not work. I can easily alter the color of the background, but when I try to place a background image it fails. My jpg (480X800) resource is in the drawable-hdpi. I tried changing resolution to 800x480.
So far i only edited the activity_main.xml and added some resources:
<FrameLayout 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="#drawable/vertical_lines"
tools:context=".Main" >
<!--
The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc.
-->
<TextView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="#string/dummy_content"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />
<!--
This FrameLayout insets its children based on system windows using
android:fitsSystemWindows.
-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/vertical_lines" >
<LinearLayout
android:id="#+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent" >
<Button
android:id="#+id/dummy_button"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/dummy_button" />
</LinearLayout>
</FrameLayout>
</FrameLayout>
I figured it out. The problem wasnt with my code at all. I have used photoshop and for some reason the jpg file was saved in the CMYK color mode. After i switched the setting to RBG and resaved the file as png everything works fine. I cant believe i spend so much time on this when the problem wasnt even in my code. Hopefully this will save someones time if they run into similar problem.

RelativeLayout background rendering over children

I have this (simplified) layout.-
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_pattern" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/dimen5"
android:layout_marginTop="#dimen/dimen15"
android:background="#drawable/background_grey" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:contentDescription="#string/app_logo"
android:src="#drawable/app_logo" />
</RelativeLayout>
</RelativeLayout>
Which renders good in eclipse layout editor: my app_logo image over background_grey, which is over background_pattern image. But when I run on device, background_grey renders over background_pattern as expected, but also over its child app_logo.
Am I doing something wrong or is this some kind of bug when nesting several layouts with background attribute?
As a workaround, I suppose I can replace background attributes for ImageViews, but I'm pretty sure this may work and I'm missing something obvious.
Notes
Working with the latest ADT and deploying on Nexus 4, 4.2.2
background_grey is a 9-patch image

Categories

Resources