I am trying to create an app and I have a design already as an image, but I can not clone the exact shape of the button which is above the tabs
I expect the same design in this image: below
Note:
0 and 0.00EGP should be variables
Create a XML file bottom_corner.xml for background
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#0091fa"/>
<stroke android:width="1dp"
android:color="#0091fa" />
<corners android:radius="10dp"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
Now create layout floated_button.xml and use this background here in the layout:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="#drawable/bottom_corner"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/tv_total_value"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="0"
android:textSize="18dp"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#fff"/>
<TextView
android:id="#+id/tv_egp_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.00 EGP"
android:textSize="22dp"
android:gravity="center"
android:paddingRight="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="#fff"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#fff"
android:layout_toRightOf="#+id/tv_total_value"/>
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Charge"
android:textSize="22dp"
android:gravity="center"
android:paddingRight="15dp"
android:paddingLeft="15dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/tv_total_value"
android:textColor="#fff"/>
</RelativeLayout>
For your specific problem, you can move forward like this:
First of all, you have to create a drawable file of round background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
Then, you can add the tag of image and place it, on the corner of the image where you want to place it. Then use drawable as background then adjust the TextView on it.
<ImageView
android:id="#+id/ivLauncher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/ivBg"
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/round_text_bg"
app:layout_constraintTop_toBottomOf="#id/ivLauncher"
app:layout_constraintBottom_toBottomOf="#id/ivLauncher"
app:layout_constraintLeft_toRightOf="#id/ivLauncher"
app:layout_constraintRight_toRightOf="#id/ivLauncher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#FFFFFF"
android:textSize="10dp"
app:layout_constraintTop_toTopOf="#id/ivBg"
app:layout_constraintBottom_toBottomOf="#id/ivBg"
app:layout_constraintLeft_toLeftOf="#id/ivBg"
app:layout_constraintRight_toRightOf="#id/ivBg"/>
Here is the result:
Flotted Button design on image corner
I want that when the user clicks the button, the background of it will change a bit to get the effect that it has been clicked.
The fragment of my activity XML file:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btnParse"
android:text="#string/get_games"
android:textColor="#FFF5F2"
android:textSize="20sp"
android:layout_marginBottom="93dp"
android:layout_alignParentBottom="true"
android:background="#drawable/buttonshape"
android:textStyle="italic"
android:textAlignment="center"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />
Button shape XML:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"
android:layout_width="match_parent"
android:layout_height="match_parent">
<corners
android:radius="100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<gradient
android:angle="45"
android:centerX="0"
android:centerColor="#A80C16"
android:startColor="#E8E8E8"
android:endColor="#FF0F0F"
android:type="linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<padding
android:left="42dp"
android:top="0dp"
android:right="50dp"
android:bottom="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<size
android:width="270dp"
android:height="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<stroke
android:width="3dp"
android:color="#878787"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</shape>
How can I achieve this effect? I tried to implement what I found on similar stackoverflow questions pages but it didn't work. I'm pretty new in Android development so I may don't know some basics...
Hy you can refere to this link
http://www.viralandroid.com/2015/09/how-to-change-android-button-on-click-press-color.html
and this one
how to change background image of button when clicked/focused?
Hope this will help you..Thanks
I have the following layer-list
<?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">
<solid android:color="#FF000000"/>
<stroke android:width="0dp" android:color="#FF000000" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
</item>
</layer-list>
This resource is a black background with some rounded border (Top left and top Right). I want put it in LinearLayout as background property and inside LinearLayour I want put a white Textview and a ImageView. I have the following code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="horizontal"
android:background="#drawable/profile_background_head_item">
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/origin"
android:gravity="center"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_config"/>
</LinearLayout>
The problem is that ImageView doesn't show, I think that it is due that my layer-list code, but I don't know how to solve it.
Any ideas?
Thanks
Your TextView's width is match_parent, and in a horizontal LinearLayout, that would push the ImageView offscreen.
I suggest using weights, try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="horizontal"
android:background="#drawable/profile_background_head_item">
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/origin"
android:gravity="center"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_config"/>
</LinearLayout>
This should have the TextView take up the rest of the horizontal space the ImageView leaves.
I have a little problem with my edittext fields, when you type in it, the whole field turns black when I type # . - or any other symble.
<TableRow
android:id="#+id/tableEmail"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/cell_shape">
<TextView
android:id="#+id/textViewEmail"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:ems="10"
android:gravity="top"
android:text="#string/email"
android:textColor="#000000" />
<EditText
android:id="#+id/inputEmail"
android:layout_width="370dp"
android:layout_height="35dp"
android:background="#drawable/edit"
android:layout_marginBottom="2dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:ems="10"
android:inputType="text" >
</EditText>
</TableRow>
I did try to chage the input type to textEmail, but it is the same.
My cell_shape looks like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape= "rectangle" >
<solid android:color="#fff"/>
<stroke android:width="1dp" android:color="#000"/>
</shape>
any ides?
edit
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#ffffff" />
</shape>
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