Develop Reference

After migration to Androidx SwitchCompat is white

I've migrated my project to AndroidX. My MainActivity extend FragmentActivity my first SwitchCompat looks all white, it doesn't have any color at all when I first time come to that screen. SwitchCompat is white. All other SwitchCompact under it are with correct color. If I press back and come again to that screen, my first SwitchCompact receive correct color and looks fine.
If I change that my MainActivty extend AppCompactActivity, then everything is ok when I first time reach that screen. Does anyone know where is problem here because before migration my MainActivity also extend FragmentActivity and everything was fine.
My xml code is the same in the both case:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
tools:context=".BlankFragment">
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

I didn`t go deep why this problem occurs when you extend FragmentActivity. but to show appropriate colors on the action event of "SwitchCompat" can achievable by using custom track and thumb.
your switch button
<androidx.appcompat.widget.SwitchCompat
android:id="#+id/sw_autoplay"
android:layout_width="44dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:textOff=""
android:textOn=""
android:theme="#style/SwitchButtonTheme"
android:thumb="#drawable/thumb"
app:track="#drawable/track" />
thumb
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="oval">
<solid android:color="#ffffff" />
<size android:width="20dp" android:height="20dp" />
<stroke android:width=".5dp" android:color="#A4A0A0" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="#ffffff" />
<size android:width="20dp" android:height="20dp" />
<stroke android:width=".5dp" android:color="#57F47F" />
</shape>
</item>
track
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ffffff" />
<stroke android:width=".3dp" android:color="#A4A0A0" />
<size android:height="20dp" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#57F47F" />
<stroke android:width=".3dp" android:color="#A4A0A0" />
<size android:height="20dp" />
</shape>
</item>
It`s just for when you want you to use "FragmentActivity".

Android Studio - Ruined seekbar

I have a problem with my seekBar. When I am implementing to Android Studio, seebars look good and works perfectly.
Here is a photo.
View in Android Studio
When I run app in real device seekBars is ruined out, but I do not know why ?
Here is a photo of problem.
View in app on real device
Any idea ? of course here is a code ...
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:orientation="vertical">
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBarIsVisibleFps"
android:thumb="#drawable/thumb"
android:progressDrawable="#drawable/progressline"
android:max="1"
android:layout_weight="1"
android:progress="1"/>
... ... ...
Here is a code from thumb
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#c60026" />
<size
android:width="16dp"
android:height="16dp" />
</shape>
... and here is a progressline
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#878787" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="line">
<stroke
android:width="12dp"
android:color="#5e5e5e" />
</shape>
</clip>
</item>
</layer-list>

Seekbar progress drawable abnormal behavior onPause

I'm displaying a seekbar inside a fragment. The seekbar has custom thumb and progress drawables. They display fine, however when I pause the activity and return to it, the progress bar width strangely increases to the same height of the thumb ! I can't find the problem for this abnormal behavior.
how it displays normally
after activity pause
my code :
// inside fragment onStart
seekBar.setThumb(getResources().getDrawable(R.drawable.form_bg));
seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.progress));
// seekBar xml
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:indeterminate="false"
android:layout_marginTop="5dp"
android:max="100"
android:maxHeight="6dp"
android:progress="50" />
// thumb drawable
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<size android:height="#dimen/seekbar_tumb_size" android:width="#dimen/seekbar_tumb_size" />
<solid android:color="#color/form_color" />
</shape>
// progress drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:bottom="0dp" android:gravity="center_vertical" android:id="#android:id/background">
<shape>
<solid android:color="#color/activity_bg" />
</shape>
</item>
<item android:gravity="center_vertical" android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#color/form_color_syrup" />
</shape>
</clip>
</item>

Finally found the solution to this.
Rect bounds = seekBar.getProgressDrawable().getBounds();
seekBar.setThumb(getResources().getDrawable(R.drawable.form_bg));
seekBar.setProgressDrawable(getResources().getDrawable(R.drawable.progress));
seekBar.getProgressDrawable().setBounds(bounds);

Android border for button is not working through xml

I try to put a border for a button in android but unfortunately android:background="" dosen't give any chance to put a drawable resource file. Also it dosen't any chance to put a background color.
This is my button ,
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/space1"
android:text="Submit"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textSize="25dp"
android:layout_centerInParent="true"
android:background="#drawable/button_border" />
IDE(Android Studio) brings the error in the last line of the button xml.
And this is my button_border.xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="##662a48" />
</shape>
Button should be like below
How to correct this error ?
Have any ideas about this problem .
Thank you.

Because you are providing the wrong value i.e. android:color="##662a48"
try this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="#662a48" />
</shape>

Change your border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="#662a48" />
</shape>
remove one # # you stroke color
that is, change
#662a48 instead of ##662a48

You don't need to use extra XML for that. You can use the default functionality like,
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#662a48"
android:text="Submit"
app:strokeWidth="2dp"
app:cornerRadius="10dp"/>

How to create Google + cards UI in a list view?

I want to create a listView of cards, but after reading this blog post goolge-plus-layout, I'm cards are a viable solution for a list of anything. The animation part seems too memory intensive to load say a listview with more than 40 elements simultaneously.
Is there a better way to achieve a cards UI in listView?

You can create a custom drawable, and apply that to each of your listview elements.
I use this one for cards in my UI. I don't think there is significant performance issues with this approach.
The drawable code (in drawable\big_card.xml) looks like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/second_grey" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#color/card_shadow" />
</shape>
</item>
<item
android:bottom="12dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#color/card_white" />
</shape>
</item>
</layer-list>
I apply the background to my listview elements like this:
<ListView
android:id="#+id/apps_fragment_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/big_card" />
If you want to add this as a background to any View (not just a list), you just make the custom drawable that View's background element:
<TextView
android:id="#+id/any_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/big_card" />

EDIT: Google provides a nice class called CardView. I didn't check it but it looks promising.
Here's the previous way, which also works fine (that's what I wrote before the edit) :
There is a nice tutorial here and a nice sample of it here .
in short , these are the files you can create:
listView definition:
android:divider="#null"
android:dividerHeight="10dp"
android:listSelector="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"
android:headerDividersEnabled="true"
android:footerDividersEnabled="true"
also this:
m_list.addHeaderView(new View(this));
m_list.addFooterView(new View(this));
res/drawable/selector_card_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/layer_card_background_selected" />
<item android:drawable="#drawable/layer_card_background" />
</selector>
listView item :
res/layout/list_item_card.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:descendantFocusability="beforeDescendants">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingRight="15dp"
android:background="#drawable/selector_card_background"
android:descendantFocusability="afterDescendants">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</FrameLayout>
res/drawable/layer_card_background_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#CCCCCC"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
res/drawable/layer_card_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

If all you want is a ListView that simulates the cards-look you can use a 9-patch as background for your listitems to make them look like cards. You can find a 9-patch and some more tips and explanation here: http://www.tiemenschut.com/simply-get-cards-ui-look/

Add divider for the Listview item and padding :
android:divider="#android:color/transparent"
android:dividerHeight="1dip"
Add RelativeLayout into your LinearLayout for ListItem with some desired padding :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:padding="3dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rowshadow" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
Add Background to the listview item , like :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<corners android:radius="0dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="0dp"/>
</shape>
</item>
</layer-list>
Use https://github.com/elcrion/demo.cardlistview as an example. It is somehow close to google style

As "android developer" briefly mentions in his answer, the CardView class can be used to easily create card views.
Just wrap you UI widgets in a CardView element and you are ready to go. See the short introduction to the CardView widget at https://developer.android.com/training/material/lists-cards.html#CardView.
The CardView class requires a v7 support library, remember to add the dependencies to your .gradle file!
compile 'com.android.support:cardview-v7:21.0.+'