Hi guys I want to have an image that I got from the Vector Asset tab to filled the entire screen on my GridView items. Currently,it looks like this at the moment. I want to have all my TextViews and ImageView to be inside of this if possible.
Here is the necessary code
This is the XML layout that my GridView currently adapts and inflate with. Look at the top part of the code to save time to see the --> android:background="#drawable/ic_folder_white_24dp">
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_folder_white_24dp">
<!-- android:background="#drawable/text_view_border">-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:id="#+id/check_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/date_created"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="15sp"
android:gravity="center" />
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/black"
android:gravity="center"/>
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:padding="8dp"
android:textColor="#color/black"
android:layout_height="250dp" />
<ImageView
android:id="#+id/psw_lock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_lock_black_24dp"
android:layout_gravity="end"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:visibility="invisible"
/>
</LinearLayout>
Here is my GridView code in my mainActivity.xml though I don't think its revelant
<GridView
android:id="#+id/grid_view"
android:layout_below="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:numColumns="2">
</GridView>
Lastly here is my drawable image itself. I try messing with the values though nothing points to the right direction. By default it got me 24dp.
<vector android:height="24dp" android:tint="#FFDF00"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M10,4H4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V8c0,-1.1 -0.9,-2 -2,-2h-8l-2,-2z"/>
</vector>
Any help would be appreciative.
If you mean you want a folder on each grid item, with all the other views inside it, you'll need to set some padding on the item's layout or margins on its views, so they don't overlap the edges. Whatever works to fit the image!
If you mean you want one big folder as the entire background, you'll need to set that as the background to the GridView area in your activity's layout file. So it's the background of the whole grid container, not separate backgrounds for each item.
Also I don't think you can avoid the background being stretched to fit the view, so you'll probably need to add an ImageView with scaleType="fitCenter" or something (and you won't be able to use a LinearLayout to overlay something on that image)
I'm using Imageview to show images and I"m using background drawable shape xml to show the image in circular shape.
It works fine when I preload the image, but I have set Onclick listener where user can edit and change user profile picture but when user selects image then it show rectunglar imageview instead of circulr.
How can I fixed it..
Here is the xml code
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/itemImage1"
android:background="#drawable/shape"
android:layout_marginLeft="5dp"
android:layout_marginBottom="20dp"
android:src="#android:drawable/ic_menu_camera"
android:cropToPadding="true"
android:scaleType="fitXY" />
and background shape xml file is
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="#color/white">
</solid>
<corners
android:radius="7dp" >
</corners>
</shape>
Thanks in advance.
You can use this library.ı can use this for circle ımage view.İt is easy.
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civProfilPicture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/ic_camera"
/>
source:https://github.com/hdodenhof/CircleImageView
I think you want like this.You can use FrameLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_margin="#dimen/small_padding"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civProfilPicture"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="#dimen/small_padding"
android:background="#drawable/ic_profil"
/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/ic_edit"
/>
</FrameLayout>
Ok this is something I can do in iOS in like five minutes.. but I can't seem to get it for android:
i simply want to show a progress bar ontop of a button. I managed to render the progress bar just fine beside the button like so
using this code
<RelativeLayout
android:id="#+id/readBookContainer"
android:layout_below="#+id/image"
android:layout_marginLeft="#dimen/margin_medium"
android:layout_alignRight="#+id/ratingBar"
android:gravity="center"
android:layout_width="300dp"
android:layout_height="40dp">
<Button
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
android:elevation="#dimen/margin_xsmall"
android:singleLine="true"
android:textSize="14sp"
android:text="#string/download"
android:layout_width="200dp"
android:gravity="left"
android:layout_height="match_parent"
android:textColor="#color/book_item_bg" />
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_toLeftOf="#id/readBook"
android:layout_marginRight="20dp"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
however i can't seem to be able to do this:
i tried stuff like this (framelayout, relative layout)..
<FrameLayout
android:id="#+id/readBookContainer"
android:layout_below="#+id/image"
android:layout_marginLeft="#dimen/margin_medium"
android:layout_alignRight="#+id/ratingBar"
android:gravity="center"
android:layout_width="100dp"
android:layout_height="40dp">
<android.support.v4.widget.ContentLoadingProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_gravity="right|center"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
<Button
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
android:elevation="#dimen/margin_xsmall"
android:singleLine="true"
android:textSize="14sp"
android:text="#string/download"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/book_item_bg" />
but it doesn't work.. (i tried substituting the library progress bar with android's but no luck).. ideas?
update
this is what the final thing looks like (based on the correct answer below):
<LinearLayout
android:id="#+id/readBook"
android:background="#drawable/button_read_now"
style="#style/Widget.AppCompat.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="#string/download"
android:textAppearance="#style/TextAppearance.AppCompat.Button" android:textColor="#FFFFFF"/>
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:indeterminate="true"
android:visibility="invisible"
android:tint="#ffffff"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
</LinearLayout>
Starting from API level 21, a default Button (which is called a raised button in Material Design) has a resting elevation and a pressed elevation.
For example in API level 23 The values are 2dp and 6dp respectively.
Your ProgressBar is in the correct position, however it's below the Button because its elevation is 0.
So by simply adding an elevation greater than 6dp to your ProgressBar you can make it appear above the button.
android:elevation="7dp"
Alternatively, you can create a layout to mimic a button and give it a button style:
<LinearLayout
style="#style/Widget.AppCompat.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Button"
android:textAppearance="#style/TextAppearance.AppCompat.Button"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
The second approach is more forward compatible since the elevation might change in a future release.
For example in API level 21 the values were 1dp and 3dp
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>
This is API level 23
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">2dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">4dp</dimen>
You can wrap it to the RelativeLayout.
create parent RelativeLayout having background same as of your button.
Using Buttons will add the borders to view so you can use Textview with selector.xml which will work as Button. check here.
place Textview inside the RelativeLayout and align the ProgressBar to the Right of Textview.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_read_now"
>
<TextView
android:id="#+id/readBook"
android:gravity="center"
android:clickable="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:background="#drawable/selector"
android:singleLine="true"
android:textSize="14sp"
android:text="download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white" />
<android.support.v4.widget.ContentLoadingProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/readBook"
style="?android:attr/progressBarStyleSmall"
android:visibility="visible"/>
</RelativeLayout>
The problem is in Button style. You can find more information in this answer https://stackoverflow.com/a/32898915/1554094
Remove following
android:layout_toLeftOf="#id/readBook"
from
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/read_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:tint="#000000"
android:layout_toLeftOf="#id/readBook"// remove this
android:layout_marginRight="20dp"
style="#style/Widget.MaterialProgressBar.ProgressBar.Small" />
android:layout_toLeftOf="#id/readBook"
I have a simple layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
and this is the output:
But I want the button with the background to stay the same size as it would without an image as a background (the right one). Basically, I want to "place" the button over the image so that the center of the image is on the button background, but the button doesn't resize to fit the whole background.
I have tried android:scaleType="centerCrop" on the Button but it didn't change anything. Any help is appreciated, thanks
Edit The size of the button needs to wrap_content because the text is dynamic
The button width and height are set to wrap_content. In this case, the background Image is a content, too.
Simply change width and height to the value you want:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
If you want all buttons to have the same size, consider creating a dimen value:
Dimen
<resources>
<dimen name="button_width">100dp</dimen>
<dimen name="button_height">50dp</dimen>
</resources>
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="#dimen/button_with"
android:layout_height="#dimen/button_height"
android:layout_weight="1"
android:background="#drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/button6"
android:layout_width="#dimen/button_with"
android:layout_height="#dimen/button_height"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
Also, consider using a ImageButton for your purpose.
ImageButton
EDIT
Try this out:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_background"
android:layout_alignStart="#+id/buttonId"
android:layout_alignEnd="#+id/buttonId"
android:layout_alignTop="#+id/buttonId"
android:layout_alignBottom="#+id/buttonId"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonId"/>
</RelativeLayout>
Additionally, add a scaleType to the ImageView to make it centered, streched, whatever...
android:scaleType="center"
EDIT 2
adding padding to the button works for me:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_settings"
android:layout_alignStart="#+id/buttonId"
android:layout_alignEnd="#+id/buttonId"
android:layout_alignTop="#+id/buttonId"
android:layout_alignBottom="#+id/buttonId"
android:scaleType="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="#+id/buttonId"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_settings"
android:layout_alignStart="#+id/buttonId2"
android:layout_alignEnd="#+id/buttonId2"
android:layout_alignTop="#+id/buttonId2"
android:layout_alignBottom="#+id/buttonId2"
android:scaleType="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="#+id/buttonId2"/>
</RelativeLayout>
Note: You can't really see the paddingStart and paddingEnd in the screenshot, but it works just fine.
To expand on the nine-patch suggestion, Android supports the ability to use a nine-patch image to scale an image for a button/view group to any size. One caveat is that the image has to be one that fits the nine-patch requirement -- generally speaking, image where the corners are constant, and the middle/edges must be able to scale to any dimension. If your image is a photo for instance, it won't work. Most nine-patch images have a solid color center and 'simple' edges.
The first step is to create a nine-patch drawable in your drawable folder that references your nine-patch image. The nine-patch image should have a filename similar to *.9.png.
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/button_image" />
Once this is done, you can add the background property to the Button and it should scale seamlessly with the content (the background property below should refer to the <nine-patch> XML resource you created above.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:text="My button"/>
I will note that your image in particular, with the horizontal lines, looks like a bad candidate for the nine-patch solution, but it might be worth a look if you're flexible on the image used.
I would like to have an image set to background a text on it and an icon on the left side of the text.
Very easy in iPhone, but can't figure out how to do it at Android, to be resizable that button and keep the icon + text position and distance properly.
iPhone:
Android I have this:
The xml code is:
<Button
android:id="#+id/btSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/tvWhatever"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:background="#drawable/bt_general"
android:drawableTop="#drawable/settings_selected"
android:text="#string/settings"
android:textColor="#000000" />
Took the code from here.
If I use android:drawableLeft , than the icon will go to most left part.
If I start playing with semi hardcoded paddings, than I will have different look at diff devives: ( phone and table)
If I add the android:gravity="left|center_vertical" than it will look like this:
The text is variable: it will change, when the user change the language.
How to do it properly?
I don't want to downvote anybody's answer, but please read the question and don't suggest what I have tryed already. Also told the hardcoded fixes doesn't work well.
This is not a homework, but a commercial software part.
Here is a suggested code from answers:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bt_general"
android:padding="20dip" >
<ImageView
android:id="#+id/xIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dip"
android:src="#drawable/settings_selected" />
<TextView
android:id="#+id/xSettingsTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/settings"
android:textColor="#000000" />
</RelativeLayout>
What do you think how it will look like the android:layout_marginLeft="10dip" on Galaxy s4? Here is a preview:
This is not, what I have asked. "dip" or "dp" or "px" shouldn't be used anywhere as distance from left, top, because phones has HPDI, smaller screen and Tablets has MDPI and wide resolutions. Simple doesn't work on mdpi, and xxhdpi.
Nizam answer is very close to a good solution:
Maybe you should use RelativeLayout with rounded corners, than put TextView and ImageView inside of it.
Try this:
Button button = (Button) findViewById(R.id.button1);
Spannable buttonLabel = new SpannableString(" Settings");
buttonLabel.setSpan(new ImageSpan(getApplicationContext(), R.drawable.settings_selected,
ImageSpan.ALIGN_BOTTOM), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(buttonLabel);
Try this:
Follow this : http://porcupineprogrammer.blogspot.in/2013/03/android-ui-struggles-making-button-with.html
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableLeft="#android:drawable/ic_delete"
android:gravity="center"
android:text="Button Challenge" />
</FrameLayout>
Here is how i do things :
LAYERS
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/rounded_border"/>
<item android:drawable="#drawable/selector_button"/>
</layer-list>
SELECTOR
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/clr_grey_1" android:state_selected="true" android:state_window_focused="false"/>
<item android:drawable="#color/clr_grey_1" android:state_selected="true"/>
<item android:drawable="#color/clr_grey_1" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="#color/clr_main_green" android:state_selected="false"/>
</selector>
ROUNDED CORNER
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/clr_grey_2" />
<stroke
android:width="1dp"
android:color="#android:color/white" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<padding
android:bottom="0dp"
android:left="4dp"
android:right="0dp"
android:top="4dp" />
</shape>
Use this on relative layout, with an imageview and button inside it
Try below layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100dip"
android:orientation="horizontal"
android:background="#drawable/round_corners_drawable" >
<ImageView
android:id="#+id/xIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/xSettingsTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:layout_centerInParent="true" />
</RelativeLayout>
and drawable/round_corner_drawable is as below:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#310704"/>
<corners
android:bottomRightRadius="20sp"
android:bottomLeftRadius="20sp"
android:topLeftRadius="20sp"
android:topRightRadius="20sp"/>
<gradient
android:startColor="#99310704"
android:centerColor="#99310704"
android:endColor="#99310704"
android:angle="270" />
</shape>
Also, if you want to use your image as a background, give android:layout_height="wrap_content" and set it as a background for relative layout.
p.s. If you put different color values for startColor, centerColor and endColor, you will get that gradient effect for your background drawable. So change the color values accordingly.
EDIT:
Try below layout, i edited it to fit in different screen sizes with rounded corner drawable.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dip"
android:background="#drawable/dialog_round_corners" >
<ImageView
android:id="#+id/xIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/xSettingsTxt"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/xSettingsTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:layout_centerInParent="true" />
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Text"
android:background="#drawable/round_background"
android:drawableLeft="#drawable/icon"/>
save the xml code below as round_background.xml and put it on drawable folder. use this if you want, but you can also use image from the drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#f5f5f5" />
<corners android:radius="10px" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<stroke
android:width="1dp"
android:color="#ccc" />
</shape>
I had achieved that with following code. May be used as an easier alternative to above solutions.
<Button android:id="#+id/btnUserProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:drawableLeft="#drawable/ic_user_profile"
android:background="#6C6C6C"
android:drawablePadding="8dp"
android:gravity="left|center_vertical"
android:text="#string/my_profile"
android:textStyle="bold|italic" />
the button view is marked in red(this is not a list item but a button with above code):
Found a class called CenteredIconButton that extends Button at this link. Worked like magic. How to have Image and Text Center within a Button . Thanks to #atomicode
If your button width: android:layout_width="wrap_content" then your code will be like this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/img name"
android:gravity="left|center"
android:text="Button" />
Else if your button width: android:layout_width="match_parent" then your code will be like this:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/img name"
android:gravity="left|center"
android:text="Button"
android:paddingLeft="100dp"
/>
By the way android:paddingLeft="100dp", change 100 with your suitable value.
<Button
android:id="#+id/btSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back_button"
android:drawablePadding="5dp"
android:drawableLeft="#drawable/ic_launcher"
android:text="Settings"
android:padding="20dp"
android:textColor="#000000" />
You can use paddingLeft and paddingRight to get button as the one in iphone
Try to use TextView,
<TextView
android:id="#+id/txtSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/tvWhatever"
android:layout_centerHorizontal="true"
android:text="#string/settings"
android:textColor="#000000" />
In Java
txtView.setBackgroundResources(R.drawable.bt_general);
txtView.setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top,Drawable right,Drawable bottom);
where Drawable image is,
Bitmap bitmap= BitmapFactory.decodeResource(context.getResources(),
R.drawable.settings_selected);
BitmapDrawable drawable=new BitmapDrawable(getResources(), bitmap);
I just implemented this kind of button (and it has been deployed in a large scale app), it is not really complicated :
content of large_button.xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/large_button_background"
android:clickable="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginRight="16dp"
android:src="#drawable/some_icon" />
<com.my.app.widget.RobotoTextView
android:id="#+id/large_button_text"
style="#style/AppName_RobotoBold"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:focusable="false"
android:gravity="center_vertical"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/text_main"
/>
</LinearLayout>
Then, to use it I just have to use the include tag :
<include
android:id="#+id/large_button"
android:layout_width="match_parent"
android:layout_height="#dimen/large_button_height"
android:layout_marginBottom="#dimen/large_button_vertical_margin"
android:layout_marginLeft="#dimen/large_button_horizontal_margin"
android:layout_marginRight="#dimen/large_button_horizontal_margin"
android:layout_marginTop="#dimen/large_button_vertical_margin"
layout="#layout/large_button" />
large_button_background is a selector that points to the different drawables to use for each button state
I used a LinearLayout, it allows to simply center both text & icons in the button. It should also be doable with a GridLayout. If you want to center just on the text (I don't think it looks great though but that's your choice), use a RelativeLayout.
You can use android:paddingLeft, android:paddingRight and layout_width at a fixed width to solve the issue.
<Button
android:id="#+id/btSettings"
android:layout_width="148dp"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:background="#drawable/bt_general"
android:drawableLeft="#drawable/settings_selected"
android:text="#string/settings"
android:textColor="#000000"/>
Check this link I found useful. http://porcupineprogrammer.blogspot.co.uk/2013/03/android-ui-struggles-making-button-with.html