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!
Related
Good day,
I'm currently building a chat app like WhatsApp and I have this problem that I have no clue on how to solve.
Below is the screenshot of my chat screen toolbar.
Problem: No touch event/sign whenever the user clicks on the back icon and contact name.
I wanted something like this,
Here's a simple android ripple effect but it works only with API 21 and above
Create button_effect.xml in drawable-v21
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFAEAE">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#FFAEAE" />
</shape>
</item>
</ripple>
I was using it with red color if you want a whatsapp like effect use with translucent black colors
use it simply like this
android:background="#drawable/button_effect" on your layout's
EXAMPLE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_effect" <!-- putting is as background-->
android:clickable="true"
android:focusable="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stackoverflow" />
</RelativeLayout>
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>
I have a circular progress bar that I designed through xml. The problem is, if I set layout_width and layout_height to wrap_content, it will cut off the circle. If I set the width and height manually to "__dp" then there is a huge box around the circle which expands too much. To explain more clearly, my progress bar starts when you touch it. However, with this border around it, even if you touch next to the progress bar it will start (when it shouldn't). How can I remove this border? Thanks!
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/progressBar"
android:layout_width="200dp"
android:layout_height="200dp"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
android:max="100"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
/>
circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="7"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
circular_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="7"
android:shape="ring"
android:thickness="5dp"
android:useLevel="true">
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
You set the wrong style.
style="?android:attr/progressBarStyleHorizontal"
is meant for horizontal ProgressBars. Remove the style or use one that is meant to be used for circular ProgressBars like
style="#style/Base.Widget.AppCompat.ProgressBar"
I have a listview:
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_weight="1"
android:divider="#null"
android:dividerHeight="8dp"/>
And I also have a drawable to draw round corners for the listview items:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/listViewItemBackground"/>
<corners android:radius="5dp" />
<padding android:left="3dp" android:top="3dp" android:right="3dp" android:bottom="3dp" />
</shape>
With the above setup, the items are touching each other.
What am I missing?
You've set android:divider="#null" so obviously you aren't seeing a divider.
Look at how this person has set up their ListView divider for an example what you should be doing.
try like below...
android:divider="#color/redBackground"
and color value is inside colors.xml:
<color name="redBackground">#C60202</color>
Please see below link for more details...
http://developer.android.com/reference/android/widget/ListView.html#attr_android:divider
android:divider
Drawable or color to draw between list items.
May be a reference to another resource, in the form "#[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name".
May be a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".
This corresponds to the global attribute resource symbol divider.
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.