This is the question I asked earlier today:
Recreate shape as in xml file by using code and set width programmatically
Using the above solution provided, I was able to get the desired result but there is a small issue which I can't figure out. Please help me.
The rectangle box should wrap the text view whatever its text length may be. But when the content is long than other text in the same view, gaps are shown.
Here is the layout code which is loaded in the recycler view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/lin1"
android:weightSum="2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/rel1"
android:layout_marginLeft="5dp"
android:layout_weight="1.50">
<TextView
android:id="#+id/list"
android:textSize="#dimen/grid_row_text_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:textColor="#color/orange"
android:textAlignment="center"
android:singleLine="true"
android:layout_marginRight="3dp"
android:gravity="center">
</TextView>
</RelativeLayout>
<ImageView
android:id="#+id/info_icn"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:src="#drawable/eye"
android:visibility="gone"
android:layout_weight="0.50"
android:layout_gravity="bottom"
/>
</LinearLayout>
This is the result which I am getting now
For more clearance on the issue, another pic of the above
This is the result I get after changing the top Linear Layout (android:layout_width="match_parent")
If more code needed, I can post here. Please help me on this issue. Thanks a lot!
The rectangle box should wrap the text view whatever its text length
may be. But when the content is long than other text in the same view,
gaps are shown.
To make TextView wraps to its content you have to make some changes on your RecyclerView Item layout:
The RelativeLayout (#+id/rel1) has android:layout_width="match_parent" and must be wrap_content.
The TextView (#+id/list) has android:layout_width="match_parent" and must be wrap_content.
The TextView (#+id/list) has android:minWidth="100dp" which affects the TextView to wrap to its content when the content is too small.
I have modified your xml layout to Wrap to its content like in the below sample:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lin1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#android:color/transparent"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/rel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/grid_row_text_size"
android:text="Test text"
android:gravity="center"
android:layout_centerInParent="true"
android:textColor="#android:color/holo_orange_dark"
android:background="#android:color/transparent"
android:textAlignment="center"
android:singleLine="true"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingEnd="5dp"/>
</RelativeLayout>
<ImageView
android:id="#+id/info_icn"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/eye"
android:visibility="gone"
android:layout_gravity="bottom" />
</LinearLayout>
According to your question the TextView has a Rectangular Shape as a background with a Cut TopRightCorner. After adding programmatically the TextView Background using a ShapeAppearanceModel you should get the result you want like below:
Related
I have a linear layout with textView and ImageView.
When i enlarge the text size to large, the image view doesn't have enough space so it's partially hidden.
I want the Image view to be fully displayed and even if the text has to be truncated.
Do i have any simple way to do it? instead of inheriting from LinearLayout and overriding onMeasure?
Try to use Relative View instead of Linear View.. Relative give more command over this.
<?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:gravity="center_vertical"
android:layout_gravity="center"
android:layout_margin="10dp"
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/first"
android:layout_gravity="top|center"
android:padding="10dp"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_gravity="top|center"
android:gravity="center"
android:textSize="20dp"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:text="textview"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top|center"
android:padding="10dp"
android:gravity="center"
android:src="#drawable/ic_launcher_background"
/>
</LinearLayout>
I solved it by:
Linear layout. The imageView with a hard coded DP width and height, Text with 0 width and a weight of 1.
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 have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).
Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>
It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.xml:
<?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:background="#color/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.
I am trying to make a text view to overlay the above text view, I have tried the text align with no success; I can accomplish this by adding a large amount of padding but I do not want to use padding because I ran into other issues in android variety in screen sizes. I will post an image of what I'm trying to do and also post then XML code. Looking forward to some help here, thanks in advance.
Image(I am trying to make that black bar with the text android /Design overlay the above area that says busybusy Development as of right now the black text view is just pushing the above text view up were I would like it to just overlay but stays at the same position) http://imgur.com/ebgNTNk
<?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="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/org_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:paddingTop="42dp"
android:paddingBottom="42dp"
android:background="#drawable/dashboard_business_image"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium">
</TextView>
<TextView
android:id="#+id/project_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_below="#id/org_name"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:layout_gravity="bottom"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:background="#color/busy_translucent_black"
android:textColor="#color/busy_white"
android:textStyle="normal"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone">
</TextView>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/dashboard_clock_in_button" />
<include layout="#layout/dashboard_clock_out_button" />
<include layout="#layout/dashboard_paused_button" />
<ListView
android:id="#+id/action_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:divider="#color/busy_divider_color"
android:dividerHeight="0dp">
</ListView>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_weight="0"
android:gravity="center_horizontal"
android:paddingTop="32dp"
android:paddingBottom="32dp"
android:background="#color/busy_white"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Reading this, it appears you want the project_name view to overlay the org_name view. You can do this by aligning the bottom of the views.
Change this line:
android:layout_below="#id/org_name"
To this:
android:layout_alignBottom="#id/org_name"
That will align the bottom of the two views, effectively placing project_name on top of the org_name view.
The reason they aren't overlapping is the android:layout_below="#id/org_name" in the second TextView. If you remove that, I think it should work as you want it to. If not, you might want to try a FrameLayout instead of a 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"