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.
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 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 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>
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'm trying to add a background rectangle shape to a custom RelativeLayout in android and I'm following the recommendations of most questions on here by implementing a custom drawable in customborder.xml and setting it as the background of the custom.axml view. I have also tried setting the relativeLayout source as well.
You can see I've also tried it in an imageView which isn't showing up either.
I've messed around with size and color but nothing appears to be rendered.
Am I missing something that needs to be done in code? Or the xml?
customborder.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
shape="rectangle">
<corners radius="20dp"/>
<padding left="50dp" right="50dp" top="50dp" bottom="50dp"/>
<stroke width="10dp" color="#B2F7FE"/>
<solid color="white"/>
</shape>
custom.axml:
<?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="8dp"
android:background="#drawable/customborder">
<ImageView
android:id="#+id/imageViewBackground"
android:layout_width="fill_parent"
android:layout_height="49.0dp"
android:layout_gravity="center"
android:background="#ffededed"
android:adjustViewBounds="false"
android:alpha="1"
android:backgroundTint="#00000000"
android:foreground="#drawable/customborder" />
<refractored.controls.CircleImageView
android:id="#+id/Image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="#drawable/icon" />
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="10dip"
android:layout_marginLeft="10.5dp"
android:background="#drawable/customborder">
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="24dip"
android:textColor="#FFFFFFFF"
android:paddingLeft="5dip"
android:text="Test"
android:layout_marginLeft="46.0dp"
android:layout_marginTop="12.0dp"
android:layout_gravity="left" />
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20dip"
android:textStyle="italic" />
</LinearLayout>
Please replace your customborder.xml file with following code,
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<padding
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp" />
<stroke android:width="10dp" android:color="#B2F7FE"/>
<solid android:color="#ffffff" />
</shape>
Your mistake was android prefix is missing.Also you are missing close tag in your layout.