I use a Seekbar in the middle of two layers with different background colors.
In normal state it's OK. here's the picture:
When holding down the Seekbar, it has a wrong background in the top half:
Here is the code in layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout ...
android:background="#23232C"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/player"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#2F2F38"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewAlbumArt">
<!-- ... some views ...-->
</android.support.constraint.ConstraintLayout>
<SeekBar
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/player" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/player"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
I found that the problem is that when Seekbar is above any view the background not shown. Here's the simple layout that show the case:
<FrameLayout 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">
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#3b3930" />
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</FrameLayout>
I follow the instruction in this stackoverflow link and this is the result:
Is there anyway to remove the default background color behavior?
I gave background color to the bottom view and seekbar background color behavior gone.
The only solution for know.
Related
My RecycleView change color after dialog is opened. Basically, default color is white, but after i open the dialog add some items on the RecycleView, the backgroud color become light grey as the pictures below.
What could it be?
Here the xml file for the activity
<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=".CalculatorActivity"
android:id="#+id/constraintLy">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_calculator"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/divider3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.recyclerview.widget.RecyclerView>
<View
android:id="#+id/divider3" some code here/>
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="UseSwitchCompatOrMaterialXml" >
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
Most likely the .xml where your RecycleView items are drawn has grey background.
Feel free to post some blocks from .xml to verify.
Image view is hiding under the button what changes I can do so that the image view can be above the button view pager also have bottom padding so that button can properly accommodate. The image is showing on the other parts but not above the button.
<?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"
android:orientation="vertical"
tools:context=".McqActivity"
android:id="#+id/fragment"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/starFirst"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_baseline_star_24"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/questions_view_frag"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:orientation="horizontal"
android:paddingBottom="20dp"
android:paddingTop="50dp"
>
</androidx.viewpager2.widget.ViewPager2>
</androidx.constraintlayout.widget.ConstraintLayout>
layout_constraintBottom_toBottomOf and other layout_constraint... won't work inside RelativeLayout, these are desired to work with ConstraintLayout as strict parent. if you want to align two Views next to/below/above inside RelativeLayoyut you have to use other attributes, e.g.
android:layout_below="#+id/starFirst"
android:layout_above="#+id/starFirst"
android:layout_toRightOf="#id/starFirst"
android:layout_toLeftOf="#id/starFirst"
note that every attr which starts with layout_ is desired to be read by strict parent, not by View which have such attrs set. every ViewGroup have own set of such
edit: turned out that this is an elevation case/issue (Z axis), so useful attributes are
android:translationZ="100dp"
android:elevation="100dp"
I was trying to put two layouts one after another and keeping the next layout in the center of the first one. The layout in XML is similar to the following
<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">
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="#string/app_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="70dp"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
The output is like the following
The problem is that the second layout's height is variable and if it's bigger (let's say 170dp instead of 70dp) than the first one then the output is
Part of the second layout has been cut off. How can I bring both of them inside and keep the second layout still in the center of the first one.
One possible solution for your problem is to use a Barrier at the Bottom of the buttons and set the constraintBottom to the Barrier and set the constraintTop to the parent to both Buttons. Like the code:
<?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">
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="#string/app_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/barrier"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="70dp"
android:text="#string/app_name"
app:layout_constraintBottom_toTopOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/button" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button,button1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
set layout gravity of constraintlayout to center can help you
first of all I am new to Android-Development.
My question is regards alignment of different views in Android Studio/Development.
Specifically the properly height-alignment of an icon and text.
Icon-Text-Alignment
As you can see, I tried to align the text with the icon. However the result looks slightly different in the emulator.
Here is my .xml-file:
<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.04" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:srcCompat="#drawable/ic_settings_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
My questions are:
1. How can i fix the alignment of these two views?
2. Why is the result in the emulator different?
3. Is there a best-practice to align views properly?
<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10" />
<ImageView
android:id="#id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:srcCompat="#drawable/ic_settings_black_24dp"
app:layout_constraintTop_toTopOf="#id/textView3"
app:layout_constraintBottom_toBottomOf="#id/textView3"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can do this simply by using a custom toolbar and adding a menu to it.
Try using Custom toolbar :
<LinearLayout 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:orientation="vertical"
tools:context=".terminalShortActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#4EACE2"
app:popupTheme="#style/ThemeOverlay.AppCompat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terminal Shortcuts"
android:textColor="#FFFFFF" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</LinearLayout>
So I dig into the alignment issue a little further and came up with a few "solutions". Generally speaking and to answer my questions the "Custom Toolbar" is not the right solution to align the views.
The problem lies in the padding of fonts. Android take the whole view to align views and not as assumed the "text" only. Therefore the alignment looks off.
Different paddings/fonts
Poppinsmedium: without padding
Poppinsmedium: with padding; normal state
Android-Font: with padding; normal state
The bottom-padding can be eliminated with the following code:
android:includeFontPadding="false"
Or check this thread for more in-depth knowledge of the issues of font-padding.
To align views, now I am using Chain-Constraints and do it without padding. It looks like the best-way to align views, especially Text-Views. However, I have to say that despite the deleting of the bottom padding it is necessary to adjust the alignment a littlebit with the vertical-bias.
For reference:
constraintlayout.com
Android-Doc: constrain-chain
When using the ConstraintLayout's Placeholder with wrap_content width and height, if a content is set to the placeholder itself, it occupies the correct space on screen, as the example below:
<?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"
android:background="#999999">
<View
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#990000"
app:layout_constraintEnd_toStartOf="#+id/action_placeholder_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Placeholder
android:id="#+id/action_placeholder_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:text="Button"
android:visibility="gone"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
But, when no content is set to it, it occupies a bunch of space (the entire area) instead of having 0dp width/height. The example below demonstrates that:
<?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"
android:background="#999999">
<View
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#990000"
app:layout_constraintEnd_toStartOf="#+id/action_placeholder_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Placeholder
android:id="#+id/action_placeholder_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:text="Button"
android:visibility="gone"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is that some kind of ConstraintLayout bug or am I doing something wrong?
Context: I want to set the content of the placeholder only when the page is fully loaded.
The ConstraintLayout version I am using is:
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
You need to make a proper horizontal chain so ConstraintLayout knows where view_1 is supposed to align in case view it's constrainted to is gone. Your placeholder should have app:layout_constraintStart_toEndOf="#+id/view_1".
You can also consider adding app:emptyVisibility="invisible" (or visible) and see how it affects the layout.
I'm not sure why you're using a Placeholder (and I honestly don't know why it's behaving this way for I've never used them), but that's because I've never needed them to begin with.
This is how I'd do it:
<?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"
android:background="#999999">
<View
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#990000"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:text="Button"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view_1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the button is VISIBLE (as ^), it would look like:
If the button is GONE, it would look like:
And if the button is INVISIBLE, it would reserve the space and look like:
Start with the Gone or Invisible (depending upon what you want your UI/UX to look like in that state), and once you're "done loading your page", then push a new view state (which will result in the button becoming Visible).
Am I missing something here?