i am trying to make myself a widget that shows a path using spinners, so between each spinner i want a / symbol....
Since the user changes the path all the time, its cumbersome to manage the interval views i added at first, and i wanted to give the divider parameter a shot... but it seems i can't get this working, using
android:divider="?android:dividerVertical"
i get a thin grey line between the spinners, but as soon as i put in
android:divider="#drawable/slash"
there's nothing, my drawable is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<rotate
android:fromDegrees="0"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:shape="line"
android:top="1dip" >
<stroke
android:width="2dip"
android:color="#000000" />
</shape>
</rotate>
</item>
</layer-list>
which i took from another post here on stackoverflow....
just to be sure, i tryed to add the drawable as a background for the linearlayout encapsulating the spinners, and i got a flat black line, so even if the rotation didn't seem to work, at least for the background, the drawable was found....
the minSdk is set to 21, so as far as i understand it, this should work?
got it solved somehow, i am puzzled though, the slash i took from another post here (unfortunately i didn't keep the link, and i don't find it again :( ), so i supposed it should have worked.
I worked through https://developer.android.com/guide/topics/resources/drawable-resource.html
and to get it working i had to add inside shape
<size android:width="20dip"
android:height="20dip" />
i would have preferred to say 2 ems, but i couldn't its my first with drawables, so at least on my 2 devices i tested it on, those 20 dip seem ok, i hope it will be ok for every other display.... i would have preferred something linked to the character size in the spinners... so if someone knows how to do that...
then, the rotate, didn't work as above, it produced a flat line, i had to change the angles to
android:fromDegrees="-45"
android:toDegrees="-45"
which is IMHO not logical, and not what was in the original example, nor implied by https://developer.android.com/guide/topics/resources/animation-resource.html
but as of now, the thing looks not nice, but functional enough, if anyone has a suggestion on how to get it nice, i am open for it ;)
Related
what is the essence of the question:
Why is the color that I write in solid in the shape not taken into account
Why do I have a white background on the back of the button now (attached a photo)? I don't understand where I can fix it
I found a video on YouTube and there was the following solution: Create an xml file in drawable and there I specified the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/teal_700"></solid>
</shape>
</item>
</selector>
The problem is that when the videos came out, there were no themes and everything worked out perfectly right away, and I tried to figure out why I didn't apply color to the button if I set it in the shape, but I never figured it out and it doesn't take into account my color that I set in solid :) I decided to change the primaryColor in the theme to the color I needed and then it applied.
And can you also throw, please, useful modern resources to the latest versions of android studio? I'm just learning, so I haven't found much yet and it would be interesting to see some examples for new updates, because all the videos are from earlier versions and some of them don't converge, as, for example, now in the question
If there are not enough details to solve the problem, then write to me
To make A Button Round Use MaterialButton
<com.google.android.material.button.MaterialButton
android:layout_width="100dp"
android:layout_height="50dp"
android:text="1"
app:cornerRadius="18dp" />
I was surfing the web to find a new style for the android layout and I find a pretty interesting one. Here is the Image.
I know more than basics about layout, but what I wanna is how can I give a 3d style look like in the above image? Especially that #7881 Code Box.
Here is Something that I have tried.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="-25dp"
android:top="-25dp"
android:left="25dp"
android:right="25dp">
<rotate android:fromDegrees="20">
<shape android:shape="rectangle">
<size
android:width="50dp"
android:height="100dp"/>
<solid android:color="#E30B3E"/>
</shape>
</rotate>
</item>
</layer-list>
The output is this
Overall it gives the textview a 3d look but I want something like that in the image.
Any Suggestions?
Its pretty much simple just use android:rotationX property on the CardView
like this
<com.google.android.material.card.MaterialCardView
...
android:rotationX="20"
...
That's easy as long as the box should not be animated in its shape.
Go to https://www.figma.com/ and start a new project (it's free)
Export any shape you create there as svg
Import this svg into Android Studio using the Resource Manager
add your new drawable as background of the box.
Additional input, so your 50 points aren't wasted ;) :
You find several Android Presets for figma. Like UI Elements or buttons. For example here. For more just google for "Figma Android UI kit"
You can edit the generated SVG to your likes. Since it is only a text file, you can customize its colors (also using backgroundTint in xml), etc.
So, I need to create three different buttons which look almost the same: all of them have rounded corners but different background colors. What I did is to have three different shapes created and give them a particular color. Although this approach gets the job done, I think there's gotta be a better and less cumbersome way to do this.
I've found a workaround to this by changing the background dynamically, but I was wondering whether there's an easier way to have this done without having to write any Java code.
This is the code for all three of the drawables:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="4dp"/>
<padding
android:bottom="15dp"
android:top="15dp"
android:left="15dp"
android:right="15dp" />
<solid
android:color="#color/green" />
</shape>
Is there any way to use "some kind of inheritance" to extend the code above to have three different "children" of this shape by only adding / overriding some of the parent's properties?
Thanks in advance!
I'm trying something that would sound fairly easy to implement. However, it doesn't respond as expected. I'm using a Progressbar to draw a 5 state bar, where the user can click on any of the states to change the behavior of the application. My progressbar uses this drawable (just pay attention to the background element).
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/statusbar_thin" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:endColor="#ffeeeeee"
android:startColor="#ffeeeeee" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/statusbar_thin" />
</item>
</layer-list>
This is the #drawable/statusbar_thin.
You may see they just don't look like vertically centered spots, but it doesn't matter. The problem is that, when the image is stretched (it's a 9 patch, as you may expect), the "superior black mark that expands the pixels below it" (I don't know how it's called. Anyone?) expands them randomly (By that I mean some parts expand twice more than others).
I'm not sure if there's a trick I didn't use, or it's just Android that uses indistinctly any block, instead of all of them evenly. Any ideas on that?
EDIT:
As #sandkasten suggested, I used the draw9patch application. However, as you see, it looks perfectly distributed, but on Nexus 7, it just doesn't work.
EDIT 2:
The status bar in black background. As you see, there's a big distance between the first and the second icon, while the selector is inbetween.
EDIT 3: Such an amazing world. I started playing with the top black marks, and, despite they weren't equally distributed at last, it worked.
If I understand you right, this should be the solution. Take a look at draw9patch.bat, which shows you a preview of your image and how android strech it. It's deliverd with the android sdk.
what I want to achieve is this:
As you can see there is are two tiny, yellow triangles (warning signs) in the EdiTtexts. I read, it's possible to achieve that by using Relative layout and simply have the images overlap the EditText. This however is not an option as I am writing a library project and can't limit the user to one particular layout type (such as RelativeLayout). Alternatively I read, it can be done in the onDraw method of a view. However, I will have no access to the onDraw method (or rather now way of overriding it). The one thing I have access to, is the Views itslef (like Spinner, EditText) or alternatively their wrapping view (Like LinearLayout etc...). I need to set this tiny icon not only on EditText but generally on Views such as Spinner, Button, EditText, etc....
One idea was to simply obtain the x/y coordinates of the View on which I want to draw that warning sign, but although I am able to get the coordinates I am quite at a loss as to how to actually do the drawing on the obtained view.
On an additional note: I am using code to generate the layout from non-android layout-xml files. That only matters in so far, that I am afraid android-layout-xml-based solutions are not an option. Furthermore I have to be able to dynamically add/remove those image overlays.
Please let me know, if there are further questions.
Thank you very much in advance & Best regards,
Ready4Android
EDIT
I had one idea but I am not sure how to carry it out: I could determine the on-screen coordinates of my Widgets (like Spinner, EditText, Button...) and then I could draw that little warning symbol on top of my canvas - without even touching the Widgets. So would it be easier to solve, if I just wanted to draw on the screen? It should be possible, non?
EDIT 2 (20.09)
I followed the advice from superM but since the Icon was stretched I tried to use a bitmap inside the item. Thing is: It places the icon at the correct place (left edge) but the skin of the button disappears - I guess because it's replaced by the bitmap...
Here is the original Button:
Here the Xml (the invisible shape is the same as in superM's post):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/sign_warning_overlay_shape"
android:top="5dip" android:right="5dip" android:bottom="5dip"
android:left="5dip" />
<item>
<bitmap android:src="#drawable/sign_warning" android:gravity="left" />
</item>
</layer-list>
and this is how it looks:
With the original posted layer list by superM - this one:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/sign_warning_overlay_shape"
android:top="5dip" android:right="5dip" android:bottom="5dip"
android:left="5dip" />
<item android:drawable="#drawable/sign_warning" android:top="5dip"
android:right="5dip" android:bottom="5dip" android:left="5dip" />
</layer-list>
the Button looks like this(seems like here too the icon replaces the button skin):
Could it be, that I am setting the layer list in a wrong way? What would be the correct code to set the layer list on a button? I am using this one:
button.setBackgroundResource(R.drawable.sign_warning_overlay_layer_list);
Edit 3 - Modified solution
This edit is based on the accepted answer - I decided to go for a bitmap embedded in an item because I had issues with the image being stretched - here is the layer_list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:drawable/btn_default"
android:top="5dip" android:right="5dip" android:bottom="5dip"
android:left="5dip" />
<item>
<bitmap android:src="#drawable/sign_warning" android:gravity="left" />
</item>
</layer-list>
Which can be set on the button like this:
button.setBackgroundDrawable(button.getResources().getDrawable( R.drawable.layer_list));
and produces the following result:
That's it folks :) !
Thanks for all the suggestions & Cheers,
Ready4Android
In the case you mentioned, I think that what you want can be easily done by setting android:drawableLeft.
For editText it is editText.setCompoundDrawables(left, top, right, bottom) where left, top, right and bottom are either drawables or null. For buttons you can set the image as background by using a layer-list and shape, where the first layer is transparent and should "wrap" your button and the second layer is the image. This is can be done with other views too.
Here's an example of layer-list with transparent background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#android:drawable/btn_default" <!--any default background from android:drawable-->
android:top="5dip"
android:right="5dip"
android:bottom="5dip"
android:left="5dip" />
<item
android:drawable="#drawable/my_drawable"
android:top="0dip"
android:right="0dip"
android:bottom="0dip"
android:left="0dip" />
</layer-list>
where background_transparent is:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#android:color/transparent"/>
<padding
android:top="0dip"
android:left="3dip"
android:bottom="5dip"
android:right="3dip" />
<corners
android:radius="4dip" />
</shape>
Buttons:
Simply set the text
using code:
button.setText("<img src=\"image_location\"/>Login");
using xml:
android:text="#string/mystring"
//mystring must be a string in strings.xml
//with a value of <img src="image_location"/>Login
EditTexts:
Your question is not clear 100%...
If you want the image to be behind the text, then the best way to achieve this is by setting a background with that image to the left and let it be a 9patch image that extends the empty space.
If you want the image to move to the right with the text entered, then you have a couple of ways to achieve it, one simple would be to use a listener to the text input and always make sure there is an at the end of the text. I have not tested this approach but I guess it works fine.
If you really need to be able to place arbitrary views over anything, you can take a look at PopupWindow and use View.getLocationInWindow to get co-ordinates for the views you want to overlay. You can take a look at an android standard usage for putting a little error marker floating over a textview in TextView.setError