Android: adding text on compound drawable image in textview - java

I am working on a text view which shows the number of selected items (from a multiple choice list) with the number having a circle around it. I thought to add the circle by using the setCompoundDrawablesWithIntrinsicBounds (as I don't want to have 2 separate text views to achieve the desired look), but my question is if it's possible to somehow apply some text (in this case the number) over the circle image or if not, what would be the best solution for the label I have in mind?
I need to implement something looking like this:
What is your advice? Thanks for the help in advance!

You can use LinearLayout for that instead of single TextView implement click of LinearLayout.
For XMl use this:-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/line">
<TextView
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_bg"/>
<TextView
android:id="#+id/txtDropDown"
android:layout_width="0dp"
android:weight="1"
android:layout_height="wrap_content"
android:drawable_right="#drawable/arrow_down"/>
</LinearLayout>

Related

Android: Scale background image of RadioButton or another way to make a RadioButton an Image

I'm making an app that is related to a card game and as such has many images of cards appear throughout the app. In one section I need the user to select one of four cards, with only one selection ever being possible and I want to have the card to change color slightly after being clicked to show that it is the currently selected one.
For the bulk of this task a RadioGroup with RadioButtons makes perfect sense since the functionality for having a checked/unchecked state and unselecting all other options when a new one is picked is built in; however, the issue is that I want the buttons to be the cards themselves and therefore an image with no text whatsoever.
At first this post looked promising: Adding custom radio buttons in android
My use of this strategy:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_weight="5"
android:orientation="horizontal">
<TextView
android:id="#+id/label_seatGod"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:gravity="center_vertical"
android:text="#string/ex2"
android:textColor="#color/font_condition_labels"
android:textSize="#dimen/font_gen_label_size"
android:textStyle="bold" />
<RadioGroup
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8" >
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#drawable/power_aphrodite"
android:checked="false"
android:text="#null" />
</RadioGroup>
</LinearLayout>
which resulted in:
This is almost perfect. No text and the entire region of the clickable button space is composed of the image I want, EXCEPT that as you can see the image is not scaled at all and is cropped on the edges. Above the RadioButton you can see a LinearLayout with 4 ImageButtons that demonstrate exactly how I want the RadioButton/card image to appear (ignore the grey for now I haven't finished padding the views).
Essentially, I want a RadioButton that functions normally but looks exactly like one of the four ImageButtons in the top section. Ideally scaleType="fitCenter" would be the fix since it is what I am using in the example ImageButtons, but you cannot apply that attribute to the button drawable of a RadioButton or its background directly.
So how can I get the image to scale and not be cropped without resorting to some performance tanking layout jurry rigging or creating an entirely new RadioButton class?
Thanks in advance.
Maybe you could try adding this to your RadioButton in the xml:
android:scaleType="centerCrop"

How can I add two button (one is back, one is next) under scrollview that filled with textview and imageview in a screen, android?

I want to ask, can I add next and back button under scrollview that filled with textview and imageview in one screen, both with it's xml, java and screenshot result for android?
Here's the picture I intend to ask.
I got from here: https://sensortower.com/android/nl/softartstudio/app/selfishop-camera/com.selfishop.camera/
enter image description here
Where actually, what I really aim is a view like a blog (when you see an image on your above text that can be scrolled, where it's end with Back button that will go to previous page on the bottom left, and Next button that will go to the next page at the reverse side).
Really would like an example in xml, java, and it's screenshot result.
Again, thank you very much
Very appreciate your answer. Thank you
This is what XML is for.
Create your layout in xml and import it via java.
You will want to create your own "bar layout" for the bars in the center, though you could I suppose, fill 3 separate LinearLayouts to achieve the same effect, making a separate layout and putting in it here will be easier for you to read, and follow along with what is happening.
Below is a mock up of the xml layout you would be using to get a view very similar to what you have in your picture. I have not tested this, this was made on the fly so it may not be perfect but it will get you very close to what you are looking for.
<LinearLayout>
android:orientation="vertical"
android:weightSum=10
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout>
android:weight=1
android:layout_height=0dp
android:layout_width="match_parent">
<TextView>
android:width="wrap_content"
android:id="#+id/info_bar"
android:centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout>
android:weight=8
android:width="match_parent"
android:height=0dp>
<TextView>
android:id="#+id/text_view1"
android:width="match_parent"
android:height="wrap_content"/>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
</LinearLayout>
<RelativeLayout>
android:weight=1
android:layout_width="match_parent"
android:layout_height=0dp>
<Button>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/back_button"
android:text="#string/back_button_hint"/>
<TextView>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/steps_textview"
android:text="#string/steps_hint"
android:centerHorizontal="true"/>
<Button>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/next_button"
android:text="#string/next_button_hint"/>
</RelativeLayout>
</LinearLayout>

Simple Android Grid Layout

I'm trying to do something relatively simple but really struggling.
I want to do something like this:
Explanation:
I want to create a block of fixed height (say 100dp) that is separated into three cells (that are separated by the green dashed lines shown in the picture above). The cells should also be of fixed size
The text in each block would be updated at runtime, and I want an arbitrary number of these blocks
Thanks a lot in advance.
I would suggest that you use a cardview embedded in a recyclerview. then you can set the number of such blocks in run time.
If you wanted to fix the number of blocks, then you can use Relative Layout.
Sample Relative Layout can be :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/container"
android:orientation="vertical">
<TextView
android:id="#+id/largetxt1"
android:layout_width="300dp"
android:layout_height="50dp"
android:text="TEXT"/>
<TextView
android:id="#+id/smalltxt1"
android:layout_width="300dp"
android:layout_height="20dp"
android:text="MORE SMALLER TEXT"
android:layout_below="largetxt1"/>
<Button
android:id="#+id/button1"
android:text="CLICK"
android:layout_toEndOf="#id/largetxt1"
adnroid:layout_width="60dp"
android:layout_height="70dp"
/>
.
.
.
.
..
</RelativeLayout>
This is the sample for the first set of boxes. You can set use the same and repeat it for the number of sets you wanted. Make sure to place layout of views correctly
you can use weightSum and layout_weight attribute xml file

Two TextViews clashing in Android

I am trying to make two TextViews that will be on the same row. The first one should be left aligned and the second one right aligned, when one of them becomes to big the first one (the left aligned should go on new row). I was able to make the first one to go on new line when the second TextView (the right aligned one) became too big but the problem is that it doesn't display the whole information from it. So anyone has any ideas. I'd like it to be with RelativeLayout but any help would be appreciated.
You should play with android:layout_weight to acheive this , this is how it should be :
<LinearLayout .....
android:orientation="horizontal" >
<TextView android:id="#+id/txtView1"
android:layout_height="wrap_content"
android:gravity="left"
android:text="TextView Left"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView android:id="#+id/txtView2"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_width="0dp"
android:text="TextView Right"
android:layout_weight="1" />
</LinearLayout>
You should try putting the two textviews into a linearlayout, set the layout_weight="1" on both textviews and their layout_width="0".
give weight = 1 for both text views....
if it does't work....change relative layout to linear layout or table row and give weight to 1 for both text view
Put your TextViews in LinearLayout and set layout_weight=1. it will solve your problem.

How to Align ListView Text to Right in Android?

I have a list view in an Android application used to display an ArrayList containing Strings and I can't find any properties of the ListView that would allow me to align the text of the ListView Items to the right of it instead of the left. Any help would be great, thanks.
The answer depends on how exactly do you build the list. If you use the the standard ArrayAdapter then you could use the constructor:
ArrayAdapter<String>(Context, R.layout.aligned_right, values);
where R.layout.aligned_right is a xml layout like this:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:paddingLeft="6dip"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="right"/>
This is because these parameters are not defined in the ListView, but in the ListAdapter instead. When you specify an adapter for the list, you should set it to return such a layout which aligns items on the right.
Add the below to the layout
android:layoutDirection="rtl"
This should suffice
android:layout_gravity="right"
For Expandable list view we create two row XMLs namely
One is group_row.xml and Other is child_row.xml.
make group_row.xml as
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/row_group_name"
android:layout_width="wrap_content"
android:textSize="24sp"
android:layout_alignParentRight="true"
android:textAllCaps="true"
android:layout_height="wrap_content" />
That is, a Text view aligned to parentRight inside a Relative Layout (which is match parent).
After 2 hours of struggling, I achieved this a moment ago.
image after
Pay attention to one small thing.
If you use listitem inside the listview, the gravity attribute of the listitem might not work if the listview layout:width is not set to match_parent.

Categories