I'm using Xamarin Android in Visual Studio and trying to do a simple task of displaying two rectangles, one above the other. When I use a measure size of "px" everything works as expected, but when I use "dp", the second rectangle does not get rendered. Here's my xml file with the rectangles:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" >
<shape android:shape="rectangle">
<solid android:color="#6EF562" />
</shape>
</item>
<item android:top="57dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
Note the "dp" above. That code does not work. But if changed to "px", it works as expected.
Here's the source of my Main.axml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E6EDF0"
android:paddingTop="50dp">
<Button
android:id="#+id/MyButton"
android:layout_width="178.1dp"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:layout_gravity="center"
android:padding="5dp"
android:layout_margin="5dp"
android:textColor="#000000"
android:background="#drawable/splitColors" />
Obviously, I want to use "dp" rather than pixels "px" for scaling reasons taking into different device form factors, but I can't get this to work.
The height of the button, is set at wrap_content. And in your drawable you specify you want to draw the black bottom part at 57dp. So if you're button smaller than 57dp it will never show. That's why it does the job at pixels, because 57px isn't that high. So if you want to use DP make sure your button is at least as high as the value you give <item android:top="57dp">
Related
I want to create vertically repeating background for whole app that is adjusted to width of phone.
My bitmap is:
resources/drawable/repeating_bitmap.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/app_bg_003_phone"
android:gravity="fill_horizontal"
android:tileModeY="repeat" />
My style is:
resources/values/style.xml
<style name="AppTheme" parent="BaseTheme">
<item name="android:windowBackground">#drawable/repeating_bitmap</item>
</style>
And my problem is here:
As you can see, instead of whole image only the edge is stretched, Weird.
How can i achieve horizontally stretched and vertically repeated background?
I have used proper flags on bitmap... (android:gravity="fill_horizontal" android:tileModeY="repeat")
If this could help this im attaching original image that im repeating (mdpi)
I want to use repeating bitmap to save up on memory. Also this is only jpeg pattern that is available for me at the moment.
Update
Now i know why only edge is streched: From documentation:
https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable
"Gravity is ignored when the tile mode is enabled. Default value is "disabled"."
That means when i got tileModeY="repeat", then tileModeX by default as i enabled tile mode overall, must be tileModeX="clamp" which is:
"clamp Replicates the edge color."
Any ideas how i can use tileMode and gravity at the same time? I tried to insert this bitmap into another view where gravity would be "fill_horizontal". Sadly without success.
I found a pretty fancy way of achieving this:
Remove the tileMode attribute from the "bitmap"
Create a "layer-list" root tag in the XML
Add an "item" tag around the "bitmap" with top and height attributes (set the height to that of the image)
Copy&paste this "item" as many times as you think you need it to fill the display
Enter the proper top value for each of the "item" tags
Here is an example where the image for the background is 116 pixel high. Therefore each of the following tags has a top value increased by this height.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="116dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="232dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="348dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="464dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="580dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
</layer-list>
I'm working on an Android application where I want to create a windowBackground with a centered element and a layout also with a centered element. I want these elements to be in the exact same position, with the layout overlapping the background. The problem I'm having is that the layout and the background seem to be calculating center differently (see image). Why is this happening, and what can I do to line the elements up?
This is what I see right now. The red box is created by the background and the green box is created by the foreground. Screenshot was created with a Nexus 5X API 26 emulator.
Foreground layout:
<?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">
<View
android:background="#color/foreground_box"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true" />
</RelativeLayout>
Background Drawable (applied via android:windowBackground in my theme)
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size android:width="10dp"
android:height="10dp" />
</shape>
</item>
</layer-list>
For clarity, my colors file is
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="background">#ffffff</color>
<color name="background_box">#AAFF0000</color>
<color name="foreground_box">#AA00FF00</color>
</resources>
Full source for this sample project is available at https://github.com/HofmaDresu/AndroidCenteredTest
The reason windowBackground includes both the heights 1) statusBar and 2) actionBar
Modify below line in your background.xml
<item android:gravity="center" android:top="80dp"> // 56 actionBarSize + 24 statusBarHeight
You may need to manage this programatically as statusBarHeight and actionBarSize varies based on device API/resolution.
Here is the result. For testing, have resized background size bit bigger so that overlapping between views and background become visible.
It is probably because of the extra space taken up by the ActionBar in the foreground.
To fix this, you can add a margin to your View in the foreground layout as:
android:layout_marginBottom="?android:attr/actionBarSize"
After test it in AS, I can say you that the right code for you background_drawable is this:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center" android:bottom="48dp">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
using android:top, the red square go more down than center. Need to use android:bottom instead to center background. By my tests results that 48dp is the right value.
I would like to add padding or space to the logo on both the sides and the code is added here.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item>
<bitmap android:gravity="center" android:src="#drawable/logo" />
</item>
</layer-list>
I had the same problem, I tried to add padding to the item but it didn't change anything.
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="center"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
The problem was gravity="center", with it the padding were not applied.
Try using android: gravity = "clip_horizontal"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/splash_color" />
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="clip_horizontal"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
</layer-list>
Use
android:bottom=""
android:left=""
android:right=""
android:top=""
Try this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<bitmap
android:gravity="center"
android:src="#drawable/logo" />
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/ns_theme" />
<item
android:drawable="#drawable/ic_logo"
android:left="#dimen/_16sdp"
android:right="#dimen/_16sdp" />
</layer-list>
The problem is probably that your logo is too big (The image file you are using has a pixel width that exceeds the pixel density of the device you are running it on).
Whether or not that is the case, it would probably be better to approach the problem considering the possibility that it could be run on ANY Android device with ANY screen size.
Considering that, there are several options better than simply adding padding in xml... For example, you could:
1) Wrap the image inside another view object that you can control the size and postion of as Bhavik Makwana suggested.
2) Just simply re-edit/resample your image to match the width of your target device and include the white space you desire in the image itself.
3) Design full splash screens that match the entire screen exactly (which combine foreground and background into one image), for example one with 1080 x 1920 resolution, and others for other screen sizes. That way you can control exactly how you want it to look, and the resolution will be 1-1 with no anti-aliasing or resampling.
4) Use this "9-patch" image approach to define an absolute width and height for your logo, but allow stretching of the white space around it to accommodate different screen sizes.
or, finally, the best way:
5) Use a constraint layout with guidelines in order to define the width of your logo in terms of percentage of parent width rather than absolute value.
Some other advice: Unless you are using technique #2 above, make sure you are using a logo.png file like this:
... NOT like this:
KaBOOYOW!
-Boober.
try this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap android:src="#drawable/logo"
android:gravity="center" />
</item>
</layer-list>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_height="match_parent"
android:layout_width="match_parent">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:gravity="center"
android:background="#mipmap/logo" />
</layer-list>
I am looking for a way to style my button like an example from an older question (How to create standard Borderless buttons (like in the design guidline mentioned)?) but some things were left out from the answer.
How can I add more than one value to an XML element, particularly android:background ="";?
I figured out how to make my buttons borderless, but I want them to have a really thin border, and a different background color. I have seen lots of tips online, but I can't find a way to put all my items together properly in code. Below is a copy pasted image with the top part representing the layout I want to achieve with the button name and a thumbnail image on the right hand side on the button with the button being a different color then the background of the app, and below that is a copy pasted image of the border style I'm trying to achieve, thin, touching borders between buttons. I have looked everywhere and tried many ideas but none seem to work properly, or some require me to have
android:background="?android:attr/selectableItemBackground"
but this interacts with
android:background="#22272D"
I need to keep the text in the button because my app is going to translate the buttons text to the language of the users phone, so I can't make the whole button just an image. Below is my XML and the output, any recommendations to how I should change it would be of massive help!
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="6"
tools:context="com.aid.travelers.myapplication.Transportation">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/transportation_page"
android:textSize="40sp"
android:textColor="#000000"/>
<Button
android:layout_width="match_parent"
android:text="#string/airport"
android:id="#+id/AirportButton"
android:layout_height="60dp"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="?android:attr/selectableItemBackground"/>
<Button
android:layout_width="match_parent"
android:text="#string/bicycle"
android:id="#+id/BicycleButton"
android:layout_height="60dp"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="?android:attr/selectableItemBackground"/>
I'm not sure that I get your question, but I guess you want to custom the background of your button, and have a touch effect when you press it.
Have a look at this answer :
https://stackoverflow.com/a/7176006/5446285
You should create your own resource file background.xml (for example) that you create in your drawable folder.
The code should be like :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_selected"/> <!-- pressed -->
<item android:drawable="#drawable/background_unselected" /> <!-- default -->
</selector>
You should now create 2 other files in your drawable folder : background_selected.xml, and background_unselected.xml.
To do so, I advise you something like this if you want a thin border :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#7c7c7c" />
</shape>
</item>
<item android:bottom="2dp" android:top="2dp" android:right="2dp" android:left="2dp">
<shape android:shape="rectangle" >
<solid android:color="#a0a0a0" />
</shape>
</item>
Then you set the background of your button in your xml :
android:background="#drawable/background"
Here's my aching point. I'm new to android developoment and I want to create the splash screen to an app. presently, after searching in this forum, i found methods of implementing the splash screen from a picture but that's not what i want. I want the splash screen to be a color with a varying gradient. Attached to this question is a picture to illustrate what i mean.
Unfortunately, couldn't paste an image due to my low reputation points. Nonetheless, here's a link to an gradient image.
Further explaining, i want the color to be generated by either java or xml code dynamically so that, I won't have to bother about different screen sizes as all I'll have to do is to generate everything for full screen display. What's I'm trying to avoid is using picture assets if possible.
Help Plz. Thanks
create a shape, add it to drawables like : <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/gradient_start" <!--this first color -->
android:endColor="#color/gradient_end" <!--this second color -->
android:angle="-270" /> <!--gradient angle -->
</shape>
and then on your splash.xml background, set background to the shape
add
<LinearLayout
android:id="#+id/ranking_order"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/list_grad"
/>
Also gradients and colors may be declared directly into splash.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--<color android:color="#2196F3"/>-->
<shape android:shape="rectangle">
<gradient
android:startColor="#2196F3"
android:endColor="#1976D2"
android:angle="-90"
/>
</shape>
</item>
<item>
<bitmap
android:src="#drawable/logo"
android:gravity="center"
/>
</item>
</layer-list>