Message Bubble Custom Drawable - java

I will share the image below that I want to develop my message bubble in Native Android
I have written some code in Custom Drawable XML please have a look and I will share the image what it looks like, first see the code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="55"
android:pivotX="100%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#00A1E4" />
</shape>
</rotate>
</item>
<item android:right="28dp">
<shape android:shape="rectangle">
<solid android:color="#00A1E4" />
<corners android:radius="10dp" />
</shape>
</item>
the above code looks like this
Please help me on how to make like the first image.
Thanks

You can use the ShapeAppearanceModel to apply a custom EdgeTreatment to a widget for eaxmple a CardView:
<LinearLayout
android:padding="8dp"
android:clipChildren="false"
android:clipToPadding="false"
...>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardview"
android:layout_height="100dp"
app:cardCornerRadius="24dp"
app:cardBackgroundColor="#color/..."/>
</LinearLayout>
Then you can apply a custom ShapeAppearanceModel using the builtin MarkerEdgeTreatment that draws an arrow on the edge given the radius of a circle. Something like:
val markerEdgeTreatment = MarkerEdgeTreatment(cardview.radius)
val offsetEdgeTreatment = OffsetEdgeTreatment(markerEdgeTreatment, 90f)
cardview.setShapeAppearanceModel(
cardview.getShapeAppearanceModel()
.toBuilder()
.setRightEdge(offsetEdgeTreatment)
.build()
)
You can also customize the shape of the edge extending the EdgeTreatment and overriding the getEdgePath method.
Note: it requires at least the version 1.2.0 of the Material Components Library.

Related

How set background color for buttons using xml files?

i create this xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#color/light_blue"
android:centerColor="#color/dark_blue"
android:endColor="#color/light_purple"
>
</gradient>
<corners
android:radius="30dp">
</corners>
</shape>
</item>
</selector>
and i trying to set this file to my button background.but problem is background dose not accept colors of xml file.it is use backgroundTint colors and not the colors i set above.
THIS IS MY ACTIVITY_XML
<Button
android:id="#+id/temp_l"
android:layout_width="250dp"
android:layout_height="33dp"
android:background="#drawable/temp_shape"
app:layout_constraintBottom_toTopOf="#+id/scrollView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.143" />
i searched in youtube and saw that eveyone did what i did but they get result and im not.
sorry about my english.its not very well.
I guess you are using android:backgroundTint="#null" with android namespace, but you need to set app:backgroundTint="#null" with app namespace instead
Side note:
You should wrap the xml drawable into a layer-list as long as you have no need to the selector, so you might change it to:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:centerColor="#055D93"
android:endColor="#color/light_purple"
android:startColor="#color/light_blue" />
<corners android:radius="30dp">
</corners>
</shape>
</item>
</layer-list>
Preview

Is it possible to use an oval ShapeDrawable as a ProgressBarDrawable with behaviour similar to a ring ShapeDrawable?

I'm in the process of developing a compound view that I'm trying to get to look like the following image. I've marked (with a red arrow) the part that I'm having trouble with):
However, at present I'm unable to get the arc to cleanly start and finish (as shown below):
My code for this inner (dashed) progress drawable is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<clip>
<shape
android:shape="oval"
android:useLevel="true">
<size
android:width="60dp"
android:height="60dp" />
<stroke
android:width="13dp"
android:color="#android:color/darker_gray"
android:dashWidth="3dp"
android:dashGap="5dp" />
</shape>
</clip>
</rotate>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<clip>
<shape
android:shape="oval"
android:useLevel="true">
<size
android:width="60dp"
android:height="60dp" />
<stroke
android:width="13dp"
android:color="#android:color/white"
android:dashWidth="3dp"
android:dashGap="5dp" />
</shape>
</clip>
</rotate>
</item>
</layer-list>
The surrounding progress drawables that I've made work fine with android:shape="ring" and removing the <clip> tags, but I can't seem to get the same clean clockwise progress behaviour using an android:shape="oval".
In case it helps, my code for setting the drawable to my ProgressBar is as follows:
<ProgressBar
android:id="#+id/progressbar_dashed_gauge"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:indeterminate="false"
android:max="100"
android:scaleX="0.75"
android:scaleY="0.75"
android:progress="80"
android:progressDrawable="#drawable/dashed_gauge"
android:secondaryProgress="80"
/>
Any help with getting this dashed ProgressBar to show progress in a manner similar to my other ProgressBar views would be incredibly appreciated!

XML progressDrawable file leaks, for few objects at time

I have XML progressDrawable file for my ListView. It works well, but I found that if I use one Drawable XML file to make background for few object in one time, it works wrong.
Now I'm just created few XML Drawable files for each item from my ListView.
Now, my solution is like that:
for (int i = 0; i < 3; i++) {
View v1 = getActivity().getLayoutInflater().inflate(R.layout.item_results, null);
ProgressBar bar = v1.findViewById(R.id.MyDonut);
bar.setProgressDrawable(getResources().getDrawable(i==0?R.drawable.circle1:i==1?R.drawable.circle2:R.drawable.circle3));
listView.addHeaderView(v1);
}
Here, the circle1,circle2,circle3 - similar XML Drawable files. I think that my solution is too unflexible.
My circle:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#color/orange" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="true">
<solid android:color="#color/green" />
</shape>
</rotate>
</item>
<item android:left="75dp" android:gravity="center">
<rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="270">
<shape
android:shape="line"
android:useLevel="false">
<size android:width="75dp" android:height="75dp"/>
<stroke android:width="3dp" android:color="#color/light"/>
</shape>
</rotate>
</item>
<item android:left="75dp" android:gravity="center">
<rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="630">
<shape
android:shape="line"
android:useLevel="false">
<size android:width="75dp" android:height="75dp"/>
<stroke android:width="3dp" android:color="#color/light"/>
</shape>
</rotate>
</item>
item-results just contains:
<ProgressBar
android:progress="0"
android:id="#+id/MyDonut"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#color/light"
style="?android:progressBarStyleHorizontal"/>
What about the other solutions of this issue?
Finaly, I found a good solution. We can use drawable.mutate() to set the other Drawable, with all properties from parent Drawable.
Documentation: https://developer.android.com/reference/android/graphics/drawable/Drawable#mutate()
It is possible to use this this way:
progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.circle).mutate());

How to set thickness of circular indeterminate progress bar android?

I have two nested circular indeterminate progress bars but I cannot set their thickness to an equal size. I have tried to customize it using shapes. However, that removes the default behaviour of the circular indeterminate progress.
I customize like this and it made thickness equal but not getting default behaviour.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<rotate android:toDegrees="360">
<shape
android:shape="ring"
android:thickness="4dp">
<solid android:color="#color/white" />
</shape>
</rotate>
</item>
</layer-list>
<ProgressBar
android:id="#+id/download_progress4"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_gravity="center"
android:indeterminate="true"
android:indeterminateDrawable="#style/ProgressThem" />
I want like this with default behaviour of circular indeterminate progress bar
Try this
USE
android:innerRadiusRatio="3"
android:thicknessRatio="20.0
SAMPLE CODE
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<rotate android:toDegrees="360">
<shape
android:shape="ring"
android:thickness="4dp"
android:innerRadiusRatio="3"
android:thicknessRatio="20.0">
<solid android:color="#color/white" />
</shape>
</rotate>
</item>
</layer-list>
If you want the modern animation rather than just rotation, you can copy and alter https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/drawable/progress_indeterminate_anim_medium_material.xml using it as the indeterminateDrawable.
<ProgressBar
android:indeterminateDrawable="#drawable/new_progress_indeterminate_anim_medium_material"
To change the width in vector_drawable_progress_bar_medium.xml android:strokeWidth="1" for example.
It's a bit painful to do this as you also need to copy over the animation, interpolator and animator xml files to your project as they are private in the Android SDK.
There is actually an even easier way to do that with the material components:
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
app:trackThickness="3dp" />
More details in material docs -> https://material.io/components/progress-indicators/android#circular-progress-indicators

Android: Down arrow disappears after setting spinner background

I have a rectangle box that I set the spinner background as but I would like to keep the down arrow that comes along with the spinner. Here is my code for the rectangle:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke android:width="2dp" android:color="#80000000" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
See the picture below:
On the left is what i currently have, on the right is what I'm trying to achieve or at least have a down arrow in there somewhere. Any ideas on how to create this background?
I checked your code with the help of uiautomator and the spinner dropdown arrow does not show up with the background set.
You could use a LayerList and have a bitmap with gravity right. Now the bitmap is part of the background set to spinner.
<?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">
<solid android:color="#ffffff"/>
<stroke
android:width="2dp"
android:color="#80000000"/>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp"/>
</shape>
</item>
<item>
<bitmap
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#mipmap/ic_launcher" />
</item>
</layer-list>
Result :
Of course there is no border around the bitmap. You can check this link How to change the spinner background design and color for android? and see if it fits your requirement
Add Spinner inside a RelativeLayout.
In my case, the icon disapper because of parent layout's height and width.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/startbg"
android:layout_marginLeft="5dp"
>
<Spinner
android:id="#+id/timerSpin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:spinnerMode="dropdown"
android:backgroundTint="#color/white"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:pointerIcon="arrow"
/>
</RelativeLayout>
Check the below XML code to achieve what you need. It is similar to what Raghunandan posted / answered, but with some minor tweaks. Hope this will help you,
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:thickness="2dp">
<gradient android:angle = "90" android:endColor = "#ffffff" android:startColor = "#ffffff" android:type = "linear"/>
<stroke android:width = "1dp" android:color = "#80000000"/>
<corners android:radius = "5dp"/>
<padding android:bottom = "3dp" android:left = "3dp" android:right = "3dp" android:top = "3dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees = "90"
android:pivotX = "85%"
android:pivotY = "50%"
android:toDegrees = "90">
<shape
android:shape = "line"
android:thickness="2dp"
android:top = "1dp">
<stroke
android:color="#80000000"
android:width = "1dp"/>
</shape>
</rotate>
</item>
<item>
<bitmap
android:gravity = "center|right" android:src = "#drawable/abc_btn_check_to_on_mtrl_015"/>
</item>
</layer-list>
</item>
</selector>
use the required drawable in the placeholder images i added in the code.
Hope this will help you,
Good Luck

Categories