Adjusting content to layout frame - android-layout

I just started learning how to develop apps for android. I have a seamingly easy question but I couldn't find an answer to it.
I'm trying to do the opposite of what wrap-content does (in the context of an image button).
I want my content to adjust to the frame of the button, whereas wrap-content matches the frame to the content.
Is there a way to do that? It sounds easy enough but I couldn't figure out how. Thanks in advance!
EDIT : I think I've expressed myself poorly, sorry.
What I really want is to be able to resize the frame of my image button, with its content adjusting by itself to the frame, instead of having the button crop around a static picture.

Use match_parent
From Android documentation:
Match Parent: Sets the dimension to match that of the parent element. Added in API Level 8 to deprecate fill_parent.
Example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

Related

How to make Horizontal Scrollable Text View with Automated Scrolling?

I am a just a beginner to Android Studio and have started as a hobby, and to learn it's basics I have tried to make a simple calculator in Android Studio(Kotlin).
The problem is that if the answer is to long to be diplayed in the text view box it cuts out...So to solve this problem I made the text view Horizontally Scrollable using "Horizontal Scroll View" in the xml File,
But now the problem is when the user types the text after the view is full, it does not automatically scroll to the last digit he has typed, rather he/she has to manually scroll it to the end. Here is the code for the text box which displays the result:
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<TextView
android:id="#+id/tvExpression"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#1C1C1C"
android:textColor="#FFFFFF"
android:textSize="27dp"
</HorizontalScrollView>`
Could you please tell a way so that each time a new value is added to the box, it automatically scrolls to the right most part of the box, so that the users can see his/her last inputted value?
Please Help me!
Thanks,
Shaurya
Preferably delete a tag of HorizontalScrollView Because this makes textview More flexible to contain the result of the calculator.
You can also select the max line of the textView by using this attribute:
android:maxLines="select int number"
If you want a way to make the scroll of horizontalScrollView from the end
you can use this code in your activity that contents the horizontalScrollView:
horizontalScrollView.postDelayed(
Runnable {
horizontalScrollView.fullScroll(HorizontalScrollView.FOCUS_RIGHT) },
100L
)

Is there a way to have ListView to be on the right side of the screen?

I am making an app (for homework) that displays the subject's grades and what the teacher has to say about the student as a String, but but I need the ListView to be on the right hand side of the screen (it needs to support a language from right to left, unlike English left to right) and I couldn't find a way to do it
I tried using layout_gravity="right"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".MainActivity"
android:orientation="vertical">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:id="#+id/subjectLW">
</ListView>
</LinearLayout>
I expected the text inside the ListView stick to the right hand side of the screen but instead nothing happens, there is probably a way of making it happen and I don't know how to do it
Update:
Right now I used android:layout_gravity="end" instead of android:layout_gravity="right" to make the text stick to the right side of the ListView, but I would like the ListView itself to be on the right side of the screen, refer to the pictures below, still clueless on how to do it.
Second Update:
Solution was found, instead of using layout_gravity="right" ListView needed textAlignment="center" and then it updates itself to the corresponding type of language, if it is left-right it will stick to the right size, and if it is right-left it will stick to the right side of the screen.
The Screens current state
How I need it to look like (done with the magic of MS Paint)
You need to set layout_gravity="end" in your ListView item view TextView.

Snackbar for Circular Android Wear Designs

The classic Snackbar provided from Android design library works in wear project.
In square display they looks fine, but in round they don't.
The corner of the snackbar are cropped by the circular display.
Does anyone know a workaround?
I don't want to use toast.
see the image:
the code that I use:
Snackbar.make(view, serverMessage, Snackbar.LENGTH_SHORT).show();
Thanks
According to the Android blog, there are several ways you can do this. These are :
Using BoxInsertLayout which is mentioned in the Use a Shape-Aware Layout guide.
The BoxInsetLayout class included in the Wearable UI Library extends FrameLayout and lets you define a single layout that works for both square and round screens. This class applies the required window insets depending on the screen shape and lets you easily align views on the center or near the edges of the screen.
WatchViewStub
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:id="#+id/watch_view_stub"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rectLayout="#layout/rect_activity_main"
app:roundLayout="#layout/round_activity_main"
tools:context="com.android.example.watchviewstub.MainActivity"
tools:deviceIds="wear">

Android layout with vertical tabs - design like hello sms app

Can somebody please help me out in designing vertical tabs like in the given pic(taken from hello sms app)
I'm not asking for a code snippet , so please don't ditch this question as a homework type. What I would want to know is the approach that I should take. Do I have extend the stock TabLayout or an existing tablayout with a few styles and UI customizations? Your pointers to the right resource would be of great help. Thanks
you can achieve this using multipane layout in android. on your right side create the listview fragment and right side implement details screen using fragment. if you wants to slide the left side listview use slidepanelayout.
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slide"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment android:id="#+id/leftpane"
android:name="com.example.package.left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left" />
<fragment android:id="#+id/rightpane"
android:name="com.example.package.right"
android:layout_width="350dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_weight="1"
/>
</android.support.v4.widget.SlidingPaneLayout>
I think this will not be achieved by TabLayout as it only supports Horizontal Orientation.
But you can go with SlidingPanel with NavigationDrawer where you can design DrawerItemLayout as per your requirement and get the exact layout you want.
Please check links #1. & #2.
I think this can reduce your efforts and you can get your task done easily.
No, you dont have to custom any view. You can just
Use RecyclerView for avatars list. If an avatar is selected, just changed background of the selected item to black U shape as in your design.
Use a detail view to display your avatar information.
You cannot use TabLayout here as it would not be appropriate for your purposes. What you could do is to have two layouts - maybe linear (or relative) to basically split the screen into the top part with a layout_weight of maybe 2 and the bottom layout with a layout_weight of 8 (for a 20/80) split.
From here, it's just a matter of designing your layouts. It looks like your top layout holds something like a spinner widget. You could either use this or a list view object. Your bottom layout definitely holds something like a list view. You could implement your own list view widget with some kind of a design in each row or you could have an xml layout file and reference this in your ArrayAdapter. Really, your choices are endless. For the left part of your bottom layout, you could probably use a vertical LinearLayout to hold the images of the people in the conversation.
And also don't forget to hide the ActionBar - if you want that.
what I would do is to split screen in a given ratio into two parts. Insert a list view with an adapter into left hand side and use fragments for the right hand side. But using tables is not a good idea. Using Fragments will make the things way easier. Check this link for an overview. Look at 2.2 and 2.3 sections.
And for the right hand side, inside fragment, you can use another list view with images and text.
You can achieve this by using a NavigationDrawer and a listview inside this navigation drawer.
this listview will be using a seperate xml layout for its row. which will have that image views inside as shown in the screenshot.
This is not a listview, its just a sliding menu. Learn about the sliding menu and you can achieve the design that you want. This will help u. https://github.com/jfeinstein10/SlidingMenu

Android RatingBar - a complete mess

I know this is going to sound ranty, but it just feels like Android's UI components and behaviours are off the wall sometimes.
Consider the following XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RatingBar
android:id="#+id/ratingBar1"
android:style="#android:style/Widget.Holo.Light.RatingBar.Small"
android:progress="3"
android:max="5"
android:numStars = "5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Screenshots of how that would look on different device sizes:
Nexus S rating bar
Tablet rating bar
Small Device rating bar
Even though it's only in the preview tool, I can confirm that's actually how it looks on the devices.
The small device behaviour is maddening. How does a RatingBar that specifies 5 stars only get 3 displayed, why not scale down the stars to fit in the window?
Thinking the wrap_content width was the issue, I switched to layout_width="fill_parent" and that didn't change the look on a small device, but it completely messed up on Tablets (so much for "numStars" of 5):
My question is, is there a way to get proper behaviour for the RatingBar in terms of sizing? You would think the numStars or max would be sufficient but it's completely arbitrary. When the RatingBar is stretched so that it draws more stars, it adds stars and see how with a progress of 3, it draws it according to the number of stars displayed? It doesn't make sense not to adhere to numStars!
If there is no way to get logical performance from the RatingBar, are there any alternatives including 3rd party widgets? If not, I guess I could always draw 5 ImageViews and just rig it to perform accordingly.
(Keep in mind all this behaviour was exhibited with just one RatingBar in the layout - forget trying to size with other widgets/components, or utilizing your own styles. I know it's been done, but why is this the default behavior?)
I felt the same way as you when using the stock RatingBar, so I made my own: SimpleRatingBar.
It features:
Fully working android:layout_width: it can be set to wrap_content, match_parent or abritary dp.
Arbitrary number of stars.
Arbitrary step size.
Size of stars can be controlled exactly or by setting a maximum size.
Customizable colors (border, fill and background of stars).
Customizable size separation between stars.
Customizable border width of stars.
Allows to set OnRatingBarChangeListener
Stars fill can be set to start from left to right or from right to left (RTL language support).
AnimationBuilder integrated in the view to set rating programatically with animation.
Here is a preview of it.
You can find it either in jcenter or in Maven Central. So in your build.gradle file just add to your dependencies:
compile 'com.iarcuschin:simpleratingbar:0.1.+'
I hope it's useful.

Resources