Circular button being displayed as a rectangle in a gridlayout - java

I am trying to display many circular buttons using a recycler view with a gridlayout. However, when I run the application on my emulator the buttons show up as squares. I noticed that when I look at the design view of my button layout file, the constraint layout that stores the button has a transparent rectangle surrounding the button. I'm not sure if my program is automatically filling the constraintview background as well along with the button, but I just wanted to let you know. Here is my onbindviewholder method in my recyclerview that fills the color of my buttons (colorResources is an array within my recycler view that holds the colors I want to fill my button with):
#Override
public void onBindViewHolder(#NonNull ViewHolder holder, int position) {
holder.button.setBackgroundColor(getResources().getColor(colorResources[position]));
holder.button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
pickedColor=colorResources[position];
}
});
}
Here is my button xml file that is displayed in my recyclerview/gridlayout:
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/button_color_background"
android:id="#+id/colorButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the background xml file for my button referred to in the code above:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="999dp"/>
<solid android:color="#color/purple_700"/>
<stroke android:width="50px" android:color="#636161"/>
</shape>
Please let me know if you need any additional information about my code.
Thanks in advance

Just set width and height of your Button: Like:
android:layout_width="50dp"
android:layout_height="50dp"

Shape should be oval.Use this as drawable instead.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#636161"/>
<solid
android:color="#color/purple_700"/>
</shape>
as long as button is a square this drawable will result in a circle. also you can increase the width in stroke according to your needs.

Related

Android How to get the height equal the width of an component

I want to to have the height of an ImageView equal to it's width. I already read something about using "app:..." in activity.xml.
But, it says that it couldn't find the namespace. After that, I just found a code which didn't worked for me.
Does anybody has ideas or suggestions to fix this issue? If it has to be done programmatically and it would be good if has an example for this using Kotlin.
If you want to have the height of an ImageView equal to it's width,
Programmatically [Dynamic way]:
int widthOfImage = image_view.getLayoutParams().width;
image_view.getLayoutParams().height = widthOfImage ;
refer to this answer
you can do it in Hard-coded way:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher_background"/>
or you can define background like this image_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#003778" />
<corners android:radius="6dp" />
<size android:width="100dp"
android:height="100dp"/>
</shape>
and add it as background in imageView. [remember it is also hard-coded]
You have to use this custome view inside you xml file.
Example
<YourPackageName.SquareImageView
android:id="#+id/squareImageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher_background"/>
Now you have to bind this view in you code. Like Fragment or Activity whatever you have used.
Exmple (This is code in java you can change it in kotlin) :-
SquareImageView imageView = findViewById(R.id. squareImageview);

Changing the color of a custom buttonshape programmatically

I have a custom button shape that I am using for all of my buttons. I am trying to implement themes now but I can figure out how to automatically change the "solid" color of the buttons without getting rid of my custom shape. Can anyone let me know how to go about this? I've attempted to change the background colour of the button but I don't see any change; not sure why.
Here's my custom button shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<solid
android:color="#D1D1D1"
/>
<size
android:width="177dp"
android:height="60dp"
/>
<stroke
android:width="7dp"
android:color="#FFFFFF"
/>
</shape>
I think you should assign an id to the xml file
then you just make recognize the Button by mean of findViewById
In the case you use multiple themes, you could use a case switch functionality
Button button= (Button)findViewById(R.id.yourbutton)
button.setBackgroundColor(getResources().getColor(R.color.whatevercolor)); //or even better button.setBackgroundColor(0xFFFFFF);

Can't set a background attribute twice (image+colour) in Java-Android

I've already posted a related question but was partially solved, so here I'll show you the whole code.
The problem is that I can't set a background from a RelativeLayout in white, for example, and set simultaneously, by java code, a background resource (.PNG file) and merge them.
The .PNG image is a prototype of part of the game screen and has transparent space. What I want to obtain is to show this background in white, because of there are details in black that can't be seen because my pre-established background is black (initial theme selected I suppose).
The code below corresponds to the XML file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/id_act_principal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:keepScreenOn="true"
tools:context=".Principal" >
And the .java file:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);
RelativeLayout fondo = (RelativeLayout) findViewById(R.id.id_act_principal);
fondo.setBackgroundResource(R.drawable.prototipoestructurapantalla);
}
The .java file sets the background image correctly, but in the XML file is set to show the white background and it doesn't show it. It keeps being black.
I hope you can help me.
Try this:
Create a drawable named image_with_white_backgroud.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape >
<solid android:color="#android:color/white"/>
</shape>
</item>
<item>
<bitmap
android:src="#drawable/prototipoestructurapantalla"/>
</item>
</layer-list>
In your RelativeLayout replace android:background="#android:color/white" with android:background="#drawable/image_with_white_backgroud"
you can only have one background at a time, try leaving the relativelayout as it is, and insert an ImageView for the png.

How can i draw a circle that compatible with all android device with fixed radius?

I need to create a program, that have 5 radius buttons. When i'm click on these each button i want to adjust my circle radius.(Circle should have same size in all android phones).
pls help me to find this...
Deducting the screen size before you create a circle and act based on that is a elegant way ,
There are difference sizes of screens in android devices,
so find out the screen size place your co-ordinate values according to the found screen size,
If drawing is only one option for you then the following
thread will be helpful for you to achieve this,
Compatible Canvas draw tip
If not, then button backgounds should be 9 patch image is always better.
Hope , you will find it useful.
You could create a circle-shape in xml and set this as background resource to a button or an imageButton, or you could do your own button-class and override onDraw method. A tutorial with shape is here:
http://dandar3.blogspot.de/2012/10/android-custom-round-buttons.html
or here:
http://yekmer.posterous.com/how-to-make-rounded-buttons-on-android
Instead of using "rectangle" at the shape, You could use "oval".
I donĀ“t know if I understand You right, but making a button that had the same size on every phone is not a good way. Views had to be independent, a view should be created in a way, that it is adjusted to the individual screen size. To do so, use "dp" units in your xml layouts.
Now here is my example:
1.) first create a shape-drawable in the drawable folder:
round_button_oval_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#00ced1" />
</shape>
2.) create a second shape in drawable folder:
rounded_button_oval_shape_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#008b8b" />
</shape>
3.) create a selector in the drawable folder:
rounded_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded_button_oval_shape_pressed"
android:state_pressed="true"></item>
<item android:drawable="#drawable/round_button_oval_shape"
android:state_pressed="false"></item>
<item android:drawable="#drawable/round_button_oval_shape"></item>
</selector>
4.)create your main-layout
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ff0000" />
<Button
android:id="#+id/rounded_button"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/rounded_button_selector" />
</LinearLayout>
If you have done this parts, you could anything do with that button in your activity.
RoundedButtonDemo.java
public class RoundedButtonDemo extends Activity {
private Button mRoundedButton;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mRoundedButton = (Button) findViewById(R.id.rounded_button); //initialize your button
mRoundedButton.setOnClickListener(new OnClickListener() { // set Button on click listener
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Toast.makeText(RoundedButtonDemo.this, //show a toast when pressing button
R.string.rounded_button_message, Toast.LENGTH_LONG)
.show();
}
});
}
}
The shapes and the selector are needed for showing a pressed behavior of the button. The first shape is a normal button, which is not pressed. the second one is a shape that is pressed. The selector is using the two shapes for showing the pressed state to the user. To get this, set the selector as background to your button in your main.xml .

android oval shape dialog

i have an application , it has a button , when pressed it will fire a dialog with the default dialog shape , i wonder if i can change the default shape of dialog to an oval shape and also to apply special style to it ,
as explained in the images attached below :
1- the Default Dialog Shape:
2-The Oval Dialog Shape (which i try to achieve):
my dialoge code :
final Dialog dialog = new Dialog(context);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.custom_dialog);
TextView text = (TextView) dialog.findViewById(R.id.dialog_text);
text.setText(Html.fromHtml(getString(R.string.text_4)));
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.pic);
Button dialogButton = (Button) dialog.findViewById(R.id.dialog_Button);
dialogButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
}
style code of default dialog:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:height="2dp" android:color="#B22222" />
<solid android:color="#FCE6C9" />
<padding android:left="2dp" android:top="2dp" android:right="2dp"
android:bottom="2dp" />
<corners android:radius="5dp" />
</shape>
i hope to have this done by code rather than using 9-patch image so it will be easy to control the dilaoge dimensions and adjust the text inside it as i neeed ,
Any advice will be appreciated , thanks .
Not exactly sure how to do this on android, but the approach I use in java is make the JFrame or JDialog rendered surface transparent and then draw my own custom shape inside. To make them transparent I use AWTUtilities.setWindowOpacity
On this article you will find another ideas, like capturing the desktop before the frame or dialog is rendered and using it to patch your frame:
http://today.java.net/pub/a/today/2008/03/18/translucent-and-shaped-swing-windows.html
More information:
http://java.sun.com/developer/technicalArticles/GUI/translucent_shaped_windows/
Here you have an implementation, not for android but it may help:
http://www.codeproject.com/KB/java/shaped-transparent-jframe.aspx
Neat idea. On Android, to give an activity a transparent background, put this in your manifest file:
<activity android:name=".MyActivity" android:theme="#android:style/Theme.Translucent.NoTitleBar" />
Then, in your layout file for that activity, add this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myRoundBackground" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignBottom="#+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="Hello"
android:textColor="#000000" />
</RelativeLayout>
Then you can programmatically set the text on the TextView with the id myImageViewText .
Have a look at this quick action menu totorial. Try applying this tutorial with shape = oval background. I think you will get what you are trying to achieve.
I think a transparent background with image sliced in oval for will work for you. and place the button to left of the oval image.
THis method is similar to the one you are currently trying :
In your custom_dialog.xml give the relative layout an android:background="#drawable/ovaldialog" .
And in the ovaldialog.xml try giving the same parameters you are giving to edit the style by giving android:shape="oval" and also give the parameters to corners such as android:topLeftRadius="8dp" and android:bottomRightRadius="10dp" and play with those values until you get a desired kind of shape. To give the red color to the dialog give it a stroke of width 2/3dp and an android:color value.
Hope this helps

Categories