I am trying to make a layout as described below. I don't understand how to exactly implement the layout.
The layout and the above hexagon will have some text that i need to change dynamically from code.
I have tried a similar way mentioned here
But the hexagon is still clipping. I'm using the following code.
<RelativeLayout
android:id="#+id/Llfirstamount"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#color/layoutcolor1"
android:clickable="true"
android:clipChildren="false" >
<TextView
android:id="#+id/my_first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:android:layout_alignParentBottom="true"
android:android:layout_alignParentLeft="true"
android:padding="15dp"
android:text="Amount"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/my_second_text"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="-20dp"
android:background="#drawable/hexagon"
android:clipToPadding="false"
android:contentDescription="#string/contentdesc_peso_logo"
android:gravity="center"
android:text="x5" />
</RelativeLayout>
I don't know is this the only way or the right way or there is a much better way to implement this.I'm very confused.
Please Help!!! thank you..
EDIT:
Ok thanks for your answers using two text views with custom background is is a good and clean idea. Now I'm using the edited code but the hexagon is clipping like below..
Am i missing something i have also added
android:clipToPadding="false"
and
android:clipChildren="false"
in my code.
This will do it..
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#ccc"
android:gravity="center_vertical"
android:layout_centerInParent="true"
android:padding="5dp"
android:text="#string/hello_world" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView2"
android:layout_marginLeft="-25dp"
android:layout_marginBottom="-25dp"
android:layout_toRightOf="#+id/textView2"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
OUTPUT:
Good Luck :)
If you have to change the text from code you probably don't want to use an ImageView.
try with two TextViews (the green one and the hexagonal one which will take your image as background)
<RelativeLayout
android:id="#+id/Llfirstamount"
android:layout_width="wrap_content"
android:layout_marginTop="40dp"
android:layout_height="wrap_content"
android:background="#drawable/layout"
android:clickable="true"
android:clipChildren="false"
android:orientation="horizontal" >
<TextView android:id="#+id/my_first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:android:layout_alignParentLeft="true"
android:android:layout_alignParentBottom="true"
>
</TextView>
<TextView android:id="#+id/my_second_text"
android:layout_width="25dp"
android:layout_height="25dp"
android:android:layout_alignParentTop="true"
android:android:layout_alignParentRight="true"
android:contentDescription="#string/contentdesc_peso_logo"
android:background="#drawable/hexagon" />
</RelativeLayout>
Then you can use Activity.findViewById() to get the references on your textviews and change their texts.
Adding android:clipToPadding="false" and android:clipChildren="false" to the top-most layout view will do the trick, if you can bear all sub-views having the same effect.
Related
I am new to android and I have created a simple block of code which has a scrollView and an image. I want this scrollview to scroll smoothly. What do I have to do for that ? I have gone through many materials over internet, but all of those use hard terminologies which I'm not able to understand. Can someone please help me ? Thanks.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/top_string"
android:textColor="#android:color/white"
android:textSize="16dp"
android:textScaleX="1.5"
/>
<ImageView
android:id="#+id/img"
android:layout_width="300dp"
android:layout_height="150dp"
android:src="#drawable/dg_truck_main"
android:layout_gravity="center_horizontal"
android:background="#android:color/holo_blue_light"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_below="#id/text_view"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/top_string2"
android:textColor="#android:color/white"
android:textSize="16dp"
android:textScaleX="1.5"
android:layout_marginTop="50dp"
android:layout_below="#id/img"
/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
You have added ScrollView inside RelativeLayout, what I suggest is that you should place RelativeLayout inside ScrollView tag. Please go through below code,
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/top_string"
android:textColor="#android:color/white"
android:textSize="16dp"
android:textScaleX="1.5"
/>
<ImageView
android:id="#+id/img"
android:layout_width="300dp"
android:layout_height="150dp"
android:src="#drawable/dg_truck_main"
android:layout_gravity="center_horizontal"
android:background="#android:color/holo_blue_light"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_below="#id/text_view"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/top_string2"
android:textColor="#android:color/white"
android:textSize="16dp"
android:textScaleX="1.5"
android:layout_marginTop="50dp"
android:layout_below="#id/img"
/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Okay I got my answer. Since I was new to android, I thought that "smooth scroll" is something else and we have to integrate it into our project. But a scrollView already gives smooth scrolling and so we do not need to write any extra code for that.
//to make the scrollview faster
//add the below line in xml
android:fillViewport="true"
//also add the following line to your java class
// to make the scroll view faster
scrollView.fullScroll(View.FOCUS_DOWN);
scrollView.setSmoothScrollingEnabled(true);
I had a hard time resolving this issue. Finally found a solution very simple and very smooth outcome. In your recycler view set nested scrolling to false.
Two ways to achieve it.
Through xml file -
android:nestedScrollingEnabled="false"
Through java code -
recyclerView.isNestedScrollingEnabled = false
When I run this code on my device, additional space appears below the imageView. In the end, I would like my images to fulfill the greatest amount of space on the screen without distorting their dimensions. Any help would be greatly appreciated. I have attached the code for my elements and their attributes. Thanks!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_ch0_example_problems"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbarStyle="insideOverlay"
tools:context="com.example.android.chsalgebra.Ch0ExampleProblems">
<Button
android:id="#+id/prevBut1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:onClick="displayProblemMinus"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Previous"
android:textAllCaps="false"
android:textColor="#769ecd" />
<Button
android:id="#+id/nextBut1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dp"
android:layout_marginRight="6dp"
android:onClick="displayProblemPlus"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="#769ecd" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/prevBut1"
android:layout_alignLeft="#+id/prevBut1"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/prevBut1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ex1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingTop="12dp"
android:scaleType="fitStart"
app:srcCompat="#drawable/ch0ex1" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I ended up playing around with attributes and I found that android:adjustViewBounds set to true fixed my problem. I don't know exactly this attribute does, but it worked! Thanks again.
Replace the imageview with text view with height wrap content.
If the space is still there, then the problem is with the scroll view, else imageview has problem.
you can set the ImageView`XML (android:scaleType="centerInside or fitCenter")
I've looked at many posts on similar subject but couldn't find the answer to this problem... I use a RelativeLayout to have a button on the left, a button on the right and text in the middle. If the text is too long I use ellipsize (see XML below). The problem is that when the text is long it also cuts the BEGINNING of the code (see image). I can fix that by using android:gravity="center_vertical" instead of "center", but then when the text is short it becomes left-justified. I want it centered. Any hint ?
<RelativeLayout
android:layout_height="60dp"
android:layout_width="match_parent" >
<ImageButton
android:id="#+id/leftbutton"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:src="#drawable/back_chevron_icon"
android:background="#color/transparent" />
<ImageButton
android:id="#+id/rightbutton"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:src="#drawable/back_chevron_icon"
android:background="#color/transparent" />
<TextView
android:id="#+id/sometext"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:layout_toRightOf="#id/leftbutton"
android:layout_toLeftOf="#id/rightbutton"
android:maxLines="1"
android:ellipsize="end"
android:textSize="22dp"
android:text="Long Long Long Long Long Long Long Long Text" />
</RelativeLayout>
What I want is shown in the 2 pictures below. I can achieve that only by changing the gravity from center to center_vertical and vice versa.
Simple. Use android:gravity="center" on your TextView instead of android:gravity="center_vertical" and also use layout_toEndOf / layout_toStartOf attributes with layout_toRightOf and layout_toLeftOf
I Just change few tages from your code
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<RelativeLayout
android:layout_height="60dp"
android:layout_width="match_parent" >
<ImageButton
android:id="#+id/leftbutton"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
/>
<ImageButton
android:id="#+id/rightbutton"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
/>
<TextView
android:id="#+id/sometext"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:layout_toRightOf="#id/leftbutton"
android:layout_toLeftOf="#id/rightbutton"
android:maxLines="1"
android:ellipsize="end"
android:textSize="22dp"
android:text="Long " />
</RelativeLayout>
you can add multiple attribute using pipe
like this
android:gravity="center_horizontal|center_vertical"
It turns out that the code in the initial post WORKS !
It is the Design simulator in Android Studio that actually does not work and shows the (wrong) text layout as in my initial picture. Thank you ##*%! Android Studio developers... I wasted several hours of my time thanks to you...
You can add maxWidth at your target TextView.
I'd like to create a ListFragment in Android, and a background for each element, like this:
I'll want to set the width of theese background's from the code of my ListAdapter. I thought to create the list element's layout something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:id="#+id/surveyListRow_upperLayout"
android:layout_marginTop="7dp"
android:layout_marginBottom="7dp">
<RelativeLayout
android:layout_marginLeft="23dp"
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/surveyListRow_ringLayout"
android:background="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/textColor"
android:gravity="center"
android:id="#+id/surveyListRow_surveyName"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="55dp"
android:layout_marginRight="105dp"/>
<TextView
android:layout_width="80dp"
android:layout_height="match_parent"
android:textSize="18sp"
android:gravity="center"
android:id="#+id/surveyListRow_surveyPrize"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="57dp"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="30"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="70"/>
</LinearLayout>
</RelativeLayout>
And I'll set the weight property of the LinearLayout's children, to set the background width.
My problem is, when the text in the width is too long (as you can see in the third element). Then the background isn't scales to the bottom of the element.
Can you help me, why? I've tried almost everything I can imagine.
Thanks!
Try to add this to your TextView
<TextView
...
android:ellipsize="end"
android:ems="2"
android:maxLines="2" />
This don't let your textview has more than two lines and put an ellipsis on the end.
Maybe this would be a solution.
I'm trying to define layout for listview item that looks like attached image (made in Photoshop). What layout(s) should I use?
i propose a LinearLayoutwith horizontal orientation first, and inside a RelativeLayoutto place other views from left / top to right / bottom using attributes : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight etc ...
I would suggest using a RelativeLayout for this. Otherwise, you may up with too much nesting. I'm not going to write the layout but you should look through the RelativeLayout Docs and see all the possible properties you can give Views. You may possibly end up with child LinearLayouts also and that's ok. But I would use RelativeLayout for the parent.
If you are undecided a good thing to do is to draw it out really quick in xml how you think each might go and see with ViewGroup seems like the most efficient. Sometimes its hard to say until you get going on it by either writing the xml code or at least some pseudocode.
You only need to play now with paddings and margins.
<?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" >
<LinearLayout
android:id="#+id/gray_layout"
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#888888"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AUG"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="18"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2011"/>
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000088"
android:layout_toRightOf="#id/gray_layout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="30dp"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Title"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/divider"
android:text="18. aug 23:49"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Short msg"
android:layout_marginTop="10dp"
android:layout_alignTop="#id/divider"/>
<ImageView
android:id="#+id/info_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ff0000"/>
<ImageView
android:id="#+id/arrow_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_above="#id/info_button"
android:layout_toLeftOf="#id/info_button"
android:background="#00ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/arrow_button"
android:layout_toLeftOf="#id/info_button"
android:layout_alignLeft="#id/arrow_button"
android:gravity="center_horizontal"
android:text="30" />
</RelativeLayout>
You can nest multiple LinearLayouts with different orientation to achieve this.