Develop Reference

Show circle off a RelativeLayout

I have a RelativeLayout where I Inflate the current view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/selected_background"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:translationX="-5dp"
android:translationY="-5dp"
android:background="#drawable/selected_edge_circle"
android:layout_width="25dp"
android:layout_height="25dp"/>
</LinearLayout>
selected_background is a drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<stroke android:width="3dp" android:color="#4fa5d5"/>
</shape>
and the selected_edge_circle:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="25dp" android:height="25dp"/>
<solid android:width="3dp" android:color="#4fa5d5"/>
<stroke android:width="3dp" android:color="#4fa5d5"/>
</shape>
I'm getting this result:
As you can see the circle is cut-of, although I ahve specified not to clip it. I want to show a circle on the top left corner that looks like this:
I don't want to wrap this Layout in another container and set a padding or a margin, I want, no matter what, overflow the top left circle. Any ideas who this can be achieved? Thanks!

I don't know if it's the way you want it. I believe it is a way of doing.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#drawable/selected_background"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<View
android:translationX="-5dp"
android:translationY="-5dp"
android:background="#drawable/selected_edge_circle"
android:layout_width="25dp"
android:layout_height="25dp"/>
</LinearLayout>
</RelativeLayout>

gradient alternative to color the button

I have a shape in android button, i wanted it colored two colors. but not gradient. just the colors as is , how can it be done? below is my drawable. I dont want it gradient, just two colors as is.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#e574bd"
android:startColor="#874dbc"
android:type="linear" />
<corners
android:radius="20dp"/>
</shape>
Edit: I attached image how I want it to look like
<RelativeLayout
android:id="#+id/registration"
android:layout_width="match_parent"
android:layout_height="#dimen/buttonHeight"
android:paddingEnd="#dimen/default_margin"
android:paddingStart="#dimen/default_margin"
android:background="#drawable/abovexml"
android:gravity="center_horizontal">
<ImageView
android:layout_width="match_parent"
android:id="#+id/sadad2"
android:src="#+id/theimagewithoutwordingchangepassword"
android:scaleType="fitXY"
android:layout_height="#dimen/buttonHeight"/>
<TextView
android:id="#+id/loginText"
android:layout_width="match_parent"
android:layout_height="#dimen/buttonHeight"
android:layout_centerInParent="true"
android:gravity="center"
android:text="#string/changepass"
android:textColor="#android:color/white"
android:textSize="#dimen/buttonSize"></TextView>
</RelativeLayout>

Remove White background frame in rounded drawable

I have a fragment shown on top of another with a transparent background, How can I remove this white space behind the blue drawable?
this is my Drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<solid android:color="#android:color/holo_blue_light" />
</shape>
</item>
</selector>
and this is the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:clickable="true"
android:orientation="vertical"
android:layout_height="match_parent"
android:weightSum="2.2"
tools:context=".ui.main.signup.IdModeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1.2"
android:background="#color/black_transparent_60"
android:layout_height="0dp"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/id_mode_fragment_round_background"
android:padding="#dimen/app_padding"
android:weightSum="6"
android:layout_height="0dp">
Thanks for any help!

Ripple effect over imageview

To describe my problem i created small example.
I have linearlayout with imageview and textview. For linearlayout i've set ripple drawable as background. But when i click or long click on linearlayout ripple animation shows under imageview. How show animation over imageview ?
main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linear"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/ripple"
android:clickable="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#mipmap/index" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is ripple test"
android:textColor="#FF00FF00" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
drawable-v21/ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFF0000">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
</shape>
</item>
</ripple>
drawable/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">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FF000000" />
</shape>
</item>
</selector>
screenshot how it looks now:

Add the ripple like this
android:foreground="?android:attr/selectableItemBackground"
based on this answer https://stackoverflow.com/a/35753159/2736039

Add android:background="#null" for the ImageView

If your app needs to run on API < 23, you won't be able to use the foreground attribute on views other than FrameLayout, which means adding another [useless] level in the view tree hierarchy.
Another solution is to wrap your image with a <ripple>, set it as your ImageView's background, and use tint and tintMode to "hide" the src image so the background image that has the ripple over it is visible.
<!-- In your layout file -->
<ImageView
android:adjustViewBounds="true"
android:background="#drawable/image_with_ripple"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/image"
android:tint="#android:color/transparent"
android:tintMode="src_in" />
<!-- drawable/image_with_ripple.xml -->
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight">
<item android:drawable="#drawable/image" />
</ripple>
Not only this works on API 21+ but if your image has rounded corners – or is another type of non-rectangle shape, like a star or a heart icon – the ripple will remain in its bounds instead of filling the view's rectangle bounds, which gives a better look in some cases.
See this Medium article for an animated GIF to see how this technique compares to using a <FrameLayout> or the foreground attribute.

Resolve for API < 21
<ImageView
android:id="#+id/favorite_season"
style="?android:attr/borderlessButtonStyle"
android:background="?android:attr/selectableItemBackground"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_margin="22dp"
android:clickable="true"
android:focusable="true"
android:src="#drawable/ic_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

Simple use these two lines as attribute in that ImageView.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"

set space between rows in listview Android

I have a listView with custom rows and I need to set a custom divider between each row.
This is the code of the listView:
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/menu_padding"
android:background="#color/customBlue"
android:divider="#drawable/list_divider"
android:dividerHeight="2px" />
This is the code of the rows:
<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="50dp"
android:orientation="horizontal"
tools:ignore="contentDescription"
android:background="#color/strongBlue" >
<ImageView
android:id="#+id/row_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:textColor="#color/white"
android:textAppearance="#android:style/TextAppearance.Medium" />
</LinearLayout>
And this is the code for the 2 pixel divider:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="1px">
<shape android:shape="line">
<stroke
android:color="#0C0832"
android:width="2dp"
/>
<size
android:height="1px"
/>
</shape>
</item>
<item android:top="1px">
<shape android:shape="line">
<stroke
android:color="#2D2E57"
android:width="2dp"
/>
<size
android:height="1px"
/>
</shape>
</item>
</layer-list>
The problem is that I have a random space between each row that has the same color as the listView backgroundColor and if I set the dividerHeight to 4px I can see my divider. How can I remove the space that gets created automatically and only have my custom divider?

Use the following code in rows in linear layout
android:layout_marginTop="15dp"

Instead of pixel you can provide dp in xml
android:dividerHeight="10dp"
android:divider="#ffffff"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="schemas.android.com/apk/res/android">;
<gradient
android:type="radial"
android:startColor="#343030"
android:endColor="#151515"
android:gradientRadius="300"
android:angle="270"
android:centerY="0.3"/>
</shape>
Instead of making custom drawable for divider you can directly give color to divider.