I have an issue where UI of android application looks different on my Samsung Galaxy S5 comparing to other devices such as Nexus5 or Sony Xperia or others..
I have TextViews which arranged inside a TableLayout.
Each TextView has rectangle with little stroke drawable background which is defined in separate xml.
The problem is that you can see the stroke of the left side of the rectangle but the right side seems to be hidden like it wider than the screen.
I tried to load a picture but I don't have enough reputation for this.
As I said, it only happens in my Samsung device while on other devices it looks just fine.
Please refer to the layout xml and to the background drawable xml.
Can anyone explain why this and maybe can advise for a solutions?
Here is layout xml's:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".GpsRecMain"
android:background="#color/LightGrey">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:stretchColumns="*.*" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvTimer"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="00:00"
android:textColor="#color/YellowGreen"
android:textSize="35sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvSpeed"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="#string/NUMERIC_ZERO"
android:textColor="#color/YellowGreen"
android:textSize="40sp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/tvDistance"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="#string/NUMERIC_ZERO"
android:textColor="#color/YellowGreen"
android:textSize="40sp"
android:textStyle="bold|italic" />
</TableRow>
</TableLayout>
background xml:
<?xml version="1.0" encoding="utf-8"?>
<corners android:radius="0dp" />
<solid android:color="#color/Black"/>
<stroke android:width="3px"
android:color="#color/YellowGreen"/>
<padding android:top="5dp"
android:bottom="5dp"/>
Thanks in advance!
Moti.
I have found the problem!!
Well, actually it's not a solution.. but the problem gone when I change the text style form italic to regular!
I still can't understand why in italic it looks different so I changed the text to normal style.
Related
I need relative layout background with some transparent for that i used gradient option, But it is affecting text view color also , I gave color of text view is white color but it looks like gray color. Please help me to get out of this issue.
<RelativeLayout
android:id="#+id/topLayout1"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_alignParentTop="true"
android:foreground="#drawable/image_overlay"
>
<RelativeLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/preloader_image"
>
<TextView
android:id="#+id/resName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="Green Way"
android:textColor="#color/White"
android:textSize="25sp"
android:backgroundTint="#color/White"
/>
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/resName"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="#string/items"
android:textColor="#color/White"
android:textSize="16sp"
/>
</RelativeLayout>
</RelativeLayout>
and image overlay code,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#B0000000"
android:centerColor="#A0000000"
android:endColor="#00FFFFFF"
android:angle="270"
/>
</shape>
<color name="White">#FFFFFF</color>
You can use #83000000 color code for setting transparency and that too in android:background instead of android:background property. Alternatively, you can also use "android:aplha="0.x" where 1 < x < 9, for transparency. Your final code will look like this.
<RelativeLayout android:id="#+id/topLayout1"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_alignParentTop="true"
android:background="#83000000"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/resName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="Green Way"
android:textColor="#FFFFFF"
android:textSize="25sp"
android:backgroundTint="#FFFFFF" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/resName"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="Items"
android:textColor="#FFFFFF"
android:textSize="16sp" />
</RelativeLayout>
You should see this ANSWER to know more about transparency. You can use various hex codes to achieve different level of transparency. Like for 50% transparency 80 code is used and color code would be like #80000000. Similary, you can use various codes in the scheme #xx000000.
I've created a simple LinearLayout with three identical elements:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello"/>
</LinearLayout>
Now I'm going to introduce 8dp space between each pair of elements.
Which solution of the ones below are considered as cleaner?
or:
or maybe some another?
Try this .
<?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="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello" />
<android.support.v4.widget.Space
android:layout_width="8dp"
android:layout_height="wrap_content" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello" />
<android.support.v4.widget.Space
android:layout_width="8dp"
android:layout_height="wrap_content" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello" />
</LinearLayout>
Add space to your code .
<android.support.v4.widget.Space
android:layout_width="8dp"
android:layout_height="wrap_content" />
Either the given solutions, you can also use a drawable divider for LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:showDividers="middle"
android:divider="#drawable/divider8p"
android:orientation="vertical">
<!-- Your items here -->
</LinearLayout>
and for the divider declaration:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#00FFFFFF"/>
<size android:width="8dp" android:height="8dp"/>
</shape>
I like the Space solution already posted, but I wanted to add another answer in the sprit of the original question.
In the case the OP presented, if I were to use margins to accomplish this, I would use start/left margin on each element other than the first. I would do this because of how I predict the layout might change in the future. It seems to me that the most likely thing to happen would be to add new elements to the end of the LinearLayout or to remove elements from the end of the LinearLayout. In these cases, if I'm using start/left margin on each item, I can delete individual views without having to touch the others.
If I want to get a look as below, what do I do? More specifically, how do I set the white background around multiple items?
EDIT:
The grey is the background for the whole screen, and the white is like a "box" placed on the grey background, together with the buttons, divider and textview.
I'm thinking like this:
<TableLayout
android:background="#eae8e8>
...
<WhiteBox
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_margin="16dp"
android:background="#FFFFFF/>
<TextView>
...
<Divider>
...
<Button>
...
<Button>
...
</WhiteBox>
</TableLayout>
Where "WhiteBox" of course is something else, but would it be possible to do something like this?
I would recommend leaving as many of the elements as possible transparent to prevent overdraw issues but it depends on your overall needs. By using #null backgrounds you can change the base background element and everything drawn over it would change accordingly (true transparent).
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"
android:background="#color/white"
android:padding="10dp">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:ems="10"
android:gravity="center"
android:inputType="text"
android:text="Test"
android:textColor="#CCC" >
<requestFocus />
</EditText>
<View
android:id="#+id/divider"
android:layout_below="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#CCC" />
<LinearLayout
android:id="#+id/buttons"
android:layout_marginTop="10dp"
android:layout_below="#+id/divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#drawable/testbutton"
android:text="BUTTON 1"
android:textColor="#CCC" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#drawable/testbutton"
android:text="BUTTON 2"
android:textColor="#CCC" />
</LinearLayout>
</RelativeLayout>
Button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#null" />
<stroke android:width="1dp" android:color="#CCC" />
</shape>
</item>
<item>
<shape>
<solid android:color="#null" />
<stroke android:width="1dp" android:color="#CCC" />
</shape>
</item>
</selector>
Yes you can go ahead with your approach.just give margin to your inner layout to which your background is set to white.and you can also set the background to white for the text views and buttons you are using inside your inner layout.Set the text color as gray for text view and button.eg:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eae8e8">
<RelativeLayout
android:layout_width="200dp"
android:layout_margin="30dp"
android:layout_height="200dp"
android:background="#FFFFFF"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_margin="50dp"
android:text="TextView"
android:textColor="#android:color/darker_gray"
android:background="#FFFFFF"
/>
<Button
android:layout_marginTop="20dip"
android:text="Button"
android:textColor="#android:color/darker_gray"
android:layout_below="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:background="#FFFFFF"
/>
</RelativeLayout>
</LinearLayout>
By default when you create an xml with no backgrounds applied to your parent layout and if the widgets inside also does not have any background image/color set.it renders white on the screen.Just don't add any image/color as background.You can also set the background as white.
android:background="#FFFFFF" set this to your widgets in xml. like button or text view etc to have it appear white.
I am trying to apply a simple gradient background to my main LinearLayout. My problem is that the background refuses to stay in the background and instead decides to also cover my views (TextViews and Buttons, in this case). What am I doing wrong/am I missing? Thanks for your help!
main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_gradient"
android:orientation="vertical"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select the PC to communicate with..." />
<TextView
android:id="#+id/textViewStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Status" />
<RadioGroup
android:id="#+id/radioGroupDevices"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
<Button
android:id="#+id/btnVolDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
<Button
android:id="#+id/btnPlayPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="|>" />
<Button
android:id="#+id/btnVolUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>" />
</LinearLayout>
</LinearLayout>
drawable/bg_gradient.xml:
<?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="#616161"/>
<stroke android:width="1dp" android:color="#343434" />
</shape>
Result (Screenshot from Eclipse xml editor, but looks the same on the actual phone)
http://s14.directupload.net/images/130415/q8q6hcmn.png
As you can see, the text lines and the buttons appear to be at least partially covered by the background. I also tried to use a normal black background, but with the same result. All views appear "foggy" behind a black haze.
It seems you are developing for the android version 3 or higher...so in this versions and the versions above the theme is set such as the controls seems to be having transparent background...
try changing the controls(buttons,textviews) background to some hash color values
eg:-android:background="#ffaaff"
now you need not to change your code...give it a try as it is...
for your buttons put this in your code to make them transparent...
v.setBackgroundColor(0x0000FF00 );
hope this works for you
I do not see your buttons to be polluted by your gradient. As for the top most text - it's normal as by default TextView background is transparent, so container's bg will be seen thru it.
Very peculiar problem here, Simply the background image asset will display fine on ALL phones except the Galaxy Nexus (or i have found so far)
Find below the gallery of the app in multiple different phones, but note in image number SIX the nexus does not have the background?
I have set support for all density's and large + XL screen sizes, i shall post the XML of one layout, however its spans across ALL layouts, whether it has any controls/linear Layouts or whatever else.
Images: http://goo.gl/59c8C
<?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" android:background="#drawable/app_bg">
<ScrollView
android:id="#+id/scrollView12"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_alignParentBottom="true" android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_alignParentBottom="true">
<com.quickcontact.CustomTextView
android:id="#+id/CustomTextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Tap the buttons below to create your contact profiles. You will be able to assign contact details to each of your profiles and share them with others."
android:textColor="#3f3f3f"
android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_gravity="center_horizontal"/>
<com.quickcontact.CustomTextView
android:id="#+id/receiveHeadertxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="-- Create Profile --"
android:textColor="#3f3f3f"
android:textSize="15sp" android:layout_gravity="center_horizontal"/>
<com.quickcontact.CustomButton
android:id="#+id/butPersonal"
android:layout_width="match_parent"
android:layout_height="78dp"
android:background="#drawable/standard_button"
android:padding="1dp"
android:text="Personal"
android:textColor="#3f3f3f"
android:textSize="16sp" />
<com.quickcontact.CustomButton
android:id="#+id/butSocial"
android:layout_width="match_parent"
android:layout_height="78dp"
android:layout_marginTop="5dp"
android:background="#drawable/standard_button"
android:padding="1dp"
android:text="Social"
android:textColor="#3f3f3f"
android:textSize="16sp" />
<com.quickcontact.CustomButton
android:id="#+id/butBusiness"
android:layout_width="match_parent"
android:layout_height="78dp"
android:layout_marginTop="5dp"
android:background="#drawable/standard_button"
android:padding="1dp"
android:text="Business"
android:textColor="#3f3f3f"
android:textSize="16sp" android:layout_marginBottom="20dp"/>
<com.quickcontact.CustomButton
android:id="#+id/butNext"
android:layout_width="fill_parent"
android:layout_height="58dp"
android:background="#drawable/blue_button"
android:gravity="center_vertical|center_horizontal"
android:paddingBottom="1dp"
android:text="NEXT"
android:textColor="#3f3f3f"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
The Galaxy Nexus is an xhdpi device. Is the background image located in the /res/drawable-xhdpi/ directory?
Another option, if your background just a gradient then you could write a gradient script in xml and just place it in your /res/layout/app_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<item>
<shape>
<gradient
android:startColor="#color/green2"
android:endColor="#color/green1"
android:gradientRadius="555"
android:type="radial" />
</shape>
</item>
</selector>
Then reference your background as android:background="#layout/app_bg"
My preference is to create one single layout style xml for consistent styles throughout the app and then just include them in all other xml layouts.