I am creating an Android application. I am new to android. I want to create a label like in the image below.
Here is the below code that I have tried.
I have labels over the images. Any help will be appreciated. Thanks
<FrameLayout
android:layout_weight="1"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/fl_bg">
<ImageView
android:layout_gravity="center"
android:id="#+id/iv_avatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/app_name"
android:src="#drawable/jouer"
android:scaleType="fitCenter"/>
<LinearLayout
android:gravity="center"
android:id="#+id/ll_winner_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_marginTop="20dp"
android:id="#+id/tv_rank"
android:text="1"
android:layout_gravity="top"
android:rotation="120"
android:background="#color/label_center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginTop="20dp"
android:id="#+id/tv_earned_amount"
android:text="5$"
android:rotation="120"
android:background="#color/label_center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
make changes in your code as follows
<ImageView
android:layout_gravity="center"
android:id="#+id/iv_avatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/app_name"
android:src="#mipmap/ic_launcher"
android:scaleType="fitCenter"/>
<LinearLayout
android:gravity="center"
android:id="#+id/ll_winner_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_marginTop="-20dp"
android:layout_marginStart="-20dp"
android:id="#+id/tv_rank"
android:text="1"
android:layout_alignParentTop="true"
android:rotation="120"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_below="#id/tv_rank"
android:layout_marginTop="40dp"
android:layout_marginStart="-30dp"
android:layout_marginEnd="0dp"
android:id="#+id/tv_earned_amount"
android:text="5$"
android:rotation="120"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
result
Have you tried using the Editor with the ConstraintLayout?
Failing that, using a FrameLayout the z-index of elements is assigned by the order in which they are presented.
You may need to assign a layout-gravity to some of your elements e.g:
"android:layout_gravity="top|left"
Related
I made this tableLayout, but as you can see, it has some margin that I don't know how to remove: https://imgur.com/a/qKcaJ92
Another problem is that the last row is open. This is my 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:orientation="vertical"
android:gravity="center"
android:id="#+id/slidelinearlayout">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tl"
android:layout_width="170dp"
android:layout_height="180dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="150dp"
android:layout_marginRight="0dp"
android:background="#android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="#+id/tr_item_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Flessibilità" />
<TextView
android:id="#+id/f_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Fluidità" />
<TextView
android:id="#+id/fl_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Originalità" />
<TextView
android:id="#+id/o_item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Elaborazione" />
<TextView
android:id="#+id/el_item_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Titolo" />
<TextView
android:id="#+id/t_item_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tl_2"
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
android:background="#android:color/white"
android:padding="16dp"
tools:context=".MainActivity">
<TableRow
android:id="#+id/tr_item_6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/t1_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di reazione" />
<TextView
android:id="#+id/tempo_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/t2_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Tempo di completamento" />
<TextView
android:id="#+id/tempo_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
<TableRow
android:id="#+id/tr_item_8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/n_cancellature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingRight="10dp"
android:text="Numero cancellature" />
<TextView
android:id="#+id/n_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/table_cell_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</TableRow>
</TableLayout>
</RelativeLayout>
Do you know how can I solve that? As you can see al the tags are closed. I used the RelativeLayout to set the elements wherever I want in the screen, can that be part of the problem?
PS: For the margins problem, I even tried to resize the table but nothing changed
You are not seeing your layout like you want because you are using fixed sizes on your views:
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_marginTop="150dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
If you want to see your table the same way on all devices you can use ConstraintLayout with guidelines to achieve your wanted look:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView5"
app:layout_constraintEnd_toStartOf="#+id/textView4"
android:background="#color/cardview_dark_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/cardview_dark_background"
app:layout_constraintStart_toEndOf="#+id/textView5"
app:layout_constraintTop_toTopOf="#+id/textView5" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="1"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView6"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/colorAccent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/colorAccent"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
android:background="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/cardview_dark_background"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this: (the arrow points to the guidelines for better understanding)
Now, I know that at first look this may look like a lot of work and some may wonder if this is really worth the effort but here is why I believe ConstraintLayout is the proper way to build your UI:
It's really user-friendly.
ConstraintLayout is very easy and simple to learn.
once you have learned it you will see that you are saving a lot of development time because making your UI is simply fast.
Constraint layout is meant to support different screen sizes so no need to build a layout for every screen size.
You have used unnecessary margins in Table layout which makes your layout to move away form screen. Make Table layout as layout_width="Match_parent" & layout height="Wrap_Content" respectively.
Also try to avoid the below margins you mentioned.
android:layout_width="300dp"
android:layout_height="130dp"
android:layout_marginLeft="750dp"
android:layout_marginTop="370dp"
The above can be rewritten as
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="0"
android_gravity:center
I am trying to set my admob banner on bottom of the screen but it's not showing. I have tried all possible way to set it as bottom but I am unable to set it...its going down side of expandable list view.
My XML is like below...let me know if someone can help me to sort out issue.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e7e7e7"
android:gravity="center"
android:orientation="vertical"
android:weightSum="1">
<include
layout="#layout/top_points_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/five">
</View>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/laytop_imgwidthheight"
android:layout_height="#dimen/laytop_imgwidthheight"
android:contentDescription="#string/app_name"
android:src="#drawable/app_icon"
android:visibility="gone" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:gravity="left"
android:padding="#dimen/five"
android:text="Country of Purchase"
android:textColor="#color/Gray"
android:textSize="18sp"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/layout_country_selection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="5dp"
android:background="#drawable/list_item_background"
android:orientation="horizontal"
android:padding="6dp">
<com.commonutility.RoundImageView
android:id="#+id/imageView_country_logo"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_vertical"
android:layout_marginBottom="4dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/country_default_logo"
android:visibility="visible" />
<TextView
android:id="#+id/textView_country_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_toRightOf="#+id/imageView_country_logo"
android:padding="5dp"
android:text="Select Your Country"
android:textColor="#color/Blue"
android:textSize="19sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="5dp"
android:padding="3dp"
android:src="#drawable/dropdown" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/five"
android:layout_weight="1"
android:gravity="right"
android:paddingBottom="#dimen/five"
android:paddingTop="#dimen/five"
android:text="Country"
android:textColor="#fe4080"
android:textSize="#dimen/rewards_countrytextsize"
android:textStyle="bold" />
<TextView
android:id="#+id/txtcountry"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left"
android:paddingBottom="#dimen/five"
android:paddingTop="#dimen/five"
android:text="USA"
android:textColor="#color/material_color_primary_dark"
android:textSize="#dimen/rewards_countrytextsize"
android:textStyle="bold" />
</LinearLayout>
<ExpandableListView
android:id="#+id/lvExp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/list_item_background"
android:cacheColorHint="#android:color/transparent"
android:divider="#color/md_white_1000"
android:dividerHeight="0dp"
android:groupIndicator="#null"
android:scrollbars="none" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false"
android:nestedScrollingEnabled="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_home_footer">
</com.google.android.gms.ads.AdView>
</LinearLayout>
Let me know what is wrong in this.
Thanks :)
android:layout_alignParentBottom="true"
works only in RelativeLayout, but it's inside a LinearLayout.
You could change the root layout to RelativeLayout and wrap everything but your AdView inside another LinearLayout (or better handle the behaviour of the other views as expected inside a RelativeLayout to avoid deep layouts).
I'm making a layout:
Here is a code:
<?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="wrap_content"
android:background="#373c5c"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_marginTop="15dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:orientation="horizontal"
android:padding="10dp">
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="36dp"
android:layout_marginRight="4dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:contentDescription="#string/app_name"
android:layout_height="36dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="start"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="20dp"
android:gravity="end"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
How to add an text above the 'button style' linear layout?
I want for example "Hello dear user! Check it below".
Where put textview, where add more layout or whatever?
It is very simple!
You have to add TextView, with id (text, for example) and, in your LinearLayout you need to add line android:layout_below="#+id/text". Optional, you can specify attribute android:layout_alignParentTop="true" in TextView.
Just use code below:
<?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="wrap_content"
android:background="#373c5c"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/text"
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_below="#+id/text"
android:layout_marginTop="15dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:orientation="horizontal"
android:padding="10dp">
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="36dp"
android:layout_marginRight="4dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:contentDescription="#string/app_name"
android:layout_height="36dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="start"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="20dp"
android:gravity="end"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
Above
<LinearLayout android:id="#+id/list_offer_item_container"
put your TextView or whatever you want. So something like
<TextView android:id="#+id/myTV"
// other attributes />
Then in
<LinearLayout android:id="#+id/list_offer_item_container"
add android:layout_below="#id/myTV"
By default, RelativeLayout puts it's elements at the top-left until you specify otherwise. So adding this will put your LinearLayout below the TextView.
I think the confusion is on how RelativeLayout and LinearLayout work. You have orientation in your RelativeLayout which does nothing. RelativeLayout puts it's elements in the order you tell it by the attributes such as layout_below and layout_above. LinearLayout, however, adds them in the order in which they show in the xml file which is why orientation matters in LinearLayout but not RelativeLayout.
You'll want to look at RelativeLayout.LayoutParams and other parts of the documentation to better understand how the layouts work and which is best in your specific cases.
So I have 2 textviews, one above the other, but when the second text view is populated the cut is cut off at the bottom. The textview, titled header_subtitle has the issue in question
Clearly Im missing something obvious, but dont know what.
[Issue]1
Here is the code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/search_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
<RelativeLayout
android:id="#+id/container_results"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:visibility="gone">
<LinearLayout
android:id="#+id/container_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/product_results_header_height"
android:orientation="vertical"
android:padding="?marginNormal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<FeatureTextView
android:id="#+id/header_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?taTitleXL" />
<FeatureTextView
android:id="#+id/header_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_gravity="fill"
android:textAppearance="?taTitleXL"
android:padding="1sp"
android:visibility="gone"/>
</LinearLayout>
<Spinner
android:id="#+id/sort_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="?marginNormal" />
<FeatureButton
android:id="#+id/refine_btn"
style="?buttonTertiary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="?marginNormal"
android:text="#string/product_results_refine" />
</LinearLayout>
<SimpleFlowLayout
android:id="#+id/category_links"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?marginSmall"
android:horizontalSpacing="?marginTiny"
android:maxLines="2" />
</LinearLayout>
<include
android:id="#+id/divider_horizontal"
layout="#layout/divider_horizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/divider_size"
android:layout_below="#+id/container_header" />
<FeatureTextView
android:id="#+id/browse_no_results"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/divider_horizontal"
android:layout_margin="?marginNormal"
android:text="#string/product_results_no_results"
android:textAppearance="?taTitleM"
android:visibility="gone" />
<GridView
android:id="#+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/divider_horizontal"
android:numColumns="#integer/product_grid_cols"
android:overScrollMode="#null"
android:stretchMode="columnWidth" />
<include
android:id="#+id/progress_footer"
layout="#layout/loading"
android:layout_width="#dimen/progress_view_height"
android:layout_height="#dimen/progress_view_height"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
<NoFilteredResultsView
android:id="#+id/noFilteredResults"
android:layout_below="#id/divider_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<include
android:id="#+id/coach_mark"
layout="#layout/view_coach_mark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/coach_mark_margin_end"
android:layout_marginTop="#dimen/coach_mark_margin_top" />
</RelativeLayout>
</FrameLayout>
One of your LinearLayouts has height set to fill_parent. change it to wrap_content.
Also, remove the min_height attribute. Yout have two text fields in there, so it looks like you're totally OK with the second getting cut off.
It's kind of hard to tell what you're going for, but see if that helps.
i know it's so late, but this is work like charm for me. add this code to your textview
android:ellipsize="marquee"
android:layout_weight="1"
Merging two TextView tags into one solved my issue:
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:gravity="center_horizontal"
android:id="#+id/app_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="2dp"
android:text="© 1997 - 2020 "
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/text_digicollect"
android:text="Onetime"
android:textColor="#color/black"
android:layout_marginStart="4dp"/>
</LinearLayout>
Changing to:
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:gravity="center_horizontal"
android:id="#+id/app_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="2dp"
android:text="© 1997 - 2020 OneTime"
android:textColor="#color/black"
android:textSize="12sp" />
</LinearLayout>
How do i align the arrows to be right above/below the numbers? Does each arrow need to have it's own linear layout? Is there a way to set this without setting a static amount of padding? I would like this to be generic enough to be used and show up properly on different devices...
I'm relatively new to android development - especially the UI portion of it... so any help would be appreciated!
What I See (Above)
What I Would Like To See (Above)
You can nest another LinearLayout (with orientation:vertical) inside your LinearLayout (with orientation:horizontal).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/one"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/two"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
</LinearLayout>
Note that nesting too many layouts inside a layout is discouraged. Reference:
http://developer.android.com/training/improving-layouts/optimizing-layout.html
But having 2 layout hierarchy is totally fine.
You need to nest two vertical LinearLayouts inside of your horizontal LinearLayout. Here's one where I do the same thing but I have empty Views on each side and one in the middle. You can take those out if you don't want them and obviously change your ids, backgrounds, and such
<LinearLayout
android:id="#+id/mpImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/mpLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/mpUpBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/UpArrow"
android:onClick="cycleUp"/>
<TextView
android:id="#+id/mpTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="breakfast"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black"/>
<ImageButton
android:id="#+id/mpDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/catLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/catUpBtn"
style="#style/UpArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleUp" />
<TextView
android:id="#+id/catTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beef"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black" />
<ImageButton
android:id="#+id/catDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
</LinearLayout>
You will notice I have also used weight and a 0dp for the width of the nested LinearLayouts and for the View to give them the separation I wanted and to look right on different screen sizes. You can change those depending on your needs.
You can have nested layouts. Be careful not to have too many, however two should be fine. Here is an example of what I think you are looking for. The arrows and text should be aligned thanks to RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_one"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_two"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/two"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>