I am building an app that I would like to support multiple device size.
In my app, I am using a listview to display data as well as a custom adapter. The background of the listview is an image I have done. This image is basically a 114heightX700width. with a small vertical divider at about 1/4 of the image.
In the left side, I need to center numbers with maximum 3 digit and on the left, a title.
It works great on Nexus 4, but if I try other devices with different dpi, it wont center anymore. Is there a way to "clip" the text positioning in the given image so that it is always at the same position no matter the device?
Here is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignParentTop="true"
android:baselineAligned="false"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_weight="0.00" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.89"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:lines="1"
android:paddingRight="10dp"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
There are 3 options:
Use a LinearLayout set all children to match_parent and set the layout_weight to 1 for every child. This will bring all children to the exact same size.
Use a 9patch background for each child. This will draw your background "around" the text.
Use a view in between the TextView to show the divider.
Anyway: RelativeLayouts/LinearLayout/FrameLayout with only one child do not make sense.
You should reduce the complexity of your layout.
Related
There has a listView and imageView in Activity A. If listView.size is equal to 0, it will display the image in the imageView, it not equal to 0, it will display the list.
This is the xml of my Activtiy A. I want to make the text and button display below the image but I found it so difficult to adjust.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_gravity="center"
android:layout_width="330dp"
android:layout_height="300dp"
android:id="#+id/imageView2"
android:paddingLeft="20dp"></ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No Data"
android:textSize="15dp"
android:layout_marginLeft="140dp"
android:paddingTop="160dp"
android:textColor="#color/honey_dew2"
android:layout_gravity="center"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Data"
android:paddingTop="20dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="130dp"
android:id="#+id/button2"
android:layout_centerVertical="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</RelativeLayout>
This is what I want. Thanks
http://i.stack.imgur.com/OSL4I.png
I think this is pretty much what you are looking for
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#mipmap/data"
android:paddingTop="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="No alarms"
android:textSize="15sp"
android:textColor="#color/honey_dew2"
android:id="#+id/NoData"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Add alarms"
android:paddingTop="48dp"
android:id="#+id/button2" />
</LinearLayout>
Notice that I changed from a RelativeLayout to a LinearLayout with a orientation value of vertical. I think that the RelativeLayout adds unnecessary complexity to this problem.
By using the layout_centerVertical and layout_centerHorizontal attributes instead of the padding you solve two problems at once.
The position now scales to different devices.
The layout is far less complex.
Notice also that the TextView textSize attribute is now in the units sp (scaling pixels) instead of dp (density-independent pixels). The size of your text should always be defined in sp and the size of your views should be defined either relatively or in dp.
This tutorial from the prolific mkyong should provide a strong foundation for manipulating the XML with your Java code.
I'd rework your entire approach. Use ListView.setEmptyView(View) to set a separate view to display when the list is empty. Then your base layout is just the list, and you have a separate layout for what to display for the empty case.
I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.
I'm trying to set up an xml layout to be used for a row in a ListView. The layout consists of a root LinearLayout with a child RelativeLayout containing two ImageViews (one anchored to the other's bottom/right corner) and a child vertical LinearLayout containing two TextViews. I want each row in the listview to have the same width and height, despite the size of the content in the subviews. I realize I cannot use wrap_content which will size the views based on their content, but I'm unclear on what I should use to accomplish a uniform width/height. I tried using fixed dp values, but that just made it even worse. I've attached two screenshots. The first one, from the iOS version, shows how it should look, while the second one shows how it looks on the Android version with the following layout. As a said, I know what's wrong (the wrap_content attributes), but how do I change it to size correctly? Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/campaign_thumbnail_container" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/campaign_thumbnail"
android:layout_alignRight="#id/campaign_thumbnail"
android:src="#drawable/new1" />
</RelativeLayout>
<LinearLayout
android:id="#+id/campaign_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/word_bar"
android:orientation="vertical" >
<TextView
android:id="#+id/campaign_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/campaign_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/campaign_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/campaign_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
EDIT - According to comments below:
One general thing: To size elements in a LinearLayout uniformly, you need to do two things:
Use a equal android:layout_weight for each element
Make the width or height (whatever has to be uniquely sized) ="0dip"
This is, because the weight factor is only used to fill the rest of the available space. First all elements are placed using their weight/height, then the still available space is calculated and distributed by weight to each element.
EDIT-end
Now, let me create the layouts step by step.
First, this would be your layout of one entry without the "new campaign" indication.
<!-- Type 1: Picture left, text right. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
You get a warning, because the LinearLayout itself has a weight. That is necessary, to give all list entries the same height.
Here's type 2:
<!-- Type 2: Picture right, text left. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
</LinearLayout>
(Where's my "That was easy!" button?)
And Type 3. Even easier:
<!-- Type 3: Picture full width. Picture resized to fit -->
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
Now the final thing. Put these three layouts in separate XML-files and include them into a wrapping RelativeLayout.
<!-- Finally overlay the entry with a new indication -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:id="#+id/newIndication"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_alignRight="#+id/entry1"
android:layout_alignBottom="#+id/entry1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_input_add" />
<include
layout="#layout/type1entry"
android:id="#+id/entry1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Note the include. I've put the Type1 LinearLayout in its own XML file named "type1entry". By giving this a new id with #+id/entry1 I can access this entry explicitely in the Activity. Also, I've given the indicator a size of 24dip in square. Change that to your image accordingly.
I've checked the layouts in Eclipse and they did look as I expected them.
Do you need to use a relative layout?
If not, use linearLayout with weights like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/campaign_thumbnail_container"
android:weightSum="100" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="50"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="0dip"
android:layout_height="match_parent"
android:src="#drawable/new1"
android:layout_weight=50
android:scaleType="fitCenter" />
</LinearLayout>
This is untested, but similar solutions like this have worked for me in the past.
For building an application, we have several lists.
the problem exists with a list item, which is custom, but very simple nontheless.
The format is:
This represents one list item with 2 textviews and one image view
Note that title and date are actually right underneath eachother and the image is on the right side, with center vertical as attribute.The image should NOT be in between the two text views
I will give the XML first and then explain the exact problem.
The XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</LinearLayout>
Problem:
In some sense, this layout displays everything exactly as the ascii representation.
What does NOT function correctly is when the text is becoming long. In cases where the text is long, but not long enough to take 2 lines, it just makes the imageview tiny.
In other cases, it just pushes imageview completely off the screen..
What I need is, when the length of either the date or the other textview is too long, to break to a new line. And ofcourse it needs to be a solution portable to all sorts of screen sizes.
I'm not a UI artist, so, apologies if I'm abusing layouts in a sense that they should not be used.
Aside help, tips and hints are also welcome!
I think your best bet is one simple RelativeLayout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="16dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
/>
</RelativeLayout>
Snap the ImageView to the right side of the parent, and let the TextViews take the rest of the width, but aligned to the left of the ImageView.
Hope this helps:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_weight = "1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf dsfasdfasd asdfadsf dfasdfads asdfasdf"
android:textSize="16dip" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf"
android:textSize="12dip" />
</LinearLayout>
<RelativeLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
I think in this case you need a different layout, check this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"/>
</LinearLayout>
If you don't want your image shrinking then you need to give it a specific ratio of the real estate that its parent offers.
Specifically the LinearLayout that is its parent needs to have a weight_sum and then both the text and image need to have a layout_weight.
the weight should add up to the sum. The weight doesn't have to be a whole number and it's very important (and very counter intuitive) that the layout_width needs to be 0 (assuming that the two of them are sitting side by side)... so...
I'm removing all the extra stuff below that you need to add back in and just leaving the important parts....
<LinearLayout weight_sum=2 layout_height=fill_parent>
<TextView layout_weight=2 layout_height=0dp/>
<ImageView layout_weight=2 layout_height=0dp />
<TextView layout_weight=2 layout_height=0dp/>
</LinearLayout>
This will split the LinearLayout in half and the left side will be text (which will wrap if it can) and the right side will be the image. You can adjust this by setting the sum to 3 and splitting up the sides to 2 and 1 in which case the text will be 2/3 of the screen and the image 1/3. Or leave the sum at 2 and have the left be 1.3 and the right .7 for a similar effect.
I'm trying to do a layout with dynamic scaling of test view. The layout looks like - see bottom left corner.
Now that portion is a composite control. The circle scales just fine, but I can't figure out how to make the text positioned perfectly in the middle while scaling properly. I want the text at let's say 50% of the container size and positioned perfectly in the center. RelativeLayout only allows for absolute values, and I can't seem to get the weighting working with text view for linear layout with textview.
Composite control:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:weightSum="1.0"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</LinearLayout>
</RelativeLayout>
Overal layout:
<com.proflite.VarioView
android:id="#+id/Vario"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
/>
Put the TextView inside of container. And set Gravity (Views attribute) to Center.
Set TextViews width and height to wrap_content.
This will make TextView centered in it's container.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</FrameLayout>
This will get TextView centered inside of FrameLayout
try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>
I suggest you make an Button widget and set an image as background which has .png format, having transparent background.
Like this:
After that Make sure to save it as .png
1)Then go to your xml layout create a Button or ImageButton widget.
2)Set this pic saved as a background image ( android:background="#drawable/yourcircle")
3)then finally you can put any text inside ( android:text="blabla") + you can change it from the code for sure using Button.setText("blablabla")
4)You will also want to change the font size using Button.setTextSize(49) for example.
5)Finally to make it in the center, android:gravity="center"