My question is if there is a way to put a simple blackline border around a ScrollView so the user is aware exactly where the ScrollView starts, stops and how wide it is. I cannot find any sort of XML or java code in the Android docs saying how to do this. I know this has to be possible.
Below is my XML code for the ScrollView I need to have a border.
<LinearLayout
.... />
<TextView
... />
//BORDER STARTS HERE
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="94.5"
android:paddingBottom="5dp"
android:fillViewport="true" >
<LinearLayout
... >
<TextView
... />
</LinearLayout>
</ScrollView>
//BORDER ENDS HERE
<Button
... />
</LinearLayout>
EDIT
I just added a scrollviewborder.xml with the following code as a background for the ScrollView.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
The below screenshot is what it produced:
This is not quite what I wanted. I want a thin blackline bordering around and not a black box.
In light of your new requirements, try the following code:
<?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/transparent"/>
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
You can set its background to be a shape drawable with a stroke.
Example:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="94.5"
android:paddingBottom="5dp"
android:background="#drawable/stroke_bg"
android:fillViewport="true" >
And in your drawables folder, have a stroke_bg.xml file:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
This should result in a scroll view with a black border of width 2dp.
Is there an easy way to add a border to the top and bottom of an Android View?
There is no built-in "border" concept in Android that I can think of. You can emulate one through layouts, such as:
Wrap the TextView in a LinearLayout and add a plain View above and below it, with the Views having the desired android:background color and an appropriate android:layout_height (e.g., 1px, 1dip).
Wrap the TextView in a LinearLayout and add ImageView widgets above and below with your desired border images.
Wrap the TextView in a RelativeLayout, add in a plain View (with proper background & height) anchored to the top, another plain View anchored to the bottom, and your TextView anchored to the top and bottom. This takes advantage of RelativeLayout's z-axis support, so the border will be inside the space taken up by the TextView, rather than being outside the TextView as in the first two approaches.
Give the TextView a nine-patch PNG file as a background that has your borders. This is simplest from the XML standpoint, but you have to craft an appropriate nine-patch image.
Do not wrap it in a layout, as some people have suggested. This will make rendering your app a bit slower (maybe not noticeably, but still).
Instead, create a shape that only defines a child and use it as a background for your ScrollView.
Related
I want to make an a bit circular button with a drawableStart (without padding).
I added this to the button background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#CC232323"/>
<corners android:radius="50sp"/>
</shape>
The button is:
<Button
android:id="#+id/btn_play"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginStart="25sp"
android:layout_marginEnd="25sp"
android:layout_weight="1"
android:background="#drawable/btn_bg"
android:drawableStart="#drawable/icon_layer_list"
android:text="#string/sample_text"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
The layer-list is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/background_design"
android:height="50sp"
android:width="50sp"
/>
</layer-list>
the corner does work on the button it self but the drawableStart is not affected by them, so I get a button that on one side is with circular border and on the other side a square border of the drawableStart.
View (or Button in your case) is always rectangle. When you apply background with rounded corners, it is only background image rounded, not the View itself. If you need to have rounded corners in drawableStart, you need to have rounded corners in drawable you set for drawableStart.
I found a simple and easy solution, the idea of it is to wrap the button with a CardView and set it's cardCornersRadius to the wanted radius.
like so:
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
app:cardCornerRadius="250dp"
android:layout_gravity="center">
<Button
android:id="#+id/btn_play"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginStart="25sp"
android:layout_marginEnd="25sp"
android:layout_weight="1"
android:background="#drawable/btn_bg"
android:drawableStart="#drawable/icon_layer_list"
android:text="#string/sample_text"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite"/>
</androidx.cardview.widget.CardView>
it is without a doubt the simplest way I've found in order to get the view act withthin the borderd, the CardView will not let the button or anything within it to draw outside of its borders / corners.
For more information about CardView (it's properties, dependency, etc...), go to This link.
How to add top rounded corners to an ImageView.
I've tried with the following method and it doesn't work.
imgView.setClipToOutline(true);
its better to create drawable file with radius just on top and set as a background.
You can create custom backgroung
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/darker_gray"/>
<corners android:topRightRadius="10dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:bottomLeftRadius="0dp"/>
</shape>
set in imageview like this
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:background="#drawable/shape"/>
you can create a drawable for this or use this library for better result
https://github.com/vinc3m1/RoundedImageView
The number 4 circle
As you see in the image there is number '4' in a circle within a text and it has a background color. It works as a reference when you click it opens a link in the browser. Is that something can be done in textview using spannable or any other way?
You can achieve this using Drawable.
Simply create background.xml in Drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/colorAccent"/>
</shape>
And apply background in TextView,
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:gravity="center"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="14dp"
android:paddingBottom="14dp"
android:text="04"
It will generate the result like this,
As you can see here, the background to the button is transparent. I can't seem to find where it's set to white in either xml files. The button is identified as btnCapture the code is below.
activity_main.xml
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextureView
android:id="#+id/textureView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btnCapture" />
<Button
android:text="#string/capture"
android:id="#+id/btnCapture"
android:layout_width="wrap_content"
android:layout_height="92dp"
android:background="#drawable/rounded_button"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
tools:layout_editor_absoluteX="157dp"
tools:layout_editor_absoluteY="202dp" />
</RelativeLayout>
rounded_button.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#80000000"
android:width="2dp"></stroke>
<stroke android:color="#D3D3D3"></stroke>
<size android:width="60dp"
android:height="80dp"></size>
</shape>
You do not change anything related to the UI of the button in your Java code, so no, it's not because of the Java code. It's XML related.
Your background of the button is a drawable named 'rounded_button', but you haven't posted the contents of that drawable file. So all we can do is guess that the rounded_button drawable is white?
There are two quick steps you can take to make this work the exact way you desire:
First, change your view from a Button to a TextView and apply your rounded-button.xml background. This should work instantly. It's a bit tricky trying to set a background to a button as seen here.
Secondly, I noticed that your rounded-button.xml file has no solid element. The solid element allows you to set the background of a layout. For this reason, I changed one of your stroke elements to a solid element (there shouldn't be two stroke elements anyway). Your updated rounded_button.xml code is as shown below:
PS: Don't forget to change the view in your activity_main.xml from Button to TextView!
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#80000000"
android:width="2dp">
</stroke>
<solid
android:color="#D3D3D3">
</solid>
<size
android:width="60dp"
android:height="80dp">
</size>
</shape>
I hope this helps. Merry coding!
I want to add shadow effect to my ImageView, like a transparent from bottom side. Here two images with and without shadow effect. Has any possible ways to make like this? Or is it better to take shadow svg file from the internet and put on the original imageView?
You can put your image in the same space with a gradient image using a RelativeLayot like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/your_image"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/grad"/>
</RelativeLayout>
The "grad" image is this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#181818"
android:startColor="#00000000 " />
<corners android:radius="5dp" />
</shape>