Inflating drawable from XML - java

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.

Related

Why the button doesn't get all the attributes from xml

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 need a design like that but I'm facing two problems

I need a template for my list view with the following item design
I've tried some code I found but I did not get the result I need.
<item
android:bottom="-32dp"
android:left="-3dp"
android:right="-2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<corners android:radius="32dp"/>
<stroke
android:width="2dp"
android:color="#fff" />
<solid android:color="#android:color/transparent" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="0dp" />
</shape>
</item>
this is my linearlayout background.
Though we can use png for this or or image to get this .
but if you really want to do this this drawable then here the code .
I tried and result was pretty same .
I have created a drawable using two layer list , that contains two different rectangle .
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="10dip">
<shape
android:shape="rectangle"
android:useLevel="false">
<corners android:radius="12dp" />
<stroke
android:width="2dp"
android:color="#ffffff" />
<size
android:width="60dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:top="20dip">
<shape android:shape="rectangle">
<solid android:color="#800080" />
</shape>
</item>
You can use this in your view as background . I have used this in mine , so i am adding code of my item view .
<?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:background="#800080">
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_18"
android:background="#drawable/sample">
<TextView
android:id="#+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Crime Title"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/crime_solved"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingBottom="8dp"
android:text="Crime Date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#id/crime_title"
app:layout_constraintStart_toStartOf="#id/crime_title"
app:layout_constraintTop_toBottomOf="#+id/crime_title" />
<ImageView
android:id="#+id/crime_solved"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/crime_date"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/crime_title"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_solved" />
</android.support.constraint.ConstraintLayout>
Hope this will be helpful .
Instead of using xml drawable, you can Create a 9-patch image for that shape, that might help.
Create that shape in your favourite image-editor and copy that to drawable directory of your project.
In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click Create 9-patch file.
Type a file name for your NinePatch image, and click OK. Your image will be created with the .9.png file extension.
Double-click your new NinePatch file to open it in Android Studio. Your workspace will now open.
The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.
Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
When done, click File > Save to save your changes.

Android : Create translucent edittext with image inside

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.

How can I achieve a gap in a border around a LinearLayout?

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>

change background of text field in searchview of android sdk

I am making an app and I have an activity with a searchview. My point is that I want to change the background color of the text field (the black rectangle in screnn shot).
My drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
My layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".SearchActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="160sp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/search_background"
android:orientation="vertical" >
<SearchView
android:id="#+id/searchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20sp"
android:layout_marginRight="20sp"
android:layout_marginTop="60sp"
android:actionViewClass="android.widget.SearchView"
android:background="#drawable/searchview"
android:iconifiedByDefault="false"
android:paddingLeft="10sp"
android:paddingTop="5sp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:showAsAction="collapseActionView"
android:focusable="false" >
</SearchView>
</LinearLayout>
Screenshot: http://imageshack.com/a/img829/3203/pd85.png
Can anybody help me with that?
thanks
After a little detective work you'll see that if you look at the source for the SearchView widget, you will see it extends LinearLayout with some added functionality. Looking at the line #242 it contains a widget (specifically a SearchAutoComplete which extends the AutoCompleteTextView which in the end extends EditText.
With that said, you'll need to modify the background attribute of that child element, with something on the lines of this:
SearchView c = findViewById(R.id.searchView);
EditText e = (EditText)c.findViewById(c.getContext().getResources().getIdentifier("android:id/search_src_text", null, null));
e.setBackgroundColor(Color.BLACK); //←If you just want a color
e.setBackground(getResources().getDrawable(R.drawable.YOUR_DRAWABLE));
//↑ If you want a drawable ↑
Useful links:
Source for SearchView
Works for me:
mSearchView.findViewById(android.support.v7.appcompat.R.id.search_plate).setBackground...
Also for voice button:
mSearchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn).setBackground...

Categories