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>
Related
I was trying to set a gradient and rounded shape in the button background. But, the gradient color is not showing in the button while shape is coming properly. Can you please tell me where I'm going wrong?
This is my Button xml code,
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="76dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent">
<ImageButton
android:id="#+id/verifyButton"
android:layout_width="300dp"
android:layout_height="70dp"
android:layout_marginBottom="20dp"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/aclonica"
android:background="#drawable/button"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/buttonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/aclonica"
android:text="Verify"
android:textColor="#color/white"
android:textSize="25sp"
android:textStyle="bold"
android:layout_gravity="center"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
And this is my drawable resource file xml code,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#color/light_blue" android:endColor="#color/dark_blue"/>
<corners android:radius="50dp"/>
</shape>
Please help me with this. Thank you
I got the solution. By adding this code in the button xml file, it worked just fine.
app:backgroundTint="#null"
Add this to your drawable folder and add it ass background of the button.
round_gradient_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="16dp"
android:bottomLeftRadius="16dp"
android:topRightRadius="16dp"
android:topLeftRadius="16dp"/>
<gradient
android:startColor="#ffff00"
android:centerColor="#00ffff"
android:endColor="#ff0000"
android:angle="45" />
</shape>
Then go to your res/values/themes.xml
change
<item name="colorPrimary">#color/purple_500</item>
to
<item name="colorPrimary">#null</item>
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.
What I'm getting:
What I'm aiming to get:
I got the first one by adding this to my build.gralde:
compile 'com.android.support:design:25.3.1'
compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.4'
And then this to my layout xml:
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/bottomView"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_items"
android:background="#f8f8f8"/>
Use a custom layout for BottomNavigationView. And your layout's clickable parent should contain attribute android:background="?selectableItemBackground" .
Below is an example.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackground"
android:clickable="true"
android:duplicateParentState="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sel" />
This will give experience of rectangular Ripple above kitkat and normal rectangle below and on kitkat . If you do not want ripple at all(In all android versions). the use a selector as background like .
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#4C000000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/transparent" />
</shape>
</item>
Use this instead .
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="?selectableItemBackground"
/>
I have a linear layout which contains three image buttons. Each image buttons has a different color. At the initial time, all image buttons are unchecked. I want to set checked/selected for an image button if the image button is selected (a blue V will overlap to the image button background ), and Another image button will be unchecked. How can I do it in android?
This is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="7dp"
android:layout_centerInParent="true">
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color1"
android:background="#color/colorAccent"/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color2"
android:layout_marginLeft="5dp"
android:background="#color/colorPrimaryDark" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color3"
android:layout_marginLeft="5dp"
android:background="#color/colorPrimary"/>
</LinearLayout>
Updated: The blue V means checked status. It is similar the result
I would suggest to use checkboxes for this task.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="7dp"
android:layout_centerInParent="true">
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color1"
android:button="#drawable/color_selector"
android:background="#color/accent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/color2"
android:button="#drawable/color_selector"
android:layout_marginLeft="5dp"
android:background="#color/primary"
android:checked="false" />
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="50dp"
android:layout_height="50dp"
android:button="#drawable/color_selector"
android:id="#+id/color3"
android:layout_marginLeft="5dp"
android:background="#color/primary_dark"/>
</LinearLayout>
and color_selector.xml should be placed into the drawable folder with the required selector (just an example)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/ic_done_white_18dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/white" android:width="2dp"/>
<corners
android:bottomLeftRadius="#dimen/spacing_xxsmall"
android:bottomRightRadius="#dimen/spacing_xxsmall"
android:topLeftRadius="#dimen/spacing_xxsmall"
android:topRightRadius="#dimen/spacing_xxsmall" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<stroke android:color="#color/white" android:width="1dp"/>
<corners
android:bottomLeftRadius="#dimen/spacing_xxsmall"
android:bottomRightRadius="#dimen/spacing_xxsmall"
android:topLeftRadius="#dimen/spacing_xxsmall"
android:topRightRadius="#dimen/spacing_xxsmall" />
</shape></item>
</selector>
Hope this will help.
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.