_________________
| test |
| ______ |
|_____| |____|
|______|
This is what i want... The larger box is made with a drawable and inside it has an edittext. The smaller box should be a an imageview with an icon of upload.
When there is nothing in the edittext the imageview will be GONE(Not visible)
_________________
| |
|_________________|
so when the icon is visible i need to increase the width of the bigger box.The biggerbox has a stroke also.
So far i made it like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="27dp"
android:paddingEnd="27dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:alpha=".5"
android:background="#drawable/commenting_drawable">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="say something"
android:id="#+id/comments_editText"
android:textColor="#color/white"
android:textColorHint="#color/white_75"
android:fontFamily="sans-serif"
android:textSize="13sp"
android:textCursorDrawable="#null"
android:background="#color/transparent"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/icn_uploadcomment"
android:src="#drawable/black_circle_25"/>
</RelativeLayout>
</FrameLayout>
this is my drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff7c00" />
<stroke
android:width="1dp"
android:color="#color/white"/>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
So basically i want half of the imagewiew to be inside the biggerbox and i want to make the bigger box adjust itself when image view becomes visible.
You can reduce the size of the top margin of the relative layout of the image to make it overlap. Since you probably already have code to manipulate the layout since you are making the image view visible and invisible, the easiest way (IMO) to change the size of the bigger box would be to adjust the padding as follows:
RelativeLayout layout = (RelativeLayout) findViewById(R.id.biggerBox);
layout.setPadding(left, top, right, bottom);
left, top, right, bottom would be the padding needed to change the size of the bigger box. (You would also need to give an ID to the bigger box.)
I was able to find a solution to the above question by providing -ve margin to the smaller box in the xml
<EditText
android:id="#+id/comment_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/text_comment_style"
android:paddingBottom="32dp" />
<ImageView
android:id="#+id/comment_recorder_button"
android:layout_width="#dimen/progress_comment_recorder_diameter"
android:layout_height="#dimen/progress_comment_recorder_diameter"
android:layout_centerHorizontal="true"
android:layout_marginTop="-20dp"
android:layout_below="#+id/comment_text"/>
Related
I'm making an easy chatting app and I made a .9.png pic as the speech bubble. Here's a part of the message item layout XML (the bubble sent by user):
<LinearLayout
android:id="#+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/bg_send">
<TextView
android:id="#+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:textColor="#color/abc_primary_text_material_dark"/>
</LinearLayout>
The #drawable/bg_send is a 102px*102px .9.png file at app\res\. I thought it should be small displaying on my 5" 1920*1080 phone. But it's bigger than it should be and that caused blurring.
What should I do if I want to make it as I wish?
Instead of using .9.png use the drawable images instead. Here is the xml code that will fulfill your requirement.
res/drawable/bg_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#607D8B"/>
<corners android:radius="30dp"/>
</shape>
The image stretches to the size of of your LinearLayout (for which it is the background). The margin around the TextView makes the LinearLayout bigger. Move the android:layout_margin="10dp" attribute to the LinearLayout to have a margin around the bubble.
Try this one
<LinearLayout
android:id="#+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
>
<TextView
android:id="#+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/bg_send"
android:textColor="#color/abc_primary_text_material_dark"/>
Good luck
I try to find a nice(r) solution to my current layout problem:
I have a LinearLayout with 2 TextViews and 2 ImageViews and of each pair of views (text or image) one can be selected which should be displayed as a bottom border / underline.
Right now I use the following approach: I wrap every single one of those views in another LinearLayout and use like this as background (background is my bottom border):
drawable\preferred_border:
<item
android:bottom="1dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle" >
<stroke
android:width="2dp"
android:color="#color/nd_blue" />
<solid android:color="#00FFFFFF" />
</shape>
</item>
(it's a "hack" I found on stackoverflow to add a bottom border)
This approach works very nice but has one disadvantage: The distance between text/image and it's border is done via a paddingBottom of the innermost view (the border is set as a background in yet another wrapping LinearLayout). Now if the text and the images have not the same height, the bottom borders don't align in their vertical position!
Example of how it looks in my app:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true">
<LinearLayout
android:id="#+id/wrapper_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="#drawable/preferred_border">
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:singleLine="true"
android:text="#string/one"
android:paddingBottom="12dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/wrapper_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="3dp"
android:background="#drawable/preferred_border">
<TextView
android:id="#+id/twot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:singleLine="true"
android:text="#string/two"
android:paddingBottom="12dp"
/>
</LinearLayout>
</LinearLayout>
Same for the pair of ImageViews except it's obviously using an ImageView. The whole stuff is also packed into one RelativeLayout.
Right now I try to align them as best as I can by adjusting the padding and image sizes a little bit, but it is not a nice way to do this. I was hoping there is a clean solution using good layout skills in android :p
Thanks for any help / advice!
I want to show the image aligned to the top in the relative layout and the shadow should be around the image and not around the layout. What is going wrong I can't understand.
<RelativeLayout
android:layout_width="117dp"
android:layout_height="162dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/rectangle"
android:background="#drawable/drop_shadow"/>
</RelativeLayout>
This is how the image looks when preview in design mode. notice the white background that is coming because of drop shadow and it looks like eventhough the actual image is smaller but the imageview is taking relative layout parameters to drop shadow. Any help is appreciated.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Here selector file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
Hope this might help.
Looks like you just need add the adjustViewBounds property. That property defaults to false...
<RelativeLayout
android:layout_width="117dp"
android:layout_height="162dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true" <-- ADD THIS
android:src="#drawable/rectangle"
android:background="#drawable/drop_shadow"/>
</RelativeLayout>
I have a problem with an ImageButton. The position of my image is not good into the ImageButton.
is there a way to fix that programmatically ?
<ImageButton
android:id="#+id/nouvelle_annonce_choose_image"
style="?android:attr/borderlessButtonStyle"
android:layout_width="170dp"
android:layout_height="170dp"
android:scaleType="center"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/rounded_button"
android:gravity="center_vertical|center_horizontal"
android:src="#drawable/camera"
android:text="hello"
android:textColor="#color/blanc" />
rounded_button.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/blanc"/>
<stroke android:width="3sp" android:color="#color/blue_dark_normal" />
</shape>
You've started to do it, with the android:layout_marginTop. Either add a bottom margin, or else just us layout_margin, and you should be able to adjust the image as desired.
In fact, it's because of the android:layout_marginTop that your image is off centered. It is putting a large margin at the top of the image, without compensating for it at the bottom.
If margin doesn't work, then try playing with padding. Padding affects how things are aligned within the image. Padding is simply android:padding, or android:paddingBottom attributes.
Add this in your ImageButton xml:
android:scaleType="center"
Add this line in ImageButton xml
android:scaleType="fitCenter"
I want to create a view like image below. My implementation has some linearLayouts. One root with a custom drawable to get the rounded edges and then others for the two textviews and view divider. Is there a faster and easier way to do this?
You can do this with just 1 LinearLayout, the root one. The LinearLayout is used just to order other views. So, what you need to do is to use the vertical orientation and add two text views.
On the first one you set the background color to a light gray. And remember to use the gravity as center so your text will be placed on the center of the text view.
I dont have much time, just tried to give a quick sample. Here's my code for your question:
your_main_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="match_parent"
android:background="#drawable/your_bg.xml">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="my text" />
<View
android:id="#+id/seperator
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/tv1" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2nd text here"
android:layout_below="#+id/seperator" />
</RelativeLayout>
your_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"
/>
<solid android:color="#fff" />
<stroke android:color="#000" />
</shape>