I'm trying to create a custom list item layout but I encountered an issue. See the example below :
Effective functioning
The Issue
The problem is when the green rectangle fills all the blue box (width set as wrap_content) because the green square disappeared. The square has to be right of the green rectangle but the size of this rectangle can change and I can't fix the green square to the right of the blue box.
The red rectangles are fixed and they aren't a problem.
I use some LinearLayout and RelativeLayout to do this but it's not working as I wish.
I also can't use the drawableRight attribute because in the near future, there will be two icons (green square) instead of one.
If someone has already encountered this problem or has a way to solve this.
The wanted result is:
[[ListIconView] [[Some text here] [Icon]]< ..... blank space .....>[x] [y] [z]]
[[ListIconView] [[Long text from....... ] [Icon]]< . blank space ..>[x] [y] [z]]
[[ListIconView] [[A very long text from an older book....] [Icon]] [x] [y] [z]]
x, y and z are icons.
Assuming that red square and rectangle are not the problem (probably parent layout is RelativeLayout), and you have TextView and ImageView as green rectangle and green square, use
android:layout_weight="1"
for your TextView (green rectangle)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Some very looooooooooooooooooooooooooooooooooooooooooooooooong text here" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:text="blablah"/>
<LinearLayout
android:layout_weight="60"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:text="test string string string"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:text="String test"/>
</LinearLayout>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"/>
</LinearLayout>
What I do above is that I assign space based on percentages for each of the item I want to fit in the root layout which is the LinearLayout, out of the total weightSum 100%. The ImageView will take 20% space, followed by another LinearLayout which will occupy 60%, and lastly the ImageButton which takes 20%, too
Related
I have a layout that that has different colors for different Textview
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizonetal">
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAA"
android:background="drawable/RED" />
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BBB"
android:background="drawable/BLUE" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizonetal">
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CCC"
android:background="drawable/ORANGE" />
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DDD"
android:background="drawable/GREEN" />
</LinearLayout>
</LinearLayout>
How can I make the whole layout a rounded corner?
IF I create a rounded corner bg then I have to create a rounded corner with fill color for every text view. But I was wonder if I can take the full layout and make its corners rounded (sort of clip the rectangle corners).
This is needed because this layout is set as a dialog and I want the dialog to be of rounded corners
Thank you
Here is a picture of what I mean . I have this rectangular view/layout which has different colors. Imagine there is a brown background due to another layout behind it. How can I make the ractangular view rounded (and transparent corners) like in the second image
I found the answer. I needed to use cardview as a root layout and set the corner and that will override all the children bounds
I have an trash can icon I am using as a drawable in an ImageView. The trash can shows up at the top of the layout line which I don't want (Pic 1). Adding 'layout_gravity="bottom"' moves the icon down all the way to the bottom of the layout (Pic 2). I would like the icon to be placed to exactly match the horizontal bottom of the "Due Date" text and to the left, just to the right of the end of the Due Date EditText Line (Pic3). I tried adding margins and padding but no luck. Any ideas?
partial xml file:
...
<LinearLayout
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:contentDescription="Trash can"
android:src="#drawable/ic_delete_black_24dp" />
...
Pic1
Pic2
Pic 3
Pic 4
try it:
trashIcon.setY(dateEdittext.getY-dateEdittext.getHeight/2);
You can use layout weights to make sure the trash can only uses what it needs (0) and gives the rest to the edit text (1)
<LinearLayout
<EditText
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:layout_weight="0"
android:contentDescription="Trash can"
android:src="#drawable/ic_delete_black_24dp" />
</LinearLayout>
I'm fairly new to Android Studios so sorry if this may come of as a stupid question.
I'm trying to put two buttons on the top of my screen. I want them to be in the top left and right corner like in this image.
However this is what they look like.
I don't want any space between the top of the screen and the two buttons. This is my code..
LinearLayout
<LinearLayout
android:layout_marginTop="0dp"
android:id="#+id/LinearLayout02"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight="1"
android:src="#drawable/HomeBTNunpressed"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/homeBTN"
android:layout_weight="1"
android:src="#drawable/settingsBTNunpressed"/>
</LinearLayout>
First of all in parent don't use fillParent(Deprecated) rather use MatchParent.
Second if using linear layout and specifying weight for view and in your case you want to devide space equally then specify width 0dp and weight 1 to both and weightsum 2.
Third use any layout containing ImageView at center and specify background color to whatever you want
You are using Image Button, and image gets resized in aspect ratio so don't fit accordingly.
Actually you are using Image Button so that border is actually of button.Instead of using image button you can use Image View and make it clickable in your code.I have used my own Image here but you can use your own Image in your xml.
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
</LinearLayout>
Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :
I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<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="match_parent">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck
I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.
I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.