Create border around a centered custom view and removing useless LinearLayout? - android

Currently I have following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/editorRootView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout android:id="RL1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<!-- LinearLayout needed so we have an border outside of the EditorView -->
<LinearLayout android:id="LL1"
android:background="#drawable/border"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<xenolupus.EditorView
android:id="#+id/editorView"
android:layout_width="300dip"
android:layout_height="216dip" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:orientation="horizontal" >
<Button
android:id="#+id/otherImage"
android:layout_width="150dip"
android:layout_height="60dip"
android:text="#string/cardEditor_OtherImageButtonText" />
<Button
android:id="#+id/next"
android:layout_width="150dip"
android:layout_height="60dip"
android:text="#string/cardEditor_NextButtonText" />
</LinearLayout>
</LinearLayout>
And the used #drawable/border:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FFFFFF" />
<stroke
android:width="10dip"
android:color="#FF0099CA" />
<padding
android:left="10dip"
android:top="10dip"
android:right="10dip"
android:bottom="10dip" />
<corners
android:radius="5dip" />
</shape>
However Eclipse warns me (yellow triangle with !) that the LinearLayout LL1 in the RelativeLayout RL1 is useless and should be removed:
This LinearLayout layout or its RelativeLayout parent is useless;
transfer the background attribute to the other view.
As the RelativeLayout is needed to center the EditorView I tried removing the LinearLayout LL1 and adding the android:background of the LinearLayout LL1 to the EditorView. However doing lets the border disappear behind the content of the EditorView.
Is there another way to add a border outside of the EditorView or should I just ignore the warning?
Greetings
Xeno Lupus

yes it's right, put the background inside your <xenolupus.EditorView
like this
<xenolupus.EditorView
android:background="#drawable/border"
android:padding="10dp"
android:id="#+id/editorView"
android:layout_width="300dip"
android:layout_height="216dip" />
and then add gravity to it parent the RL1 layout
> android:gravity="center"

View can draw background by default. If you developed you EditorView correctly, you can just set background and paddings directly in XML:
<xenolupus.EditorView
android:id="#+id/editorView"
android:layout_width="300dip"
android:layout_height="216dip"
android:background="#drawable/border"
android:padding="10dp" />
By "developed correctly" I mean that your view calculate it's width in height (in onMeasure or onSizeChanged methods) with paddings. In other words: while calculating size you used getPadding*() methods.
NOTE
Do not forget to call super.onDraw() !

Related

Android xml drawable is bigger first time

I have two clickable text views with the same drawable left image. When I open fragment first time the first image looks bigger then second one. After clicking on first text view the next fragment is opening and then when I return back two images have the same size. What's wrong? Please help to find out reason of this bug.
This is my layout:
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/dmvLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/dmv_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider"
android:background="#color/lineColor" />
<RelativeLayout
android:id="#+id/tlcLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/tlc_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
</LinearLayout>
This is image drawable (lawyer_selected.xml), where femida is png image, and white background is needed for selected state (button in selected state is green and image should be with white frame):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<padding
android:bottom="#dimen/dash_icon_padding"
android:left="#dimen/dash_icon_padding"
android:right="#dimen/dash_icon_padding"
android:top="#dimen/dash_icon_padding"/>
<solid android:color="#android:color/white"/>
<corners
android:radius="#dimen/dash_icon_radius"/>
</shape>
</item>
<item android:drawable="#drawable/femida"/>
</layer-list>
Image femida.png
Just use nested LinearLayout instead and use android:layout_weight="1" or any required value to you and it will work for sure.
**In your case it will be 1 only, while the main parent LinearLayout can have wrap_content as height

Android drawing lines with margin

So, I managed to create a shape (rectangle) with only one side. Now, I want that one side to have margin right and margin left. Right now it looks like this:
and this is how it is supposed to look like(don't mind colors):
Now, I have a code for the line:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-55dp"
android:right="-55dp"
android:top="-55dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
<stroke
android:width="5dp"
android:color="#color/text" />
</shape>
</item>
How to achieve this?
Layout for the textviews.
<LinearLayout
android:id="#+id/picture_activity_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/layout_margin"
android:layout_marginLeft="#dimen/layout_margin"
android:layout_marginRight="#dimen/layout_margin"
android:background="#color/background"
android:orientation="vertical"
android:visibility="visible">
<TextView
android:id="#+id/picture_activity_take_new"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_text_line"
android:drawableStart="#drawable/ic_profilepicture_takephoto"
android:gravity="center"
android:padding="#dimen/layout_padding"
android:text="Take a new picture"
android:textColor="#color/text"
android:textSize="#dimen/large_text_size"/>
<TextView
android:id="#+id/picture_activity_select_from_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_profilepicture_addphoto"
android:gravity="center"
android:padding="#dimen/layout_padding"
android:text="Select new from gallery"
android:textColor="#color/text"
android:textSize="#dimen/large_text_size"/>
<TextView
android:id="#+id/picture_activity_remove_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_profilepicture_delete"
android:gravity="center"
android:padding="#dimen/layout_padding"
android:text="Remove photo"
android:textColor="#color/text"
android:textSize="#dimen/large_text_size"/>
</LinearLayout>
I think you are using a recyclerview. For a recyclerview you would need to have a single row layout.
<LinearLayout>
height, width, id
<TextView>
width = "match_parent"
height, id
<LinearLayout>
android:id="#+id/line"
android:height="2dp"
android:width="match_parent"
android:layout_marginLeft="whatever_you_need"
android:layout_marginRight="whatever_you_need"
android:background="some_color" />
</LinearLayout>
So here, you don't have to add the line manually everytime
There is one issue, i.e. the line will come below your last row. I believe you would like to remove it.
In the adapter
String[] itemList = {"Take a new Picture", "Select from Gallery",...};
In your viewholder class in the recyclerview adapter:
line = (LinearLayout) itemView.findViewById(R.id.line);
In your onBindViewHolder for the recyclerview. Here we identify the last row and then hide the underline.
if(position == itemList.length - 1){ //position starts from 0
holder.line.setVisibility(View.GONE);
}
Now this will look as you desire

How to access TextView on top of a View

I am trying a simple application where I wanted to show some values within a circle. I referred some article and using shape files I can able to generate circle.
But I am not able to add TextView within that circle.
Can anyone help me in solving this?
here is my shape file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<stroke android:width="2dp" android:color="#000000"/>
</shape>
here is my layout file.
//<RelaiveLayout> outer RelativeLayout
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/eDeleted"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true">
<View android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:background="#drawable/circle"/>
</LinearLayout>
</RelativeLayout>
I want to add a TextView within View.
Try this:
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text"
android:background="#drawable/circle"
android:gravity="center"/>
I hope this can help you
View cannot contain child views, only ViewGroup can do that. LinearLayout is a ViewGroup, so, you can replace your View with a TextView and try setting a background on your layout or text view itself.

Dynamically Changing List Row Background When Selected

I've searched around online for a solution to this problem and have tried out different ways of doing this but haven't come up with an answer. I have a list view and a custom row layout for the rows of the list. In my list row xml file there is a relative layout with an ImageView and text. Along with that I set the background of this relative layout to a certain shape and this works fabulous. Now at runtime I want to change this list row background to appear pressed inwards ( I was thinking just make the padding a little smaller or something). I have tried making another xml file for a pressed shape but it hasn't worked. I also tried to code this up by doing something such as this:
RelativeLayout rl = (RelativeLayout)view.findViewById(R.id.relativerow);
rl.setBackgroundResource(R.drawable.item_shape_pressed);
I'm guessing I'd have to make my own onPressed method for this to work?
Here is the shape xml file I am using for each list row background:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_shape">
<padding android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<corners android:radius="20dp" />
<solid android:color="#FFF" />
</shape>
Here is the XML for each row in the list view. See where I sit the background attribute at the top.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativerow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/item_shape"
android:padding="5dip" >
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="60dip"
android:layout_height="60dip"/>
</LinearLayout>
<TextView
android:id="#+id/articletitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:textColor="#040404"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/articldesc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/articletitle"
android:textColor="#343434"
android:textSize="13sp"
android:textStyle="italic"
android:layout_marginTop="1dip"
android:layout_toRightOf="#+id/thumbnail"
/>
</RelativeLayout>
So, is there any way for me at runtime to change the background in this relative view from the normal item_shape to another pressed in item shape? If anyone could show me how to do this I would certainly appreciate it. This is just a small part of the app that has been bugging me recently but it would be a nice touch to make the app look more complete.
Try with create your own selector for the ListView, for example listview_item_selector.xml in res/drawable folder and add this selector in the background of your RelativeLayout.
The following code will be: listview_item_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_shape_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/item_shape_focused" android:state_focused="true" />
<item android:drawable="#drawable/item_shape" />
</selector>
And in your RelativeLayout put:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativerow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/listview_item_selector"
android:padding="5dip" >
.....

How to create a custom view with rounded edges and two textviews?

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>

Categories

Resources