I want go design chip layout like below.
When Text is short enough to fit withing the layout I want to view like this.
When Text is too long to fit in I want it display like this and animate text horizontally.
Is it possible to design a layout that fulfill both about needs.
I have tried solution and i have filed because those layout designs only fulfill one condition.
Solution one
<RelativeLayout
android:id="#+id/relative_store_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:visibility="visible">
<FrameLayout
android:id="#+id/relative_shop_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/relative_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:ellipsize="marquee"
android:text="" />
</FrameLayout>
<FrameLayout
android:id="#+id/relative_layout_delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toEndOf="#id/relative_shop_name_container">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete" />
</FrameLayout>
</RelativeLayout>
Problem with this is when text is too long delete button disappears. this layout on work for short text.
Solution two
<LinearLayout
android:id="#+id/store_name_liner_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:orientation="horizontal"
android:visibility="visible"
>
<LinearLayout
android:id="#+id/liner_shop_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="9">
<TextView
android:id="#+id/liner_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:text="short Text" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete"
/>
</FrameLayout>
</LinearLayout>
Problem with this is when text is short delete button is not going to fit just after text. I can't make that happen by removing weight from both text view container and delete image view container but then I get the same problem in my solution one.
Please give solution to handle this.
You need to make a custom view. That way you can measure the text and resize to fit.
Just add ellipsize="end" to your chip
Just add **ellipsize="end"** to your chip
<com.google.android.material.chip.Chip
<-- android:ellipsize="end" -->
/>
Related
I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:text="Guess Game"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="6dp" />
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point "
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.13"
tools:layout_editor_absoluteY="54dp" />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="Points : 0 "
tools:layout_editor_absoluteY="233dp"
app:layout_constraintHorizontal_bias="0.455" />
<Button
android:id="#+id/buttonL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="146dp" />
<Button
android:id="#+id/buttonR"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="208dp"
app:layout_constraintBaseline_toBaselineOf="#+id/buttonL" />
I want to make it so the two buttons go next to each other and text view game rules under the textviewguessgame. I am trying to make it so they do not go in the left corner all staked up together. Is there a video i could look at too so i don't have to keep asking questions each time?
Everything depends on the layout you are using. Looks like you are using ConstraintLayout but you didn't copy all the xml code. I recommand RelativeLayout, things aren't complicated in RelativeLayout and it is used to make layouts for different screen sizes.
Here's android developers official page tutorial for RelativeLayout.
https://developer.android.com/guide/topics/ui/layout/relative.html
Sometimes you want to use another layout but in your case RelativeLayout will be just fine.
According to your layout specifications, I think linear layout with vertical orientation is the best deal.Try below code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Guess Game"
android:textSize="24sp"/>
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:padding="5dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point " />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Points : 0 "/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/buttonL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
I need to fit 2 TextViews in one line. I tried to use LinearLayout, and now my best approach is to use RelativeLayout.
Here you can see XML for it
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="start"
android:visibility="visible">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_alignParentLeft="true"
android:textColor="#color/black"
android:maxLines="2"
android:textSize="12sp"
android:layout_toLeftOf="#+id/session_duration"
android:text="#string/dummy_text" />
<TextView
android:id="#+id/session_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:maxLines="1"
android:textSize="12sp"
android:layout_alignParentRight="true"
android:text="asdadsd"
android:textColor="#android:color/darker_gray"
/>
</RelativeLayout>
And the result
As you can see it's fit's okay, but second TextView is on the right side, when I want it to be after first TextView.
When I used LinearLayout I faced problem with size of first TextView (if it have to many text in it, second TextView will go off screen). Another approach with LinearLayout gave me similar results to RelativeLayout with same problem (wrong position of second view)
This happens because you are using wrap_content. If textView1 needs the space of the whole screen, then textView2 will get nothing. Instead you can use layout_weight to always give a View his space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:gravity="center"
android:visibility="visible"
android:orientation="horizontal">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="2"
android:text="Super Long String"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/session_duration"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="I will always show"
android:textColor="#android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>
Remove this line from second TextView :
android:layout_alignParentRight="true"
I have a layout with one row:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
</LinearLayout>
In source code I just set different number and visibility (GONE/VISIBLE) of imageview (clicking on different buttons).
as result:
image is not visible (button1 was clicked)
2.image and some long number are vivible (button2 was clicked)
3.image and other little shorter number are visible (button3)
You can compare how it looks like. Text becomes visible but image is on the previous place. Why? Why image is not moved to left.
By the way. When screen is rotated - image becomes visible on correct place.
Try to use weight.. it will align based on screen
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
As Deepchand rightly said, add that Image as a drawable to the TextView directly. This will take care of the Image position and will remove an extra ImageView from the layout.
So to your TextView add this,
<TextView
android:id="#+id/year_on_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/total_sales_info_text_color"
android:drawableRight="your image" //this will add an image to its right
android:drawablePadding="5dp" // you can also add padding as per you need
android:textSize="#dimen/total_sales_page_info_font_size" />
Hope this works the way you want. :)
This will be solved by using Weight.
Here your UI is horizontally so you need to change in your xml file. Like,
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
</LinearLayout>
I want to put in the same row a TextView, and Edittext and a button but I am having the problem that the button is not aligned properly to left and in small screens edittext fills entire with.
Small screen:
Big Screen:
My codification is as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right" >
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</RelativeLayout>
</LinearLayout>
Apply a weight to your EditText so it will take up as much room as it can while letting the other two elements do the normal wrap_content. To do this, remove the relative layout container and then change the EditText width to "0dp" and give it a layout_weight of "1" as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</LinearLayout>
First, many people will tell you that hint is Android's solution for not needing the label. I don't care if you use the label or not but it does save you space, especially on smaller screens. That was just an FYI.
Now, your RelativeLayout that only has a Button appears to be useless...I would remove that. You can use layout_weight so that each View takes up the appropriate amount of space. Make sure to make the layout_width="0dp". So it may look something like
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Go" />
</LinearLayout>
Here I used 2,3,1 for the weights of your TextView, EditText, and Button respectively. You may need to change those to get exactly what you want but that should give you a start.
Layout weigth is ideal for designing layouts that adjust to screen size. However, make sure to set layout_width to 0dp, or it won't work properly.
Use like this:
android:layout_width="0dp"
android:layout_weight="1"
I'm going to assume you mean the button is not properly aligned to the right.
It's because your RelativeLayout's android:width="wrap_content", but it should be android:width="match_parent".
Also, you'd be better off setting your EditText's android:width="0dp" and adding android:weight="1" so that it expands/contracts between screen sizes.