How to create a semi-oval footer with buttons in android - android

Unfortunately I unable to understand the below design that's why asked like semi-oval footer.
Actually this is the footer design of a layout with two side buttons comes from one of the ios app. First I thought it like a bottom tab, but after some research i got to know that ,it is a footer with a FramaLayout, two buttons and one text to show the count, but still not sure what is this and how to do..
I added one footer in my layout and give it transparent-black background, but still unable to do this particular semi-oval style. suggestions and helps will be mostly appreciable.
Please suggest.
Thanks

I imagine your footer being a container: a LinearLayout (so that you can use weights) or a RelativeLayout.
Then it has a couple of clickable elements disposed horizontally (not giving details on this, assuming you can manage it by yourself)
Now, these two "clickables" (I'd use TextViews, so I can put the images and even text inside) have a semitransparent (50% black) background like these:
(rect_left)
and
(rect_rite)
To let the container background image see through.
I'm not so great at graphics, you will be able to make better pictures than mine. ;)
These ones just illustrate the concept.

You should create a new Drawable and use it as a background on a Relative/Linear Layout or View
Check this SO question and answer: Can I draw rectangle in XML?
As the question answer pair above gives an example of a rectangle you can modify it to be ovular:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>

Related

Is there any Library or Widget for add button in food ordering apps

I wanted to use a button like the Add Button that is used in an app like Zomato.
Below is the screenshot.
As you can an green add button and it has some features. is there any widget/library for this button. Or will i have to do it on my own?
Please suggest me a solution.
if you are looking for a library then here it is
https://android-arsenal.com/details/1/4136
Yes there is much better library, i've been using in my recently many
apps and i found it realy awesome.
Here you can check and use
ElegantNumberButton
Do it on your own for sure. Make xml background with round border to atchieve it.
It should look something like this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/green"/>
<corners android:radius="5dp"/></shape>
then use it on a FrameLayout or any other Layout containing other elements that your buttons needs

How to round the input text in EditText in Android

I want to have an EditText in Android which I can see the previous input in rounded box with the ability to remove it. Besides, I can write a new input and save it like the following image.
You may use nested views and add them dynamically. You don't have to show the tags in the EditText, instead, you could try to make a layout that contains the EditText and add TextViews dynamically into it. You can set a boarder as the background for the layout. You may define the border in the res/drawable folder and assign it to the layout that contains the tags and your EditText. And it would look like the picture you provided. The border.xml could be like this, you may play with the params:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="2dp"
android:color="#80FFFFFF" />
<corners android:radius="5dp" />
</shape>
Then you need to define the layout of the 'rounded box', we name it layout_tag.xml, which can be a simple LinearLayout with a customised background, i.e. the box. It should be very similar to the way you decorate the outer layout. The layout_tag.xml may contain a TextView. You may also add an ImageView or a button with the delete icon after the TextView and wrap these two views in your layout_tag.xml.
Then you need to add them dynamically into the search field layout, which you could find plenty of posts to help, such as:
Android: add a TextView to LinearLayout programatically.
In the above link, you may adjust the first piece of code block to your layout_tag.xml. The second piece of code tells you how to add the layout_tag dynamically into your outer layout, i.e. the container of the Tags.
At last, you can wire this up whenever a user submits a tag, also remember to add an OnClickListener on the delete image/button.

how to create custom shaped buttons in android

I knew this question is a duplicate but i couldnt figure out the solution for creating custom shaped buttons say circular,oval etc.
Doubt1: My objective is to perform an action only when the area inside the shape is clicked, nothing should be performed just outside the shape( say only circular area has to be atttached with a listener)
Doubt 2: Can i use png pictures of the shapes as backgrounds or should I use only shapes to draw them.
Pls give me a simple solution...
Thanks in advance..
try this link it will help you to create custom button.
http://angrytools.com/android/button/
all you have to do is save the button.xml file in your drawable folder and then set your button background as
android:background="#drawable/button.xml"
You should use ShapeDrawable for the job. If you made a circle button for example, nothing will happen if you clicked outside the circle area.
For example inside your drawable folder, make xml file circle_button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#9F2200"/>
<stroke android:width="2sp" android:color="#fff" />
</shape>
and in your button, set background="#drawable/circle_button"
As #MSaudi said ShapeDrawable will give you shaped buttons.
If you wanted to use PNG's that is more difficult.
I would approach it by extending the Button class and overriding the onTouchEvent method to only register a click when inside the shape required (possibly by checking if the view is transparent at the click location).
You can use ImageButtons and set oval or circular shaped images as background. I hope it helps

bigger text in smaller button for Android

Edit 4:
I solved it by creating a larger font, one that does fill the space. See solution posted below
Edit 3:
I have come to the conclusion that my problem as stated cannot be solved. The problem is that the fonts do not fill the image space because they are leaving room for descender like j and for umlauts above the capital letters. With further searching I find that negative padding, which is clearly what I need, is undefined so might do anything.
One solution would be to create custom fonts that fill the entire image space. Another is the suggestion below to use an imagebutton but my added complication of both needing a change in color on focus and a change in the basic image on program state complicates that solution to the point I can't figure that out.
Edit2: Added screen shot
Edit: Added code of drawable below.
I have tried every example I could find on stackoverflow and every answer from Google. I spent at least 3 hours last night before giving up. I sure could use some help on this if anyone knows the answer.
I have buttons on an Android app that is constrained in that the buttons can only be so big and the text in them needs to be readable in bright daylight so they need to be big. The solution is obvious, make the text a pixel smaller than the button. In other words, make the padding small. android:paddingTop="-10sp" does nothing. I have tried everything I could think of. To be clear, I want very little space between the top and bottom of the text inside a button and the edge of the button itself.
Here is an example of one of my buttons:
<Button
android:id="#+id/buttonSetTgt"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textHeader"
android:layout_alignParentLeft="true"
android:background="#drawable/button_start"
android:textColor="#android:color/white"
android:onClick="onSetTgt"
android:paddingLeft="6sp"
android:paddingRight="6sp"
android:paddingTop="0sp"
android:paddingBottom="0sp"
android:text="◎"
android:textSize="#dimen/menu"
android:textStyle="bold" />
button_start has some colors and rounded corners definitions.
It is shown with padding top and bottom of zero but negative numbers don't do the trick so the 0sp or -10sp are equivalent.
Here is the code for the drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#f07304"/>
<corners android:radius="7dp"/>
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#222222"/>
<corners android:radius="7dp"/>
</shape>
</item>
there is a nice facility provided...Imagebutton...
design the image(jpeg or png) as you want...place your text as you want any where in your image and simply set android:src="#drawable/yourimage
and here you go you will have the look as you want...
you can handle the ImageButton as normal button
try and implement this...
Try using margin instead of padding. Also, is your button background drawable wide enough to accommodate the text while preserving its proportions?
I found that you cannot specify negative padding so the solution was to make the fonts themselves larger, going almost all the way to where the padding starts. This means that t font needs to fill the area all the way to the top of the accent area and all the way down to the bottom of the descender area. What I did was found a program called Type 3.2 by CR8Software Solutions. You load your favorite font and copy one of the scaling actions to get a scale factor of about 1.56, make some adjustments to the baseline and font edges and save it. I probably could have gone a little bigger and actually gone above the top of the accent line. If I did it again, I would load a form character font to really see where the font space is. The trial version allows you to save up to about capital R so in my case where I just needed a few letters that was fine. Now I loaded the font into the "assets" folder and added code in the onCreate section of the code like this:
Typeface tf = Typeface.createFromAsset(this.getAssets(), "startline.ttf");
Button button = (Button) findViewById(R.id.buttonSync);
button.setTypeface(tf);
Button button2 = (Button) findViewById(R.id.buttonSetTgt);
button2.setTypeface(tf);
etc...
This allows me to change the size of the font and button without creating a new image and all the backgrounds and such work fine.

How to change the shape of an onClick highlight?

I currently have icons in a GridView on my app. When they are clicked, an orange square appears around them briefly as a highlight. The only problem is that I think this looks amateurish and would like to change the shape so that it clips the icon in the GridView instead of a large square. If you are unsure as to what I mean, it is carried out successfully in the Catch Notes app, on their dashboard/home screen. I was just wondering whether anybody knew a way to tackle this or if it is simply a small layout attribute.
https://play.google.com/store/apps/details?id=com.threebanana.notes&hl=en
Thanks in advance, all help would be appreciated!
It looks effectively like this EditText in the image below. The way that it borders the EditText in orange is exactly how it borders the icons in the home screen when clicked.
First, in your layout file, specify a drawable background:
android:background="#drawable/bg_your_view"
Then edit the bg_your_view file which is in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_your_view_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/bg_your_view_normal" android:state_focused="false"></item>
</selector>
At last, create corresponding drawable files for pressed and normal states:
bg_your_view_pressed.xml contains the shape, the color you want for highlight.
bg_your_view_normal.xml is similar, just without highlight effect.
I've decided that the easiest way to solve this problem is to simply reference another image when the image on the GridView has been clicked. This means that the second image can just be edited in Photoshop in order to have a glow around it.

Categories

Resources