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>

Android custom row layout issue

Sorry in advance I need to include a few pictures to make my problem a little easier to understand. I am using a linear layout for my custom rows and it is giving me lots of trouble trying to get the rows to look how I want. Currently it looks like this
Please forgive the quick paint picture I am about to show but it is how I would like the layout to look.
I would like to add the name textbox above the dog picture, and a time stamp textbox above each of the 1 and 2. Whenever I try to add textboxes to display this it really messes with the layout. The textbox above the dog picture always wants to go to the right or left of the dog image and push the image to the middle of the page and the buttons get spread out further. I do not have much experience with this layout I typically do relative layout where I can drag and drop pieces. Any advise or help is greatly appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="150dip"
android:layout_height="150dip"
android:id="#+id/dogimage"
android:clickable="true"
android:layout_alignParentLeft="true"
android:background="#drawable/dogpic"
android:onClick="sendProfile"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num1"
android:background="#drawable/num1"
android:clickable="true"
android:onClick="NumberOne"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num2"
android:background="#drawable/num2"
android:clickable="true"
android:onClick="NumberTwo"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
</LinearLayout>

You need to wrap your imageview/textview combo in a LinearLayout. And you should set the imageButton using src, not background. Do it like this:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/dogimage"
android:layout_width="150dip"
android:layout_height="150dip"
android:clickable="true"
android:onClick="sendProfile"
android:scaleType="fitXY"
android:src="#drawable/dogpic" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num1"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num1" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num2"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num2" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Modify Floating Action Button Default Green Border

I have a voice to text dictation application that acts as a microphone utility for a web hosted EMR platform.
We have multiple screens on this app, and one of the screens we have reserved to display only the spoken text.
In the interest of space for the text, I've decided to implement Floating Action Button and use that as a clickable microphone that will start our voice to text engine.
My question is, has anyone else had issues with a default greenish border being placed around a drawable used as the FAB src and how did you manage to modify it or get rid of it completely?
You will see my fab at the top center of the image, with the tiny little microphone being squished by that teal border.
My apologies, not enough reputation to post images, here's a link:
Screenshot on Imgur
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
android:background="#000000"
android:gravity="bottom"
android:id="#+id/lyt_main">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:src="#drawable/btn_recording_0"
app:borderWidth="0dp"
android:adjustViewBounds="true"
android.support.design:fabSize="normal"
app:rippleColor="#android:color/black"
app:pressedTranslationZ="55dp"
app:elevation="36dp"
/>
<com.applicadiamobile.dictation.adapter.CustomViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="false" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:layout_gravity="top"
android:background="#drawable/drag_bar_gradient"
android:clickable="true"
android:paddingBottom="9dp"
android:paddingTop="9dp"
android:textColor="#FFF" >
</android.support.v4.view.PagerTitleStrip>
</com.applicadiamobile.dictation.adapter.CustomViewPager>
<LinearLayout
android:id="#+id/button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="55dp"
android:gravity="top"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left_button_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/undo"
style="#style/btnStyleUndo"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/undo" />
<Button
android:id="#+id/new_doc"
style="#style/btnStyleNewDoc"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/text" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_button_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
style="#style/btnStyleSend"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/btn_send" />
<Button
android:id="#+id/settings_button"
style="#style/btnStyleSettings"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>

Use a vertical line in a ListView item

I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.
I understand this is an issue because I see alot of questions on here, but don't see any real answer.
The XML is pretty standard:
Cell:
<?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="#color/appWhite" >
<View android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:id="#+id/cell_trip_info_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/vertical_bar" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_name"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_country"
android:layout_below="#+id/cell_trip_name"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/whole_container"
android:layout_alignParentRight="true" >
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:id="#+id/cell_trip_date_box"
android:layout_alignTop="#+id/update_buttons"
android:layout_alignBottom="#+id/update_buttons"
android:padding="20dp" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_date_thru"
android:text="#string/thru"
android:layout_below="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripend_date"
android:layout_below="#+id/cell_date_thru"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/update_buttons"
android:visibility="gone"
android:layout_toRightOf="#+id/cell_trip_date_box"
android:background="#e9e9e9"
android:padding="20dp" >
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_edit_trip"
android:src="#drawable/slide_edit"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_delete_trip"
android:src="#drawable/slide_delete"
android:layout_toRightOf="#+id/cell_button_edit_trip"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>

I found the cause and the obvious solution/workaround on another post Here
Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.
It worked fine this time, easily allowing me to create my vertical rule.

In your cell_trip_info_container RelativeLayout you have
android:layout_toRightOf="#+id/vertical_bar"
You dont have a View named vertical_bar
Add that ID to your vertical bar view and you should be good to go
<View
android:id="#+id/vertical_bar"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />

change
RelativeLayout
to
VerticalLayout

How to create a Relative layout with multiple buttons compatible for all screen sizes?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lyt_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/plain_bg"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lyt_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
</LinearLayout>
<LinearLayout
android:id="#+id/lyt_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/lyt_Buttons"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imgfrontlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgcenterlogo"
android:layout_alignParentTop="true"
android:layout_marginTop="61dp"
android:background="#drawable/front_logo"
/>
<ImageView
android:id="#+id/imgcenterlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnPersonaltrainer"
android:layout_centerHorizontal="true"
android:layout_marginBottom="29dp"
android:background="#drawable/center_logo" />
<Button
android:id="#+id/btnMyProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:background="#drawable/myprofile" />
<Button
android:id="#+id/btnTaracker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgcenterlogo"
android:layout_alignParentRight="true"
android:layout_marginBottom="49dp"
android:background="#drawable/track" />
<Button
android:id="#+id/btnPersonaltrainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnMyProfile"
android:layout_alignLeft="#+id/btnAllExercises"
android:background="#drawable/personaltrainer" />
<Button
android:id="#+id/btnRandomworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnPersonaltrainer"
android:layout_alignParentLeft="true"
android:background="#drawable/randomworkout" />
<Button
android:id="#+id/btnAllworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnAllExercises"
android:layout_alignBottom="#+id/btnAllExercises"
android:layout_alignLeft="#+id/btnMyProfile"
android:background="#drawable/allworkouts" />
<Button
android:id="#+id/btnAllExercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnTaracker"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:background="#drawable/allexercises" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>`
I need to create layout compatible for all screen sizes,created separte layout for xlarge sizes(800x1280,720x1280 etc). Here I cant upload image due to reputation,need to place one main button on center of the layout ,place 3 buttons on curvely on left and right side of middle button.please can anyone help me to create the layout compatible for all screen sizes without using dp or fixed points.

you can use android:layout_weight attribute. It will allow you to use percentages to define your buttons.
For EX:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:text="left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
<Button
android:text="right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
</LinearLayout>
Now you have given percentages values to buttons so they will be displayed on any size of screen to their percent value of the whole screen.
This can be done in LinearLayout for RelativeLayout check second answer on this link

As mentioned in the question you want the buttons to be placed curvely at left and right of a center button, you can have a look at the link to get some idea to how to accomplish this: https://github.com/daCapricorn/ArcMenu
This is an open source project which I referred to create a Path like menu.