Develop Reference

Editing SystemUI Layout XMLs

I'm trying to modify my SystemUI so that the cellular signal status more resembles AOSP. I've replaced the necessary images, but now the layout isn't right.
Right now, it looks like this:
On AOSP, it looks like this:
The goal is to have the E icon and the data arrows actually overlap with the signal bar triangle.
I found the proper XML (/res/layout/mobile_signal_group.xml) in the SystemUI APK. This is the original:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="#id/mobile_slot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingStart="#dimen/signal_cluster_padding"
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:systemui="http://schemas.android.com/apk/res-auto">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#id/slot_no_sims" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="#string/accessibility_no_sims" />
<LinearLayout android:orientation="horizontal" android:id="#id/data_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#id/data_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/data_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
<FrameLayout android:id="#id/mobile_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#id/mobile_sim_icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.android.systemui.statusbar.AnimatedImageView android:theme="#style/DualToneLightTheme" android:id="#id/mobile_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" systemui:hasOverlappingRendering="false" />
<com.android.systemui.statusbar.AnimatedImageView android:theme="#style/DualToneDarkTheme" android:id="#id/mobile_signal_dark" android:layout_width="wrap_content" android:layout_height="wrap_content" android:alpha="0.0" systemui:hasOverlappingRendering="false" />
<ImageView android:id="#id/mobile_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="end|bottom|center" android:id="#id/mobile_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout android:id="#id/mobile_combo_2stage" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:layout_gravity="bottom|center" android:id="#id/data_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/data_rat_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/voice_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/voice_rat_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
</FrameLayout>
I modified it by taking #id/data_type and #id/data_inout and moving them to be right below #id/mobile_sim_icon:
<FrameLayout android:id="#id/mobile_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#id/mobile_sim_icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/data_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#id/data_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.android.systemui.statusbar.AnimatedImageView android:theme="#style/DualToneLightTheme" android:id="#id/mobile_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" systemui:hasOverlappingRendering="false" />
<com.android.systemui.statusbar.AnimatedImageView android:theme="#style/DualToneDarkTheme" android:id="#id/mobile_signal_dark" android:layout_width="wrap_content" android:layout_height="wrap_content" android:alpha="0.0" systemui:hasOverlappingRendering="false" />
<ImageView android:id="#id/mobile_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="end|bottom|center" android:id="#id/mobile_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
(Abridged code snippet)
But when I do this and flash with the modified XML, SystemUI goes into a crash-start loop. It seems like any change I make to the XML causes this. I'm rather new to this, so maybe I'm missing a step.
So far I've tried:
Moving data-type, data-inout into the other FrameLayout
Moving the whole LinearLayout into the FrameLayout
Wrapping the data_combo LinearLayout around the mobile_combo FrameLayout
All result in SystemUI getting stuck in the crash loop.
Is there anything else I can try?
Device:
LG V20 T-Mobile (H918)
Android 7.0

As discussed in the chat, the SystemUI is crashing due to a NullPointerException when you move #id/data_type and #id/data_inout outside of #id/data_combo. This is because findViewbyId() is being called against R.id.data_combo, and so is looking for a direct descendant of #id/data_combo.
As you don't have access to the Java sources, one workaround is to wrap #id/data_combo around #id/mobile_combo so that #id/data_type and #id/data_inout remain direct descendants of #id/data_combo. For example:
<LinearLayout android:id="#id/data_combo" ... >
<FrameLayout android:id="#id/mobile_combo" ... >
...
</FrameLayout>
</LinearLayout>

Layout used on different resolution devices

I wrote this login layout that fit perfectly on my device. My problem is that on another device will not be displayed correct because specified values are used for top, left margins.
What I need to do to be sure that constrains will be keeped on any device?
P.S. I have images for mdpi, hdpi etc.
The code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.NoActionBar"
tools:context="com.abc.abc.Login"
android:layout_gravity="center_horizontal">
<RelativeLayout android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="710dp"
android:gravity="center_horizontal">
<RelativeLayout android:id="#+id/login_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView android:id="#+id/login_button"
android:src="#drawable/login"
android:layout_marginTop="588dp"
android:layout_width="360dp"
android:layout_height="53dp" />
<ImageView android:id="#+id/email_and_password"
android:src="#drawable/email_and_password"
android:layout_marginTop="465dp"
android:layout_width="362dp"
android:layout_height="107dp" />
<ImageView android:id="#+id/separator"
android:src="#drawable/separator"
android:layout_marginStart="169dp"
android:layout_marginTop="412dp"
android:layout_width="25dp"
android:layout_height="12dp" />
<ImageView android:id="#+id/facebook_button"
android:src="#drawable/facebook"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/google_button"
android:src="#drawable/google"
android:layout_marginStart="196dp"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/dont_have_an_account"
android:src="#drawable/dont_have_an_account"
android:layout_marginStart="54dp"
android:layout_marginTop="665dp"
android:layout_width="255dp"
android:layout_height="19dp" />
<ImageView android:id="#+id/logo"
android:src="#drawable/logo1"
android:layout_marginTop="80dp"
android:layout_width="220dp"
android:layout_height="219dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</RelativeLayout>

Try not to use marginTop on all the views. Instead set the top most view with a marginTop and then all the images below them can be placed by android:layout_below="<imagView id>" and with some marginTop relative to the view above and not the parent.
You can check this answer

Can gridlayout do it?

I'm very weak in GridLayout, normally what I do is I'm using LinearLayout to do my interface but today I wish to try out the Gridlayout.
I'm been studying the Gridlayout for some times, just don't get it, don't understand the logic behind.
I wish to create a simple Gridlayout to store my object as below, can someone show me how to do it?
or may be Gridlayout cant do it???

maybe you can do it this way:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="170dp"
android:layout_height="200dp"
android:id="#+id/imageButton"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="170dp"
android:layout_height="200dp"
android:id="#+id/imageView"
android:layout_below="#+id/imageButton"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="TEXTT"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/imageView"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/imageButton" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView2"
android:layout_below="#+id/imageView"
android:layout_alignParentStart="true" />
</RelativeLayout>
If this is not what you are looking for just say, so I can try help you :)

I suggest you to use RelativeLayout:
<RelativeLayout>
<ImageButton id="#+id/img1"
alignParentTop="true"
alignparentLeft="true" />
<ImageButton layout_below="#id/img1"
alignparentLeft="true" />
<TextView alignParentRight="true"
alignParentTop="true" />
<ImageView alignParentBottom="true" />
</RelativeLayout>
You need to adjust width&height to fit your requirements

How to adjust button size according to screen size in Android Studio

I'm new to android development, and I am making a calculator in android studio. My calculator works fine but there isa problem with its layout I installed it on my tablet and the buttons were very small as I designed them in Android Studio on an emulator, the button size doesn't change, and need help so that the button size increases as the screen size changes.
My calculator design in Android Studio
<?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:background="#ff000000">
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/clear"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="110dp"
android:background="#drawable/clear_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/plus_minus"
android:layout_alignBottom="#+id/clear"
android:layout_toRightOf="#+id/clear"
android:layout_toEndOf="#+id/clear"
android:layout_marginLeft="-11dp"
android:background="#drawable/pm_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/per"
android:layout_alignBottom="#+id/plus_minus"
android:layout_toRightOf="#+id/plus_minus"
android:layout_toEndOf="#+id/plus_minus"
android:layout_marginLeft="-11dp"
android:background="#drawable/per_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/div"
android:layout_alignTop="#+id/per"
android:layout_toRightOf="#+id/per"
android:layout_toEndOf="#+id/per"
android:layout_marginLeft="-11dp"
android:background="#drawable/div_btn"
android:layout_alignParentRight="false" />
<TextView
android:layout_width="fill_parent"
android:layout_height="70dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/disp"
android:layout_above="#+id/plus_minus"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#android:color/white"
android:textSize="32sp"
android:inputType="none"
android:textStyle="normal"
android:gravity="right" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/seven"
android:layout_below="#+id/clear"
android:layout_toLeftOf="#+id/plus_minus"
android:layout_toStartOf="#+id/plus_minus"
android:layout_marginTop="-10dp"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:background="#drawable/seven_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/eight"
android:layout_alignTop="#+id/seven"
android:layout_alignLeft="#+id/plus_minus"
android:layout_alignStart="#+id/plus_minus"
android:background="#drawable/eight_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/nine"
android:layout_alignBottom="#+id/seven"
android:layout_alignLeft="#+id/per"
android:layout_alignStart="#+id/per"
android:background="#drawable/nine_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/mul"
android:layout_alignTop="#+id/nine"
android:layout_alignLeft="#+id/div"
android:layout_alignStart="#+id/div"
android:background="#drawable/mul_btn" />
<Button
android:layout_width="103dp"
android:layout_height="90dp"
android:id="#+id/four"
android:layout_below="#+id/seven"
android:layout_alignRight="#+id/seven"
android:layout_alignEnd="#+id/seven"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="#drawable/four_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/five"
android:layout_alignBottom="#+id/four"
android:layout_alignLeft="#+id/eight"
android:layout_alignStart="#+id/eight"
android:background="#drawable/five_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/six"
android:layout_alignTop="#+id/five"
android:layout_alignLeft="#+id/nine"
android:layout_alignStart="#+id/nine"
android:background="#drawable/six_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/sub"
android:layout_toEndOf="#+id/nine"
android:layout_alignTop="#+id/six"
android:layout_alignLeft="#+id/mul"
android:layout_alignStart="#+id/mul"
android:background="#drawable/min_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/one"
android:layout_below="#+id/four"
android:layout_alignLeft="#+id/four"
android:layout_alignStart="#+id/four"
android:layout_marginTop="-10dp"
android:layout_alignParentLeft="false"
android:background="#drawable/one_btn" />
<Button
android:layout_width="203dp"
android:layout_height="90dp"
android:id="#+id/zero"
android:layout_below="#+id/one"
android:layout_alignLeft="#+id/one"
android:layout_alignStart="#+id/one"
android:layout_marginTop="-10dp"
android:background="#drawable/zero_btn"
android:layout_alignParentLeft="true"
android:layout_marginLeft="-7dp" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/two"
android:layout_above="#+id/zero"
android:layout_alignLeft="#+id/five"
android:layout_alignStart="#+id/five"
android:background="#drawable/two_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/three"
android:layout_below="#+id/five"
android:layout_alignLeft="#+id/six"
android:layout_alignStart="#+id/six"
android:layout_marginTop="-10dp"
android:background="#drawable/three_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/add"
android:layout_toEndOf="#+id/three"
android:layout_below="#+id/six"
android:layout_alignLeft="#+id/sub"
android:layout_alignStart="#+id/sub"
android:layout_marginTop="-10dp"
android:background="#drawable/plus_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/dot"
android:layout_below="#+id/two"
android:layout_alignRight="#+id/three"
android:layout_alignEnd="#+id/three"
android:layout_marginTop="-10dp"
android:background="#drawable/dot_btn" />
<Button
android:layout_width="100dp"
android:layout_height="90dp"
android:id="#+id/equ"
android:layout_toEndOf="#+id/dot"
android:layout_below="#+id/three"
android:layout_alignLeft="#+id/add"
android:layout_alignStart="#+id/add"
android:layout_marginTop="-10dp"
android:background="#drawable/equ_btn" />
</RelativeLayout>

You have to use layout_weight in order to achieve what you want, and that will be used by wrapping each row of buttons inside a LinearLayout and all that LinearLayouts plus the TextView will be wrapped inside one big LinearLayout instead of your RelativeLayout like the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:orientation="vertical"
android:weightSum="6" >
<TextView
android:id="#+id/disp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:inputType="none"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="normal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/clear_btn" />
<!-- then the three remaining buttons -->
<LinearLayout />
<!-- then the four remaining rows -->
<!-- in the last row the "0" button will have layout_weight="2" NOT "1" -->
</LinearLayout>
</LinearLayout>
UPDATE:
use ImageButtons instead of Buttons for better scalability, and this is how you must use it:
<ImageButton
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/clear_btn"
android:scaleType="fitCenter" />
<!-- and so for all Buttons -->
Note here we changed:
1- layout_height : from wrap_content to match_parent .
2- background : removing the drawable(clear_btn) and making it transparent.
and we added:
1- src : assigning to it the drawable(clear_btn).
2- scaleType : making it fitCenter to make it scales in all the available area without ruining the Image scalability ratio.
P.S: in case you are want the Button to take all the area weather it is scalable or not, change scaleType from fitCenter to fitXY (may be you will need that for the "0" Button).

If you want to support multiple screens never drag and drop and resize views manually.
You can check both the android:layout_weight attribute and LinearLayout

Solution 1:
please use dimens.xml for specifying with and height for buttons.
for tablet,please create folder values-sw600dp,values-sw720dp and put your dimens.xml inside.
Solution 2:
Use linearlayout and layout_weight property.

While setting the height/width of a button in android, using fixed density pixel values will result in exact sizes on all screens. Using width values as wrap_content, fill_parent, weights etc. will make the button look according to the screen densities.
Try going through this link once:- Best Practices for User Interface

<android.support.v7.widget.RecyclerView
android:id="#+id/sampleRecyclerView"
android:scrollbars="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/sampleButton"
android:width="0dp"
android:height="50dp">
</Button>
</android.support.v7.widget.RecyclerView>
I think the point here is <Button> </Button> inside a Linear Layout.
android:width="0dp" // This line changes width as of linear layout.
android:height="50dp">

How to move ImageButtons

I am working on an application for Android in Eclipse, but I have some problems with the look of the menu. I have several buttons that people can click and play sounds with them. The problem is that I don't know how to start a new line and go on with more buttons.
I'll post two images. I think the image title will tell you everything.
1st:
2nd:
The 2nd image is made with PhotoShop.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="665dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/aatrox_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/aatrox" />
<ImageButton
android:id="#+id/ahri_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ahri" />
<ImageButton
android:id="#+id/akali_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/akali" />
<ImageButton
android:id="#+id/alistar_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alistar" />
<ImageButton
android:id="#+id/amumu_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/amumu" />
<ImageButton
android:id="#+id/anivia_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/anivia" />
<ImageButton
android:id="#+id/annie_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/annie" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/back_champions"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
android:text="#string/back" />
</LinearLayout>
I tried moving the image buttons with the mouse but no success.

you need grid view. check out sample
grid view sample