I wrote the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground">
<ProgressBar
android:id="#+id/layout_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxHeight="50dp"
android:minHeight="50dp"
android:minWidth="50dp"
android:maxWidth="50dp"
android:theme="#style/progressColor"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp"/>
<ImageView
android:id="#+id/layout_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp"/>
<TextView
android:id="#+id/layout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_progressbar"
android:textSize="15sp"
android:ellipsize="end"
android:maxLines="1"
android:gravity="center"
android:text="aaaaaaaaaaaaaaaa"
android:layout_marginBottom="15dp" />
</RelativeLayout>
It's the item of a RecyclerView. It basically tries to create the following layout:
[ ImageView ]
[TextView]
Where the TextView is in the center of the ImageView. If the TextView is too long it will shorten it and put three dots at the end. But the problem is I can't seem to figure out how to make the TextView size to be a bit less then the size of the ImageView. Currently it creates:
The ImageView is set dynamically and it could be of size 50dp-70dp.
I'm trying to achieve something like:
How can I do it? I know that I can use gravity to be center only in match_parent but this is a RV item so I want it to be wrap_content.
Since you are using a RelativeLayout you can use android:layout_centerHorizontal="true" in the ProgressBar and ImageView.
If you want to center vertically add also android:layout_centerVertical="true".
<RelativeLayout>
<ProgressBar
android:layout_centerHorizontal="true"
..>
<ImageView
android:layout_centerHorizontal="true"
..>
</RelativeLayout>
Related
I have a RelativeLayout within a LinearLayout and for some reason I can not get rid off the padding between the text and divider line of the first row.
How is it possible to align the Text / LinearLayout to the top?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/file_row_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="top"
android:baselineAligned="false">
<ImageView
android:id="#+id/file_row_thumb"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_weight="0"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="fitStart" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/file_row_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp" />
<TextView
android:id="#+id/file_row_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp" />
</LinearLayout>
<ImageButton
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0"
android:background="?android:selectableItemBackground"
android:onClick="showFilePopup"
android:src="#drawable/ic_more_vert" />
Studio preview shows dotted line. Is it responsible for the padding?
Add these 2 lines to your TextView:
android:height="16dp"
android:gravity="bottom|clip_vertical"
That will push the text to the top of it's view. If you want to have it actually touching the view above, you can reduce height.
Here are a couple of screenshots:
1st with height=16
And an exaggerated one with height=14
And here's a link to give you other various XML attributes for TextView
developer.android.com/reference/android/widget/TextView.html
I am trying to align a TextView to be centered in a relative layout but also to the right of an ImageView. I would like it to look like this.
[-(image)-----some text here------------]
I'm able to do this with the code below, but if the text becomes too long it overlaps the image.
<?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="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_centerInParent="true" />
</RelativeLayout>
I have tried aligning the TextView to the right of the ImageView but it stops centering in parent if I do that. Any help is appreciated
You could try something like this. I used a radio group instead of a linear layout for this but it should still work. Have a the linear layout horizontal as you already do and then make the layout gravity center then just put the image first then the text view
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:paddingTop="20dp">
<RadioButton
android:id="#+id/radio_student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_student"
android:onClick="onRadioButtonClicked"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"/>
<RadioButton
android:id="#+id/radio_teacher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_teacher"
android:onClick="onRadioButtonClicked"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"/>
</RadioGroup>
EDIT:
I don't know if the margin attributes for the buttons I have work on text views but padding left on the text might work
try this:
<?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="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="`enter code here`true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_toRightOf="#+id/navMenu"
android:alignParentRight="true"
android:gravity="center" />
</RelativeLayout>
You could (and should, for performance sake), use a compound drawable for the TextView (and get rid of the ImageView)
You want the image to stay on the Left part of the TextView, so use android:drawableLeft:
<?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="wrap_content"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White"
>
<TextView
android:id="#+id/actionBarTitle"
android:drawableLeft="#drawable/home_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:centerInParent="true"
android:gravity="center"
/>
</RelativeLayout>
I have a custom row for a listview that contains four TextViews.
Here is a screenshot of the layout I am creating:
The reason for multiple TextView is because I need to use different styles on each textview. Bold Name for example.
Here is the XML layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgPhoto"
android:src="#color/Red"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_margin="10dp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/imgPhoto"
android:padding="10dp"
android:id="#+id/relativeLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:id="#+id/txtName"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="viewed a promotion by"
android:id="#+id/txtAction"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtName" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dominos Pizza"
android:id="#+id/txtMerchant"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtAction" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="14 seconds ago"
android:id="#+id/txtAgo"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtMerchant" />
</RelativeLayout>
</RelativeLayout>
This is a screenshot of what I am trying to achieve:
The question is how do I wrap the TextViews so that it fits inside the RelativeLayout just like in Picture 2? Or is there any other alternative I can use to achieve what I am looking for here?
I think it's possible through HTML code. You should be use to CSS for the wrap the text and then set into the view.
Use only one TextView and change the style with html. Example:
textView.setText(Html.fromHtml("<h2>This</h2><br><p>is an example.</p>"));
I want to create layout like at picture but i don't have clue at all how to make like that..
Does anyone can give me a clue or alternative how to do that ?
Split it like this.
Imageview and first textview in a linearlayout Horizontal.
and then this linearlayout Horizontal and second textview in a linear layout vertical.
One way to do this could be to lay the TextView and then overlay the ImageView on it. I think a RelativeLayout with the TextView defined first and followed by the ImageView might do the trick. You can toggle the visibility of the ImageView but would need to ensure that any text written to the TextView is written after taking into account width of the ImageView so as to not obscure any text.
You can try adding two textviews in a relative layout and in addition to that an imageview.
This might help you to get started.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_generator"
android:background="#FF000000">
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:textColor="#FFF"
android:textSize="18sp" />
<TextView
android:id="#+id/item_title_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginTop="16dp"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/item_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/item_title"
android:layout_below="#+id/item_title"
android:textColor="#888"
android:textSize="14sp" />
<ImageView
android:id="#+id/item_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="40dp"
android:padding="0dp"
android:contentDescription="#string/hello_world" />
</RelativeLayout>
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"