Develop Reference

How to add border in Floating action button in Android

I was trying to build something like the below image:
Here is my xml code:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/vector_nav_qr_scanner"
app:backgroundTint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar" />
I was searching a lot but couldn't figure out how can I add the light blue background with a white circle border and also an icon in the center. Can any one help?

Try this:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#B1E4F6" //inner background color
android:src="#drawable/scan"
app:backgroundTint="#color/white" //outer background color (border color)
app:borderWidth="8dp"
app:maxImageSize="16dp" //inner icon size
app:tint="#android:color/holo_blue_dark" /> //inner icon color
Result:

Add
app.strokeColor = "#000033"
app.strokeWidth = "3dp"
in your floating action button xml..
for example:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/vector_nav_qr_scanner"
app:backgroundTint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar"
app:strokeColor = "#000033"
app:strokeWidth = "3dp" />
edit: app:strokewidth and app:strokeColor is working for ExtendedFloatingActionButton. Sorry, that's my fault.
You can use
app:borderWidth="4dp" in stead of app:strokeWidth = "3dp". remove strokeColor. there showes little border.
i hope it will help you.
please let me know if it doesn't work.
OR
define custom shape in drawable folder
fab_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#android:color/transparent" />
<!-- here set the width and color of your border -->
<stroke
android:width="5dp"
android:color="#android:color/darker_gray" />
</shape>
then wrap your FloatingActionButton with a layout. use fab_bg.xml file in layout's background.
for example:
<LinearLayout
android:id="#+id/fabWrapperId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fab_bg"
android:padding="5dp">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/vector_nav_qr_scanner"
app:backgroundTint="#android:color/white"
app:layout_anchor="#id/bottom_app_bar"
app:fabSize="normal" />
</LinearLayout>
NB: make sure your stroke width from fab_bg and layout padding keep the same.

Android xml drawable is bigger first time

I have two clickable text views with the same drawable left image. When I open fragment first time the first image looks bigger then second one. After clicking on first text view the next fragment is opening and then when I return back two images have the same size. What's wrong? Please help to find out reason of this bug.
This is my layout:
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/dmvLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/dmv_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider"
android:background="#color/lineColor" />
<RelativeLayout
android:id="#+id/tlcLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/tlc_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
</LinearLayout>
This is image drawable (lawyer_selected.xml), where femida is png image, and white background is needed for selected state (button in selected state is green and image should be with white frame):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<padding
android:bottom="#dimen/dash_icon_padding"
android:left="#dimen/dash_icon_padding"
android:right="#dimen/dash_icon_padding"
android:top="#dimen/dash_icon_padding"/>
<solid android:color="#android:color/white"/>
<corners
android:radius="#dimen/dash_icon_radius"/>
</shape>
</item>
<item android:drawable="#drawable/femida"/>
</layer-list>
Image femida.png

Just use nested LinearLayout instead and use android:layout_weight="1" or any required value to you and it will work for sure.
**In your case it will be 1 only, while the main parent LinearLayout can have wrap_content as height

Dynamically Changing List Row Background When Selected

I've searched around online for a solution to this problem and have tried out different ways of doing this but haven't come up with an answer. I have a list view and a custom row layout for the rows of the list. In my list row xml file there is a relative layout with an ImageView and text. Along with that I set the background of this relative layout to a certain shape and this works fabulous. Now at runtime I want to change this list row background to appear pressed inwards ( I was thinking just make the padding a little smaller or something). I have tried making another xml file for a pressed shape but it hasn't worked. I also tried to code this up by doing something such as this:
RelativeLayout rl = (RelativeLayout)view.findViewById(R.id.relativerow);
rl.setBackgroundResource(R.drawable.item_shape_pressed);
I'm guessing I'd have to make my own onPressed method for this to work?
Here is the shape xml file I am using for each list row background:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_shape">
<padding android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="20dp" />
<solid android:color="#FFF" />
</shape>
Here is the XML for each row in the list view. See where I sit the background attribute at the top.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativerow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/item_shape"
android:padding="5dip" >
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="60dip"
android:layout_height="60dip"/>
</LinearLayout>
<TextView
android:id="#+id/articletitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:textColor="#040404"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/articldesc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/articletitle"
android:textColor="#343434"
android:textSize="13sp"
android:textStyle="italic"
android:layout_marginTop="1dip"
android:layout_toRightOf="#+id/thumbnail"
/>
</RelativeLayout>
So, is there any way for me at runtime to change the background in this relative view from the normal item_shape to another pressed in item shape? If anyone could show me how to do this I would certainly appreciate it. This is just a small part of the app that has been bugging me recently but it would be a nice touch to make the app look more complete.

Try with create your own selector for the ListView, for example listview_item_selector.xml in res/drawable folder and add this selector in the background of your RelativeLayout.
The following code will be: listview_item_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_shape_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/item_shape_focused" android:state_focused="true" />
<item android:drawable="#drawable/item_shape" />
</selector>
And in your RelativeLayout put:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativerow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/listview_item_selector"
android:padding="5dip" >
.....

How to create a custom view with rounded edges and two textviews?

I want to create a view like image below. My implementation has some linearLayouts. One root with a custom drawable to get the rounded edges and then others for the two textviews and view divider. Is there a faster and easier way to do this?

You can do this with just 1 LinearLayout, the root one. The LinearLayout is used just to order other views. So, what you need to do is to use the vertical orientation and add two text views.
On the first one you set the background color to a light gray. And remember to use the gravity as center so your text will be placed on the center of the text view.

I dont have much time, just tried to give a quick sample. Here's my code for your question:
your_main_layout.xml
<?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"
android:background="#drawable/your_bg.xml">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="my text" />
<View
android:id="#+id/seperator
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/tv1" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2nd text here"
android:layout_below="#+id/seperator" />
</RelativeLayout>
your_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"
/>
<solid android:color="#fff" />
<stroke android:color="#000" />
</shape>

Wrap view in a box in xml

How can i wrap elements in the XML code in a box like view? meaning that i want them to be looking like they are grouped in some box with borders.
<Button
android:id="#+id/carbgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="230dp"
android:layout_y="378dp"
android:text="Button" />
<ProgressBar
android:id="#+id/progressBarforcals"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_x="15dp"
android:layout_y="346dp" />
<TextView
android:id="#+id/calsinmenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="16dp"
android:layout_y="320dp"
android:text="TextView" />

Put your widgets in a layout (LinearLayout for example) and edit this layout background as below:
<LinearLayout
...
android:background="#drawable/background"
</LinearLayout>
Then create an XML file in your drawable folder named background.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="3dp"
android:color="#838c7f">
</stroke>
<padding
android:left="3dp"
android:top="3dp"
android:right="3dp"
android:bottom="3dp">
</padding>
<corners android:radius="4dp" />
<gradient
android:startColor="#color/background_start"
android:endColor="#color/background_end"/>
</shape>

You can set background of your layout
create one image that looks like box with border named box.png
put this image in drawable
ex:
<LinearLayout
.. ..
android:backgroud="#drawable/box.png">
<Button
android:id="#+id/carbgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="230dp"
android:layout_y="378dp"
android:text="Button" />
<ProgressBar
android:id="#+id/progressBarforcals"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_x="15dp"
android:layout_y="346dp" />
<TextView
android:id="#+id/calsinmenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="16dp"
android:layout_y="320dp"
android:text="TextView" />
</LinearLayout>

There is also another way...
You can add a background color to the outer view(ex. black), then a different background color to the inner view(ex. white), add margin to the inner view and you 're done!