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!
Related
_________________
| 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"/>
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'm looking for a method to create a circled LinearLayout. So far, i'm able to create one using a drawable-xml and a solid color, but the Problem is, if i'm applying it to the Layout, it shows the Circle pretty good, but if i give the layout the "elevation"-Tag, e.g. 5dp, it shows the shadow in a box around the circle, right around the actual LinearLayout.
I need it to be around the Circle, so the rest is transparent.
(I also do have some other things INSIDE the layout! (Button, TextView etc. ), which need to rest in this layout! ;) )
Right now, this is what i have:
It currently looks like this:
(I am not yet allowed to upload pictures, sorry, so:
http://i59.tinypic.com/2lseihj.jpg
)
The pink Circle is a LinearLayout, but the actual LinearLayout is still a rectangle.
The XML for the Circle in the view looks like:
<LinearLayout
android:orientation="vertical"
android:layout_width="200sp"
android:layout_height="200sp"
android:background="#drawable/circle_layout"
android:gravity="center"
android:padding="5sp"
android:id="#+id/linLay_circleMain"
android:layout_alignTop="#+id/linLay_mainLeft_BrightTheme"
android:layout_centerHorizontal="true"
android:baselineAligned="false">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imBt_mainSettings"
android:src="#android:drawable/ic_menu_preferences"
android:background="#00ffffff"
android:layout_marginBottom="10sp"
android:scaleType="fitCenter"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/main_StandardTime"
android:id="#+id/tv_main_TimerView"
android:textSize="50sp"
android:textColor="#color/materialTextLight" />
<ImageButton
android:layout_width="40sp"
android:layout_height="40sp"
android:id="#+id/imBt_startSession"
android:src="#android:drawable/ic_media_play"
android:background="#00ffffff"
android:layout_marginTop="10sp"
android:scaleType="fitCenter"
android:visibility="invisible" />
</LinearLayout>
I've defined the Circle in this drawable xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/materialAccent"/>
</shape>
Right now, theres no Java-Code accessing or doing anything with the View...
So, gagain, the Problem is, that the actual View around the Circle is still rectangular, so that adding the material-depth creates a shadow at its sides.
Looking forward for a solution or an Idea.
I have a game which shows the avatars of the users as drawables. The avatars have a width of 150dp. Now I want to place on the bottom center a red or green dot which indicates if a user is online or not. I have the red/green dot as drawable as well. The dots have a width/height auf 30dp. How do I combine them?
Until now I was loading those avatars using the picasso library. I would really like to continue doing so, will that be possible?
I have a #drawable/avatar and either a #drawable/red_dot or #drawable/green_dot
Not sure what kind of source code I could provide here :-)
Thank you for your help in advance!
Edit:
I have been experimenting with Layer List which I saved as avatar.xml inside the drawable directory, but this only shows two same sized drawables ... so not something I really desire:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/avatarPic"
android:drawable="#drawable/avatar"
android:width="150dp"
android:height="wrap_content"
/>
<item
android:id="#+id/avatarBadge"
android:drawable="#drawable/redDot"
android:width="30dp"
android:height="30dp"
/>
</layer-list>
Second Edit:
Just wanted to mention that I went with a RelativeLayout here.
<?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" >
<ImageView
android:id="#+id/avatarPic"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/avatar" >
</ImageView>
<ImageView
android:id="#+id/avatarBadge"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignBottom="#id/avatarPic"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:layout_marginBottom="1dp"
android:adjustViewBounds="true"
android:src="#drawable/red_dot" >
</ImageView>
</RelativeLayout>
and in the main layout it is accessible through the <include> tag
A quick solution is to use a RelativeLayout.
Place the avatar ImageView as first child in the RelativeLayout
Plece the dot ImageView to be drawn over the image view bottom left with e.g.
layout_alignParentLeft="true"
layout_alignParentBottom="true"
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>