I'm running into some really strange behaviour when running this (test) layout on my OnePlus6T but it works fine when i run it in the emulator.
There is a gray bar appearing below the FrameLayout which increases/decreases in size depending on the elevation (smaller elevation means wider but less tall bar).
It only occurs when using a combination of an elevation and corner specific radius (using plain android:radius instead of bottomRightRadius makes it appear normal). Also, when I change the outlineProvider from background to something else, it works as well.
Can anyone confirm this behaviour on other phones and/or is it a known bug? I tried it on a friends Moto X4 and it works fine there.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DCDCDC"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="40dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="40dp"
android:layout_marginBottom="40dp"
android:background="#drawable/background_rounded"
android:outlineProvider="background"
android:elevation="100dp">
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
#drawable/background_rounded.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:bottomRightRadius="64dp" />
</shape>
Screenshot from my 6T
Screenshot from API28 Emulator
Related
I'm developing my first app in Android studio and I have some styles applied to it, and one of them is a gradient background but I want to limit it.
This is my actual view:
The graident goes from top to bottom perfectly, but I want the gradient to occupy 1/4 of the screen, how can I do it? I've been looking on the internet but I didn't find a solution. Up to the red line for example:
How can I do it?
This is my actual drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="-90"
android:startColor="#3cba92"
android:endColor="#e6e9f0"
/>
</shape>
</item>
</selector>
Rather than modifying your drawable, why don't create an empty layout which has height as 1/4th of the screen and background as your drawable.
The rest of your code will remain as it is and should have no background.
For example, this can be done easily using a constraint layout as follows.
<?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"
android:weightSum="1"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#drawable/background_gradient"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Note : You can set the height programatically by measuring the screen size and dividing it by 4.
I want to make my ImageView curved at the bottom with shadow effect.
Similar to this image
But I don't have any idea about how to do this.
Whenever I search on Google or StackOverflow it shows me results related to curved corners but I want curved edge at bottom.
you can make shape use layer-list
for example,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-150dp"
android:right="-150dp"
android:top="-200dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#C72C2F" />
</shape>
</item>
</layer-list>
it show like this.
And then use this in background,
<?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">
<LinearLayout
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/round"
android:elevation="30dp"
android:layout_width="match_parent"
android:layout_height="700dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
it make like this.
Also for make shadow effect, I use android:elevation it make shadow, and if you increase value, it can make more depth.
And obviously add image view for show images. I believe you can do this.
I have two same screens, with a logo at the center of the screen.
However, one screen has statusbar height considered while the other one doesn't, so the position of the logo does not match between the two.
This is the code on xml.
screen 1
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blue" />
<item
android:height="200dp"
android:width="200dp"
android:gravity="center"
android:drawable="#mipmap/ic_launcher_foreground">
</item>
</layer-list>
screen 2
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
android:gravity="center">
<ImageView
android:layout_height="200dp"
android:layout_width="200dp"
android:layout_marginBottom = "39dp"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher_foreground"/>
</LinearLayout>
I use galaxy s10, which has height of statusbar of 39dp.
Now I can manually set margin of 39 to match the position of the logo(like the code above), but that is only for one specific device(which is s10). I need to set the margin dynamically for different mobile devices.
How do I do this? and why does one screen integrates the status bar height while the other doesn't?
P.s. This is a react-native project.
I am trying to make two rounded edges views, A and B, in Android. Both views have the same corner radius but B is within A or B should look like within A.
B's width is dynamic according to the percentage below. When the percentage is more than 5%, this works perfectly fine. However, as the percentage is less than 5%, it will turn out like the failure-figure below. They look like completely independence views, though they actually are. I need the green part grows within the gray area only. How can this be accomplished?
Ideally, it should look like
But I failed to make it. :/ The figure I got
Here is what I did, define a drawable as given below
<RelativeLayout
android:id="#+id/percentageBarViewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/a_Bar"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/progress_bar_empty_background"/>
<View
android:id="#+id/b_Bar"
android:layout_width="0dp"
android:layout_height="20dp"
android:background="#drawable/progress_bar_progressing_background"/>
</RelativeLayout>
You should use nested views and padding .
<?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">
<FrameLayout
android:id="#+id/a_Bar"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/progress_bar_empty_background">
<View
android:id="#+id/b_Bar"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/progress_bar_progressing_background"/>
</FrameLayout>
</RelativeLayout>
At the end add stroke to your progress_bar_progressing_backgroundwith the same color as progress_bar_empty_background.
something like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="3dp"/>
<stroke android:width="2dp" android:color="#222"/>
<solid android:color="#fff"/>
</shape>
I am trying to make a simple view to sign up for an account. The Text fields look terrible and won't follow the a standard style. (I would like to use Holo.) How do you make the EditText look either like the Holo style or look like the indented into the page style? I know about 9-patch and gradients but is there a way to keep the style consistent with other apps on the version of android?
The EditText
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SingUp"
tools:ignore="MergeRootFrame"
android:background="#drawable/homebackground"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<EditText
android:id="#+id/enteredname"
android:layout_height="wrap_content"
android:textSize="12pt"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:background="#layout/rounded_style" />
</LinearLayout>
rounded_style.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
Also how do you make the cursor start with a little space before left edge?
Since you have changed the background of the EditText to "rounded_style", that's why it might not be working as you would want it to.
Generally, an EditText should have 3-4 different images for different states (Normal, focussed, disabled etc). If you have those, it should work fine.
Please share your code snippets and some images of the current implementation.