In my code below, I have a white view with an elevation of 8dp. The blue button has an elevation of 10dp so in theory it should show. However, it doesn't. It only shows the part in which it is not directly over the white view. I know it's something to with the elevation however I do not know exactly what. I have sussed out that it's fine when the white view is =<2, but as soon as I set it higher, the problem occurs.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/login_background"
android:background="#color/colorPrimary" />
<View
android:id="#+id/view"
android:layout_width="#dimen/login_container_width"
android:layout_height="#dimen/login_container_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/login_container_margin_top"
android:background="#drawable/login_container"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_marginBottom="52dp"
android:background="#drawable/login_button"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
The following reflects this Stack Overflow question and the accepted answer.
Let's consider what you start off with. I don't have access to all your dimensions, etc. to make the following look exactly like your example but the basis is there. Below is the base layout. You can see that the button lies beneath the view even though the view has an elevation of 8dp and the button has an elevation of 10dp.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_alignBottom="#+id/button"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_margin="30dp"
android:background="#android:color/white"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:background="#mipmap/ic_launcher"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
So, why is this? It is because android:elevation="10dp" in the XML for the button isn't really defining the elevation. Instead, the button's elevation is controlled by a "StateListAnimator" that controls the android:elevation and android:translationZ properties." (See accepted answer to above-referenced question.)
If you don't really care for what the StateListAnimator is doing for your layout, you can simply eliminate it by adding android:stateListAnimator="#null" to the XML for the button. Here is what the layout looks like after adding this code. (Please note that the designer may not show the changes immediately; Android Studio 3.0 Beta 6 didn't). So, you may need to refresh the layout to see the changes.
As you can see, the button is now above the view as we expect.
If you do care what StateListAnimator does for you, you will need to define your own and enter its name instead of #null in the XML statement changed above. The answer I reference above has the StateListAnimator that Android presumably uses, so you can take that as a basis and change the elevation to what you prefer. I haven't tried this, but it should work.
Related
I want to make a button which has an indeterminate progress bar around it's outside, as we can see here.
Based upon the available widgets, I cannot see how to make a circular button with this progress bar on it's outside.
At this point, I have my floating action button:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="?android:attr/actionModeWebSearchDrawable" />
With no progress bar!
I found this example - but cannot get it to load correctly into my project.
Is there a 'native' simple way to achieve this design?
Update
Following help, now I have something like this:
Note the right hand is the suggested answer. Left hand is the style of button I am aiming for.
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="?attr/colorSecondary"
app:cardCornerRadius="24dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="?android:attr/actionModeWebSearchDrawable"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>
Basically the left hand button is slightly larger with slightly smaller search image -- how can I edge closer to this? I have tried playing but can't quite get the sizing right. I thought adding padding would help but doesn't seem to make a difference. I wonder if there is a way to combine your solution with my floating action button - to perhaps get the best of both worlds more easily?
Instead of Floating button maybe you can try it this way with Frame Layout and CardView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#drawable/app_top_logo"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>
It is my firs time that I try to design a good UI instead of debugging apps, so I am new to this type of stuff.
I have three buttons under each other and the text should be aligned correctly. So that the "F" of Favorites starts at the same horizontal point as the "E" of Equalizer.
The way I did it, is not satisfying. I worked with paddingEnd and just tried out until it looked almost equal on the horizontal axis.
One other idea was to make the gravity center_vertical|left and instead use drawablePadding. This did not work because the width of the buttons is defined as match_parent. But also when I change the buttons to android:layout_width="wrap_content" and remove android:paddingStart and android:paddingEnd for testing, it does not work.
I got these info out of android:drawableLeft margin and/or padding
There should be a way to make it "easy" to fulfill the design I require. Has someone an idea what I am making wrong and has a solution for me?
The code of the xml layout file and a screenshot of the result are attached.
If something else is required to solve this question, then just ask me straight away.
Screenshot of the buttons
<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">
<LinearLayout
android:id="#+id/menu"
android:layout_width="300dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/border"
android:paddingEnd="0.3dip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/favButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="15dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_bxs_heart"
android:text="#string/favorites"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/eqzButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_equalizer"
android:text="#string/equalizer"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/settingsButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="27dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_settings"
android:text="#string/settings"
android:textColor="#000000"
android:textSize="16sp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to have a ProgressBar inside of an EditText, but I want it to be right inside it and, preferably, in the center of the EditText. All the solutions I've come across so far do not really allow the bar to be inside of the borders. Also, I'm looking for as clean solution as possible, not just putting over 9000 constraints in ConstraintLayout.
It should look like this (picture is taken from android progressbar inside edittext):
But the actual result is either this:
or this (if I use smaller style for the bar):
My code is:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"/>
</FrameLayout>
Of course, I could just put some hardcoded values for height, but it's definitely a bad fix of the problem. Also, if I change the style of the bar to the smaller one, it's not a fix, since I want to have some control over it (and it doesn't look perfect, either). I'm planning to add something like error and success icons also, so the solution that fulfills this requirement is extremely welcome! So, if you have any clue about how to put it properly inside of the input field, I'll be grateful.
Thanks in advance, guys!
You can try:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ProgressBar
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
You can achive like this, Whenever you want to position children inside a layout FrameLayout is not a good layout to use. consider using RelativeLayout or better ConstraintLayout
<?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="wrap_content"
android:padding="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:hint="Phone number goes here" />
<ProgressBar
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="5dp" />
</RelativeLayout>
Happy coding!!
I have an issue where the Android DatePicker within my layout has this huge top margin/padding/header, which I cannot find a way to remove.
I have tried different styling, margins, paddings, parent layouts - anything I could think of. See the white section in the image below. Please assist!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gray_color"
android:padding="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/txtV_SelectAppointmentDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
app:MvxBind="Text ScheduleTimeSlotText;" />
<DatePicker
android:id="#+id/scheduling_date_datePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:datePickerMode="calendar"
android:background="#color/gray_color"/>
When you switch the order of the elements, place Button after ImageButton, the z-index is not affected. I tried with other types of Views and they are positioned correctly on top of one another depending on their order in the parent FrameLayout.
I tried programmatically with View.bringToFront() without success.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
I tried to reproduce the issue: it is reproduced for me on Lollipop+ devices and isn't reproduced on pre-Lollipop.
Could you please check this?
If it is exactly the case, then the solution might be to use android:translationZ attribute (which is available since Lollipop)
Something like:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp"
android:translationZ="1dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:translationZ="2dp"/>
</FrameLayout>
And that fact that translationZ isn't available on pre-Lollipop would not matter (and attribute would be ignored), as there is no such issue.
Hope it helps