I am working on an Android project in which I have a login page where I want to add Username and password fields. The design I have requires me to put them in this translucent manner and with an image inside. Any ideas what I can change for EditText to make it translucent and shape it, there are many threads to make it transparent by setting the background to null or by color and so on, but nothing like this I found.
Design :
I am using Relative layout, and those icons on right side, I have them in separate PNG files. I can directly add them inside Edittext, but I am concerned that if the username and password is long, it will start going over the image. Any strategies for that? Thank you.
Code :
<?xml version="1.0" encoding="utf-8"?>
<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:background="#drawable/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Text"
android:id="#+id/textView"
android:textSize="32sp"
android:textColor="#color/common_signin_btn_dark_text_default"
android:layout_marginTop="75dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
</RelativeLayout>
Updated screenshot
Updated EditText
<EditText
android:layout_width="wrap_content"
android:layout_height="45dp"
android:id="#+id/emailEditText"
android:inputType="textEmailAddress"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:drawableEnd="#drawable/Mail"
android:drawableRight="#drawable/Mail"
android:maxLines="1"
android:ellipsize="end"
android:hint="Email"
android:textColorHint="#color/common_signin_btn_dark_text_focused"
android:background="#drawable/layout_bg"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" >
</EditText>
layout_bg.xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/traslucent_background" />
<stroke android:width="1dip" android:color="#B1BCBE" />
<corners android:radius="17dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
For the image you should be able to use android:drawableEnd="#drawable/..." and android:drawableRight="#drawable/..." which also will limit the text length.
For the background you can define a custom drawable like this:
<!-- background_edittext.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/traslucent_background" />
</shape>
Where traslucent_color would be defined in colors.xml, for example, like this:
<color name="shadow_lighter_color">#64000000</color>
EDIT: this would be an example of how to use drawableEnd / drawableRight with a space between text and icon:
<EditText
android:background="#drawable/background_edittext"
android:drawablePadding="16dp"
android:drawableEnd="#drawable/icon"
android:drawableRight="#drawable/icon"
android:maxLines="1"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Try this:
Define a shape drawable in your project like this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#88ff0000"/>
<corners android:radius="32dp"/>
</shape>
And set it as the background for your EditTexts. Also, add this as an attribute to your EditText in the XML:
android:drawableRight="#drawable/any_drawable_file"
If you're concerned about the text overlapping with the drawable, you could add a custom paddingRight to your EditText to tackle that. It would save you the effort of inflating a custom layout.
Related
I have created a xml file called round_button. It's a simple circular button with a gradient. Here is the simple code
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="3000dip" />
<gradient android:type="linear" android:startColor="#8dbab3" android:endColor="#0DCAAC" />
</shape>
And that's the output:
Here is the code of the xml file of my main activity.
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/city"
android:text="Search"
android:background="#drawable/round_button"
/>
but the output is this one:
why it doen's have the gradient while the shape is correct?
Everything in your code is okay just change Button to androidx.appcompat.widget.AppCompatButton like below and you will be able to achieve your desire result.
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/city"
android:text="Search"
android:background="#drawable/round_button"
/>
Go to themes.xml and change parent.
parent=Theme.MaterialComponents.NoActionBar.Bridge
<style name="Theme.YourApp" parent="Theme.MaterialComponents.NoActionBar.Bridge">
//yourcode
</style>
I am new to android Studio and I am trying to create a rounded button using a drawable ressource. Here is the code I used and it seems to work fine when looking to the preview :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<stroke android:color="#color/grey" android:width="5dp" />
<solid android:color="#color/blue"/>
<size android:width="80dp" android:height="80dp"/>
</shape>
[1][1]: https://i.stack.imgur.com/jjiwd.png
The thing is that when I use this design in my layout (using the background), the shape will apply but not the colors and I don't know why. Here is the code and what it does :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="400dp">
<Button
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:text="Play"
android:background="#drawable/circle_button"
/>
<Button
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
android:background="#drawable/circle_button"/>
</LinearLayout>
[2] [2]: https://i.stack.imgur.com/aqGCB.png
I know I could use another shape like rectangle and do some modifications on the angle but I found it frustrating not being able to use the oval shape.
What should I do in order for this to work ?
Thanks in advance
Hello I'm using badge counter in navigation menu, but. I can't move to center vertically. I tried margin, height:match_parent but width shape not success.
( https://stackoverflow.com/a/33607630/4933464 )
Here my codes ( I use with shape ):
#drawable/menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ec443e" />
<padding
android:left="5dp"
android:right="5dp"
android:top="3dp"
android:bottom="3dp"/>
<corners android:radius="5dp" />
</shape>
#layout/menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/menu_counter"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#ffffff" />
Thanks.
Wrap it with a relative layout and add
android:layout_centerVertical="true"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:background="#drawable/menu_counter"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#ffffff" />
</RelativeLayout>
Original DrawerLayout doesn't support badges. But there is a many useful library
MaterialDrawer : https://github.com/mikepenz/MaterialDrawer
Screenshots aviable on github page.
I want to have a gap in a border which is around a LinearLayout. In this gap there should be text.
I think the image explains it very well:
Is this possible? I know how to create a border around the Layout but not how to do this gap with the text. I hope someone can help me.
Make my_drawable.xml file in your project's res/drawable folder:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000066" />
<corners
android:radius="10dp" />
<solid
android:color="#android:color/white"/>
</shape>
After it you can add it as a background for a LinearLayout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="300dp" <!-- Or whatever you want -->
android:layout_height="200dp" <!-- Or whatever you want -->
android:background="#drawable/my_drawable">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_marginLeft="20dp"
android:textColor="#android:color/black"
android:textStyle="bold"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
</RelativeLayout>
I'm trying to do a bottom-level menu like this:
I've defined the layout this way:
<LinearLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- First item of the menu -->
<ImageButton
android:id="#+id/BConex1"
android:contentDescription="#string/desc_gen_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:layout_gravity="left"
android:background="#drawable/menu_bottom"
android:layout_marginLeft="4dp" />
<!-- Second item of the menu -->
<ImageButton
android:id="#+id/BConex2"
android:contentDescription="#string/desc_gen_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:layout_gravity="left"
android:background="#drawable/menu_bottom"
android:layout_marginLeft="4dp" />
<!-- ... Some additional items in the menu -->
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
The #drawable/menu_bottom is a layer-list, defined this way:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1px"
android:color="#55ffffff" />
<padding
android:left="16px"
android:top="6px"
android:right="16px"
android:bottom="6px" />
<solid
android:color="#cc000000" />
<gradient
android:startColor="#222222"
android:centerColor="#111111"
android:endColor="#000000"
android:angle="-90" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item>
<bitmap
android:src="#+drawable/bitmap_to_change"
android:tileMode="disabled"
android:width="30dp"
android:height="15dp"
android:gravity="center" />
</item>
</layer-list>
Now the thing is: I want to use exactly the same background for each button in the menu, in exception of the src field of the bitmap. I've tried to use LayoutInflater on one of the buttons and tried to change it programatically, like this:
View first = LayoutInflater.from(this).inflate(R.drawable.menu_bottom, null);
first.findViewById(R.drawable.bitmap_to_change).setBackground(this.getResources().getDrawable(R.drawable.another_resource));
But this returns an exception:
12-11 11:35:53.556: E/AndroidRuntime(897): java.lang.RuntimeException:
Unable to start activity ComponentInfo{XXX.MainActivity}:
android.view.InflateException: Binary XML file line #2: Error
inflating class layer-list
So I assume that's not the correct way. Is there a way to accomplish this instead of defining one XML file per menu item?
Thanks!
----------- EDIT -----------
I've found a "dirty" workaround to achieve my goal: getting the background of one of the buttons as a LayerDrawable and substituting the Bitmap with the correct. This is not the way I want to do it (as I want it entirely programatically) nor it's the original question, so I'm not going to answer myself letting the question opened in the hope someone can help, but here's what I'm doing now:
I assigned an id to the corresponding "item" in the XML file:
<item android:id="#+id:bitmap_layer">
And programatically:
ImageButton firstButton = (ImageButton) findViewById(R.id.BConex1);
LayerDrawable bg = (LayerDrawable) firstButton.getBackground();
bg.setDrawableByLayerId(R.id.bitmap_layer, getResources().getDrawable(R.drawable.the_new_drawable));
You don´t need to use the iflater, getting the Drawable resurse is enough:
android.graphics.drawable.Drawable shape = getResources().getDrawable(R.drawable.item_panel_borde);
with your workaroud you can get trouble if you use this drawable resource in other views, you can create your LayerList programatically using the android.graphics.drawable.LayerDrawable(Drawable[]) constructor.