Develop Reference

Horizontal Progressbar with multiple colour

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)
}
}
}

System dark mode is overriding my System Alert window

I have implemented a System Alert Window, And that window has its own UI. But when dark mode is enabled, then that layout is overriding the colours I have given.
private fun showAlert(context: Context,message:String){
val builder: AlertDialog.Builder = AlertDialog.Builder( ContextThemeWrapper(context, R.style.RigTheme))
val inflater: LayoutInflater = LayoutInflater.from(context)
val dialogView: View = inflater.inflate(R.layout.layout_rig_alert, null)
dialogView.findViewById<TextView>(R.id.tvMessage).text = message
builder.setView(dialogView)
val alert: AlertDialog = builder.create()
val window = alert.window ?: return
window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
window.requestFeature(Window.FEATURE_NO_TITLE)
val layoutFlag: Int = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
} else {
WindowManager.LayoutParams.TYPE_PHONE
}
window.setType(layoutFlag)
alert.setCanceledOnTouchOutside(false)
alert.show()
val lp: WindowManager.LayoutParams = WindowManager.LayoutParams()
window.addFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE)
window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
window.setGravity(Gravity.CENTER)
lp.copyFrom(window.attributes)
//This makes the dialog take up the full width
//This makes the dialog take up the full width
lp.width = WindowManager.LayoutParams.WRAP_CONTENT
lp.height = WindowManager.LayoutParams.WRAP_CONTENT
window.attributes = lp
// Click stuff
}
And the style
<style name="RigTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/light_red</item>
<item name="android:background">#color/white</item>
<item name="android:textColorPrimary">#color/txt_grey</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/curve_bg"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/iv_close"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/warning"
android:textColor="#color/light_red"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_close" />
<TextView
android:id="#+id/tvMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="20dp"
android:textColor="#color/txt_grey"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTitle" />
<Button
android:id="#+id/btnCancel"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_rect_un_selected"
android:text="#string/cancel"
android:textAllCaps="false"
android:textColor="#color/txt_grey"
app:layout_constraintEnd_toStartOf="#+id/btnDoit"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvMessage" />
<Button
android:id="#+id/btnDoit"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_rect_selected"
android:text="#string/do_it_now"
android:textAllCaps="false"
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnCancel"
app:layout_constraintTop_toBottomOf="#id/tvMessage" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I have 2 issues with this code.
Issue 1
The dark mode is overriding the colour combination
original UI
when dark mode is enabled
Issue 2
I need to align the widgets in the centre. I have given WRAP_CONTENT, but the dialog is taking most of the screen width. and of course, the widgets are aligned left.

check this tip from the docs:
Tip: If you want a custom dialog, you can instead display an Activity as a dialog instead of using the Dialog APIs. Simply create an activity and set its theme to Theme.Holo.Dialog in the manifest element:
<activity android:theme="#android:style/Theme.Holo.Dialog" >
That's it. The activity now displays in a dialog window instead of fullscreen.
I haven't tried it, but i think that inside the activity it will be easier to place your views without the alignment issues, also you can specify a Light theme with Theme.Holo.Light.Dialog.

Translating other views along with Button (on press)

I was looking to create a view like this:
It has the behavior of a button, so I used a ConstraintLayout and placed the image and the TextView ('some text here') on top of the button using constraints (the other text and icon is implemented as button text and icon respectively).
The xml is as follows (inside the constraint layout):
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_plan_change"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingHorizontal="10dp"
android:paddingVertical="30dp"
android:text="start now"
android:textAlignment="viewEnd"
app:icon="#drawable/ic_chevron_right_black_24dp"
app:iconGravity="end"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/iv_plan_change"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginHorizontal="10dp"
android:layout_marginVertical="25dp"
android:background="#drawable/circle_background"
android:backgroundTint="?attr/colorPrimary"
android:elevation="2dp"
android:padding="10dp"
android:src="#drawable/ic_money"
app:layout_constraintBottom_toBottomOf="#id/btn_plan_change"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="#id/btn_plan_change"
app:layout_constraintTop_toTopOf="#+id/btn_plan_change" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_plan_change"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:elevation="2dp"
android:gravity="center_vertical"
android:lineSpacingExtra="5dp"
android:text="some text here"
app:layout_constraintBottom_toBottomOf="#+id/btn_plan_change"
app:layout_constraintStart_toEndOf="#+id/iv_plan_change"
app:layout_constraintTop_toTopOf="#+id/btn_plan_change" />
As you can see, I have used an elevation of 2dp on both the ImageView and the TextView to keep it on the same elevation as the button, but on pressing the button, both of them go behind the button and can't be seen.
I have experimented with animating translationZ of both both views on button press and release, but it doesn't work so well (sometimes animates later than button, sometimes goes behind it).
I would love to have a working implementation.

Dialog not showing its contents

I have a problem with this specific dialog, I implemented it as an option to be shown in the Options Menu in my toolbar but it doesn't show the dialog's contents when I clicked on the option. I have tried these with other dialog layouts I have implemented and all of them work when I implemented them here so I have a hunch that the problem is with the XML layout but I can't seem to find the problem.
Code:
else if(id == R.id.action_setting)
{
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_settings);
dialog.setTitle("Settings");
CheckBox set_splash = dialog.findViewById(R.id.setting_check);
boolean have_splash =pref.getBoolean(SplashActivity.HAVE_SPLASH,false);
if(have_splash)
set_splash.setChecked(true);
else
set_splash.setChecked(false);
ImageButton confirm_btn = dialog.findViewById(R.id.setting_confirm);
ImageButton cancel_btn = dialog.findViewById(R.id.setting_cancel);
confirm_btn.setOnClickListener(v -> {
boolean new_splash = set_splash.isChecked();
edit.putBoolean(SplashActivity.HAVE_SPLASH,new_splash);
edit.commit();
dialog.dismiss();
});
cancel_btn.setOnClickListener(v -> dialog.dismiss());
dialog.show();
}
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="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout5">
<ImageButton
android:id="#+id/setting_confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_highlight_dark"
android:paddingVertical="20dp"
app:srcCompat="#drawable/ic_confirm" />
<ImageButton
android:id="#+id/setting_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_highlight_dark"
android:paddingVertical="20dp"
app:srcCompat="#drawable/ic_cancel" />
</LinearLayout>
<TextView
android:id="#+id/setting_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/themeDark"
android:paddingVertical="10dp"
android:paddingLeft="10dp"
android:text="#string/settings"
android:textColor="#color/white"
android:textSize="10pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/themeLight"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setting_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="6"
android:textColor="#color/white"
android:paddingVertical="20dp"
android:paddingLeft="10dp"
android:text="#string/splash_setting"
android:textSize="10pt" />
<CheckBox
android:id="#+id/setting_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

The match_parent parameters in your dialog are ignored. Therefore, the dialog has a width of 0.
The easiest way to get the correct height and width, is by using an AlertDialog.Builder.
If a customized AlertDialog isn't enough, you can make the dialog full size by following this answer:
Android get full width for custom Dialog
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_settings);
Window window = dialog.getWindow();
window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

Improper text appearance in Custom AlertDialog

In my code, I'm presenting a custom alert dialog by inflating a layout and set it as the dialog's view.
The problem I'm having is that the text looks OK in the Android Studio's design tool, but at run-time, the dialog becomes smaller and the text takes more lines.
I tried different approaches to fix it, but didn't acquire the wanted result.
For the layout, I'm using constraint layout and the text is "wrap content".
Here's my code:
//inflate alert layout
LayoutInflater inflater = LayoutInflater.from(this);
final View view = inflater.inflate(R.layout.connectivity_issue_counter, null);
//set builder
AlertDialog.Builder dialog = new AlertDialog.Builder(this);
dialog.setView(view);
dialog.setCancelable(false);
final AlertDialog alert = dialog.create();
//define dialog buttons and counter......//
alert.show();
XML:
<?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:background="#color/alertBackground">
<TextView
android:id="#+id/connectivity_issue_title"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="50dp"
android:text="#string/connectivity_issue_title"
app:layout_constraintEnd_toStartOf="#+id/connectivity_issue_wait"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_wait"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/connectivity_issue_wait"
app:layout_constraintEnd_toStartOf="#+id/connectivity_issue_counter_text"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_counter_text"
style="#style/customAlertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/connectivity_issue_main_text"
style="#style/customAlertMainText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/connectivity_issue_main_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/connectivity_issue_title" />
<Button
android:id="#+id/connectivity_isuue_button"
style="#style/customAlertButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/stop"
app:layout_constraintEnd_toStartOf="#+id/guideline21"
app:layout_constraintStart_toStartOf="#+id/guideline22"
app:layout_constraintTop_toBottomOf="#+id/connectivity_issue_main_text" />
<android.support.constraint.Guideline
android:id="#+id/guideline20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.82" />
<android.support.constraint.Guideline
android:id="#+id/guideline21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<android.support.constraint.Guideline
android:id="#+id/guideline22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
</android.support.constraint.ConstraintLayout>
*Another interesting thing - on a different tablet (both the same model) the dialog looks bigger and wider.
I'll appreciate any help.

As Davidaz suggested, I've changed the text size from sp to dp and it helped to solve the problem.

¿Maybe the text is bigger on that phone? I can't see the customAlertTitle style, but I suppose the text is on "SP", and these are "DP" but text-size dependent (if the phone is set to show the text on a big font from it's settings tab, it will increase it's size).
Maybe a solution could be to set the sizes to "DP", but you won't let the people change it, so it has counter effects.
Another idea that comes to my mind is that the size of the screen you are previewing on the preview is larger than your phone's screen.
The last thing I would try is to change the 'android.R.id.message' TextView's size by hand after creating the dialog. Once you show it you can access the message's textview by calling for it's id,
TextView messageTv = (TextView) alert.findViewById(android.R.id.message);
messageTv.setTextSize(X);
Edit: Don't mind that last idea, as you are inflating your own layout, maybe you can try to access your id and change it the same way, but with R.id.connectivity_issue_wait