I have an XML drawable that draws a red circle and centres a microphone image in the middle of it. I then have it on top of a relatively layout background. However, the design view layout looks exactly like I want it to, the device layout does not. Where is the discrepancy?
Drawable XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:width="125dp"
android:height="125dp"
android:gravity="center"
>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#FD91B5" />
<!--
<stroke
android:width="10dp"
android:color="#" />
-->
</shape>
</item>
<item
android:gravity="center"
android:width="26dp"
android:height="44dp"
android:drawable="#drawable/kiosk_microphone"
/>
</layer-list>
View XML (Look for the ImageButton)
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/kiosk_bg_default_view">
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:text="Close"
android:id="#+id/kiosk_close_button"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false"
android:layout_alignParentTop="true" />
<ImageButton
style="#style/Base.Widget.AppCompat.ActionButton"
app:layout_widthPercent="34%"
app:layout_heightPercent="34%"
android:scaleType="fitCenter"
android:src="#drawable/kiosk_record_circle"
android:id="#+id/kiosk_record_button"
app:layout_marginTopPercent="33%"
app:layout_marginLeftPercent="23%"
/>
<LinearLayout
app:layout_marginTopPercent="10%"
app:layout_marginLeftPercent="5%"
android:orientation="vertical"
android:background="#android:color/darker_gray"
app:layout_widthPercent="25%"
app:layout_heightPercent="20%"
>
<me.grantland.widget.AutofitTextView
android:text="3:45 PM"
android:textSize="45sp"
android:textColor="#B9CFDF"
android:id="#+id/time_textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:maxLines="1"
android:layout_weight="1"
/>
<me.grantland.widget.AutofitTextView
android:text="Monday, December 15th, 2016"
android:textSize="10sp"
android:textColor="#B9CFDF"
android:id="#+id/date_textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:maxLines="1"
android:layout_weight="3"
/>
</LinearLayout>
<LinearLayout
app:layout_widthPercent="25%"
app:layout_heightPercent="20%"
app:layout_marginTopPercent="10%"
app:layout_marginLeftPercent="60%"
android:orientation="vertical"
android:background="#android:color/darker_gray"
>
<me.grantland.widget.AutofitTextView
android:text="25 deg"
android:textSize="45sp"
android:textColor="#android:color/white"
android:id="#+id/weather_textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:maxLines="1"
android:gravity="center"
/>
<me.grantland.widget.AutofitTextView
android:text="Island Park, NY"
android:textSize="10sp"
android:textColor="#android:color/white"
android:id="#+id/location_textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:gravity="center"
android:maxLines="1"
/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
I want this
But I get this
circularbutton.xml in your drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#FD91B5"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#FD91B9"/>
</shape>
</item>
Edit the color for Pressed State as per your wish.
Add circularbutton.xml to your ImageView
<ImageButton
style="#style/Base.Widget.AppCompat.ActionButton"
app:layout_widthPercent="34%"
app:layout_heightPercent="34%"
android:scaleType="fitXY"
android:src="your_image"
android:background="#drawable/circularbutton"
android:id="#+id/kiosk_record_button"
app:layout_marginTopPercent="33%"
app:layout_marginLeftPercent="23%"
/>
If scaleType doesn't work, you can apply padding to make the icon smaller.
Doing something like :
android:width="125dp"
android:height="125dp"
And:
android:width="26dp"
android:height="44dp"
And on the button:
android:layout_height="60dp"
Is destined to backfire on you, because it will not look the same on different devices. Especially if you try to combine a few different items together each of whom has some random values like this. This is due to a significant discrepancy in screen sizes and screen densities among Android devices. You can make it work on one screen properly, and yet it can look completely different on other screens.
For this kind of thing, since you basically need an icon, you can use a drawable or an SVG file.
EDIT
As an alternative solution, I thought of using this SVG as the src of your imageButton and the button should have the custom circular shape like in this answer.
Related
I need to create a circle inside a button like the ones you'll see in the next picture:
But my problem is I'm already using background property of button to add a nice shadow effect in the following way:
android:background="#android:drawable/dialog_holo_light_frame"
so I guess I cannot use background for both purposes.
This is how my buttons currently look:
Any idea on how to get both, the same nice shadow effect and a circle inside? Maybe it is possible with the "Style" property? (don't know)
You can use a CardView like:
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:cardCornerRadius="5sp"
app:cardElevation="10dp"
app:strokeColor="#color/black"
app:strokeWidth="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Test"
android:textColor="#color/black"
android:textSize="20sp" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="1"
android:textColor="#fff" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
round_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
</selector>
I want to change the color of my Divider for that I am following solution : Change the color of divider in LinearLayout. but my divider not showning
Code :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:divider="#drawable/devider"
android:dividerPadding="12dip"
android:showDividers="middle"
android:layout_gravity="center"
android:gravity="center"
android:background="?android:selectableItemBackground"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/textview2"
android:layout_gravity="center"
android:gravity="center"
android:background="?android:selectableItemBackground"
android:text="This is demo of Boderless Button"
android:textColor="#2d2d2d"
android:textSize="20dp"
/>
<ImageButton
style="?android:borderlessButtonStyle"
android:src="#drawable/ic_datarecord"
android:layout_width="wrap_content"
android:id="#+id/imageButton2"
android:layout_height="wrap_content" />
</LinearLayout>
Divide Drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="5dip" />
<solid android:color="#f00" />
</selector>
observed thing : if I use android:divider="?android:dividerVertical" then divider is working
Use this in your drawable xml like following
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="5dip" />
<solid android:color="#f00" />
</shape>
I created a drawable for EditText and set it as background(#drawable/edttxt_bg2) to the EditText. When I set the drawable to the view the parent RelativeLayout turns grey in the design preview. I tried cleaning and rebuilding the project and also invalidating caches. After doing that it displays correctly. Whenever I make changes to the views it changes the RelativeLayout color changes back to grey.
upload_lyt.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edt_txt_bg"
android:layout_marginTop="#dimen/rgstr_mrgn_top"
android:layout_marginLeft="#dimen/rgstr_mrgn_sides"
android:layout_marginRight="#dimen/rgstr_mrgn_sides">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/upload_lbl"
android:textColor="#ffffff"
android:background="#1565C0"
android:text="ENTER THE PAGE DETAILS"
android:gravity="center"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_edtxt_hght"
android:layout_below="#+id/upload_lbl"
android:background="#drawable/edttxt_bg2"
android:id="#+id/fb_uri"
android:gravity="center"
android:inputType="textPersonName"
android:layout_marginTop="#dimen/upld_edttxt_mrgn_top"/>
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_edtxt_hght"
android:layout_below="#+id/fb_uri"
android:background="#drawable/edttxt_bg2"
android:id="#+id/price"
android:gravity="center"
android:inputType="numberDecimal"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/price"
android:id="#+id/qstnlbl"
android:gravity="center"
android:textSize="20sp"
android:layout_marginTop="#dimen/rgstr_edttxt_mrgn_top"
android:text="Where is the page mostly targetted? Care to specify location?"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/qstnlbl"
android:textSize="20sp"
android:id="#+id/neg_lbl"
android:text="Negotiable?"
android:gravity="center"
android:layout_marginTop="#dimen/rgstr_edttxt_mrgn_top"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/neg_lyt"
android:layout_marginTop="#dimen/neg_mrgn_top"
android:layout_below="#+id/neg_lbl">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/no"
android:text="No"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/neg_mrgn_sds"
/>
<com.suke.widget.SwitchButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:id="#+id/switch1"
app:sb_uncheckcircle_width="0dp"
app:sb_uncheckcircle_color="#android:color/transparent"
app:sb_checkline_width="0dp"
app:sb_button_color="#1565C0"
app:sb_checkline_color="#android:color/transparent"
app:sb_uncheck_color="#1565C0"
app:sb_checked_color="#1565C0"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/yes"
android:text="Yes"
android:textColor="#1565C0"
android:textSize="20sp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/neg_mrgn_sds">
</TextView>
</RelativeLayout>
<Button
android:layout_below="#+id/neg_lyt"
android:layout_marginTop="#dimen/rgstr_btn_top"
android:background="#drawable/otp_btn"
android:textColor="#ffffff"
android:text="UPLOAD"
android:id="#+id/upload"
android:layout_marginBottom="30dp"
android:layout_marginRight="#dimen/rgstr_btn_mrgn_sides"
android:layout_marginLeft="#dimen/rgstr_btn_mrgn_sides"
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_btn_hght"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>
#drawable/edttxt_bg2:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FAFAFA">
</solid>
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>
</shape>
#drawable/edt_txt_bg
<?xml version="1.0" encoding="utf-8"?>
<layer-list>
<item
xmlns:android="http://schemas.android.com/apk/res/android"
android:top="-2dp"
android:bottom="2dp"
android:left ="-2dp"
android:right="-2dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ffffff"></solid>
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>
</shape>
</item>
</layer-list>
Layout Picture:
remove these lines from #drawable/edt_txt_bg.It will work. You have not defined any fixed dimension for stroke. That's the main reason.
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>
Don't force to change the Theme in layout xml, implement new style in styles.xml if you want to use custom actionbar.
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="contentInsetStart">0dp</item>
<!--<item name="contentInsetEnd">0dp</item>-->
<item name="android:windowContentOverlay">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
Then in AndroidManifest.xml, set this theme to your activity or application tag.
android:theme="#style/CustomTheme"
Hope it helps.
I'm making an app with it's contents inside card-like views but I am having a couple of problems:
I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.
The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?
Check this screenshot for better understanding: http://imgur.com/qsoCFrB
Here's the code to the card background and the interface itself:
card_bg:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="1dp"/>
<solid android:color="#bdbdbd" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="4dp" />
</shape>
</item>
</layer-list>
main acitivity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg" >
<ImageView
android:id="#+id/iconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:src="#drawable/icon_example" />
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cardText0001"
android:layout_marginTop="4dp"
android:background="#drawable/card_label" />
<TextView
android:id="#+id/cardTitle0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/cardText0001"
android:layout_toRightOf="#+id/iconView0001"
android:fontFamily="sans-serif-condensed"
android:maxLines="2"
android:paddingLeft="4dp"
android:lineSpacingExtra="-6dp"
android:text="#string/card_title_002"
android:textColor="#717171"
android:textSize="16sp" />
<TextView
android:id="#+id/cardText0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iconView0001"
android:fontFamily="sans-serif"
android:layout_marginTop="4dp"
android:maxLines="1"
android:text="#string/card_desc_002"
android:textColor="#acacac"
android:textSize="12sp" />
</RelativeLayout>
</FrameLayout>
Thanks in advance.
this is the creator of the Gist on GitHub!
Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?
Try doing that and see what the results are.
EDIT: Also, why is there negative line spacing within the Text View?
DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.
Similar issue goes for the label shape, that alignBottom is what's messing it up.
Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.
Here is the updated version of your code that should remedy your issues:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linkCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg">
<TextView
android:id="#+id/linkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/faviconView0001"
android:padding="4dp"
android:maxLines="2"
android:text="#string/link_title_001"
android:textColor="#717171"
android:textSize="17sp" />
<TextView
android:id="#+id/linkDesc0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linkTitle"
android:paddingTop="6dp"
android:paddingBottom="9dp"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="#string/link_desc_001"
android:textColor="#acacac"
android:textSize="13sp" />
<ImageView
android:id="#+id/faviconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:layout_alignParentLeft="true"
android:src="#drawable/favicon_example" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linkDesc0001"
android:background="#drawable/card_label" />
</RelativeLayout>
</FrameLayout>
I hope that all of this helps!
Hi have shape and am trying to include this in my layout but it doesn't show?
This is my shape xml "damage.xml"
<shape xmlns:android="http://schemas.android.com/apk/res/android"
shape="rectangle">
<solid color="#ff0000" />
<stroke width="3dp" color="#ff0000" />
And this is my I thought I needed to include the Shape in the layout.
<?xml version="1.0" encoding="utf-8"?>
<View android:id="#+id/damage" android:background="#layout/damage"
android:layout_width="5dip" android:layout_height="wrap_content">
</View>
<ImageView android:id="#+id/icon" android:layout_width="60px"
android:layout_height="60px" android:layout_marginRight="6dip"
android:src="#drawable/placeholder" />
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="6dip">
<TextView android:layout_width="fill_parent" android:id="#+id/title"
android:layout_height="wrap_content" android:text="Item Name"
android:textStyle="bold" android:singleLine="true" android:textSize="16sp" />
<ImageView android:id="#+id/rating" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/rating_five" />
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content" android:id="#+id/range"
android:layout_height="wrap_content" android:text="Range"
android:textStyle="bold" android:singleLine="true" android:textSize="16sp"
android:paddingRight="5dip" />
<TextView android:layout_width="fill_parent" android:id="#+id/condition"
android:layout_height="wrap_content" android:text="Condition"
android:textStyle="bold" android:singleLine="true" android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
However nothing is drawn? Where am I going wrong. Secondly is it correct to set the width and heoght of the shape in the View or should I be doing it in the damage.xml? For example
<shape xmlns:android="http://schemas.android.com/apk/res/android"
shape="rectangle">
<solid color="#ff0000" />
<size android:height="wrap_content" />
<size android:width="5dip" />
<stroke width="3dp" color="#ff0000" />
Here the compiler complains about wrap_content.
Any help would be greatly appreciated.
Try changing color="#ff0000" to android:color="#ff0000". That should cause the rectangle to be visible. Once you do that, you will find that a red rectangle shows up, but it fills the parent view vertically. That is because you used android:layout_height="wrap_content", even though the rectangle does not have any fixed height. I would fix that by using some other value for android:layout_height in your layout.
Also, it appears that you have placed damage.xml in the layout directory. Since a shape is a drawable, you should place it in the drawable directory, and reference it as #layout/damage in your layout.
Update:
Using the following code in damage.xml causes the rectangle to show up fine for me.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#f0f000" />
<stroke android:width="3dp" android:color="#ff0000" />
</shape>