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
Related
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);
I have a editbox, in which I defined an android:drawableLeft property.
I am expecting to have the EditBox look something like this (from Instagram app):
Note that the image is properly centered, and the top/right/left/bottom padding of the image seems all the same. The text on the right is bounded by the size of the image (between the blue lines that I draw)
When I am trying to do the same thing, my EditText view look like this:
I also set the line number of this multiline edittext box to be three, but this did not help fix the box size. There is a big padding on the top/bottom of the image that I don't know where it comes from. Here is my code:
Layout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1" >
<EditText
android:id="#+id/new_post_edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_edittext"
android:drawableLeft="#drawable/ic_launcher"
android:ems="10"
android:gravity="top|left"
android:hint="#string/compose_card_hint"
android:lines="3"
android:padding="5dip"
android:drawablePadding="5dp"
android:textColor="#999999" >
<requestFocus />
</EditText>
</LinearLayout>
Rounded corner drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp"
android:shape="rectangle" >
<solid android:color="#bbbbbb" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
And also code to dynamically set the image:
Drawable img = this.getResources().getDrawable( R.drawable.sample_img );
img.setBounds( 0, 0, 200, 200);
EditText et = (EditText) findViewById(R.id.new_post_edittext);
et.setCompoundDrawables( img, null, null, null );
How I can re-adjust the layout to make it look the same as the Instagram one I showed above?
Thanks
There are two ways you can do it.
Use a custom layout with an ImageView and TextView in a LinearLayout/Relative Layout. It will make your list items uniform irrespective of text and image size.
Using drawable with EditText in combination with lines is a bad idea. use drawableLeft or Right when you need to display image on edges with default gravity. Margin and Padding for drawables associated with EditText is a cumbersome task.
Have you tried by changing android:gravity="top|left" to android:gravity="center_vertical"
I want to use an activity as a dialog in my android application. Till now, I've used AlertDialogs but I want to make my app more fancy. I've done a lot of research on this but couldn't find a satisfactory answer.
I created a new activity named DialogActivity.java and dialogactivty for the java and xml files respectively.
So, How do I call this activity as a dialog in some other activity?
AND
How do I give this activity a round cornered rectangle dialog shape?
Thanks in advance!
You can set a dialog theme to activity as
<activity android:theme="#android:style/Theme.Dialog" />
and use
<activity android:theme="#android:style/Theme.Holo.Dialog" /> // api level 11 and above
in manifest for the activity required.
You need to start the activity using startActivity(intent)
From the official documentation,
If you want a custom dialog, you can instead display an Activity as a
dialog instead of using the Dialog APIs. Simply create an activity and
set its theme to Theme.Holo.Dialog in the manifest element:
<activity android:theme="#android:style/Theme.Holo.Dialog" >
That's it. The activity now displays in a dialog window instead of
fullscreen.
Use Theme.Dialog for API 10 or lower.
try this :
android:theme="#android:style/Theme.Dialog">
entry in manifest for the activity you required.
#ChinmayDabke To display with rounded corners, you need to create a new shape using xml and set it as the background drawable.. be sure to also set transparency for your activity. For more detailed information on this, there are many up-to-date topics available - I just wanted to give a quick answer to this old post, since you had asked!
My mistake - you don't need to set as Transparent - I meant to say set no Titlebar!
Example:
Create a Shape for the rounded background, inside your res/drawable folder:
shape_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/colorOfActivityHere"/>
<corners
android:radius="12dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
Then set the shape as the Background of your activity's parent layout:
layout_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:background="#drawable/shape_background"
android:orientation="vertical">
...
</LinearLayout>
And in your Activity.java, set no titlebar:
Activity.java
requestWindowFeature(Window.FEATURE_NO_TITLE);
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.
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 .