I have a shape drawable resource file.
it's the drawable.xml code below.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp"
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke android:width="#dimen/px02"
android:color="#color/white" />
</shape>
</item>
</layer-list>
and this is layout xml code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray333"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:textColor="#color/black"
android:background="#drawable/bg_category_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the result is this.
you can see the white bar on the left side.
and i want to make the bar size shorter top and bottom as high as the TextView's text.(the red line)
i tried to give a padding and size in the drawable.xml.
and i set android:includeFontPadding on the TextView.
but it didn't work.
how can i make it??
i was able to do it like this
It was little bit tricky to remove padding from bottom and top, but you can try the following xml and do some adjustments as u like.
bg_category_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>
layout xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C3C3C"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/bg_category_border"
>
<TextView
android:textSize="50sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:includeFontPadding="false"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-10dp"
android:textColor="#color/black"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I have a ConstraintLayout with rounded corners:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/backgrond_drawable"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintDimensionRatio="1:1.5"
>
</androidx.constraintlayout.widget.ConstraintLayout>
and this is backgrond_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:radius="20dip" />
<stroke android:width="1dip" android:color="#222222" />
<gradient android:angle="-90" android:startColor="#222222" android:endColor="#222222" />
</shape>
</item>
When I add a TextView to bottom of my ConstraintLayout it eliminate the roundness of corners:
what should i do?
YOu need to have a second drawable to make the lower corners of the textview rounded
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
<stroke android:width="1dip" android:color="#222222" />
<gradient android:angle="-90" android:startColor="#222222" android:endColor="#222222" />
</shape>
</item>
and set this drawable as the textView's background.
Or you could use a card layout and then use the textview
for eg
<CardView.
.
.
.
cardCornerRadius:"20dp"
>
<ContraintLayout>
<TextView>
</TextView>
</ContraintLayout>
</CardView>
Set your TextView background transparent it will fix your issue; I hope 🤞 You can try the below approach.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="100dp"
android:background="#drawable/backgrond_drawable"
app:layout_constraintDimensionRatio="1:1.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:gravity="center"
android:text="Testing text"
android:textColor="#color/white"
app:backgroundTint="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have 3 ToggleButtons in a row as you can see in the screenshot:
I would like to have the following layout modifications:
There should be rims separating the Toggle Buttons
The fill in color of the unchecked Toggle Buttons should be white while the fill in color of the checked Toggle Button should be green sucht that you can see which of those is checked (I will make sure programatically that only one of those can be checked)
Here is my XML layout for the Toggle Buttons inside a Liner Layout:
<LinearLayout
android:id ="#+id/linearLayoutForButtons"
android:layout_width="0dp"
android:layout_height="#dimen/_25sdp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<ToggleButton
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAllCaps="false"
android:background="#95f9ad"
android:layout_weight="1"
android:checked="true"
android:textOn="Button 1"
android:textOff="Button 1"
android:textSize="#dimen/_8ssp"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:layout_weight="1"
android:textAllCaps="false"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 2"
android:textOff="Button 2" />
<ToggleButton
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:textAllCaps="false"
android:layout_weight="1"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 3"
android:textOff="Button 3"/>
</LinearLayout>
Any idea how I can do that? It should actually look similar to the ToggleButtons used hereenter link description here
Reminder: Does anyone have an idea how to do that? I'll appreciate every comment.
We can also create it like this
Perhaps this is more of what you are looking for. This does require some changes.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/root_view_background"
android:padding="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ToggleButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_1_selector"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_2_selector"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/button1" />
<ToggleButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_3_selector"
app:layout_constraintStart_toEndOf="#id/button2"
app:layout_constraintTop_toTopOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Drawable root_view_background.xml (This is the black outlining)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/black" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
Drawable button_1_background_checked (This is the green background for the left button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
<corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" />
</shape>
Drawable button_2_background_checked (This is the green background for the middle button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
</shape>
Drawable button_3_background checked (This is the green background for the right button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
<corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" />
</shape>
Drawable button_1_selector (This changes the background of the first button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_1_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_2_selector (This changes the background of the second button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_2_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_3_selector (This changes the background of the last button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_3_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
I created a gradient in my Drawable Resource File (.xml) and then connected it to button's (in activity_main.xml) background. Unfortunately, all structures in this file didn't occur on this button. I am a beginner. Is this problem with the code or something else?
The gradient works as an ImageView and even as a Switch but does not work as a button's background.
Code from gradient.xml:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<item>
<shape>
<gradient
android:angle="90"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
<padding
android:right="10dp"
android:top="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
</selector>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/gradient"
android:text="#string/button"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You use selector when you want to show different background / color according to different states of the widget . For your case replace your code with this code in your drawable file :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
Correction : The Button widget is taking colorAccent as default background strangely change the widget to AppCompatButton and it will solve the problem .
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
android:background="#drawable/gradient"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
selectors are used to change the view when states change. You haven't supplied any states in your selector, so that's probably why it doesn't get applied.
If you want the gradient applied in all states, then remove the selector and item in the xml, and just provide the shape.
I have a SeekBar with a progressDrawable.
<SeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:progress="50"
android:progressDrawable="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
In this seekbar I used the image.png
My phone's screen is bigger, than this image. So I want to use this image like "fitXY" .
Actually it's multiply the image.
How can I set the image to match_parent?
Thank you !
Try this one
<SeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:progress="50"
android:progressDrawable="#drawable/seekbar_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Drawble folder
seekbar_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="300dip">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#0000FF" />
</shape>
</item>
<item android:right="400dip">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
You can use 9-patch.
I just made it in paint, so probably there is some error, but hope you get the idea. Also you can make image smaller, to reduce its size.
I'm trying to achieve a text box styling similar to the image below.
I tried creating a text view dynamically and I achieved something like this. Can someone help me achieve the styling similar to above image?
Below is the code block I used to achieve the above style.
chat_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#D8000000" />
<corners android:bottomLeftRadius="1dp" android:radius="4dp" />
</shape>
Activity.kt
fun createTextView(activity: PlacesActivity){
var textView = TextView(this)
textView.setText("Text ABCDD")
textView.textSize = 24F
textView.alpha = 0F
textView.setTextColor(Color.MAGENTA)
textView.setBackgroundResource(R.drawable.chat_bubble)
textView.setPadding(10,10,10,10)
var params =
LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(50,50,50,50)
textView.setLayoutParams(params)
linearLayout.addView(textView, params);
fadeMarker(textView)
}
Thanks in advance.
Create a shape for your chat bubble background:
shape_pill_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="40dp"
android:bottomRightRadius="40dp"
android:radius="40dp"
android:topLeftRadius="40dp"
android:topRightRadius="40dp" />
<solid android:color="#555555" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size android:height="40dp" />
</shape>
create your arrow drawable:
shape_arrow_down.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="230%"
android:pivotY="30%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#555555" />
</shape>
</rotate>
</item>
</layer-list>
find an asset that best represents your "gold" arrow, i took the in built android studio vector asset which will be referred to as ic_arrow_forward_wattle_24dp.xml. Create your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayoutTextBubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/shape_pill_background"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textViewInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#919191"
android:padding="4dp"
android:text="This is a text message"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageViewArrow"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageViewArrow"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textViewInput"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textViewInput"
app:layout_constraintTop_toTopOf="#+id/textViewInput"
app:srcCompat="#drawable/ic_arrow_forward_wattle_24dp" />
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/viewDownArrow"
android:layout_width="22dp"
android:layout_height="40dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/shape_arrow_down"
app:layout_constraintEnd_toEndOf="#+id/constraintLayoutTextBubble"
app:layout_constraintStart_toStartOf="#+id/constraintLayoutTextBubble"
app:layout_constraintTop_toBottomOf="#+id/constraintLayoutTextBubble" />
</android.support.constraint.ConstraintLayout>
The result will look like this:
There is a few problems with this however. When you have a fairly large message it will push the arrow ImageView out of the bubble because of how wrap_content works in chains and constraint layout. I suggest you try giving your message TextView a fixed width or set its width to match constraints. This will give your text the grey background where there is no text. Play around with it and see what works best for you.