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
Related
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>
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!
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>
i am creating a rounded linear layout with some buttons and textviews, i have used a custom selector as background of layout. My problem is that layout have extra space on corners how to remove this? any help will be appreciated
here is my code
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp"
>
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
/>
<stroke android:width="2dip"
android:color="#color/#275D69"/>
</shape>
Layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector"
/>
Current output:
Dont want that space where i have placed red marks.
With below code you have rounded background with least space on corner
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="5dp" />
<stroke
android:width="2dip"
android:color="#275D69" />
</shape>
this may include space on corner but it's too low.
just reduce radius value.
Try to use this approach, is not the most clear solution but for me works:
Create a Layout container with transparent background, and use it as a container of your rounded layout
<LinearLayout
.....
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#android:color/transparent"
......>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector"
android:orientation="vertical">
<!-- content of the rounded ll -->
</LinearLayout>
</LinearLayout>
The white spaces should be disappeared
Here is a solution you need to follow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke
android:width="2dip"
android:color="#275D69"/>
</shape>
Now in main xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:margin="10dp"
android:background="#drawable/selector"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
Problem solved!
You can make rounded corners using cardView
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="6dp"
app:cardCornerRadius="5dp"
app:cardBackgroundColor="#D3D3D3"
app:cardPreventCornerOverlap="false"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp" />
</android.support.v7.widget.CardView>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="0dip"
android:color="#color/#275D69"/>
</shape>
<corners android:radius="6dip" />
Put corner radius whatever you want.
After getting pissed for 2 days I finally found it .
It cannot be solved by any drawable files or by editing the canvas but simply by making the layout as base layout.
There are several methods and stuffs under values you have to choose the right ones and add it in your styles.
First add these to your styles.xml
<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/drawable_round_bottom_sheet</item>
</style>
Now the most important part is to call the AppBottomDialogue for this I used this
override fun getTheme(): Int {
return R.style.AppBottomSheetDialogTheme
}
Now you can choose whatever to do with your method I used ImagesView inside ConstraintLayout you can directly clip it no problem.
in my layout I am trying to draw a DOTTED LINE.for drawing a horizontal line i am defining a view in my layout file.
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#drawable/customdots" />
and customdots.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="10dp"
android:right="10dp"
android:width="4dp"
android:drawable="#drawable/dotted" />
</layer-list>
dotted.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size
android:height="4dp"
android:width="1024dp"/>
<stroke
android:width="4dp"
android:dashWidth="4dp"
android:color="#android:color/black"
android:dashGap="5dp"/>
</shape>
But i don't get any line using this code. please help me out.
When i use customdots.xml in the listView Divider as
android:divider="#drawable/customdots"
it shows a good dotted line
I was pulling my hair on this issue too until I figured out there is a bug in the latest versions of Android when rendering lines like this.
This bug can be circumvented by adding android:layerType="software" to the view which is using the dotted line as a background.
Example:
dotted.xml:
<?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="8dp"
android:height="2px"
android:color="#FFFFFF" />
</shape>
layout.xml:
<View
android:id="#+id/vDottedLine"
android:background="#drawable/dotted"
android:layout_width="match_parent"
android:layout_height="2px"
android:layerType="software" />
You can use following code . it may help you.
Create a dotted.xml in drawable folder like this...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:color="#A52A2A"
android:dashWidth="10px"
android:dashGap="10px" />
</shape>
then use this xml in your layout with image view like this....
<?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="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is above line of code " />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:src="#drawable/dottede" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is below code " />
</LinearLayout>