I have four different color button and one progress bar this now my query is when i click on any button so progressbar will progress with same color serially say for example I have fou diff. color button orange,blue,green,red now when I click on orange button so progress bar will progress with orange color next I click on blue color so progress bar will progress with blue color when again click on orange color so progrss bar progress with orange color but not new state that progress with previous pregresed orange color how can i do that? Please let me know if any idea it will very helpful for me thanks in advance.
I don't know how to do that with progressBar, but you can create a Layout in the shape of progressBar with four views separated with vertical guidelines, and color each view with different color. Then programatically change the percents of the guidelines and the visibility of the view on buttons click.
Use material design Progress indicator and change indicator color dynamically when pressing on the specific button.
add dependency in your gradle,
implementation "com.google.android.material:material:1.5.0"
sample.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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/progress_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:indeterminate="true"
app:trackThickness="20dp"
app:trackCornerRadius="20dp"
app:indicatorColor="#color/green"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="50dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/button_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Green" />
<Button
android:id="#+id/button_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Red" />
<Button
android:id="#+id/button_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
SampleActivity.kt,
class SampleActivity:AppCompatActivity(R.layout.atest) {
#SuppressLint("ResourceAsColor")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val buttonGreen = findViewById<Button>(R.id.button_green)
val buttonRed = findViewById<Button>(R.id.button_red)
val buttonBlue = findViewById<Button>(R.id.button_blue)
val progressIndicator = findViewById<LinearProgressIndicator>(R.id.progress_indicator)
buttonGreen.setOnClickListener {
progressIndicator.setIndicatorColor(R.color.green)
}
buttonRed.setOnClickListener {
progressIndicator.setIndicatorColor(R.color.red)
}
buttonBlue.setOnClickListener {
progressIndicator.setIndicatorColor(R.color.blue)
}
}
}
Related
I want a customised progress bar in android, like this:
I want progress bar same as it is, but unable to achieve this.
This will give you the result that you want:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginVertical="20dp"
android:layout_marginHorizontal="20dp"
>
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:progress="80"
app:indicatorColor="#color/blue_500"
app:trackColor="#color/blue_200"
app:trackThickness="16dp"
app:trackCornerRadius="100dp"
/>
</com.google.android.material.card.MaterialCardView>
app:indicatorColor: This is the color of the indicator, it depends on the value of android:progress
app:trackColor: This is the color of the track, it is the background color of the LinearProgressIndicator
app:trackThickness: This is the thickness of the track, which means that this value is the height of the LinearProgressIndicator
Note: The MaterialCardView should be inside a ViewGroup ( ConstraintLayout, LinearLayout ... ).
I have custom button View made from LinearLayout which contains TextView. This custom Button has style defined in styles.xml. I made selector for background which is working fine and also I made android:textColor attribute where is text color selector, which I wanna set for that TextView inside that custom Button.
This is function inside custom button:
private fun setupTextColorStyle(buttonStyle: Int){
val attrs = intArrayOf(android.R.attr.textColor)
val typedAttrs = context.obtainStyledAttributes(buttonStyle, attrs)
val textColor = typedAttrs.getColorStateList(0)
buttonText.setTextColor(textColor)
typedAttrs.recycle()
}
Default color from selector is set successfully, but if I press or disable that button, only background color is changing according to selector. Text inside Button stays same.
Button View:
<merge
android:layout_width="wrap_content"
android:layout_height="#dimen/button_height">
<LinearLayout
android:id="#+id/buttonParent"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android:id="#+id/buttonIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:scaleType="fitCenter"/>
<TextView
android:id="#+id/buttonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:clickable="true"
android:textSize="#dimen/text_medium"
android:textStyle="bold"
android:layout_gravity="center"/>
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="40dp"
android:layout_height="40dp"
android:indeterminate="true"
android:layout_gravity="center"
android:gravity="center"/>
</merge>
Style.xml
<style name="custombutton.secondary">
<item name="android:background">#drawable/buttons_button_secondary</item>
<item name="android:textColor">#color/texts_button_secondary</item>
</style>
I want to make my TextView background color without the drawable on the left like this:
But when I'm trying to do it I got like this:
This is my textview code:
<TextView
android:id="#+id/Typetxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/space0"
android:drawableStart="#drawable/ic_type_icon"
android:drawablePadding="10dp"
android:textColor="#color/black"/>
and in the Adapter this is the code for coloring the background:
holder.Typetxt.setText(posts.getTRADE_TYPE_NAME());
if(posts.getTRADE_TYPE_NAME().equals("VL")){
holder.Typetxt.setTextColor(Color.parseColor("#FF7464"));
holder.Typetxt.setBackgroundResource(R.drawable.vl_background);
holder.cardViewMain.setBackgroundResource(R.color.VLBackground);
The background is set for the entire view- not just the text. If you're using a drawableStart, that includes the drawable. If you don't want that, use 2 views, an ImageView and a TextView.
You can make this layout without using a drawable. Make the cardView's background color, same as the color you want on the left side strip. Add a ConstraintLayout inside it and give this ConstraintLayout white background color and a marginStart of whatever size you want your strip width to be.
<androidx.cardview.widget.CardView
android:id="#+id/cvContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#color/orange"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginStart="12dp"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="Lorem \nipsum \ndolor" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Result
I have a toolbar like component implementation, that I'm having trouble with the layout in all situations. It has a left icon, a title and a right menu/button. I need the title to be centered on the full screen (or at least the full width of the layout) but also to not overlap with the other components. So the width of the title would have to be constrained by the left icon and the right button.
I have two intermediary solutions but can't seem to find a way to combine them.
One is to center the title on the screen. The problem here is that the title overlaps with the right button (and would overlap with the left icon too, if large enough ...). Here is the layout XML:
<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="wrap_content">
<ImageView
android:id="#+id/bottomSheetHeaderIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/bottomSheetHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="My also very very very very very long title" />
<TextView
android:id="#+id/right_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Really long string longer"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The other is to center the title between the left icon and the right button. Now there is no overlap, but the title is not centered correctly. Since the two side elements have very different sizes, the title is only centered between them, which is no good. Here is the same layout with the constraints for this case:
<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="wrap_content">
<ImageView
android:id="#+id/bottomSheetHeaderIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/bottomSheetHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_action"
app:layout_constraintStart_toEndOf="#+id/bottomSheetHeaderIcon"
app:layout_constraintTop_toTopOf="parent"
tools:text="My also very very very very very long title" />
<TextView
android:id="#+id/right_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Really long string longer"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to get away with just a XML layout solution, without having to do programmatically detect overlaps and change the layout.
Solutions with other layouts would also work, if they exist.
The problem is the same as the questions here and here, but I'm hoping that by giving more detail, this one gets an accepted solution.
Here is a programatic answer to this question, that is what I'm using for now, but I'd really like a layout solution ...
I use the first layout, centered on the screen, and, as this is part of a custom view for me, add the following code to the constructor (title is a reference to bottomSheetHeaderTitle and rightAction is right_action, the left icon is assumed to always be smaller than the right action text).
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
if (title.width > 0) {
if (title.right > rightAction.x) {
title.maxWidth = (2.0 * (width / 2.0 - (width - rightAction.x))).toInt()
}
viewTreeObserver.removeOnGlobalLayoutListener(this)
}
}
})
This code detects if the title overlaps the right action, and, if it does, adds a max width to it. The max width is the double of the distance between the center of the screen and the beginning of the right action.
I have a text view and rating bar align horizontally.Rating bar start after the end of rating bar.
When this text of the text view get too long to fit in the screen it will push rating bar off the screen. In a case like this I want text view to take space in the screen until the point where rating bar touch screen end and show 3 dots in the end of the text view. But if text is short rating bar should start after that.
Please explain a way to achieve this.
I think you must have to explore constraint layout, for now solution of you isssue is here. I hope this may help you.
<?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="wrap_content">
<TextView
android:id="#+id/tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:ellipsize="end"
android:text="sandeep sankla"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/rating_layout"
app:layout_constraintTop_toTopOf="parent" />
<RatingBar
android:id="#+id/rating_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toRightOf="#+id/tv"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>