Android background not correctly applied on first instance - android

I have a very simple layout, simply two buttons below each other. On both buttons I set a drawable layer-list as background, containing the selectableItemBackground causing a ripple effect on the buttons.
A weird bug occurs: on the first button, the ripple effect doesn't happen, but on the second button it does. How can this be explained, or can it be a bug in Android/Support Libraries?
Setting clickhandlers doesn't change anything, the behaviour stays the same.
See example gif below, and XML code below that.
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/first_button"
android:text="First Button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_margin="12dp"
android:background="#drawable/white_selectable_button"/>
<Button
android:id="#+id/second_button"
android:text="Second Button"
android:layout_width="match_parent"
android:layout_margin="12dp"
android:layout_height="48dp"
android:background="#drawable/white_selectable_button"/>
</LinearLayout>
white_selectable_button.xml (in res/drawable):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white"/>
<item android:drawable="?attr/selectableItemBackground"/>
</layer-list>
It appears that this drawable is applied to the button, since when setting the color to red, the button actually appears red. Only the selectableItemBackground ripple isn't applied.
I've tested this with design support libraries 24.1.1, 23.4.0 and 23.2.0, on all versions, this doesn't change anything.
EDIT: Filed bug report to Android bug tracker: https://code.google.com/p/android/issues/detail?id=219620

Took your code and confirmed it also does not work on my device. I submitted this as a bug against the Android Support Library. So eventually it will get fixed.
In the meantime, I figured out an easy workaround to fix the bug. All you need to do is add an invisible dummy Button before the other two as it appears this bug only affects the first button. You can eventually remove this once its fixed by Google.
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/white_selectable_button"
android:visibility="gone" />

Related

Why can't I see the Google login button?

I have linked Google login to my 'JoinActivity'. Like this...
activity_join.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".JoinActivity">
<!-- this line-->
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But, I couldn't see any 'visual' button on my Design tab, there was only '200dp-linear button('cause its width values is 200dp. It doesn't have height value. idk why)' on the top-left.
I referenced other sites, videos. They all have visual button like this but not me.
Yes, we can not see the icon in design mode, but it display when
running the app.
Your XML has an error:
This view is not constrained. It only has designtime positions, so it
will jump to (0,0) at runtime unless you add the constraints
To make it work properly, we must add the constraint for horiziation and vertical.
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And this is constraint-layout introduction
Try running Gradle, this sometimes triggers the design to redraw (if you have just added the google library without having ran Gradle fully)

Android Imagebutton is clipped

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.

Android Buttons have an undesired margin

I wrote a test application to describe my problem better. I started a new Android project with this activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context="com.example.jannevers.myapplication.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Now the first problem is, the button does not really fill the parent, it has a margin (see screenshot):
I can work around this, by making the button bigger than it should be.
But then the second problem is, that the margin is the same on the most devices, but not all. E.G. at a Samsung Galaxy S6 Edge, there is almost no margin (see screenshot):
This is really weird, anyone know a solution?
Use style="?android:attr/borderlessButtonStyle"
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?android:attr/borderlessButtonStyle"/>
Check if into your style.xml there is a rule about layout margin like this:
<item name="android:layout_margin">10dp</item>

Adding padding on android AutoCompleteTextView popup

For the last two hour and a half i had been trying to do something really simple: change the padding in the Android's AutoCompleteTextView's popup (the one that shows the auto complete options).
i'm trying to do this because the item in my app has the height of the text (i'm not sure why), so i want to make it easier to click on. But every think i could find didn't work at all.
So i really would be glad if anyone could spot a light in this problem or give an alternative solution.
And just for the record, i'm using android studio, and i had removed the support API (since my min API is 16), so my app is using 100% native resorts only.
I just found a way to make it, i had to make a custom view layout with an textview already including the item's padding. Than i created a custom adapter with uses this layout.
The layout goes like this
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:layout_margin="0dp"
android:paddingLeft="#dimen/thin_margin"
android:paddingRight="#dimen/thin_margin"
android:paddingTop="#dimen/list_1line_item_padding"
android:paddingBottom="#dimen/list_1line_item_padding"/>
And in the custom adapter just used it in the getView method
itemView = LayoutInflater.from(ctx).inflate(R.layout.list_1line_item, null);
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="20dp"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/dp_15"
android:paddingBottom="#dimen/dp_15"
android:id="#+id/parentid">
<AutoCompleteTextView
android:id="#+id/address_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/light_gray_bg"
android:drawableRight="#drawable/icon_search_smaller"
android:gravity="center_vertical"
android:hint="Start typing location"
android:inputType="textCapWords"
android:popupBackground="#drawable/auto_location_popup_bg"
android:textColor="#color/black"
android:textColorHint="#color/dark_grey"
android:textSize="16sp"
android:visibility="visible"
android:dropDownWidth="wrap_content"
android:dropDownAnchor="#+id/parentid">/>
<requestFocus />
</RelativeLayout>
</RelativeLayout>
define another relative layout wrapping only the autocomplete textview and the button. look at this link
Android layout padding is ignored by dropdown

How to make a CardView have a clickable&checkable effect, and how to make it dark themed?

Background
Before CardView was introduced, I made some selectors on my app to mimic cards, and let the user also choose which theme to use for the app (some prefer a dark theme) :
The problem
I wanted to make it look&work more natively, so I tried using CardView.
Sadly, I fail to understand how to set the CardView have a clickable&checkable effect (the native one of each platform, maybe with a different color), and also have the ability to set it a dark theme.
The questions
How do I make a CardView have a clickable effect? On Lollipop it's a ripple effect. On previous ones it's full color changing within the boundaries of the CardView. I'd also like to customize the color of the clickable effect, and let it also be checkable.
How do I make a dark-theme CardView ?
You have to use the CardView.Dark style for the dark-theme CardView. You can also just use the colors as mentioned in the 11th and 12th comments of this bug.
This was requested on google at https://code.google.com/p/android/issues/detail?id=194497
But after release of Android Support Library, revision 23.2.1 (March 2016) This functionality is added.
Add dark theme for CardView
update Support Library to Android Support Library to 23.2.1
Example:
Add below attribute to your cardview
style="#style/CardView.Dark"
as shown here
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cards"
style="#style/CardView.Dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:padding="10dp">
<TextView
android:id="#+id/usersName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="10dp"
android:text="Username"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/others"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/usersName"
android:layout_centerVertical="true"
android:paddingTop="10dp"
android:text="Others"
android:textColor="#FFFFFF" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

Categories

Resources