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.
Related
I am trying to change the background color of a Button. I'm in Kotlin on SDK 21 on emulator.
A View and a Button are declared in the layout XML file
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
The API to set the color doesn't seem to work:
showButton.setBackgroundColor(0xff60a0e0.toInt()) <-- doesnt work
What works is:
myview.setBackgroundColor(0xff60a0e0.toInt()) <-- works, exact background color
showButton.setTextColor(0xff000050.toInt()) <-- works, exact text color
After trying further it seems that I can only set the alpha channel of the button, not the color:
setBackgroundColor( 0xff000000.toInt()) <-- works, opaque
setBackgroundColor( 0x00000000.toInt()) <-- works, transparent
Also same thing with:
showButton.setBackgroundColor(Color.GREEN) <-- doesnt work, button is opaque but not green
showButton.setBackgroundColor(Color.TRANSPARENT) <-- works, button is transparent
Any idea? Did I miss something in the other answers or the documentation?
Here is complete layout, it used to inflate a fragment, if that matters:
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dictionaryEntryRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layoutManager="LinearLayoutManager"
/>
</LinearLayout>
mButton.setBackgroundColor(ContextCompat.getColor(mContext, R.color.xxx));
Since you are using a Theme.MaterialComponents.Light.DarkActionBar theme, check the doc and just use the MaterialButton with app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/color_selector"
android:textColor="#FFF"
android:text="BUTTON"
/>
where color_selector can be a color or a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/..." android:state_enabled="true"/>
<item android:alpha="0.12" android:color="#color/..."/>
</selector>
You can change the colour two ways; through XML or through coding. I would recommend XML since it's easier to follow for beginners.
xml
add this attribute to set background color android:background="#000"
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fgkdjgdjsf"
android:background="#000"
/>
Coding:
showButton.setBackgroundColor(resources.getColor(R.color.colorPrimary))
showButton.setBackgroundColor(Color.BLACK)
In your layout, you are using
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
if you want to set textSize in Button, you should use
android:textSize="12dp"
and for background set in button your layout should be like :-
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#ff60a0e0"/>
OR You can also set color in colors.xml as :-
<color name="button_background">#ff60a0e0</color>
and then your button tag in your layout will be as
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#color/button_background"/>
Dynamic you can set color as
showButton.setBackgroundColor(ContextCompat.getColor(context!!, R.color.button_background))
now in kotlin(androidx) you can use this,
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonExploreAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAllCaps="false"
android:background="#drawable/select_yellow"
android:text="button"
android:textColor="#color/white"
/>
and select_yellow is your style xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#color/colorYellow"
android:width="#dimen/_1sdp"/>
<corners
android:radius="#dimen/_200sdp" />
<solid android:color="#color/colorYellow" />
</shape>
I used the "backgroundTint" to change the color, which did not allow the color to change after clicking. The problem was solved when I changed the color by "background" the button.
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.
Currently, I would like to have a proper ripple effect for my rectangle card.
The ripple effect I can achieve, is a small circle, which only propagate within a small click region.
Video captured at Android 6
https://www.youtube.com/watch?v=3zeBFqVPS38
However, I realize in Android 5, with same set of code, the ripple can cover entire rectangle region.
Video captured at Android 5
https://www.youtube.com/watch?v=wEkb-7TDI7k
How can I have a ripple effect, which propagates throughout my entire rectangle card? Or, I shouldn't have this expectation under Android 6?
Layout file
<?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:stateListAnimator="#anim/lift_up"
android:background="?attr/newsRowLayoutSelector"
android:clickable="true"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:orientation="vertical" >
<TextView
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="?attr/newsTitleTextViewSelector"
android:duplicateParentState="true"
android:text="TextView" />
<TextView
android:id="#+id/description_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/newsDescriptionTextViewColor"
android:textSize="14sp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:text="TextView" />
<TextView
android:id="#+id/date_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textColor="?attr/newsDateTextViewColor"
android:textSize="12sp"
android:text="TextView" />
</LinearLayout>
Background selector (?attr/newsRowLayoutSelector)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/news_card_ripple_material_light">
<item android:drawable="#drawable/news_card_material_light" />
</ripple>
#drawable/news_card_material_light
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/news_card_material_light" />
</shape>
These are the color being used.
<color name="news_card_material_light">#ffffffff</color>
<color name="news_card_ripple_material_light">#ffffcc80</color>
Thank you.
This is the default behavior of a ripple on Android M and up.
You can see this in Google now cards for example
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.
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.