I don't know how to explain my problem but below on image is what I need to do:
On image I have 4 textview in a linear layout.
I want a long text to be wrapped and to go to the new line at bottom to another textView.
how could I have 4 textView like on that image ?
Thanks.
Add dependency to your gradle file:
dependencies {
implementation 'com.google.android:flexbox:2.0.1'
}
and add this to your xml file:
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"
app:showDivider="beginning|middle"
app:dividerDrawable="#drawable/divider" >
<TextView
style="#style/FlexItem"
android:layout_width="220dp"
android:layout_height="80dp"
android:text="1" />
<TextView
style="#style/FlexItem"
android:layout_width="120dp"
android:layout_height="80dp"
android:text="2" />
<TextView
style="#style/FlexItem"
android:layout_width="160dp"
android:layout_height="80dp"
android:text="3" />
<TextView
style="#style/FlexItem"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="4" />
<TextView
style="#style/FlexItem"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="5" />
After many days of search; I did not find anything.
It is not possible to align TextViews like that.
The solutions is using the SpannableString.
Related
I have the following content for my recycler card element
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardview_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="4dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="6dp"
>
<ImageView
android:id="#+id/imageview_category_icon"
android:layout_width="30dp"
android:layout_height="45dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/ic_own_groceries" />
<TextView
android:id="#+id/textview_item_name"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_plus"
android:layout_toEndOf="#+id/imageview_category_icon"
android:gravity="center_vertical"
android:text="Item Name"
android:textColor="#color/grayDark"
android:textSize="#dimen/small_text_size"
android:textStyle="normal" />
<Button
android:id="#+id/button_plus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_minus"
android:background="#color/greenDark"
android:text="+"
android:textColor="#color/white" />
<Button
android:id="#+id/button_minus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_status"
android:layout_alignParentTop="true"
android:background="#color/redDark"
android:text="-"
android:textColor="#color/white" />
<Button
android:id="#+id/button_status"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_edit"
android:background="#color/grayMedium"
android:gravity="center"
android:text="3"
android:textColor="#color/white"
android:textSize="#dimen/normal_text_size" />
<ImageView
android:id="#+id/button_edit"
android:layout_width="20dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:onClick="goToEditor"
app:srcCompat="#drawable/ic_baseline_edit_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
Unfortunately, android:layout_marginTop="4dp" in the root element does not seem to have an effect on the margin between consecutive cards in the app display. In fact, there is no margin at all, no matter to what value I change the "4dp". On the other hand, android:layout_marginHorizontal="4dp" works fine.
Also, app:cardCornerRadius="4dp" has no effect either, though when visualizing in Android Studio only this layout file, the rounded corners do appear.
As suggested by answers to a similar question, I did use "wrap_content" for height wherever possible. To no avail.
What's wrong?
This answer was posted by the author of the question.
The problem persists, but I found a hack by inserting above RelativeLayout an empty TextView with the same height as the desired top margin.
No matter what I do my EditText appears like this :
My XML :
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout_search"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:gravity="top"
android:layout_height="wrap_content">
<EditText
android:background="#null"
android:textColor="#color/black"
android:layout_centerInParent="true"
android:gravity="top"
android:layout_gravity="top"
android:id="#+id/SearchText"
android:textColorLink="#color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/normatext"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
I changed all possible values for gravity and layout_gravity in every possible variation! Any ideas ?
EDIT :
Full Layout :
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="0dp"
android:paddingTop="6dp"
android:paddingBottom="5dp"
android:layout_margin="3dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_height="45dp">
<Button
android:layout_width="43dp"
android:layout_height="wrap_content"
android:background="#drawable/ham"
android:id="#+id/hambtn"
android:textColorHint="#color/black"
android:layout_weight="0"
/>
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout_search"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:gravity="top"
android:layout_height="wrap_content">
<EditText
android:background="#null"
android:textColor="#color/black"
android:layout_centerInParent="true"
android:gravity="top"
android:layout_gravity="top"
android:id="#+id/SearchText"
android:textColorLink="#color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/normatext"
android:inputType="text"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="55dp"
android:layout_weight="0"
android:layout_height="match_parent"
android:background="#drawable/my_button_bg"
android:text="news"
android:id="#+id/newsbtn"
android:layout_marginLeft="8dp"
android:layout_marginRight="6dp"
android:paddingBottom="5dp"
/>
</LinearLayout>
I think the problem is maybe in your topmost LinearLayout view.
Try removing those lines:
android:layout_marginTop="0dp"
android:paddingTop="6dp"
android:paddingBottom="5dp"
android:layout_margin="3dp"
and add those lines instead to make sure there are no padding and margin at all:
android:padding="0dp"
android:layout_margin="0dp"
If it did solve the problem, you can go ahead and read more about padding and margin here.
If not, I would suspect that your TextInputLayout gets confused because of the inner EditText asking it to be both top and center. remove the "center" part (e.g. remove this - android:layout_centerInParent="true" from your EditText) and check if it solves your issue :)
Never had this problem before but i would make sure explicitly that there is no padding in the parent and no margin in the child. i.e.:
<android.support.design.widget.TextInputLayout
...
android:padding="0dp"
>
<EditText
...
android:layout_margin="0dp"
/>
</android.support.design.widget.TextInputLayout>
Can You remove the background tag of EditText and reply me if it works or not ?
Also provide your full layout file for exact solution.
I created icons and buttons for my app and put them in my Android Studio project.
In the Emulator it looks like this:
But on my phone it looks like this:
What can I do or how can I scale the icons for every resolution perfectly?
Thanks for every answer.
Layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="1052dp"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_x="-321dp"
android:layout_y="137dp"
android:background="#drawable/barline"/>
<ImageButton
android:layout_width="150dp"
android:layout_height="90dp"
android:id="#+id/imageButton"
android:layout_x="-10dp"
android:layout_y="478dp"
android:background="#drawable/bewertung"
android:contentDescription="" />
<ImageButton
android:layout_width="150dp"
android:layout_height="90dp"
android:id="#+id/imageButton2"
android:layout_x="270dp"
android:layout_y="477dp"
android:background="#drawable/bekanntheit"
android:contentDescription="" />
<ImageButton
android:layout_width="150dp"
android:layout_height="90dp"
android:id="#+id/imageButton3"
android:layout_x="172dp"
android:layout_y="477dp"
android:background="#drawable/crew"
android:contentDescription="" />
<ImageButton
android:layout_width="150dp"
android:layout_height="90dp"
android:id="#+id/imageButton4"
android:layout_x="85dp"
android:layout_y="477dp"
android:background="#drawable/einkaufswagen"
android:contentDescription="" />
Use a LinearLayout with orientation set to horizontal, then define layout_weight for each view you have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:gravity="center"
android:background="#drawable/barline">
<ImageButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:id="#+id/imageButton"
android:background="#drawable/bewertung"
android:contentDescription="" />
<ImageButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:id="#+id/imageButton2"
android:background="#drawable/bekanntheit"
android:contentDescription="" />
<ImageButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:id="#+id/imageButton3"
android:background="#drawable/crew"
android:contentDescription="" />
<ImageButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:id="#+id/imageButton4"
android:background="#drawable/einkaufswagen"
android:contentDescription="" />
</LinearLayout>
Im trying to make a layout for a survey question, it works fine on my device but the margin between the radio button text decreases on a better screen resolution device.
I have tried creating different DIMENS it works but I'm not sure how to scale the margin based on different sizes.
Kindly suggests what screen size values-swXXX folder I need to create and what should be the scaling factor of the DIMEN I have defined.
Thanks
enter code here
<?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" >
<TextView
android:id="#+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="How often do you use it?"
android:textSize="15sp" />
<RadioGroup
android:id="#+id/rg_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_1"
android:layout_below="#+id/tv_1" >
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="15dp"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
<RadioButton
android:id="#+id/rb_daily"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_once"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Daily" />
<RadioButton
android:id="#+id/rb_weekly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_daily"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Weekly" />
<RadioButton
android:id="#+id/rb_monthly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_weekly"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Monthly" />
</RadioGroup>
<ImageView
android:id="#+id/fb_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:src="#drawable/facebook_share" />
<ImageView
android:id="#+id/history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginLeft="10dp"
android:src="#drawable/history" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginRight="10dp"
android:src="#drawable/info" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/fb_share"
android:layout_below="#+id/rg_1"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/red_btn"
android:fontFamily="Roboto-Italic"
android:text="SAVE"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
You need to create values-swXXXX folders wrt devices you are targetting for. i.e If you are targetting for a tablet with minimum width of 600, then you need to create values-sw600 and so on.
In layout file, change declaration of RadioButton as below:
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
And maintain dimen.xml specific to each targeted dimension under values-swXXXX with dimension keys having same name but values corresponding to respective dimension. Ex:
values/
<dimen name="left_margin">5dp</dimen>
<dimen name="left_margin">10dp</dimen>
values-sw600/
<dimen name="left_margin">20dp</dimen>
<dimen name="left_margin">40dp</dimen>
I have a grid layout with 6 columns.
For the top row i've given it colspan of 6. and for second row I've given each textView a colspan of 2.
I hoped this would make everything proportional. However, it looks like this:
But I want it to look something like this:
How can I make my three columns in second row propotional to the screen space such that first is on left, second is in center, and third is on right?
What I have so far is this:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="6"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/rounded">
<TextView
android:layout_gravity="center_horizontal"
android:text="Some Text"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="30dp"
android:textAlignment="center"
android:layout_columnSpan="6"
android:paddingTop="10dp"
android:paddingBottom="10dp"
/>
<TextView
android:text="96"
android:textStyle="bold"
android:paddingRight="70dp"
android:textColor="#000000"
android:textSize="18dp"
android:layout_columnSpan="2"
android:paddingLeft="10dp"
android:paddingBottom="5dp"/>
<TextView
android:text="107"
android:textStyle="bold"
android:paddingRight="70dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#000000"/>
<TextView
android:text="62"
android:textStyle="bold"
android:layout_columnSpan="2"
android:textSize="18dp"
android:paddingRight="10dp"
android:textColor="#000000"/>
<TextView
android:text="Text 1"
android:paddingRight="20dp"
android:paddingLeft="10dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#ff565656"
android:paddingBottom="10dp"/>
<TextView
android:text="Text 2"
android:paddingRight="70dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#ff565656"/>
<TextView
android:text="Text 3"
android:textColor="#ff565656"
android:layout_columnSpan="2"
android:textSize="18dp"
android:paddingRight="10dp"/>
</GridLayout>
I've manage to get something similar to what you posted. I am using a View hack though to get that subtle divider.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/element_bg"
android:columnCount="3"
android:orientation="horizontal"
android:rowCount="4" >
<!-- Row 1 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="3"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="Some Text"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="30sp"
android:textStyle="bold" />
<!-- Row 2 -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_columnSpan="3"
android:background="#android:color/darker_gray" />
<!-- Row 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- Column 1 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="107"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tweets"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<!-- Column 2 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="96"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Following"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<!-- Column 3 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="56"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<!-- Row 4 -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_columnSpan="3"
android:background="#android:color/darker_gray" />
</GridLayout>
element_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:radius="4dp" />
</shape>
Alternatively, you can try normal borders (easier to handle):
border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:radius="4dp"/>
<stroke android:width="1dip" android:color="#android:color/darker_gray"/>
</shape>
dimens.xml. You can adjust the padding value as you like.
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="row_padding">15dp</dimen>
</resources>
For this last one, you might get elements to overlap their border, try some margin in those cases.
On a side note, you might want to use TableLayout as GridLayout can only be used from API 14+ and you cannot get this "space excess" to work with it unless you use a LinearLayout like I did to hack into weight property.
"In general, it is not therefore possible to configure a GridLayout to distribute excess space between multiple components. [...] For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group." -http://developer.android.com/reference/android/widget/GridLayout.html
Tables - http://developer.android.com/guide/topics/ui/layout/grid.html
One option that would certainly work would be to put each TextView inside a LinearLayout that has an attribute android:layout_weight="1" and that would automatically assign equal space to each LinearLayout (and hence each corresponding TextView).
Although, I cannot say for certain, the other option would be to directly add the attribute android:layout_weight="1" to each TextView - I think it should work but I haven't used this before. I'd be interested to see if this works as well.