I want to create layout like at picture but i don't have clue at all how to make like that..
Does anyone can give me a clue or alternative how to do that ?
Split it like this.
Imageview and first textview in a linearlayout Horizontal.
and then this linearlayout Horizontal and second textview in a linear layout vertical.
One way to do this could be to lay the TextView and then overlay the ImageView on it. I think a RelativeLayout with the TextView defined first and followed by the ImageView might do the trick. You can toggle the visibility of the ImageView but would need to ensure that any text written to the TextView is written after taking into account width of the ImageView so as to not obscure any text.
You can try adding two textviews in a relative layout and in addition to that an imageview.
This might help you to get started.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_generator"
android:background="#FF000000">
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:textColor="#FFF"
android:textSize="18sp" />
<TextView
android:id="#+id/item_title_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginTop="16dp"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/item_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/item_title"
android:layout_below="#+id/item_title"
android:textColor="#888"
android:textSize="14sp" />
<ImageView
android:id="#+id/item_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="40dp"
android:padding="0dp"
android:contentDescription="#string/hello_world" />
</RelativeLayout>
Related
I wrote the following XML code:
<?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"
android:background="?android:attr/selectableItemBackground">
<ProgressBar
android:id="#+id/layout_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxHeight="50dp"
android:minHeight="50dp"
android:minWidth="50dp"
android:maxWidth="50dp"
android:theme="#style/progressColor"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp"/>
<ImageView
android:id="#+id/layout_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp"/>
<TextView
android:id="#+id/layout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_progressbar"
android:textSize="15sp"
android:ellipsize="end"
android:maxLines="1"
android:gravity="center"
android:text="aaaaaaaaaaaaaaaa"
android:layout_marginBottom="15dp" />
</RelativeLayout>
It's the item of a RecyclerView. It basically tries to create the following layout:
[ ImageView ]
[TextView]
Where the TextView is in the center of the ImageView. If the TextView is too long it will shorten it and put three dots at the end. But the problem is I can't seem to figure out how to make the TextView size to be a bit less then the size of the ImageView. Currently it creates:
The ImageView is set dynamically and it could be of size 50dp-70dp.
I'm trying to achieve something like:
How can I do it? I know that I can use gravity to be center only in match_parent but this is a RV item so I want it to be wrap_content.
Since you are using a RelativeLayout you can use android:layout_centerHorizontal="true" in the ProgressBar and ImageView.
If you want to center vertically add also android:layout_centerVertical="true".
<RelativeLayout>
<ProgressBar
android:layout_centerHorizontal="true"
..>
<ImageView
android:layout_centerHorizontal="true"
..>
</RelativeLayout>
I have four TextView in LinearLayout with orientation="horizontal". Below in image, I want my fourth TextView to vertically center with respect to other views, In simple words, I want to move my fourth TextView a little bit up so it looks like in the center. I tried to add layout:gravity and margins but its not working.
Here is the code:
<LinearLayout
android:id="#+id/tv_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_main_feature_LL"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_food_and_restaurant"
android:padding="3dp"
android:text="Resturant"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_tv_black_24dp"
android:padding="3dp"
android:text="LCD Tv"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_local_parking_black_24dp"
android:padding="3dp"
android:text="Parking"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginBottom="20dp"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
</LinearLayout>
You could easily do that by adding android:layout_gravity="center_vertical" and removing your margin bottom.
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
Add this prop to your #+id/tv_amenities LinearLayout
android:gravity="center_vertical"
Use android:layout_gravity="center_vertical" attribute in your TextView's
I checked your code inside a constraint layout and it's fine.
All I changed is in your last TextView:
android:layout_gravity="center"
Or
android:layout_gravity="center_vertical"
The layout_gravity=center looks the same as
layout_gravity=center_horizontal here because they are in a vertical
linear layout. You can't center vertically in this case, so
layout_gravity=center only centers horizontally.
This link can help you to fix your issue in LinearLayout or RelativeLayout.
You might find this link useful:What is the difference between gravity and layout_gravity in Android?
I have these two TextViews in my content_main, I am a beginner and i can't figure out why are they overlapping in the center, I tried chanign everything and it still doesn't work.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="top"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="bottom"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
Try adding this code on the second TextView(#tempratureTextView):
layout_below="#+id/nameTextView"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_below="#+id/nameTextView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
</RelativeLayout>
The layout xml above will work.
Besides that, I noticed that you are trying to use android:gravity to position your TextView on top and bottom. This will not work because android:gravity only set the gravity of the content(the text) in your TextView. Use android:layout_gravity to set the TextView's gravity within the parent container.
layout_alignParentTop makes sure that your view stays at top,regardless of other views.Same thing about layout_alignParentBottom it makes view stick to bottom.
In your scenario you want these TextView one below other, So you have to specify android using, layout_below for the bottom element.
Anyway you have the answers as others has provided it,just making it clear about reason.
I have an ImageView and TextView inside a RelativeLayout to move them all around as a group that sticks together. It looks fine in the Graphical Layout inside Eclipse.
(The blue shows the outline for the RelativeLayout):
However when I run the app, the child views appear squished toghether or on top of each other. The ImageView doesn't even show anymore. I'm not sure why this occurs?
XML
<RelativeLayout
android:id="#+id/frameB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squashcourt"
android:layout_alignLeft="#+id/squashcourt"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:clickable="true"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_aboveB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="3dp"
android:clickable="true"
android:text="Robin"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/Red"
android:textStyle="bold" />
<ImageView
android:id="#+id/btn_B"
android:layout_width="115dp"
android:layout_height="115dp"
android:layout_below="#+id/tv_aboveB"
android:layout_centerHorizontal="true"
android:layout_margin="3dp"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/b_left" />
</RelativeLayout>
I'm using a Samsung S4. Can anyone suggest something?
Thanks in advance!
You can Use simply TextView with bottom drawable .
<TextView
android:id="#+id/tv_aboveB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:text="Robin"
android:drawableBottom="#drawable/ic_launcher"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ff0000"
android:textStyle="bold" />
Now you can move the TextView any where on the screen.
I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).
This is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
As you can see, the TextView myText overlaps the ImageButton button_edit.
A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:
I need the edit button on the right
I need the text to fill the rest of the layout (at the left of edit button obviously)
I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.
The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'
Can anyone help me? Thanks
use layout_toLeftOf in TextView layout
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#+id/button_edit" />
Another way of doing is to use android:layout_toEndOf attribute
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle"
android:layout_toEndOf="#+id/myText" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />