Develop Reference

How to change background color of popup-keyboard for android soft keyboard?

It took me a long time to figure out how to get rid of the ugly black default and color my custom keyboard.
I worked from this very helpful answer and I can now color my keyboard nicely:
How to change background color of key for android soft keyboard?
Just the popup-keyboards are still in the default colors.
I found another helpful answer, which took me almost to a solution. But the answer is focusing on the creation and preview of the popups:
Creating a SoftKeyboard with Multiple/Alternate characters per key
#Graeme has mentioned
If you want to change the layout/style of the popup (which defaults to #android:layout/ keyboard_popup_keyboard.xml) you can specify a android:popupLayout attribute which points to a layout file
So I have made my own version of keyboard_popup_keyboard.xml and put it next to my main layout file input.xml into /res/layout and made a reference to it, like in the example given.
<org.gasana.android.aniikeyboard.LatinKeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyBackground="#drawable/samplekeybackground"
android:keyTextColor="#000000"
android:popupLayout="#layout/popup"
/>
Sadly there was no example for the popupLayout file. So I copied the original file all the way up from
C:\Users\martin\AppData\Local\Android\sdk\platforms\android-28\data\res\layout\keyboard_popup_keyboard.xml
and tried to tweak it as popup.xml to use the same background as my main keyboard:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/samplekeybackground"
>
<android.inputmethodservice.KeyboardView
android:id="#android:id/keyboardView"
android:background="#drawable/samplekeybackground"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:popupLayout="#layout/popup"
android:keyTextSize="22sp"
tools:ignore="ResourceCycle" />
<ImageButton android:id="#android:id/closeButton"
android:background="#drawable/samplekeybackground"
android:src="#drawable/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:clickable="true"
/>
My keyboard still builds and creates a working APK. Just the color of the popups is still the ugly default.
Context: I am a linguist, not a developper. I made this custom keyboard for a minority language with a special alphabet and tone-markers and have it free on the Play Store. It works. But people are hesitating, because of the aweful color-design. As soon as I get the popups colored, I will publish a fresh version. Thank you.

Since no answer was coming here for two months, I took time for more poking and guessing. Now I got lucky today and want to be nice to the next linguist, who also needs a custom keyboard and needs to work from examples:
mykeyboard.java is pointing to the layout file for the main keyboard so (third line "input"). I just give a three line quote:
#Override public View onCreateInputView() {
mInputView = (LatinKeyboardView) getLayoutInflater().inflate(
R.layout.input, null);
So inside my \res\layout\input.xml I added the reference to my popup-layout:
<org.my.project.here.LatinKeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyBackground="#drawable/samplekeybackground"
android:keyTextColor="#000000"
android:popupLayout="#layout/popup" <!-- here it is -->
/>
And my \res\layout\popup.xml looks like this; I believe I copied it from the provided sample project. Today I just changed the two marked lines for light blue background colour and for black text colour and that finally did the trick. Seems I had looped references earlier but no error messages, just the ugly black default layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/samplekeybackground">
<android.inputmethodservice.KeyboardView
android:id="#android:id/keyboardView"
android:background="#color/colorPrimary"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyTextSize="22sp"
android:keyBackground="#drawable/samplekeybackground" <!-- here it is -->
android:keyTextColor="#000000" <!-- and here -->
tools:ignore="ResourceCycle"/>
<ImageButton android:id="#android:id/closeButton"
android:background="#android:color/transparent"
android:src="#drawable/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:clickable="true"/>
The mentioned samplekeybackground.xml is just a very simple definition, pointing to two actual xml-colour-defintions:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item
android:state_focused="false"
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/normal" />
<!-- Pressed state -->
<item
android:state_pressed="true"
android:drawable="#drawable/pressed" /></selector>
And just to be complete, because I appreciate stuff I can just copy and play with for testing, here is the normal.xml; the pressed.xml is the same, just a darker blue:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#A1B7F7" />
<solid android:color="#C7D4FA"/>
</shape>
All this is from guessing and building many versions until I got lucky. Can probably not answer any follow-up questions, but it does work:

Adding Ripple Effect to RecyclerView item

I am trying to add Ripple Effect to RecyclerView's item. I had a look online, but could not find what I need. I assume it has to be a custom effect. I have tried android:background attribute to the RecyclerView itself and set it to "?android:selectableItemBackground" but it did not work.:
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:clickable="true"
android:background="?android:selectableItemBackground"
android:id="#+id/recyclerView"
android:layout_below="#+id/tool_bar"/>
This is the RecyclerView that I am trying to add the effect to:

I figured out. The only thing that I had to do is to add this attribute:
android:background="?android:attr/selectableItemBackground"
to the root element of the layout that my RecyclerView adapter inflates like that:
<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="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="?android:attr/selectableItemBackground"
tools:background="#drawable/bg_gradient">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:id="#+id/shoppingListItem"
android:hint="#string/enter_item_hint"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/shopping_list_item_checkbox_label"
android:id="#+id/shoppingListCheckBox"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:checked="false"/>
</RelativeLayout>
Result:
If you are still not able to see ripple effect, add these lines also to the root element of the layout.
android:clickable="true"
android:focusable="true"

As already answered, the simplest solution is to just add one of the following as your RecyclerView row's background:
android:background="?android:attr/selectableItemBackground"
android:background="?attr/selectableItemBackground"
However if you are experiencing problems with this method or if you want finer control over the colors, then you can do the following.
Custom Ripple Effect
This answer is starting with this simple Android RecyclerView example. It will look like the following image.
Add selector for pre API 21 devices
Before API 21 (Android 5.0 Lollipop), clicking a RecyclerView item just changed its background color (no ripple effect). That is what we are going to do, too. If you still have users with those devices, they are used to that behavior, so we aren't going to worry about them too much. (Of course, if you really want the ripple effect for them, too, you could use a custom library.)
Right click your res/drawable folder and choose New > Drawable resource file. Call it custom_ripple. Click OK and paste in the following code.
custom_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
I used colorAccent as the highlight color for the pressed state because it was already available, but you can define whatever color you want.
Add Ripple Effect for API 21+ devices
Right click your res/drawable folder and choose New > Drawable resource file. Call it custom_ripple again. Don't click OK, yet this time, though. From the Available qualifiers list choose Version, then click the >> button and write 21 for the Platform API level. Now click OK and paste in the following code.
v21/custom_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccent">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
Again, I used colorAccent for the ripple color because it was available, but you can use whatever color you want. The mask confines the ripple effect to just the row layout. The mask color apparently doesn't matter so I just used an opaque white.
Set as the background
In your RecyclerView item's root layout, set the background to the custom ripple that we created.
android:background="#drawable/custom_ripple"
In the example project that we started with, it looks like this:
<?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:orientation="horizontal"
android:background="#drawable/custom_ripple"
android:padding="10dp">
<TextView
android:id="#+id/tvAnimalName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
Finished
That's it. You should be able to run your project now. Thanks to this answer and this YouTube video for help.

I think there is one small detail that is missed.
If you still do not get the ripple effect after adding android:background="?android:attr/selectableItemBackground" try adding these following lines in the root of the layout.
android:clickable="true"
android:focusable="true"
These will make sure that the view is clickable and will enable the ripple effect with the background attribute mentioned above

add this lines in your adapter xml root view
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"

A simple and custom approach is to set a view theme as outlined here.
some_view.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:focusable="true"
android:src="#drawable/up_arrow"
android:theme="#style/SomeButtonTheme"/>
some_style.xml
<style name="SomeButtonTheme" >
<item name="colorControlHighlight">#color/someColor</item>
</style>
Other custom implementations may be found here.

Using a Button Style
This has worked for me countlessly.
Add the Borderless Button Style to the root element of your layout.
There's no need for focusable or clickable attributes, the default styling encapsulates all that for you.
<androidx.constraintlayout.widget.ConstraintLayout
style="#android:style/Widget.Material.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="wrap_content">

How to add space between items in android listview?

I would like to add padding between EACH item in a listview, but I would like to keep the default divider as I think it is aesthetically pleasing. Anything wider looks ugly.
I currently have:
<com.example.practice.MyListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
android:layout_below="#id/name" />
Now, I have tried using a transparent divider, and this succeeds at getting the spacing I want, but then I don't see the little line. And if I don't use a transparent divider than I have a huge thick ugly line. I want to keep the default line shown, and just add some spacing on the top part of each listview item.

You wouldn't be able to achieve what you want as simple as that then.
Step one: Set the divider as transparent, and make the height a tad larger:
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#android:color/transparent"
android:dividerHeight="8dp"/>
Step Two: In order to achieve the 'little line' effect, you can add a custom drawable as the list view item background, say the list view item is defined as 'list_item.xml':
<?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="match_parent"
<-- Add a Custom background to the parent container of the listview items -->
android:background="#drawable/list_item_selector"
android:orientation="vertical" >
<-- Rest of the item layout -->
</LinearLayout>
Of course, that item can be anything you like it to be, mine is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/bg_gray" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
But that would then disable the 'Holo Selector' effect, where whenever you click, or highlight an item on the listview, there is a Holo Blue color drawn over it, that's why if you notice on the list item background we didn't use a layer list drawable, we used a selector named 'list_item_selector'.
Here's the selector, which uses the layer list drawable when not pressed, and uses a Holo-blue color when pressed:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="false"
android:drawable="#drawable/list_item_bg2"
/>
<item android:state_pressed="true"
android:drawable="#color/holo_blue"
/>
</selector>
EDIT for Comment
Absolutely possible, you can define a set height for list view items, however, it is recommended to set a minimum height, rather than a predefined height that never changes.
Say this is my list item layout:
<?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="match_parent" >
<ImageView
android:id="#+id/grid_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/grid_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/grid_image"
android:minHeight="48dp"
android:padding="8dp"
android:textIsSelectable="false" />
</RelativeLayout>
All needed would be,
Step One: Define the min height, or max height, as you prefer, in the dimens.xml file contained in the values/ folder. Why? Because the height should definitely change based on the layout, and you can define different dimens.xml for each device density.
in the dimens.xml, say:
<resources>
<!-- List Item Max and Min Height -->
<dimen name="list_item_min_height">48dp</dimen>
<dimen name="list_item_max_height">96dp</dimen>
<dimen name="list_item_set_height">64dp</dimen>
</resources>
And then use whichever value for the parent LinearLayout of you list item's layout.
<?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="#dimen/list_item_min_height" >
And that's it for that topic, now to center the text, it's even simpler:
If you are using a TextView and is wrapped into a RelativeLayout, use: android:layout_centerVertical="true"
If you are using a LinearLayout, use: android:layout_gravity="center_vertical"
and couple that with: NOTE This only works if you didn't set the height to wrap_content, otherwise it is irrelevant.
android:gravity="center_vertical"
Hope that helps.

I don't know if I understand your question precisely.
If you want the divider to be transparent so you see a peace of the background between each ListView so it gives a kind of 3D effect when scrolling. You could do it this way:
In your list_item xml give the LinearLayout the background color you want for example:
<LinearLayout
android:id="#+id/listItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dip"
android:orientation="horizontal"
android:background="#FFFFFF"
>
Then give your ListView a background color like this:
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="8dip"
android:background="#0000FF"
android:cacheColorHint="#android:color/transparent"
android:drawSelectorOnTop="true"
/>
Now your ListView scrolls over your background
I hope this is what you wanted.

Also one more way to increase the spacing between the list items is that you add an empty view to your adapter code by providing the layout_height attribute with the spacing you require. For e.g. in order to increase the bottom spacing between your list items add this dummy view(empty view) to the end of your list items.
<View
android:layout_width="match_parent"
android:layout_height="15dp"/>
So this will provide a bottom spacing of 15 dp between list view items. You can directly add this if the parent layout is LinearLayout and orientation is vertical or take appropriate steps for other layout. Hope this helps :-)

you can simply use divider
see the following example
<ListView
android:id="#+id/activity_main_listview_data"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#android:color/transparent"
android:dividerHeight="10dp"
/>
here, in android:divider you can set color or make it transparent and in dividerHeight for add spce between items.

This is a solution for those of you who do not want the divider to be visible and still want to add more space. To get rid of the divider completely, set it to #null and set the dividerHeight to 0dp. Here is a generic ListView of mines.
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:divider="#null"
android:dividerHeight="0dp"
android:layout_alignLeft="#+id/txtMake"
android:layout_below="#+id/txtMake"
android:fadeScrollbars="false"
android:scrollbarThumbVertical="#drawable/scroll_bar_color"
android:scrollbarStyle="outsideInset" >
</ListView>
Next, go to the xml file in which you use the adapter with to populate your listview. Go to your container (Example RelativeLayout...) and simply add in the following.
android:layout_marginTop="15dp"
This will actually add space for those of you who are not using the divider. Unlike the padding which just increases the box size, this will increase the distance between each item.

Inside the ListView tag in XMLfile add a dividerHeight tag and give it a value(the spacing you want between your list items).
It would provide you with suitable space between the list items.
Code:
<ListView
android:id="#+id/listid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:divider="#drawable/divi"
android:dividerHeight="60dp"></ListView>
Now create a drawable XML file (in this case name is divi). Inside it add a stroke tag and give it a width and that would do.
Code:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>

android:layout_width="match_parent"
android:textColor="#color/colorPrimary"
android:textSize="30dp"
android:layout_height="wrap_content"
Complete Code Here

Android listview entire list getting selected

I seem to be having a UI problem with a listview. I have a listview and selecting any item on the list, highlights the entire listview. The selection is working fine, I get the correct item in the listener.
But the problem is that when i select any item, the entire listview gets highlighted, so it is difficult to tell which row got selected.
This is working fine on Android >3.1 - Currently i am testing on a 2.3 device.
<ListView
android:id="#+id/myList"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="#dimen/margin_medium"
android:background="#drawable/border"
android:listSelector="#99000000"
android:scrollbarFadeDuration="1000000"
android:scrollbars="vertical" >
</ListView>

I recently had the same issue, but the reason was in Android < 3.0 bug: if you set a #color as a drawable for your list item pressed selector, then it will fill the entire list area. Solution is to use a 'shape' drawable instead of #color.
So, create a new XML file in res/drawable folder with similar content:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/my_list_item_pressed_color" />
</shape>
And reference created drawable in your ListView selector for state_pressed (also created as an XML file in res/drawable folder):
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/list_item_pressed_bg" />
<item android:drawable="#android:color/transparent" />
</selector>
And use this selector in your ListView:
<ListView
.....
android:listSelector="#drawable/list_item_selector" />
That's all. Works at least with Android 2.2-2.3.

If you don't want to change your selector, you can also set it as the background of the list item's layout, rather than in the listSelector field of the ListView. The list items receive the "selected" state when touched and the color is displayed properly.
This works for all versions of Android.
Ex: This is your list item layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_color">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Your text here" />
</LinearLayout>
And your list with no list selector:
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

I fixed this by removing this line: (not sure why it worked)
android:listSelector="#99000000"

How to make background stretch in Android layout

So what I am trying to do is display background for list row element. I've created row layout and applied style :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout1" android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#style/product1" >
I've set style as:
<style name="product1">
<item name="android:background">#drawable/product1</item>
</style>
and product1.xml as :
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/prod1"
android:antialias="true"
android:dither="true"
android:filter="false"
android:gravity="right"
android:scaleType="fitXY" />
where prod1.9.png is a nine patch set to be scalable top and left (so I want to have my image in right lower corner)
But the problem I am facing now is that icon is displayed in the corner while 9patch is not scaled left and up.
If instead of using style I put android:background=#drawable/prod1 then it scales but every row get ridiculously big. Any ideas?

I haven't verified this with your code, but the first thing that comes to mind is (assuming using 'android:background' instead of the style), instead of this on the row layout:
android:layout_height="fill_parent"
set a fixed height:
android:layout_height="30dp"
It's not as flexible, but it might suit your needs.