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>

TextView Shape background is not showing when text is large and is scrolling

This is the problem scenario:
I have an Activity including a ScrollView,
ScrollView has only one LinearLayout as a child and the LinearLayout has one TextView.
The XML file is here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bubble_shape"
android:text="#string/TestLargeText"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
and the "bubble_shape" drawable is here:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
<padding
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"/>
<stroke
android:width="8dp"
android:color="#ff00ff"/>
</shape>
I have a large text in the TextView and here is the problem:
when the TextView has large text the background shape is not showing. You can see the problem in the pictures below:
how can I solve the problem?

I solved your problem in two ways .
1- set "bubble_shape" to your HorizontalScrollView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bubble_shape">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/TestLargeText" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
2- or just change corners tag in your "bubble_shape" like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="15dp" />
<padding
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp" />
<stroke
android:width="8dp"
android:color="#ff00ff" />
</shape>

semi-circle button android

I have two buttons and I want to change the shape of them to be semi-circles. Then place them beside each other to make a full circle. An image has been attached to show how I want the buttons to look. Any help would be greatly appreciated. Thank you.

You have to create one drawable xml file.
left_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="25dp"
android:topLeftRadius="25dp" android:topRightRadius="0dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
right_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
android:bottomRightRadius="25dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp" android:topRightRadius="25dp"/> // here you have to put dimen as per reqiurement
<solid android:color="#color/green" />
</shape>
layout.xml
<Linearlayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/left_corner"/>
<Button android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:background="#draable/right_corner"/>
</Linearlayout>
This was work for me..

Try this way it work for me
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="15dp" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/btns"
android:text="A"
android:textColor="#android:color/white"
/>
<View
android:layout_width="1dp"
android:layout_height="2dp"
android:background="#f0f0f0"
/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/bbb"
android:text="B"
android:textColor="#android:color/white"
/>
</LinearLayout>
</LinearLayout>
btns.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topLeftRadius="15dp"
android:bottomLeftRadius="15dp"/>
</shape>
bbb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#000000"/>
<corners android:topRightRadius="15dp"
android:bottomRightRadius="15dp"/>
</shape>
OUTPUT

#. First, create two custom shape drawable for left and right half-circle.
left_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="1000dp"
android:topLeftRadius="1000dp"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp" />
<solid android:color="#android:color/holo_red_light" />
</shape>
right_half_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="1000dp"
android:topRightRadius="1000dp" />
<solid android:color="#android:color/holo_green_light" />
</shape>
USE:
1. Create a horizontal LinearLayout and add two Button inside it. Use attribute layout_weight to Buttons for equal width.
2. Set left_half_circle as a background of button_left and set right_half_circle as a background of button_right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="2"
android:layout_gravity="center">
<Button
android:id="#+id/button_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="RED"
android:textColor="#android:color/white"
android:background="#drawable/left_half_circle" />
<Button
android:id="#+id/button_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="GREEN"
android:textColor="#android:color/white"
android:background="#drawable/right_half_circle" />
</LinearLayout>
OUTPUT:
Hope this will help~

Hi user23423534,
Applying xml shape as background to button and placing button side by side will help u solve the problem.

Please check the below code.
Layout file:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape"/>
<Button
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/shape1"/>
</LinearLayout>
shape drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomLeftRadius="50dp"
android:topLeftRadius="50dp"/>
</shape>
shape1 drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:bottomRightRadius="50dp"
android:topRightRadius="50dp"/>
</shape>

How to remove border on layout

Hi i would like to do this:
And my solution
this set corner for linearlayout:
drawable/draw_arc_corner_shape
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="#color/bg_trip_tab_view" >
</solid>
<!--<stroke-->
<!--android:width="0dp"-->
<!--android:color="#color/bg_trip_tab_view" >-->
<!--</stroke>-->
<padding
android:left="0dp"
android:top="5dp"
android:right="0dp"
android:bottom="5dp" >
</padding>
<corners
android:radius="11dp" >
</corners>
This part dwaw circle:
drawable/draw_circle_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#color/bg_my_trip_tab_view" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
this draw dash line: drawable/draw_dash_line_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:dashGap="3dp"
android:dashWidth="2dp"
android:width="1dp"
android:color="#color/bg_my_trip_tab_view" />
</shape>
and here create view (separator) with circle (semicircle) on start and end and dash line between: layout/separator
<?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"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="-10dp"
android:background="#drawable/draw_circle_shape"
/>
<View
android:layout_width="0dp"
android:layout_height="5dp"
android:background="#drawable/draw_dash_line_shape"
android:layerType="software"
android:layout_weight="1"
android:paddingRight="15dp"
/>
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="-10dp"
android:background="#drawable/draw_circle_shape"
/>
</LinearLayout>
and here i use it: layout/main_screen
<?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:orientation="vertical"
android:background="#color/bg_my_trip_tab_view"
>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/draw_arc_corner_shape"
>
<include
android:layout_marginTop="#dimen/grid_20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/separator"
/>
</LinearLayout>
and this is my result:
And my question:
How can I remove border with shadow? And How can I do it better?

Are you getting border shadow in Android Studio xml design view. On real device no shadow showing.

Background transition to remove corner radius

We have a linearlayout that has a background which is partially rounded (only the right side), at a determinate moment we need to migrate that background to a not rounded one, so I thought about using the TransitionDrawable, but for some reason this is not working. This are my files:
R.drawable.bg_right_rounded:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
<padding android:left="0dip" android:top="0dip" android:right="10dip" android:bottom="0dip" />
<corners android:topLeftRadius="0dp" android:topRightRadius="10dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="10dp"/>
</shape>
R.drawable.bg_blue:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
</shape>
R.drawable.bg_transition:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=
"http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_right_rounded"/>
<item android:drawable="#drawable/bg_blue"/>
</transition>
Then the layout is something like:
<LinearLayout
android:id="#+id/vg_chat_typer_inner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
Then at a given moment we do:
TransitionDrawable transition = (TransitionDrawable) layout.getBackground();
transition.startTransition(1000);
If I do it in a normal situation it works fine, but when I put that linearlayout inside another linear layout with another one, then it stops working. The situation where it fails is the following one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="0">
....
</LinearLayout>
</LinearLayout>
Is it because of weight? Why is it not working?
Thanks in advance