Develop Reference

ConstraintLayout with Button State Pressed

I have a button that is complex but can be done easily with Constrain Layout. However I would like button state change feature to change the background color when pressed. I tried with state press or selected, but it doesn't work. What's the best way to solve this?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:state_pressed="false" android:drawable="#drawable/button_grayout" />
</selector>
ConstraintLayout as a Button
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp">
<TextView
android:id="#+id/txt_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mini Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#D5D5D5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txt_display_alert1" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can try to add onClick event to the ConstraintLayout like following:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp"
android:onClick="onClick"
>
....
add onClick() in the activity or fragment

As you apply the drawable to the ConstraintLayout, not to a Button; then you have to make it clickable and focusable in order to have the press effect of the Button:
So, you need to add:
android:clickable="true"
android:focusable="true"
Like:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:clickable="true"
android:focusable="true"
android:padding="8dp">

How do you remove the gap between NoActionBar and ImageView in Android Studio

How do I remove this gap in a ConstraintLayout? The top is an ImageView with a top constraint to the top of the parent (ConstraintLayout).
Gap at the top between the toolbar and banner
This is how my styles.xml looks like:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
My activity_main.xml looks like this:
<?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">
<ImageView
android:id="#+id/headerImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
<Button
android:id="#+id/addlog_btn"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="108dp"
android:background="#drawable/newlogbtn"
android:fontFamily="#font/roboto_regular"
android:onClick="createNewLog"
android:paddingTop="72sp"
app:layout_constraintStart_toStartOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/headerImg" />
<Button
android:id="#+id/addlog_btn2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:background="#drawable/settingsbtn"
android:fontFamily="#font/roboto_regular"
android:paddingTop="72sp"
app:layout_constraintEnd_toEndOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/addlog_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>
My end goal is this:
I would like to achieve this with just editing the XML if it is possible, I tried to change the margins and padding's of both parent and I didn't do it right or it just doesn't seem to work.

You can remove this gap by adding android:scaleType="centerCrop" to the banner ImageView so that it will fill the entire assigned room to it.
So the layout will be after this change:
<?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">
<ImageView
android:id="#+id/headerImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
<Button
android:id="#+id/addlog_btn"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="108dp"
android:background="#drawable/newlogbtn"
android:fontFamily="#font/roboto_regular"
android:onClick="createNewLog"
android:paddingTop="72sp"
app:layout_constraintStart_toStartOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/headerImg" />
<Button
android:id="#+id/addlog_btn2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:background="#drawable/settingsbtn"
android:fontFamily="#font/roboto_regular"
android:paddingTop="72sp"
app:layout_constraintEnd_toEndOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/addlog_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to Create Custom ProgressBar

Edit:
Question 1) is solved. But I still wasn't able to change to color of the ProgressBar. I tried to use my own theme (see code below).
I want my ProgressBar to look like the image below. I have already created a ProgressBar above my ListView.I’m using a ListView , ProgressBar , and two TextViews in a RelativeLayout.
My Question:
1.) How can I align the TextViews above the ProgressBar in the way shown below?
2.) How can I set the Color of the ProgressBar itself and the Background Color of the ProgressBar?
MainActivity.xml
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/progressBarText"
android:progress="0"
android:max="100"
android:paddingTop="0dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:theme="#style/progressBarTheme"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#android:color/holo_green_dark</item>
</style>
<style name="progressBarTheme" parent="#style/Theme.AppCompat">
<item name="colorAccent">#color/myRedColor</item>
</style>
</resources>

1.) How can I align the TextViews above the ProgressBar in the way shown below?
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<ProgressBar
android:id="#+id/progressCircle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<TextView
android:id="#+id/txtvStatusCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/progressCircle"
android:layout_alignParentStart="true"
android:text="Daily Progress"
android:textSize="18sp" />
<TextView
android:id="#+id/txtPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/progressCircle"
android:layout_alignParentEnd="true"
android:text="0 %"
android:textSize="18sp" />
</RelativeLayout>
2.) How can I set the Color of the ProgressBar itself and the Background Color of the ProgressBar?
In your styles.xml:
<style name="progressBarBlue" parent="#style/Theme.AppCompat">
<item name="colorAccent">#color/myBlueColor</item>
</style>
Then set as the ProgressBar theme in the xml:
<ProgressBar
...
android:theme="#style/progressBarBlue" />
About the ProgressBar itself, what ever you choose for the AccentColor in your styles, will be set for the ProgressBar too. So changing the color of:
<item name="colorAccent">#color/colorAccent/item>
Will do the trick.
Output:

try this:
<android.support.constraint.ConstraintLayout
android:id="#+id/uplaodFile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/upload"
android:layout_marginTop="10dp"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="46dp"
android:layout_height="65dp"
android:src="#drawable/file_image"
app:layout_constraintEnd_toStartOf="#+id/horizontal_progress_bar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/notification" />
<TextView
android:id="#+id/notification"
android:layout_width="282dp"
android:layout_height="22dp"
android:layout_marginBottom="2dp"
android:text="File Detail"
app:layout_constraintBottom_toTopOf="#+id/cancel"
app:layout_constraintStart_toStartOf="#+id/horizontal_progress_bar"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<ProgressBar
android:id="#+id/horizontal_progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="201dp"
android:layout_height="26dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
android:indeterminate="false"
android:max="100"
android:minHeight="100dp"
android:progress="2"
android:progressBackgroundTint="#aaaaaa"
app:layout_constraintEnd_toStartOf="#+id/cancel"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/process_state"
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="40dp"
android:text="uploading.. 10%"
android:textAlignment="center"
android:textColor="#4B74FF"
android:textSize="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.833"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<ImageView
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_close_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>
this is the java code
ProgressBar progressBar;
process_status = findViewById(R.id.process_state);
progressBar = findViewById(R.id.horizontal_progress_bar);
progressBar.setProgressTintList(ColorStateList.valueOf(Color.parseColor("#4B74FF")));
progressBar.setProgress(currentProgress);
textView.setText("Uploading..."+currentProgress+ "%");

This changed the color of the progressbar.
progressBar.getProgressDrawable().setColorFilter(
Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);

Android, white screen is display when navigating between activities

The problem I have is that I have a white screen displayed when I want to switch between the 1st activity "ww1" and the 2nd activity "ww2", I have already tried a solution which says that I should create a theme in my styles.xml and add it to my second activity but the result was a black screen displayed while switching between the activity .
Here's the ww1.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#drawable/ww1"
tools:context=".ww1">
<Button
android:id="#+id/menu"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/menu"
android:visibility="visible" />
<Button
android:id="#+id/next_btn"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginTop="210dp"
android:background="#drawable/next"
android:visibility="visible" />
ww2.XML :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#drawable/ww2"
tools:context=".ww2">
<Button
android:id="#+id/menu"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/menu"
android:visibility="visible" />
<Button
android:id="#+id/next_btn"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignTop="#+id/previous_btn"
android:background="#drawable/next"
android:visibility="visible" />
<Button
android:id="#+id/previous_btn"
android:layout_width="57dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="211dp"
android:background="#drawable/previous"
android:visibility="visible" />
Code used to display the ww2.xml :
Intent mySuperIntent = new Intent(ww1.this, ww2.class);
startActivity(mySuperIntent);
overridePendingTransition(R.anim.slide_from_right,R.anim.slide_to_left);

Use it its worked for me
Intent mySuperIntent = new Intent(ww1.this, ww2.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(mySuperIntent);
overridePendingTransition(R.anim.slide_from_right,R.anim.slide_to_left);
if dont work use it
in Your style add
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:windowDisablePreview">true</item>
</style>
However a better approach is do less things on main thread during Activity.onCreate and let show the preview screen while user is waiting. For a smooth transition, you can set a custom background to your windows adding this to your theme:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:windowBackground">#drawable/slash_screen</item>
</style>

Android: xml selector for button

I'm trying to use an xml selector to change the image of imagebuttons when they are pressed but I've been faceing a few problems. First of all, the images appear with different dimensions on the screen, and secondly the button changes color only when clicked, but not when it is active.
This is the xml of the layout with the imagebuttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/coupon_filter_btns"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#a7a7a7"
android:weightSum="7"
>
<ImageButton
android:id="#+id/filter_greece"
android:layout_width="0dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
android:src="#drawable/greece"
android:layout_weight="1"
android:background="#drawable/greece"
android:paddingTop="4dp"
android:paddingBottom="4dp"
/>
<ImageButton/>
<ImageButton/>
</LinearLayout>
Below is the selector called greece.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/greece_active" android:state_selected="true"></item>
<item android:drawable="#drawable/greece_active" android:state_focused="true"></item>
<item android:drawable="#drawable/greece_active" android:state_pressed="true"></item>
<item android:drawable="#drawable/filter_white_greece"></item>
</selector>
And this is the java code where the button is used:
ImageView filterGreece = (ImageView) kati.findViewById(R.id.filter_greece);
filterGreece.setBackgroundResource(R.drawable.greece);
filterGreece.setOnClickListener(new ViewListeners(this.getContext()).new OneFragmentFilters(OneFragment.this) ) ;

Ok first there Erro in your XML
you Just set drawable as background Not Src
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/coupon_filter_btns"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#a7a7a7"
android:weightSum="7"
>
<ImageButton
android:id="#+id/filter_greece"
android:layout_width="0dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
android:layout_weight="1"
android:background="#drawable/greece"
android:paddingTop="4dp"
android:paddingBottom="4dp"
/>
</LinearLayout>
second selector will work fine without
filterGreece.setBackgroundResource(R.drawable.greece);
so remove this Line