Develop Reference

How to add image and border to side Navigation Bar in Android

I want to add border and image to side NavigationDrawer , how do I do it. I tried but I cannot find a proper tutorial for it. My XML files are how you get when we chose a navigation drawer activity in Android, nothing changed in it.
I have drawn it below roughly about how I want it to be. Any help would be appreciated thank you. Also please ignore the orange background of header. I do not want it, I would just like the Gru image on both head and body
I want the image to be there on the body as well as header of the navigation drawer. One single image covering the body as well as header.

While this looks like tough you can achieve this easily by designing backgrounds for the header and nav differently. Try putting the image in navbar background and making the header background transparent so that the same image is shown. Also you should use stroke for the blue lined border.
Let me show you a basic example for it
For nav-header
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/blueshade"
android:width="4dp"
/>
<corners android:topRightRadius="35dp"
/>
<solid android:color="#android:color/transparent"/>
</shape>
For navbar
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/blueshade"
android:width="4dp"
/>
<corners android:topRightRadius="35dp"
android:bottomRightRadius="35dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:right="20dp" android:left="5dp" android:top="5dp" android:bottom="5dp" >
<bitmap android:src="#drawable/gru"
android:gravity="fill"
android:alpha="105"
/>
</item>
</layer-list>
Now you can set the nav-top as background for nav_header_main layout and the navbar as background for NavigationView in activity_main layout

How to add ripple effect to "entire" cardview in android

I am new to Android programming. I want to add ripple effect to cardview. Actually I found the solution, however, after touching cardview element, it seems that the effect doesn't cover entire cardview. I mean that the effect fades out suddenly and doesn't reach the edges of the cardview.
The result which I'm getting is as follows:
While I want something like this one posted in this blog post.
This is the approach I have tried:
cardview_item.xml
<android.support.v7.widget.CardView
android:layout_width="match_parent"
style="#style/MyCardViewStyle"
android:layout_height="280dp"
android:id="#+id/appletCard"
app:cardBackgroundColor="#color/cardDefaultBg"
android:clickable="true"
android:foreground="#drawable/ripple_effect"
>
//Some TextViews here ...
</android.support.v7.widget.CardView>
And this is the ripple_effect.xml in the drawable-v21 package:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white"/>
</ripple>
If it is important, I use support library.

You should apply mask to your ripple. Try this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
</ripple>

You can use android default ripple effect with "?attr/selectableItemBackground"
<android.support.v7.widget.CardView
android:id="#+id/appletCard"
android:layout_width="match_parent"
android:layout_height="280dp"
style="#style/MyCardViewStyle"
android:clickable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#color/cardDefaultBg">
</android.support.v7.widget.CardView>
Or create custom
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape
android:shape="rectangle">
<solid android:color="#color/RippleColor" />
</shape>
</item>
<item android:state_pressed="true">
<shape
android:shape="rectangle">
<solid android:color="#color/RippleColor" />
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/backColor" />
</shape>
</item>
</selector>
If you want that effect reach the edges, use this library that provides you OnRippleCompleteListener, so you can wait until it finish effect and reach the edges

After checking the similar applications which are using ripple effect for their ui elements, I found out that the effect has changed over different versions of Android. The case I'm looking for is used in Lollipop Android devices. So as I ran the emulator on API 25 (Nogut), I didn't get the desired result.
Thank you all for ur responses.

Custom Shape to PopupWindow

How to implement PopupWindow shape like on the screenshot below ?
I understand how to create Rectangle shape with stroke/solid color.
I know how to play with corners, but how can I implement an arrow < near Close label ?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/edittext_border"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/divider_color_light" />
<solid android:color="#color/white" />
<padding android:bottom="#dimen/awsome_edittext_padding" android:left="#dimen/awsome_edittext_padding" android:right="#dimen/awsome_edittext_padding"/>
</shape>
</item>
</layer-list>

you can set exactly that type of background in custom popup
see this library
https://github.com/kvirair/Quick-Action

U can use .9 patch png as background for PopupWindow.
like below code `
<FrameLayout
android:id="#+id/popupbg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/POPUPBACkGROUND" >
</FrameLayout>
You can refer this site!

How Do Create This Type Of Button In Android

How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated

You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.

One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>

1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.

Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.

put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)

Can I use multiple shapes in one Android drawable?

What I'm trying to do is define a common background for use in a LinearLayout which frequents my application on many of its Activitys. This particular layout is a header that shows on the top of each activity.
What I'm trying to do is create a drawable that fills the linearlayout with a gradient and has a horizontal line below the gradient.
Does anyone know if this is possible or do I have to do this sort of thing only with nested layouts.
My attemptat the drawable xml is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#AA000000" android:endColor="#AA333333"
android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="3dp" android:color="#FFFFFFFF"
android:dashWidth="1dp" android:dashGap="2dp" />
<size android:height="5dp" />
</shape>
</item>
</selector>

Drawable accepts multiple shapes, (defined always in others files) if i understand your question maybe you can do a Layer drawable (this draws multiple underlying drawables on top of each other)
i write this here, so, i dont tested, but try this and read this fantastic documentation.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_7"/>
<item android:drawable="#drawable/shape_1"/>
</layer-list>
the android complete xml resources
cheers

Use gravity to set your items in layer-list.
for vertical orientation use:
android:gravity="top"
android:gravity="center"
android:gravity="bottom"
for horizontal orientation use:
android:gravity="left"
android:gravity="center"
android:gravity="right"
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/top_img"
android:gravity="top"/>
</item>
<item>
<bitmap
android:src="#drawable/center_img"
android:gravity="center"/>
</item>
<item>
<bitmap
android:src="#drawable/bottom_img"
android:gravity="bottom"/>
</item>
</layer-list>
Be sure that the parent element has enough space to hold all the items!
Otherwise they will overlap each other